Upload
lycong
View
224
Download
1
Embed Size (px)
Citation preview
SVEUČILIŠTE U ZAGREBU
GEODETSKI FAKULTET
Lovorka Bošković
WebGIS GUSTOĆE STANOVNIŠTVA HRVATSKE
Diplomski rad
Zagreb 2016
2
I Autor
Ime i prezime Lovorka Bošković
Datum i mjesto rođenja 22 lipnja 1992 Zagreb Republika Hrvatska
II Diplomski rad
Naslov WebGIS gustoće stanovništva Hrvatske
Mentor docdrsc Dubravko Gajski
Drugi mentor drsc Mateo Gašparović
Voditelj drsc Mateo Gašparović
III Ocjena i obrana
Datum zadavanja zadatka 03 veljače 2016
Datum obrane 16 rujna 2016
Sastav povjerenstva pred kojim je branjen diplomski rad doc dr sc Dubravko Gajski
drsc Mateo Gašparović
doc dr sc Andrija Krtalić
3
Zahvala
Zahvaljujem se mentoru doc dr sc Dubravku Gajskom i voditelju drsc Mateu Gašparoviću
na pristupačnosti i savjetima prilikom izrade ovog rada
Hvala svim profesorima i asistentima što su me vodili tijekom studija i naučili svemu što znam Hvala i
mojim prijateljima i kolegama što su studiranje učinili lakšim i zabavnijim
Hvala mojoj obitelji na razumijevanju i podršci pruženoj tijekom cijelog studija Uvijek ste me poticali
da u svemu što radim dajem sve od sebe
Hvala i svima ostalima koji su na neki drugi način utjecali na moj život i učinili me osobom kojom
danas jesam
4
WebGIS gustoće stanovništva Hrvatske
Sažetak
Kroz povijest broj stanovnika Hrvatske je varirao Od prvog popisa stanovništva pa do danas
broj stanovnika je uglavnom rastao uz iznimke poratnih godina kada je popisom utvrđen pad broja
stanovništva Danas prosječna gustoća naseljenosti u Hrvatskoj iznosi nešto manje od 80 stkm2 no
prostor Hrvatske nije ravnomjerno naseljen Zbog procesa deruralizacije ta se razlika još više
povećava Osim demografske razlike u odnosu selo-grad uočljive su i razlike među regijama
Hrvatske Cilj je ovog rada izrada webGIS-a gustoće stanovništva Hrvatske i usporedbe gustoće
stanovništva tijekom godina Kao izvor podataka o broju i gustoći stanovništva koristiti će se popisi
stanovništva Državnog zavoda za statistiku Za izradu webGIS-a koristit će se isključivo alati
otvorenog koda
Ključne riječi stanovništvo gustoća migracije webGIS alati otvorenog koda
WebGIS of Croatias population density
Abstract
Population of Croatian has varied throughout the history Since the first census until today the
population has been generally growing with the exception of post-war years when the census showed
population decline Today the average population density in Croatia is slightly less than 80 people per
km2 but the Croatian area is not evenly populated This difference even more increases due process of
deruralisation In addition to demographic differences between village and town there are evident
differences between regions of Croatia The aim of this paper is making WebGIS of Croatias
population density and comparing the density of the population over the years A source of data on the
number and density of the population will be census the Central Bureau of Statistics Exclusively open
source tools will be used to create WebGIS
Key words population density migration web GIS tools open source
5
Sadržaj
1 Uvod 7
11 Korijeni i razvoj webGIS-a 8
12 Koncept webGIS-a 10
2 Popis stanovništva 12
21 Državni zavod za statistiku 13
3 Korištene tehnologije 14
31 Hyper Text Markup Language 14
32 JavaScript 15
33 OGC standardi 16
34 ESRI Shape 17
35 ASPNET 18
4 Korišteni alati 19
41 Apache HTTP Server 19
42 PostgreSQL i PostGIS 20
43 GeoServer 21
44 OpenLayers 22
5 Izrada webGIS aplikacije 23
51 Prikupljanje podataka 23
511 Statističkiatributni podaci 23
512 Geometrijskivektorski podaci 25
52 Priprema i obrada podataka 26
521 Spajanje statističkih i geometrijskih podataka 26
522 Određivanje gustoće stanovništva teritorijalnih jedinica 29
53 Postavljanje PostgreSQL baze podataka i unos podataka 30
54 Postavljanje GeoServera i unos podataka 33
541 Unos podataka u GeoServer 35
542 Stilsko uređivanje slojeva 37
6
55 Priprema za pisanje koda 39
56 Pisanje koda webGIS aplikacije 40
561 Kreiranje osnovne stranice web aplikacije 40
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama 42
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama 52
564 Kreiranje stranice s opisom projekta 58
57 Prikaz konačnog rezultata 59
6 Zaključak 63
7 Literatura 64
7
1 Uvod
Geoinformacije ili geoprostorne informacije digitalna su veza između lokacije ljudi i njihovih
aktivnosti Ove informacije mogu grafički ilustrirati što se događa (gdje kako i zašto) te dati uvid u
prošlost sadašnjost i (vjerojatnu) budućnost (URL 1) Geoinformacijski sustavi (GIS) su tehnologija
koja daje odgovore na pitanja bdquogdjeldquo te pomaže pri donošenju inteligentnih odluka temeljenih na
prostoru i lokaciji
GIS je sustav hardvera softvera podataka ljudi organizacija i institucija organiziranih za
prikupljanje pohranjivanje analizu i širenje informacija o područjima na zemlji (Chrisman 1997)
Ova tehnologija starija je od Interneta i Weba Prvi operacionalni GIS razvijen je 1962 godine za
kanadski Državni ured za šumarstvo i ruralni razvoj Razvio ga je Roger Tomlinson koji se nakon
toga još godinama bavio razvojem GIS-a i promicanjem GIS metodologije zbog čega ga se danas
smatra bdquoocem GIS-aldquo
Najčešća uporaba GIS-a je pri izradi velikog broja karata različitih mjerila tema i kartografskih
znakova no GIS može dati puno više od toga Analitičke funkcije dio su GIS-a zaslužan za
pretvaranje podataka u korisne informacije te su stoga njegov najvažniji dio Uz povezivanje
odvojenih podataka iz geografije snažne funkcije GIS-a mogu otkriti razne skrivene veze uzorke i
trendove koji nisu vidljivi u statističkim tablicama te dati potpuno novu informaciju koja može biti
ključna pri donošenju odluka Na taj način omogućuje se ljudima da razmišljaju prostorno kako bi
riješili svoje probleme
Nakon desetljeća korištenja GIS-a razvijen je velik broj GIS aplikacija koje se koriste u raznim
područjima Unatoč tome smatra se kako GIS i dalje ima velik potencijal koji još nije do kraja
realiziran Prije Web-a pristup GIS-u imao je relativno malen broj GIS stručnjaka Pojavom Web-a
nestaju brojna ograničenja i GIS postaje dostupan široj publici Web je GIS učinio dostupnijim
ljudima u njihovim uredima i domovima te fleksibilnijim pomoću na API-a (engl Application
Programming Interface) baziranog Web-u Osoba koja razvija GIS koristi API kako bi olakšala
integraciju s drugim informacijskim sustavima (Fu 2011)
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2)
8
11 Korijeni i razvoj webGIS-a
Početkom devedesetih godina prošlog stoljeća točnije 1992 godine svoj je razvoj započeo
World Wide Web-a danas najpoznatiji i najkorišteniji dio Interneta nakon čega je otvoreno novo
poglavlje u svijetu računalne tehnologije WebGIS se pojavio 1993 godine a njegov razvoj od tog
trenutka pa sve do danas odvijao se velikom brzinom
Prvim webGIS-om smatra se web kartografski preglednik (engl Web map viewer) kojeg je 1993
godine razvio Palo Alto Research Center (PARC) kao dio korporacije Xerox Web stranica otvorena
unutar web preglednika pružala je mogućnosti zumiranja odabira sloja te promjenu kartografske
projekcije (slika 2) Klikom na link neke od funkcija web preglednik bi poslao HTTP (HyperText
Transfer Protocol) zahtjev web poslužitelju Web poslužitelj bi primio zahtjev proveo određene
operacije na karti generirao novu kartu te ju vratio web pregledniku koji je zahtjev poslao Web
preglednik bi nakon zaprimanja kartu prikazao korisniku Upravo mogućnost otvaranja GIS-a unutar
web preglednika bez da korisnik mora prethodno GIS lokalno instalirati najveća je razlika i prednost
nad tradicionalnim desktop GIS softverima
Nakon što je uočila prednosti ovakvog pristupa GIS zajednica brzo je prihvatila koncept korištenja
GIS funkcija u web preglednicima Shodno tome ubrzo su se pojavile brojne webGIS aplikacije
National Atlas of Canada 1994 godina ndash Canadian National Atlas Information Service
ovim projektom omogućio je korisnicima da u svojim domovima na web stranici
pregledavaju karte za koje su sami mogli izabrat koje slojeve žele da karta prikaže
(primjerice ceste rijeke administrativne granice ekološki značajna područja)
Alexandria Digital Library 1995 godina ndash Sveučilište u Kaliforniji Santa Barbara
stvorilo je alat kojim su korisnici na temelju ključnih riječi i odabranog područja na karti
mogli vrlo lako doći do karata i satelitskih snimaka koji su odgovarali zadanim kriterijima
National Geospatial Data Clearinghouse 1995 godina - US Geological Survey (USGS)
razvio je projekt koji je funkcionirao na istom principu kao Alexandria Digital Library
Oba projekta potiču dijeljenje geoprostornih informacija te su rani primjeri geoportala
TIGER (Topologically Integrated Geographic Encoding and Referencing) Mapping
Service 1995 godina - US Census Bureau objavom ovog kartografskog servisa
omogućio je korisnicima da vrše upite i kreiraju karte s demografskim podacima o
državama okruzima i grafovima nudeći im velik broj informacija dostupnih u državnoj
bazi podataka popisa stanovništva
GRASSLinks 1995 godina ndash Projekt koji je Susan Huse razvila kao dio svoje doktorske
disertacije na Berkeleyu Sveučilište u Kaliforniji GRASS (Geographic Resources
Analysis Support System) u tom je trenutku već postojao kao desktop GIS alat a Huse je
razvila sučelje koje je povezalo web poslužitelja i GRASS Ovo je bio jedan od najranijih
9
pokazatelja da su mogućnosti webGIS-a veće od prikazivanja karta i izvršavanja upita nad
njima
MapQuest 1996 godine - GeoSystems Global Corporation današnji MapQuest objavio je
svoju web kartografsku aplikaciju koja danas za područje Sjedinjenih Američkih Država
ima drugi najveći udio na tržištu online kartiranja odmah iza Google Maps-a Od svog
prvog objavljivana aplikacija je služila korisnicima za pregled karata potragu za lokalnim
tvrtkama pronalazak optimalnih ruta do željene lokacije i planiranje putovanja
Slika 2 Prvi webGIS ndash Web map viewer (URL 3)
PARC-ov kartografski preglednik i ostale webGIS aplikacije iz tog doba bile su ograničenih
funkcionalnosti te nisu istovremeno mogle služiti velik broj korisnika Svejedno prednosti korištenja
Web-a kao medija za prijenos GIS funkcija široj publici nakon ovih projekata bile su neupitne (Fu
2011)
2004 godine održana je prva Web 20 konferencija čime je započela nova era razvoja Web-a Sve do
2011 godine ova konferencija održavala se jednom godišnje u San Franciscu u Kaliforniji Na
konferenciji su se okupljali mnogi od najistaknutijih poduzetnika i mislilaca Web zajednice kako bi
raspravljali o World Wide Webu Cilj im je bio dići kvalitetu Web-a na višu razinu odnosno učiniti ga
10
što interaktivnijim integriranijim i što više korisnim zajednici U nastavku (1) prikazan je izraz kojim
je opisan Web 20
Web 20 = User-generated content + the Web as a platform + a rich user experience (1)
Industrija geoprostornih informacija također pokušava pratiti razvoj Weba slijedeći njihova načela o
osiguravanju bogatog korisničkog iskustva potičući sudjelovanje korisnika te nudeći jednostavne
API-e kako bi korisnik mogao sam kreirati svoju aplikaciju Profesionalne GIS kompanije usvojile su
načela Web-a 20 u svojim webGIS proizvodima kako bi potaknule dijeljenje komunikaciju
interoperabilnost suradnju i integraciju geoprostornih informacija na Webu (Fu 2011)
12 Koncept webGIS-a
U svojim početcima webGIS bio je GIS koji se mogao otvoriti pomoću web preglednika
WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente kao i klijente
web preglednika
WebGIS je bilo koji GIS koji koristi web tehnologiju U užoj definiciji Web GIS je bilo koji GIS koji
koristi web tehnologiju za komuniciranje između komponenti (Fu 2011) Najjednostavnija se forma
webGIS-a sastoji od najmanje jednog poslužitelja (engl server) i jednog korisnika (engl client)
Poslužitelj je uglavnom klasični web poslužitelj a klijent je web preglednik desktop aplikacija ili
mobilna aplikacija Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource
Locator) URL adresa poslužitelja je putanja do tog poslužitelja na webu Oslanjajući se na
specifikacije HTTP-a klijent šalje zahtjev (engl request) poslužitelju Poslužitelj prima zahtjev i
provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3)
Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup
Language) formata XML (Extensible Markup Language) JSON (JavaScript Object Notation) ili
binarna slika
Slika 3 Klijent-poslužitelj arhitektura (Wong 2010)
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
2
I Autor
Ime i prezime Lovorka Bošković
Datum i mjesto rođenja 22 lipnja 1992 Zagreb Republika Hrvatska
II Diplomski rad
Naslov WebGIS gustoće stanovništva Hrvatske
Mentor docdrsc Dubravko Gajski
Drugi mentor drsc Mateo Gašparović
Voditelj drsc Mateo Gašparović
III Ocjena i obrana
Datum zadavanja zadatka 03 veljače 2016
Datum obrane 16 rujna 2016
Sastav povjerenstva pred kojim je branjen diplomski rad doc dr sc Dubravko Gajski
drsc Mateo Gašparović
doc dr sc Andrija Krtalić
3
Zahvala
Zahvaljujem se mentoru doc dr sc Dubravku Gajskom i voditelju drsc Mateu Gašparoviću
na pristupačnosti i savjetima prilikom izrade ovog rada
Hvala svim profesorima i asistentima što su me vodili tijekom studija i naučili svemu što znam Hvala i
mojim prijateljima i kolegama što su studiranje učinili lakšim i zabavnijim
Hvala mojoj obitelji na razumijevanju i podršci pruženoj tijekom cijelog studija Uvijek ste me poticali
da u svemu što radim dajem sve od sebe
Hvala i svima ostalima koji su na neki drugi način utjecali na moj život i učinili me osobom kojom
danas jesam
4
WebGIS gustoće stanovništva Hrvatske
Sažetak
Kroz povijest broj stanovnika Hrvatske je varirao Od prvog popisa stanovništva pa do danas
broj stanovnika je uglavnom rastao uz iznimke poratnih godina kada je popisom utvrđen pad broja
stanovništva Danas prosječna gustoća naseljenosti u Hrvatskoj iznosi nešto manje od 80 stkm2 no
prostor Hrvatske nije ravnomjerno naseljen Zbog procesa deruralizacije ta se razlika još više
povećava Osim demografske razlike u odnosu selo-grad uočljive su i razlike među regijama
Hrvatske Cilj je ovog rada izrada webGIS-a gustoće stanovništva Hrvatske i usporedbe gustoće
stanovništva tijekom godina Kao izvor podataka o broju i gustoći stanovništva koristiti će se popisi
stanovništva Državnog zavoda za statistiku Za izradu webGIS-a koristit će se isključivo alati
otvorenog koda
Ključne riječi stanovništvo gustoća migracije webGIS alati otvorenog koda
WebGIS of Croatias population density
Abstract
Population of Croatian has varied throughout the history Since the first census until today the
population has been generally growing with the exception of post-war years when the census showed
population decline Today the average population density in Croatia is slightly less than 80 people per
km2 but the Croatian area is not evenly populated This difference even more increases due process of
deruralisation In addition to demographic differences between village and town there are evident
differences between regions of Croatia The aim of this paper is making WebGIS of Croatias
population density and comparing the density of the population over the years A source of data on the
number and density of the population will be census the Central Bureau of Statistics Exclusively open
source tools will be used to create WebGIS
Key words population density migration web GIS tools open source
5
Sadržaj
1 Uvod 7
11 Korijeni i razvoj webGIS-a 8
12 Koncept webGIS-a 10
2 Popis stanovništva 12
21 Državni zavod za statistiku 13
3 Korištene tehnologije 14
31 Hyper Text Markup Language 14
32 JavaScript 15
33 OGC standardi 16
34 ESRI Shape 17
35 ASPNET 18
4 Korišteni alati 19
41 Apache HTTP Server 19
42 PostgreSQL i PostGIS 20
43 GeoServer 21
44 OpenLayers 22
5 Izrada webGIS aplikacije 23
51 Prikupljanje podataka 23
511 Statističkiatributni podaci 23
512 Geometrijskivektorski podaci 25
52 Priprema i obrada podataka 26
521 Spajanje statističkih i geometrijskih podataka 26
522 Određivanje gustoće stanovništva teritorijalnih jedinica 29
53 Postavljanje PostgreSQL baze podataka i unos podataka 30
54 Postavljanje GeoServera i unos podataka 33
541 Unos podataka u GeoServer 35
542 Stilsko uređivanje slojeva 37
6
55 Priprema za pisanje koda 39
56 Pisanje koda webGIS aplikacije 40
561 Kreiranje osnovne stranice web aplikacije 40
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama 42
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama 52
564 Kreiranje stranice s opisom projekta 58
57 Prikaz konačnog rezultata 59
6 Zaključak 63
7 Literatura 64
7
1 Uvod
Geoinformacije ili geoprostorne informacije digitalna su veza između lokacije ljudi i njihovih
aktivnosti Ove informacije mogu grafički ilustrirati što se događa (gdje kako i zašto) te dati uvid u
prošlost sadašnjost i (vjerojatnu) budućnost (URL 1) Geoinformacijski sustavi (GIS) su tehnologija
koja daje odgovore na pitanja bdquogdjeldquo te pomaže pri donošenju inteligentnih odluka temeljenih na
prostoru i lokaciji
GIS je sustav hardvera softvera podataka ljudi organizacija i institucija organiziranih za
prikupljanje pohranjivanje analizu i širenje informacija o područjima na zemlji (Chrisman 1997)
Ova tehnologija starija je od Interneta i Weba Prvi operacionalni GIS razvijen je 1962 godine za
kanadski Državni ured za šumarstvo i ruralni razvoj Razvio ga je Roger Tomlinson koji se nakon
toga još godinama bavio razvojem GIS-a i promicanjem GIS metodologije zbog čega ga se danas
smatra bdquoocem GIS-aldquo
Najčešća uporaba GIS-a je pri izradi velikog broja karata različitih mjerila tema i kartografskih
znakova no GIS može dati puno više od toga Analitičke funkcije dio su GIS-a zaslužan za
pretvaranje podataka u korisne informacije te su stoga njegov najvažniji dio Uz povezivanje
odvojenih podataka iz geografije snažne funkcije GIS-a mogu otkriti razne skrivene veze uzorke i
trendove koji nisu vidljivi u statističkim tablicama te dati potpuno novu informaciju koja može biti
ključna pri donošenju odluka Na taj način omogućuje se ljudima da razmišljaju prostorno kako bi
riješili svoje probleme
Nakon desetljeća korištenja GIS-a razvijen je velik broj GIS aplikacija koje se koriste u raznim
područjima Unatoč tome smatra se kako GIS i dalje ima velik potencijal koji još nije do kraja
realiziran Prije Web-a pristup GIS-u imao je relativno malen broj GIS stručnjaka Pojavom Web-a
nestaju brojna ograničenja i GIS postaje dostupan široj publici Web je GIS učinio dostupnijim
ljudima u njihovim uredima i domovima te fleksibilnijim pomoću na API-a (engl Application
Programming Interface) baziranog Web-u Osoba koja razvija GIS koristi API kako bi olakšala
integraciju s drugim informacijskim sustavima (Fu 2011)
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2)
8
11 Korijeni i razvoj webGIS-a
Početkom devedesetih godina prošlog stoljeća točnije 1992 godine svoj je razvoj započeo
World Wide Web-a danas najpoznatiji i najkorišteniji dio Interneta nakon čega je otvoreno novo
poglavlje u svijetu računalne tehnologije WebGIS se pojavio 1993 godine a njegov razvoj od tog
trenutka pa sve do danas odvijao se velikom brzinom
Prvim webGIS-om smatra se web kartografski preglednik (engl Web map viewer) kojeg je 1993
godine razvio Palo Alto Research Center (PARC) kao dio korporacije Xerox Web stranica otvorena
unutar web preglednika pružala je mogućnosti zumiranja odabira sloja te promjenu kartografske
projekcije (slika 2) Klikom na link neke od funkcija web preglednik bi poslao HTTP (HyperText
Transfer Protocol) zahtjev web poslužitelju Web poslužitelj bi primio zahtjev proveo određene
operacije na karti generirao novu kartu te ju vratio web pregledniku koji je zahtjev poslao Web
preglednik bi nakon zaprimanja kartu prikazao korisniku Upravo mogućnost otvaranja GIS-a unutar
web preglednika bez da korisnik mora prethodno GIS lokalno instalirati najveća je razlika i prednost
nad tradicionalnim desktop GIS softverima
Nakon što je uočila prednosti ovakvog pristupa GIS zajednica brzo je prihvatila koncept korištenja
GIS funkcija u web preglednicima Shodno tome ubrzo su se pojavile brojne webGIS aplikacije
National Atlas of Canada 1994 godina ndash Canadian National Atlas Information Service
ovim projektom omogućio je korisnicima da u svojim domovima na web stranici
pregledavaju karte za koje su sami mogli izabrat koje slojeve žele da karta prikaže
(primjerice ceste rijeke administrativne granice ekološki značajna područja)
Alexandria Digital Library 1995 godina ndash Sveučilište u Kaliforniji Santa Barbara
stvorilo je alat kojim su korisnici na temelju ključnih riječi i odabranog područja na karti
mogli vrlo lako doći do karata i satelitskih snimaka koji su odgovarali zadanim kriterijima
National Geospatial Data Clearinghouse 1995 godina - US Geological Survey (USGS)
razvio je projekt koji je funkcionirao na istom principu kao Alexandria Digital Library
Oba projekta potiču dijeljenje geoprostornih informacija te su rani primjeri geoportala
TIGER (Topologically Integrated Geographic Encoding and Referencing) Mapping
Service 1995 godina - US Census Bureau objavom ovog kartografskog servisa
omogućio je korisnicima da vrše upite i kreiraju karte s demografskim podacima o
državama okruzima i grafovima nudeći im velik broj informacija dostupnih u državnoj
bazi podataka popisa stanovništva
GRASSLinks 1995 godina ndash Projekt koji je Susan Huse razvila kao dio svoje doktorske
disertacije na Berkeleyu Sveučilište u Kaliforniji GRASS (Geographic Resources
Analysis Support System) u tom je trenutku već postojao kao desktop GIS alat a Huse je
razvila sučelje koje je povezalo web poslužitelja i GRASS Ovo je bio jedan od najranijih
9
pokazatelja da su mogućnosti webGIS-a veće od prikazivanja karta i izvršavanja upita nad
njima
MapQuest 1996 godine - GeoSystems Global Corporation današnji MapQuest objavio je
svoju web kartografsku aplikaciju koja danas za područje Sjedinjenih Američkih Država
ima drugi najveći udio na tržištu online kartiranja odmah iza Google Maps-a Od svog
prvog objavljivana aplikacija je služila korisnicima za pregled karata potragu za lokalnim
tvrtkama pronalazak optimalnih ruta do željene lokacije i planiranje putovanja
Slika 2 Prvi webGIS ndash Web map viewer (URL 3)
PARC-ov kartografski preglednik i ostale webGIS aplikacije iz tog doba bile su ograničenih
funkcionalnosti te nisu istovremeno mogle služiti velik broj korisnika Svejedno prednosti korištenja
Web-a kao medija za prijenos GIS funkcija široj publici nakon ovih projekata bile su neupitne (Fu
2011)
2004 godine održana je prva Web 20 konferencija čime je započela nova era razvoja Web-a Sve do
2011 godine ova konferencija održavala se jednom godišnje u San Franciscu u Kaliforniji Na
konferenciji su se okupljali mnogi od najistaknutijih poduzetnika i mislilaca Web zajednice kako bi
raspravljali o World Wide Webu Cilj im je bio dići kvalitetu Web-a na višu razinu odnosno učiniti ga
10
što interaktivnijim integriranijim i što više korisnim zajednici U nastavku (1) prikazan je izraz kojim
je opisan Web 20
Web 20 = User-generated content + the Web as a platform + a rich user experience (1)
Industrija geoprostornih informacija također pokušava pratiti razvoj Weba slijedeći njihova načela o
osiguravanju bogatog korisničkog iskustva potičući sudjelovanje korisnika te nudeći jednostavne
API-e kako bi korisnik mogao sam kreirati svoju aplikaciju Profesionalne GIS kompanije usvojile su
načela Web-a 20 u svojim webGIS proizvodima kako bi potaknule dijeljenje komunikaciju
interoperabilnost suradnju i integraciju geoprostornih informacija na Webu (Fu 2011)
12 Koncept webGIS-a
U svojim početcima webGIS bio je GIS koji se mogao otvoriti pomoću web preglednika
WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente kao i klijente
web preglednika
WebGIS je bilo koji GIS koji koristi web tehnologiju U užoj definiciji Web GIS je bilo koji GIS koji
koristi web tehnologiju za komuniciranje između komponenti (Fu 2011) Najjednostavnija se forma
webGIS-a sastoji od najmanje jednog poslužitelja (engl server) i jednog korisnika (engl client)
Poslužitelj je uglavnom klasični web poslužitelj a klijent je web preglednik desktop aplikacija ili
mobilna aplikacija Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource
Locator) URL adresa poslužitelja je putanja do tog poslužitelja na webu Oslanjajući se na
specifikacije HTTP-a klijent šalje zahtjev (engl request) poslužitelju Poslužitelj prima zahtjev i
provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3)
Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup
Language) formata XML (Extensible Markup Language) JSON (JavaScript Object Notation) ili
binarna slika
Slika 3 Klijent-poslužitelj arhitektura (Wong 2010)
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
3
Zahvala
Zahvaljujem se mentoru doc dr sc Dubravku Gajskom i voditelju drsc Mateu Gašparoviću
na pristupačnosti i savjetima prilikom izrade ovog rada
Hvala svim profesorima i asistentima što su me vodili tijekom studija i naučili svemu što znam Hvala i
mojim prijateljima i kolegama što su studiranje učinili lakšim i zabavnijim
Hvala mojoj obitelji na razumijevanju i podršci pruženoj tijekom cijelog studija Uvijek ste me poticali
da u svemu što radim dajem sve od sebe
Hvala i svima ostalima koji su na neki drugi način utjecali na moj život i učinili me osobom kojom
danas jesam
4
WebGIS gustoće stanovništva Hrvatske
Sažetak
Kroz povijest broj stanovnika Hrvatske je varirao Od prvog popisa stanovništva pa do danas
broj stanovnika je uglavnom rastao uz iznimke poratnih godina kada je popisom utvrđen pad broja
stanovništva Danas prosječna gustoća naseljenosti u Hrvatskoj iznosi nešto manje od 80 stkm2 no
prostor Hrvatske nije ravnomjerno naseljen Zbog procesa deruralizacije ta se razlika još više
povećava Osim demografske razlike u odnosu selo-grad uočljive su i razlike među regijama
Hrvatske Cilj je ovog rada izrada webGIS-a gustoće stanovništva Hrvatske i usporedbe gustoće
stanovništva tijekom godina Kao izvor podataka o broju i gustoći stanovništva koristiti će se popisi
stanovništva Državnog zavoda za statistiku Za izradu webGIS-a koristit će se isključivo alati
otvorenog koda
Ključne riječi stanovništvo gustoća migracije webGIS alati otvorenog koda
WebGIS of Croatias population density
Abstract
Population of Croatian has varied throughout the history Since the first census until today the
population has been generally growing with the exception of post-war years when the census showed
population decline Today the average population density in Croatia is slightly less than 80 people per
km2 but the Croatian area is not evenly populated This difference even more increases due process of
deruralisation In addition to demographic differences between village and town there are evident
differences between regions of Croatia The aim of this paper is making WebGIS of Croatias
population density and comparing the density of the population over the years A source of data on the
number and density of the population will be census the Central Bureau of Statistics Exclusively open
source tools will be used to create WebGIS
Key words population density migration web GIS tools open source
5
Sadržaj
1 Uvod 7
11 Korijeni i razvoj webGIS-a 8
12 Koncept webGIS-a 10
2 Popis stanovništva 12
21 Državni zavod za statistiku 13
3 Korištene tehnologije 14
31 Hyper Text Markup Language 14
32 JavaScript 15
33 OGC standardi 16
34 ESRI Shape 17
35 ASPNET 18
4 Korišteni alati 19
41 Apache HTTP Server 19
42 PostgreSQL i PostGIS 20
43 GeoServer 21
44 OpenLayers 22
5 Izrada webGIS aplikacije 23
51 Prikupljanje podataka 23
511 Statističkiatributni podaci 23
512 Geometrijskivektorski podaci 25
52 Priprema i obrada podataka 26
521 Spajanje statističkih i geometrijskih podataka 26
522 Određivanje gustoće stanovništva teritorijalnih jedinica 29
53 Postavljanje PostgreSQL baze podataka i unos podataka 30
54 Postavljanje GeoServera i unos podataka 33
541 Unos podataka u GeoServer 35
542 Stilsko uređivanje slojeva 37
6
55 Priprema za pisanje koda 39
56 Pisanje koda webGIS aplikacije 40
561 Kreiranje osnovne stranice web aplikacije 40
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama 42
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama 52
564 Kreiranje stranice s opisom projekta 58
57 Prikaz konačnog rezultata 59
6 Zaključak 63
7 Literatura 64
7
1 Uvod
Geoinformacije ili geoprostorne informacije digitalna su veza između lokacije ljudi i njihovih
aktivnosti Ove informacije mogu grafički ilustrirati što se događa (gdje kako i zašto) te dati uvid u
prošlost sadašnjost i (vjerojatnu) budućnost (URL 1) Geoinformacijski sustavi (GIS) su tehnologija
koja daje odgovore na pitanja bdquogdjeldquo te pomaže pri donošenju inteligentnih odluka temeljenih na
prostoru i lokaciji
GIS je sustav hardvera softvera podataka ljudi organizacija i institucija organiziranih za
prikupljanje pohranjivanje analizu i širenje informacija o područjima na zemlji (Chrisman 1997)
Ova tehnologija starija je od Interneta i Weba Prvi operacionalni GIS razvijen je 1962 godine za
kanadski Državni ured za šumarstvo i ruralni razvoj Razvio ga je Roger Tomlinson koji se nakon
toga još godinama bavio razvojem GIS-a i promicanjem GIS metodologije zbog čega ga se danas
smatra bdquoocem GIS-aldquo
Najčešća uporaba GIS-a je pri izradi velikog broja karata različitih mjerila tema i kartografskih
znakova no GIS može dati puno više od toga Analitičke funkcije dio su GIS-a zaslužan za
pretvaranje podataka u korisne informacije te su stoga njegov najvažniji dio Uz povezivanje
odvojenih podataka iz geografije snažne funkcije GIS-a mogu otkriti razne skrivene veze uzorke i
trendove koji nisu vidljivi u statističkim tablicama te dati potpuno novu informaciju koja može biti
ključna pri donošenju odluka Na taj način omogućuje se ljudima da razmišljaju prostorno kako bi
riješili svoje probleme
Nakon desetljeća korištenja GIS-a razvijen je velik broj GIS aplikacija koje se koriste u raznim
područjima Unatoč tome smatra se kako GIS i dalje ima velik potencijal koji još nije do kraja
realiziran Prije Web-a pristup GIS-u imao je relativno malen broj GIS stručnjaka Pojavom Web-a
nestaju brojna ograničenja i GIS postaje dostupan široj publici Web je GIS učinio dostupnijim
ljudima u njihovim uredima i domovima te fleksibilnijim pomoću na API-a (engl Application
Programming Interface) baziranog Web-u Osoba koja razvija GIS koristi API kako bi olakšala
integraciju s drugim informacijskim sustavima (Fu 2011)
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2)
8
11 Korijeni i razvoj webGIS-a
Početkom devedesetih godina prošlog stoljeća točnije 1992 godine svoj je razvoj započeo
World Wide Web-a danas najpoznatiji i najkorišteniji dio Interneta nakon čega je otvoreno novo
poglavlje u svijetu računalne tehnologije WebGIS se pojavio 1993 godine a njegov razvoj od tog
trenutka pa sve do danas odvijao se velikom brzinom
Prvim webGIS-om smatra se web kartografski preglednik (engl Web map viewer) kojeg je 1993
godine razvio Palo Alto Research Center (PARC) kao dio korporacije Xerox Web stranica otvorena
unutar web preglednika pružala je mogućnosti zumiranja odabira sloja te promjenu kartografske
projekcije (slika 2) Klikom na link neke od funkcija web preglednik bi poslao HTTP (HyperText
Transfer Protocol) zahtjev web poslužitelju Web poslužitelj bi primio zahtjev proveo određene
operacije na karti generirao novu kartu te ju vratio web pregledniku koji je zahtjev poslao Web
preglednik bi nakon zaprimanja kartu prikazao korisniku Upravo mogućnost otvaranja GIS-a unutar
web preglednika bez da korisnik mora prethodno GIS lokalno instalirati najveća je razlika i prednost
nad tradicionalnim desktop GIS softverima
Nakon što je uočila prednosti ovakvog pristupa GIS zajednica brzo je prihvatila koncept korištenja
GIS funkcija u web preglednicima Shodno tome ubrzo su se pojavile brojne webGIS aplikacije
National Atlas of Canada 1994 godina ndash Canadian National Atlas Information Service
ovim projektom omogućio je korisnicima da u svojim domovima na web stranici
pregledavaju karte za koje su sami mogli izabrat koje slojeve žele da karta prikaže
(primjerice ceste rijeke administrativne granice ekološki značajna područja)
Alexandria Digital Library 1995 godina ndash Sveučilište u Kaliforniji Santa Barbara
stvorilo je alat kojim su korisnici na temelju ključnih riječi i odabranog područja na karti
mogli vrlo lako doći do karata i satelitskih snimaka koji su odgovarali zadanim kriterijima
National Geospatial Data Clearinghouse 1995 godina - US Geological Survey (USGS)
razvio je projekt koji je funkcionirao na istom principu kao Alexandria Digital Library
Oba projekta potiču dijeljenje geoprostornih informacija te su rani primjeri geoportala
TIGER (Topologically Integrated Geographic Encoding and Referencing) Mapping
Service 1995 godina - US Census Bureau objavom ovog kartografskog servisa
omogućio je korisnicima da vrše upite i kreiraju karte s demografskim podacima o
državama okruzima i grafovima nudeći im velik broj informacija dostupnih u državnoj
bazi podataka popisa stanovništva
GRASSLinks 1995 godina ndash Projekt koji je Susan Huse razvila kao dio svoje doktorske
disertacije na Berkeleyu Sveučilište u Kaliforniji GRASS (Geographic Resources
Analysis Support System) u tom je trenutku već postojao kao desktop GIS alat a Huse je
razvila sučelje koje je povezalo web poslužitelja i GRASS Ovo je bio jedan od najranijih
9
pokazatelja da su mogućnosti webGIS-a veće od prikazivanja karta i izvršavanja upita nad
njima
MapQuest 1996 godine - GeoSystems Global Corporation današnji MapQuest objavio je
svoju web kartografsku aplikaciju koja danas za područje Sjedinjenih Američkih Država
ima drugi najveći udio na tržištu online kartiranja odmah iza Google Maps-a Od svog
prvog objavljivana aplikacija je služila korisnicima za pregled karata potragu za lokalnim
tvrtkama pronalazak optimalnih ruta do željene lokacije i planiranje putovanja
Slika 2 Prvi webGIS ndash Web map viewer (URL 3)
PARC-ov kartografski preglednik i ostale webGIS aplikacije iz tog doba bile su ograničenih
funkcionalnosti te nisu istovremeno mogle služiti velik broj korisnika Svejedno prednosti korištenja
Web-a kao medija za prijenos GIS funkcija široj publici nakon ovih projekata bile su neupitne (Fu
2011)
2004 godine održana je prva Web 20 konferencija čime je započela nova era razvoja Web-a Sve do
2011 godine ova konferencija održavala se jednom godišnje u San Franciscu u Kaliforniji Na
konferenciji su se okupljali mnogi od najistaknutijih poduzetnika i mislilaca Web zajednice kako bi
raspravljali o World Wide Webu Cilj im je bio dići kvalitetu Web-a na višu razinu odnosno učiniti ga
10
što interaktivnijim integriranijim i što više korisnim zajednici U nastavku (1) prikazan je izraz kojim
je opisan Web 20
Web 20 = User-generated content + the Web as a platform + a rich user experience (1)
Industrija geoprostornih informacija također pokušava pratiti razvoj Weba slijedeći njihova načela o
osiguravanju bogatog korisničkog iskustva potičući sudjelovanje korisnika te nudeći jednostavne
API-e kako bi korisnik mogao sam kreirati svoju aplikaciju Profesionalne GIS kompanije usvojile su
načela Web-a 20 u svojim webGIS proizvodima kako bi potaknule dijeljenje komunikaciju
interoperabilnost suradnju i integraciju geoprostornih informacija na Webu (Fu 2011)
12 Koncept webGIS-a
U svojim početcima webGIS bio je GIS koji se mogao otvoriti pomoću web preglednika
WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente kao i klijente
web preglednika
WebGIS je bilo koji GIS koji koristi web tehnologiju U užoj definiciji Web GIS je bilo koji GIS koji
koristi web tehnologiju za komuniciranje između komponenti (Fu 2011) Najjednostavnija se forma
webGIS-a sastoji od najmanje jednog poslužitelja (engl server) i jednog korisnika (engl client)
Poslužitelj je uglavnom klasični web poslužitelj a klijent je web preglednik desktop aplikacija ili
mobilna aplikacija Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource
Locator) URL adresa poslužitelja je putanja do tog poslužitelja na webu Oslanjajući se na
specifikacije HTTP-a klijent šalje zahtjev (engl request) poslužitelju Poslužitelj prima zahtjev i
provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3)
Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup
Language) formata XML (Extensible Markup Language) JSON (JavaScript Object Notation) ili
binarna slika
Slika 3 Klijent-poslužitelj arhitektura (Wong 2010)
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
4
WebGIS gustoće stanovništva Hrvatske
Sažetak
Kroz povijest broj stanovnika Hrvatske je varirao Od prvog popisa stanovništva pa do danas
broj stanovnika je uglavnom rastao uz iznimke poratnih godina kada je popisom utvrđen pad broja
stanovništva Danas prosječna gustoća naseljenosti u Hrvatskoj iznosi nešto manje od 80 stkm2 no
prostor Hrvatske nije ravnomjerno naseljen Zbog procesa deruralizacije ta se razlika još više
povećava Osim demografske razlike u odnosu selo-grad uočljive su i razlike među regijama
Hrvatske Cilj je ovog rada izrada webGIS-a gustoće stanovništva Hrvatske i usporedbe gustoće
stanovništva tijekom godina Kao izvor podataka o broju i gustoći stanovništva koristiti će se popisi
stanovništva Državnog zavoda za statistiku Za izradu webGIS-a koristit će se isključivo alati
otvorenog koda
Ključne riječi stanovništvo gustoća migracije webGIS alati otvorenog koda
WebGIS of Croatias population density
Abstract
Population of Croatian has varied throughout the history Since the first census until today the
population has been generally growing with the exception of post-war years when the census showed
population decline Today the average population density in Croatia is slightly less than 80 people per
km2 but the Croatian area is not evenly populated This difference even more increases due process of
deruralisation In addition to demographic differences between village and town there are evident
differences between regions of Croatia The aim of this paper is making WebGIS of Croatias
population density and comparing the density of the population over the years A source of data on the
number and density of the population will be census the Central Bureau of Statistics Exclusively open
source tools will be used to create WebGIS
Key words population density migration web GIS tools open source
5
Sadržaj
1 Uvod 7
11 Korijeni i razvoj webGIS-a 8
12 Koncept webGIS-a 10
2 Popis stanovništva 12
21 Državni zavod za statistiku 13
3 Korištene tehnologije 14
31 Hyper Text Markup Language 14
32 JavaScript 15
33 OGC standardi 16
34 ESRI Shape 17
35 ASPNET 18
4 Korišteni alati 19
41 Apache HTTP Server 19
42 PostgreSQL i PostGIS 20
43 GeoServer 21
44 OpenLayers 22
5 Izrada webGIS aplikacije 23
51 Prikupljanje podataka 23
511 Statističkiatributni podaci 23
512 Geometrijskivektorski podaci 25
52 Priprema i obrada podataka 26
521 Spajanje statističkih i geometrijskih podataka 26
522 Određivanje gustoće stanovništva teritorijalnih jedinica 29
53 Postavljanje PostgreSQL baze podataka i unos podataka 30
54 Postavljanje GeoServera i unos podataka 33
541 Unos podataka u GeoServer 35
542 Stilsko uređivanje slojeva 37
6
55 Priprema za pisanje koda 39
56 Pisanje koda webGIS aplikacije 40
561 Kreiranje osnovne stranice web aplikacije 40
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama 42
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama 52
564 Kreiranje stranice s opisom projekta 58
57 Prikaz konačnog rezultata 59
6 Zaključak 63
7 Literatura 64
7
1 Uvod
Geoinformacije ili geoprostorne informacije digitalna su veza između lokacije ljudi i njihovih
aktivnosti Ove informacije mogu grafički ilustrirati što se događa (gdje kako i zašto) te dati uvid u
prošlost sadašnjost i (vjerojatnu) budućnost (URL 1) Geoinformacijski sustavi (GIS) su tehnologija
koja daje odgovore na pitanja bdquogdjeldquo te pomaže pri donošenju inteligentnih odluka temeljenih na
prostoru i lokaciji
GIS je sustav hardvera softvera podataka ljudi organizacija i institucija organiziranih za
prikupljanje pohranjivanje analizu i širenje informacija o područjima na zemlji (Chrisman 1997)
Ova tehnologija starija je od Interneta i Weba Prvi operacionalni GIS razvijen je 1962 godine za
kanadski Državni ured za šumarstvo i ruralni razvoj Razvio ga je Roger Tomlinson koji se nakon
toga još godinama bavio razvojem GIS-a i promicanjem GIS metodologije zbog čega ga se danas
smatra bdquoocem GIS-aldquo
Najčešća uporaba GIS-a je pri izradi velikog broja karata različitih mjerila tema i kartografskih
znakova no GIS može dati puno više od toga Analitičke funkcije dio su GIS-a zaslužan za
pretvaranje podataka u korisne informacije te su stoga njegov najvažniji dio Uz povezivanje
odvojenih podataka iz geografije snažne funkcije GIS-a mogu otkriti razne skrivene veze uzorke i
trendove koji nisu vidljivi u statističkim tablicama te dati potpuno novu informaciju koja može biti
ključna pri donošenju odluka Na taj način omogućuje se ljudima da razmišljaju prostorno kako bi
riješili svoje probleme
Nakon desetljeća korištenja GIS-a razvijen je velik broj GIS aplikacija koje se koriste u raznim
područjima Unatoč tome smatra se kako GIS i dalje ima velik potencijal koji još nije do kraja
realiziran Prije Web-a pristup GIS-u imao je relativno malen broj GIS stručnjaka Pojavom Web-a
nestaju brojna ograničenja i GIS postaje dostupan široj publici Web je GIS učinio dostupnijim
ljudima u njihovim uredima i domovima te fleksibilnijim pomoću na API-a (engl Application
Programming Interface) baziranog Web-u Osoba koja razvija GIS koristi API kako bi olakšala
integraciju s drugim informacijskim sustavima (Fu 2011)
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2)
8
11 Korijeni i razvoj webGIS-a
Početkom devedesetih godina prošlog stoljeća točnije 1992 godine svoj je razvoj započeo
World Wide Web-a danas najpoznatiji i najkorišteniji dio Interneta nakon čega je otvoreno novo
poglavlje u svijetu računalne tehnologije WebGIS se pojavio 1993 godine a njegov razvoj od tog
trenutka pa sve do danas odvijao se velikom brzinom
Prvim webGIS-om smatra se web kartografski preglednik (engl Web map viewer) kojeg je 1993
godine razvio Palo Alto Research Center (PARC) kao dio korporacije Xerox Web stranica otvorena
unutar web preglednika pružala je mogućnosti zumiranja odabira sloja te promjenu kartografske
projekcije (slika 2) Klikom na link neke od funkcija web preglednik bi poslao HTTP (HyperText
Transfer Protocol) zahtjev web poslužitelju Web poslužitelj bi primio zahtjev proveo određene
operacije na karti generirao novu kartu te ju vratio web pregledniku koji je zahtjev poslao Web
preglednik bi nakon zaprimanja kartu prikazao korisniku Upravo mogućnost otvaranja GIS-a unutar
web preglednika bez da korisnik mora prethodno GIS lokalno instalirati najveća je razlika i prednost
nad tradicionalnim desktop GIS softverima
Nakon što je uočila prednosti ovakvog pristupa GIS zajednica brzo je prihvatila koncept korištenja
GIS funkcija u web preglednicima Shodno tome ubrzo su se pojavile brojne webGIS aplikacije
National Atlas of Canada 1994 godina ndash Canadian National Atlas Information Service
ovim projektom omogućio je korisnicima da u svojim domovima na web stranici
pregledavaju karte za koje su sami mogli izabrat koje slojeve žele da karta prikaže
(primjerice ceste rijeke administrativne granice ekološki značajna područja)
Alexandria Digital Library 1995 godina ndash Sveučilište u Kaliforniji Santa Barbara
stvorilo je alat kojim su korisnici na temelju ključnih riječi i odabranog područja na karti
mogli vrlo lako doći do karata i satelitskih snimaka koji su odgovarali zadanim kriterijima
National Geospatial Data Clearinghouse 1995 godina - US Geological Survey (USGS)
razvio je projekt koji je funkcionirao na istom principu kao Alexandria Digital Library
Oba projekta potiču dijeljenje geoprostornih informacija te su rani primjeri geoportala
TIGER (Topologically Integrated Geographic Encoding and Referencing) Mapping
Service 1995 godina - US Census Bureau objavom ovog kartografskog servisa
omogućio je korisnicima da vrše upite i kreiraju karte s demografskim podacima o
državama okruzima i grafovima nudeći im velik broj informacija dostupnih u državnoj
bazi podataka popisa stanovništva
GRASSLinks 1995 godina ndash Projekt koji je Susan Huse razvila kao dio svoje doktorske
disertacije na Berkeleyu Sveučilište u Kaliforniji GRASS (Geographic Resources
Analysis Support System) u tom je trenutku već postojao kao desktop GIS alat a Huse je
razvila sučelje koje je povezalo web poslužitelja i GRASS Ovo je bio jedan od najranijih
9
pokazatelja da su mogućnosti webGIS-a veće od prikazivanja karta i izvršavanja upita nad
njima
MapQuest 1996 godine - GeoSystems Global Corporation današnji MapQuest objavio je
svoju web kartografsku aplikaciju koja danas za područje Sjedinjenih Američkih Država
ima drugi najveći udio na tržištu online kartiranja odmah iza Google Maps-a Od svog
prvog objavljivana aplikacija je služila korisnicima za pregled karata potragu za lokalnim
tvrtkama pronalazak optimalnih ruta do željene lokacije i planiranje putovanja
Slika 2 Prvi webGIS ndash Web map viewer (URL 3)
PARC-ov kartografski preglednik i ostale webGIS aplikacije iz tog doba bile su ograničenih
funkcionalnosti te nisu istovremeno mogle služiti velik broj korisnika Svejedno prednosti korištenja
Web-a kao medija za prijenos GIS funkcija široj publici nakon ovih projekata bile su neupitne (Fu
2011)
2004 godine održana je prva Web 20 konferencija čime je započela nova era razvoja Web-a Sve do
2011 godine ova konferencija održavala se jednom godišnje u San Franciscu u Kaliforniji Na
konferenciji su se okupljali mnogi od najistaknutijih poduzetnika i mislilaca Web zajednice kako bi
raspravljali o World Wide Webu Cilj im je bio dići kvalitetu Web-a na višu razinu odnosno učiniti ga
10
što interaktivnijim integriranijim i što više korisnim zajednici U nastavku (1) prikazan je izraz kojim
je opisan Web 20
Web 20 = User-generated content + the Web as a platform + a rich user experience (1)
Industrija geoprostornih informacija također pokušava pratiti razvoj Weba slijedeći njihova načela o
osiguravanju bogatog korisničkog iskustva potičući sudjelovanje korisnika te nudeći jednostavne
API-e kako bi korisnik mogao sam kreirati svoju aplikaciju Profesionalne GIS kompanije usvojile su
načela Web-a 20 u svojim webGIS proizvodima kako bi potaknule dijeljenje komunikaciju
interoperabilnost suradnju i integraciju geoprostornih informacija na Webu (Fu 2011)
12 Koncept webGIS-a
U svojim početcima webGIS bio je GIS koji se mogao otvoriti pomoću web preglednika
WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente kao i klijente
web preglednika
WebGIS je bilo koji GIS koji koristi web tehnologiju U užoj definiciji Web GIS je bilo koji GIS koji
koristi web tehnologiju za komuniciranje između komponenti (Fu 2011) Najjednostavnija se forma
webGIS-a sastoji od najmanje jednog poslužitelja (engl server) i jednog korisnika (engl client)
Poslužitelj je uglavnom klasični web poslužitelj a klijent je web preglednik desktop aplikacija ili
mobilna aplikacija Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource
Locator) URL adresa poslužitelja je putanja do tog poslužitelja na webu Oslanjajući se na
specifikacije HTTP-a klijent šalje zahtjev (engl request) poslužitelju Poslužitelj prima zahtjev i
provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3)
Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup
Language) formata XML (Extensible Markup Language) JSON (JavaScript Object Notation) ili
binarna slika
Slika 3 Klijent-poslužitelj arhitektura (Wong 2010)
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
5
Sadržaj
1 Uvod 7
11 Korijeni i razvoj webGIS-a 8
12 Koncept webGIS-a 10
2 Popis stanovništva 12
21 Državni zavod za statistiku 13
3 Korištene tehnologije 14
31 Hyper Text Markup Language 14
32 JavaScript 15
33 OGC standardi 16
34 ESRI Shape 17
35 ASPNET 18
4 Korišteni alati 19
41 Apache HTTP Server 19
42 PostgreSQL i PostGIS 20
43 GeoServer 21
44 OpenLayers 22
5 Izrada webGIS aplikacije 23
51 Prikupljanje podataka 23
511 Statističkiatributni podaci 23
512 Geometrijskivektorski podaci 25
52 Priprema i obrada podataka 26
521 Spajanje statističkih i geometrijskih podataka 26
522 Određivanje gustoće stanovništva teritorijalnih jedinica 29
53 Postavljanje PostgreSQL baze podataka i unos podataka 30
54 Postavljanje GeoServera i unos podataka 33
541 Unos podataka u GeoServer 35
542 Stilsko uređivanje slojeva 37
6
55 Priprema za pisanje koda 39
56 Pisanje koda webGIS aplikacije 40
561 Kreiranje osnovne stranice web aplikacije 40
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama 42
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama 52
564 Kreiranje stranice s opisom projekta 58
57 Prikaz konačnog rezultata 59
6 Zaključak 63
7 Literatura 64
7
1 Uvod
Geoinformacije ili geoprostorne informacije digitalna su veza između lokacije ljudi i njihovih
aktivnosti Ove informacije mogu grafički ilustrirati što se događa (gdje kako i zašto) te dati uvid u
prošlost sadašnjost i (vjerojatnu) budućnost (URL 1) Geoinformacijski sustavi (GIS) su tehnologija
koja daje odgovore na pitanja bdquogdjeldquo te pomaže pri donošenju inteligentnih odluka temeljenih na
prostoru i lokaciji
GIS je sustav hardvera softvera podataka ljudi organizacija i institucija organiziranih za
prikupljanje pohranjivanje analizu i širenje informacija o područjima na zemlji (Chrisman 1997)
Ova tehnologija starija je od Interneta i Weba Prvi operacionalni GIS razvijen je 1962 godine za
kanadski Državni ured za šumarstvo i ruralni razvoj Razvio ga je Roger Tomlinson koji se nakon
toga još godinama bavio razvojem GIS-a i promicanjem GIS metodologije zbog čega ga se danas
smatra bdquoocem GIS-aldquo
Najčešća uporaba GIS-a je pri izradi velikog broja karata različitih mjerila tema i kartografskih
znakova no GIS može dati puno više od toga Analitičke funkcije dio su GIS-a zaslužan za
pretvaranje podataka u korisne informacije te su stoga njegov najvažniji dio Uz povezivanje
odvojenih podataka iz geografije snažne funkcije GIS-a mogu otkriti razne skrivene veze uzorke i
trendove koji nisu vidljivi u statističkim tablicama te dati potpuno novu informaciju koja može biti
ključna pri donošenju odluka Na taj način omogućuje se ljudima da razmišljaju prostorno kako bi
riješili svoje probleme
Nakon desetljeća korištenja GIS-a razvijen je velik broj GIS aplikacija koje se koriste u raznim
područjima Unatoč tome smatra se kako GIS i dalje ima velik potencijal koji još nije do kraja
realiziran Prije Web-a pristup GIS-u imao je relativno malen broj GIS stručnjaka Pojavom Web-a
nestaju brojna ograničenja i GIS postaje dostupan široj publici Web je GIS učinio dostupnijim
ljudima u njihovim uredima i domovima te fleksibilnijim pomoću na API-a (engl Application
Programming Interface) baziranog Web-u Osoba koja razvija GIS koristi API kako bi olakšala
integraciju s drugim informacijskim sustavima (Fu 2011)
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2)
8
11 Korijeni i razvoj webGIS-a
Početkom devedesetih godina prošlog stoljeća točnije 1992 godine svoj je razvoj započeo
World Wide Web-a danas najpoznatiji i najkorišteniji dio Interneta nakon čega je otvoreno novo
poglavlje u svijetu računalne tehnologije WebGIS se pojavio 1993 godine a njegov razvoj od tog
trenutka pa sve do danas odvijao se velikom brzinom
Prvim webGIS-om smatra se web kartografski preglednik (engl Web map viewer) kojeg je 1993
godine razvio Palo Alto Research Center (PARC) kao dio korporacije Xerox Web stranica otvorena
unutar web preglednika pružala je mogućnosti zumiranja odabira sloja te promjenu kartografske
projekcije (slika 2) Klikom na link neke od funkcija web preglednik bi poslao HTTP (HyperText
Transfer Protocol) zahtjev web poslužitelju Web poslužitelj bi primio zahtjev proveo određene
operacije na karti generirao novu kartu te ju vratio web pregledniku koji je zahtjev poslao Web
preglednik bi nakon zaprimanja kartu prikazao korisniku Upravo mogućnost otvaranja GIS-a unutar
web preglednika bez da korisnik mora prethodno GIS lokalno instalirati najveća je razlika i prednost
nad tradicionalnim desktop GIS softverima
Nakon što je uočila prednosti ovakvog pristupa GIS zajednica brzo je prihvatila koncept korištenja
GIS funkcija u web preglednicima Shodno tome ubrzo su se pojavile brojne webGIS aplikacije
National Atlas of Canada 1994 godina ndash Canadian National Atlas Information Service
ovim projektom omogućio je korisnicima da u svojim domovima na web stranici
pregledavaju karte za koje su sami mogli izabrat koje slojeve žele da karta prikaže
(primjerice ceste rijeke administrativne granice ekološki značajna područja)
Alexandria Digital Library 1995 godina ndash Sveučilište u Kaliforniji Santa Barbara
stvorilo je alat kojim su korisnici na temelju ključnih riječi i odabranog područja na karti
mogli vrlo lako doći do karata i satelitskih snimaka koji su odgovarali zadanim kriterijima
National Geospatial Data Clearinghouse 1995 godina - US Geological Survey (USGS)
razvio je projekt koji je funkcionirao na istom principu kao Alexandria Digital Library
Oba projekta potiču dijeljenje geoprostornih informacija te su rani primjeri geoportala
TIGER (Topologically Integrated Geographic Encoding and Referencing) Mapping
Service 1995 godina - US Census Bureau objavom ovog kartografskog servisa
omogućio je korisnicima da vrše upite i kreiraju karte s demografskim podacima o
državama okruzima i grafovima nudeći im velik broj informacija dostupnih u državnoj
bazi podataka popisa stanovništva
GRASSLinks 1995 godina ndash Projekt koji je Susan Huse razvila kao dio svoje doktorske
disertacije na Berkeleyu Sveučilište u Kaliforniji GRASS (Geographic Resources
Analysis Support System) u tom je trenutku već postojao kao desktop GIS alat a Huse je
razvila sučelje koje je povezalo web poslužitelja i GRASS Ovo je bio jedan od najranijih
9
pokazatelja da su mogućnosti webGIS-a veće od prikazivanja karta i izvršavanja upita nad
njima
MapQuest 1996 godine - GeoSystems Global Corporation današnji MapQuest objavio je
svoju web kartografsku aplikaciju koja danas za područje Sjedinjenih Američkih Država
ima drugi najveći udio na tržištu online kartiranja odmah iza Google Maps-a Od svog
prvog objavljivana aplikacija je služila korisnicima za pregled karata potragu za lokalnim
tvrtkama pronalazak optimalnih ruta do željene lokacije i planiranje putovanja
Slika 2 Prvi webGIS ndash Web map viewer (URL 3)
PARC-ov kartografski preglednik i ostale webGIS aplikacije iz tog doba bile su ograničenih
funkcionalnosti te nisu istovremeno mogle služiti velik broj korisnika Svejedno prednosti korištenja
Web-a kao medija za prijenos GIS funkcija široj publici nakon ovih projekata bile su neupitne (Fu
2011)
2004 godine održana je prva Web 20 konferencija čime je započela nova era razvoja Web-a Sve do
2011 godine ova konferencija održavala se jednom godišnje u San Franciscu u Kaliforniji Na
konferenciji su se okupljali mnogi od najistaknutijih poduzetnika i mislilaca Web zajednice kako bi
raspravljali o World Wide Webu Cilj im je bio dići kvalitetu Web-a na višu razinu odnosno učiniti ga
10
što interaktivnijim integriranijim i što više korisnim zajednici U nastavku (1) prikazan je izraz kojim
je opisan Web 20
Web 20 = User-generated content + the Web as a platform + a rich user experience (1)
Industrija geoprostornih informacija također pokušava pratiti razvoj Weba slijedeći njihova načela o
osiguravanju bogatog korisničkog iskustva potičući sudjelovanje korisnika te nudeći jednostavne
API-e kako bi korisnik mogao sam kreirati svoju aplikaciju Profesionalne GIS kompanije usvojile su
načela Web-a 20 u svojim webGIS proizvodima kako bi potaknule dijeljenje komunikaciju
interoperabilnost suradnju i integraciju geoprostornih informacija na Webu (Fu 2011)
12 Koncept webGIS-a
U svojim početcima webGIS bio je GIS koji se mogao otvoriti pomoću web preglednika
WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente kao i klijente
web preglednika
WebGIS je bilo koji GIS koji koristi web tehnologiju U užoj definiciji Web GIS je bilo koji GIS koji
koristi web tehnologiju za komuniciranje između komponenti (Fu 2011) Najjednostavnija se forma
webGIS-a sastoji od najmanje jednog poslužitelja (engl server) i jednog korisnika (engl client)
Poslužitelj je uglavnom klasični web poslužitelj a klijent je web preglednik desktop aplikacija ili
mobilna aplikacija Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource
Locator) URL adresa poslužitelja je putanja do tog poslužitelja na webu Oslanjajući se na
specifikacije HTTP-a klijent šalje zahtjev (engl request) poslužitelju Poslužitelj prima zahtjev i
provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3)
Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup
Language) formata XML (Extensible Markup Language) JSON (JavaScript Object Notation) ili
binarna slika
Slika 3 Klijent-poslužitelj arhitektura (Wong 2010)
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
6
55 Priprema za pisanje koda 39
56 Pisanje koda webGIS aplikacije 40
561 Kreiranje osnovne stranice web aplikacije 40
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama 42
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama 52
564 Kreiranje stranice s opisom projekta 58
57 Prikaz konačnog rezultata 59
6 Zaključak 63
7 Literatura 64
7
1 Uvod
Geoinformacije ili geoprostorne informacije digitalna su veza između lokacije ljudi i njihovih
aktivnosti Ove informacije mogu grafički ilustrirati što se događa (gdje kako i zašto) te dati uvid u
prošlost sadašnjost i (vjerojatnu) budućnost (URL 1) Geoinformacijski sustavi (GIS) su tehnologija
koja daje odgovore na pitanja bdquogdjeldquo te pomaže pri donošenju inteligentnih odluka temeljenih na
prostoru i lokaciji
GIS je sustav hardvera softvera podataka ljudi organizacija i institucija organiziranih za
prikupljanje pohranjivanje analizu i širenje informacija o područjima na zemlji (Chrisman 1997)
Ova tehnologija starija je od Interneta i Weba Prvi operacionalni GIS razvijen je 1962 godine za
kanadski Državni ured za šumarstvo i ruralni razvoj Razvio ga je Roger Tomlinson koji se nakon
toga još godinama bavio razvojem GIS-a i promicanjem GIS metodologije zbog čega ga se danas
smatra bdquoocem GIS-aldquo
Najčešća uporaba GIS-a je pri izradi velikog broja karata različitih mjerila tema i kartografskih
znakova no GIS može dati puno više od toga Analitičke funkcije dio su GIS-a zaslužan za
pretvaranje podataka u korisne informacije te su stoga njegov najvažniji dio Uz povezivanje
odvojenih podataka iz geografije snažne funkcije GIS-a mogu otkriti razne skrivene veze uzorke i
trendove koji nisu vidljivi u statističkim tablicama te dati potpuno novu informaciju koja može biti
ključna pri donošenju odluka Na taj način omogućuje se ljudima da razmišljaju prostorno kako bi
riješili svoje probleme
Nakon desetljeća korištenja GIS-a razvijen je velik broj GIS aplikacija koje se koriste u raznim
područjima Unatoč tome smatra se kako GIS i dalje ima velik potencijal koji još nije do kraja
realiziran Prije Web-a pristup GIS-u imao je relativno malen broj GIS stručnjaka Pojavom Web-a
nestaju brojna ograničenja i GIS postaje dostupan široj publici Web je GIS učinio dostupnijim
ljudima u njihovim uredima i domovima te fleksibilnijim pomoću na API-a (engl Application
Programming Interface) baziranog Web-u Osoba koja razvija GIS koristi API kako bi olakšala
integraciju s drugim informacijskim sustavima (Fu 2011)
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2)
8
11 Korijeni i razvoj webGIS-a
Početkom devedesetih godina prošlog stoljeća točnije 1992 godine svoj je razvoj započeo
World Wide Web-a danas najpoznatiji i najkorišteniji dio Interneta nakon čega je otvoreno novo
poglavlje u svijetu računalne tehnologije WebGIS se pojavio 1993 godine a njegov razvoj od tog
trenutka pa sve do danas odvijao se velikom brzinom
Prvim webGIS-om smatra se web kartografski preglednik (engl Web map viewer) kojeg je 1993
godine razvio Palo Alto Research Center (PARC) kao dio korporacije Xerox Web stranica otvorena
unutar web preglednika pružala je mogućnosti zumiranja odabira sloja te promjenu kartografske
projekcije (slika 2) Klikom na link neke od funkcija web preglednik bi poslao HTTP (HyperText
Transfer Protocol) zahtjev web poslužitelju Web poslužitelj bi primio zahtjev proveo određene
operacije na karti generirao novu kartu te ju vratio web pregledniku koji je zahtjev poslao Web
preglednik bi nakon zaprimanja kartu prikazao korisniku Upravo mogućnost otvaranja GIS-a unutar
web preglednika bez da korisnik mora prethodno GIS lokalno instalirati najveća je razlika i prednost
nad tradicionalnim desktop GIS softverima
Nakon što je uočila prednosti ovakvog pristupa GIS zajednica brzo je prihvatila koncept korištenja
GIS funkcija u web preglednicima Shodno tome ubrzo su se pojavile brojne webGIS aplikacije
National Atlas of Canada 1994 godina ndash Canadian National Atlas Information Service
ovim projektom omogućio je korisnicima da u svojim domovima na web stranici
pregledavaju karte za koje su sami mogli izabrat koje slojeve žele da karta prikaže
(primjerice ceste rijeke administrativne granice ekološki značajna područja)
Alexandria Digital Library 1995 godina ndash Sveučilište u Kaliforniji Santa Barbara
stvorilo je alat kojim su korisnici na temelju ključnih riječi i odabranog područja na karti
mogli vrlo lako doći do karata i satelitskih snimaka koji su odgovarali zadanim kriterijima
National Geospatial Data Clearinghouse 1995 godina - US Geological Survey (USGS)
razvio je projekt koji je funkcionirao na istom principu kao Alexandria Digital Library
Oba projekta potiču dijeljenje geoprostornih informacija te su rani primjeri geoportala
TIGER (Topologically Integrated Geographic Encoding and Referencing) Mapping
Service 1995 godina - US Census Bureau objavom ovog kartografskog servisa
omogućio je korisnicima da vrše upite i kreiraju karte s demografskim podacima o
državama okruzima i grafovima nudeći im velik broj informacija dostupnih u državnoj
bazi podataka popisa stanovništva
GRASSLinks 1995 godina ndash Projekt koji je Susan Huse razvila kao dio svoje doktorske
disertacije na Berkeleyu Sveučilište u Kaliforniji GRASS (Geographic Resources
Analysis Support System) u tom je trenutku već postojao kao desktop GIS alat a Huse je
razvila sučelje koje je povezalo web poslužitelja i GRASS Ovo je bio jedan od najranijih
9
pokazatelja da su mogućnosti webGIS-a veće od prikazivanja karta i izvršavanja upita nad
njima
MapQuest 1996 godine - GeoSystems Global Corporation današnji MapQuest objavio je
svoju web kartografsku aplikaciju koja danas za područje Sjedinjenih Američkih Država
ima drugi najveći udio na tržištu online kartiranja odmah iza Google Maps-a Od svog
prvog objavljivana aplikacija je služila korisnicima za pregled karata potragu za lokalnim
tvrtkama pronalazak optimalnih ruta do željene lokacije i planiranje putovanja
Slika 2 Prvi webGIS ndash Web map viewer (URL 3)
PARC-ov kartografski preglednik i ostale webGIS aplikacije iz tog doba bile su ograničenih
funkcionalnosti te nisu istovremeno mogle služiti velik broj korisnika Svejedno prednosti korištenja
Web-a kao medija za prijenos GIS funkcija široj publici nakon ovih projekata bile su neupitne (Fu
2011)
2004 godine održana je prva Web 20 konferencija čime je započela nova era razvoja Web-a Sve do
2011 godine ova konferencija održavala se jednom godišnje u San Franciscu u Kaliforniji Na
konferenciji su se okupljali mnogi od najistaknutijih poduzetnika i mislilaca Web zajednice kako bi
raspravljali o World Wide Webu Cilj im je bio dići kvalitetu Web-a na višu razinu odnosno učiniti ga
10
što interaktivnijim integriranijim i što više korisnim zajednici U nastavku (1) prikazan je izraz kojim
je opisan Web 20
Web 20 = User-generated content + the Web as a platform + a rich user experience (1)
Industrija geoprostornih informacija također pokušava pratiti razvoj Weba slijedeći njihova načela o
osiguravanju bogatog korisničkog iskustva potičući sudjelovanje korisnika te nudeći jednostavne
API-e kako bi korisnik mogao sam kreirati svoju aplikaciju Profesionalne GIS kompanije usvojile su
načela Web-a 20 u svojim webGIS proizvodima kako bi potaknule dijeljenje komunikaciju
interoperabilnost suradnju i integraciju geoprostornih informacija na Webu (Fu 2011)
12 Koncept webGIS-a
U svojim početcima webGIS bio je GIS koji se mogao otvoriti pomoću web preglednika
WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente kao i klijente
web preglednika
WebGIS je bilo koji GIS koji koristi web tehnologiju U užoj definiciji Web GIS je bilo koji GIS koji
koristi web tehnologiju za komuniciranje između komponenti (Fu 2011) Najjednostavnija se forma
webGIS-a sastoji od najmanje jednog poslužitelja (engl server) i jednog korisnika (engl client)
Poslužitelj je uglavnom klasični web poslužitelj a klijent je web preglednik desktop aplikacija ili
mobilna aplikacija Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource
Locator) URL adresa poslužitelja je putanja do tog poslužitelja na webu Oslanjajući se na
specifikacije HTTP-a klijent šalje zahtjev (engl request) poslužitelju Poslužitelj prima zahtjev i
provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3)
Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup
Language) formata XML (Extensible Markup Language) JSON (JavaScript Object Notation) ili
binarna slika
Slika 3 Klijent-poslužitelj arhitektura (Wong 2010)
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
7
1 Uvod
Geoinformacije ili geoprostorne informacije digitalna su veza između lokacije ljudi i njihovih
aktivnosti Ove informacije mogu grafički ilustrirati što se događa (gdje kako i zašto) te dati uvid u
prošlost sadašnjost i (vjerojatnu) budućnost (URL 1) Geoinformacijski sustavi (GIS) su tehnologija
koja daje odgovore na pitanja bdquogdjeldquo te pomaže pri donošenju inteligentnih odluka temeljenih na
prostoru i lokaciji
GIS je sustav hardvera softvera podataka ljudi organizacija i institucija organiziranih za
prikupljanje pohranjivanje analizu i širenje informacija o područjima na zemlji (Chrisman 1997)
Ova tehnologija starija je od Interneta i Weba Prvi operacionalni GIS razvijen je 1962 godine za
kanadski Državni ured za šumarstvo i ruralni razvoj Razvio ga je Roger Tomlinson koji se nakon
toga još godinama bavio razvojem GIS-a i promicanjem GIS metodologije zbog čega ga se danas
smatra bdquoocem GIS-aldquo
Najčešća uporaba GIS-a je pri izradi velikog broja karata različitih mjerila tema i kartografskih
znakova no GIS može dati puno više od toga Analitičke funkcije dio su GIS-a zaslužan za
pretvaranje podataka u korisne informacije te su stoga njegov najvažniji dio Uz povezivanje
odvojenih podataka iz geografije snažne funkcije GIS-a mogu otkriti razne skrivene veze uzorke i
trendove koji nisu vidljivi u statističkim tablicama te dati potpuno novu informaciju koja može biti
ključna pri donošenju odluka Na taj način omogućuje se ljudima da razmišljaju prostorno kako bi
riješili svoje probleme
Nakon desetljeća korištenja GIS-a razvijen je velik broj GIS aplikacija koje se koriste u raznim
područjima Unatoč tome smatra se kako GIS i dalje ima velik potencijal koji još nije do kraja
realiziran Prije Web-a pristup GIS-u imao je relativno malen broj GIS stručnjaka Pojavom Web-a
nestaju brojna ograničenja i GIS postaje dostupan široj publici Web je GIS učinio dostupnijim
ljudima u njihovim uredima i domovima te fleksibilnijim pomoću na API-a (engl Application
Programming Interface) baziranog Web-u Osoba koja razvija GIS koristi API kako bi olakšala
integraciju s drugim informacijskim sustavima (Fu 2011)
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2)
8
11 Korijeni i razvoj webGIS-a
Početkom devedesetih godina prošlog stoljeća točnije 1992 godine svoj je razvoj započeo
World Wide Web-a danas najpoznatiji i najkorišteniji dio Interneta nakon čega je otvoreno novo
poglavlje u svijetu računalne tehnologije WebGIS se pojavio 1993 godine a njegov razvoj od tog
trenutka pa sve do danas odvijao se velikom brzinom
Prvim webGIS-om smatra se web kartografski preglednik (engl Web map viewer) kojeg je 1993
godine razvio Palo Alto Research Center (PARC) kao dio korporacije Xerox Web stranica otvorena
unutar web preglednika pružala je mogućnosti zumiranja odabira sloja te promjenu kartografske
projekcije (slika 2) Klikom na link neke od funkcija web preglednik bi poslao HTTP (HyperText
Transfer Protocol) zahtjev web poslužitelju Web poslužitelj bi primio zahtjev proveo određene
operacije na karti generirao novu kartu te ju vratio web pregledniku koji je zahtjev poslao Web
preglednik bi nakon zaprimanja kartu prikazao korisniku Upravo mogućnost otvaranja GIS-a unutar
web preglednika bez da korisnik mora prethodno GIS lokalno instalirati najveća je razlika i prednost
nad tradicionalnim desktop GIS softverima
Nakon što je uočila prednosti ovakvog pristupa GIS zajednica brzo je prihvatila koncept korištenja
GIS funkcija u web preglednicima Shodno tome ubrzo su se pojavile brojne webGIS aplikacije
National Atlas of Canada 1994 godina ndash Canadian National Atlas Information Service
ovim projektom omogućio je korisnicima da u svojim domovima na web stranici
pregledavaju karte za koje su sami mogli izabrat koje slojeve žele da karta prikaže
(primjerice ceste rijeke administrativne granice ekološki značajna područja)
Alexandria Digital Library 1995 godina ndash Sveučilište u Kaliforniji Santa Barbara
stvorilo je alat kojim su korisnici na temelju ključnih riječi i odabranog područja na karti
mogli vrlo lako doći do karata i satelitskih snimaka koji su odgovarali zadanim kriterijima
National Geospatial Data Clearinghouse 1995 godina - US Geological Survey (USGS)
razvio je projekt koji je funkcionirao na istom principu kao Alexandria Digital Library
Oba projekta potiču dijeljenje geoprostornih informacija te su rani primjeri geoportala
TIGER (Topologically Integrated Geographic Encoding and Referencing) Mapping
Service 1995 godina - US Census Bureau objavom ovog kartografskog servisa
omogućio je korisnicima da vrše upite i kreiraju karte s demografskim podacima o
državama okruzima i grafovima nudeći im velik broj informacija dostupnih u državnoj
bazi podataka popisa stanovništva
GRASSLinks 1995 godina ndash Projekt koji je Susan Huse razvila kao dio svoje doktorske
disertacije na Berkeleyu Sveučilište u Kaliforniji GRASS (Geographic Resources
Analysis Support System) u tom je trenutku već postojao kao desktop GIS alat a Huse je
razvila sučelje koje je povezalo web poslužitelja i GRASS Ovo je bio jedan od najranijih
9
pokazatelja da su mogućnosti webGIS-a veće od prikazivanja karta i izvršavanja upita nad
njima
MapQuest 1996 godine - GeoSystems Global Corporation današnji MapQuest objavio je
svoju web kartografsku aplikaciju koja danas za područje Sjedinjenih Američkih Država
ima drugi najveći udio na tržištu online kartiranja odmah iza Google Maps-a Od svog
prvog objavljivana aplikacija je služila korisnicima za pregled karata potragu za lokalnim
tvrtkama pronalazak optimalnih ruta do željene lokacije i planiranje putovanja
Slika 2 Prvi webGIS ndash Web map viewer (URL 3)
PARC-ov kartografski preglednik i ostale webGIS aplikacije iz tog doba bile su ograničenih
funkcionalnosti te nisu istovremeno mogle služiti velik broj korisnika Svejedno prednosti korištenja
Web-a kao medija za prijenos GIS funkcija široj publici nakon ovih projekata bile su neupitne (Fu
2011)
2004 godine održana je prva Web 20 konferencija čime je započela nova era razvoja Web-a Sve do
2011 godine ova konferencija održavala se jednom godišnje u San Franciscu u Kaliforniji Na
konferenciji su se okupljali mnogi od najistaknutijih poduzetnika i mislilaca Web zajednice kako bi
raspravljali o World Wide Webu Cilj im je bio dići kvalitetu Web-a na višu razinu odnosno učiniti ga
10
što interaktivnijim integriranijim i što više korisnim zajednici U nastavku (1) prikazan je izraz kojim
je opisan Web 20
Web 20 = User-generated content + the Web as a platform + a rich user experience (1)
Industrija geoprostornih informacija također pokušava pratiti razvoj Weba slijedeći njihova načela o
osiguravanju bogatog korisničkog iskustva potičući sudjelovanje korisnika te nudeći jednostavne
API-e kako bi korisnik mogao sam kreirati svoju aplikaciju Profesionalne GIS kompanije usvojile su
načela Web-a 20 u svojim webGIS proizvodima kako bi potaknule dijeljenje komunikaciju
interoperabilnost suradnju i integraciju geoprostornih informacija na Webu (Fu 2011)
12 Koncept webGIS-a
U svojim početcima webGIS bio je GIS koji se mogao otvoriti pomoću web preglednika
WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente kao i klijente
web preglednika
WebGIS je bilo koji GIS koji koristi web tehnologiju U užoj definiciji Web GIS je bilo koji GIS koji
koristi web tehnologiju za komuniciranje između komponenti (Fu 2011) Najjednostavnija se forma
webGIS-a sastoji od najmanje jednog poslužitelja (engl server) i jednog korisnika (engl client)
Poslužitelj je uglavnom klasični web poslužitelj a klijent je web preglednik desktop aplikacija ili
mobilna aplikacija Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource
Locator) URL adresa poslužitelja je putanja do tog poslužitelja na webu Oslanjajući se na
specifikacije HTTP-a klijent šalje zahtjev (engl request) poslužitelju Poslužitelj prima zahtjev i
provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3)
Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup
Language) formata XML (Extensible Markup Language) JSON (JavaScript Object Notation) ili
binarna slika
Slika 3 Klijent-poslužitelj arhitektura (Wong 2010)
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
8
11 Korijeni i razvoj webGIS-a
Početkom devedesetih godina prošlog stoljeća točnije 1992 godine svoj je razvoj započeo
World Wide Web-a danas najpoznatiji i najkorišteniji dio Interneta nakon čega je otvoreno novo
poglavlje u svijetu računalne tehnologije WebGIS se pojavio 1993 godine a njegov razvoj od tog
trenutka pa sve do danas odvijao se velikom brzinom
Prvim webGIS-om smatra se web kartografski preglednik (engl Web map viewer) kojeg je 1993
godine razvio Palo Alto Research Center (PARC) kao dio korporacije Xerox Web stranica otvorena
unutar web preglednika pružala je mogućnosti zumiranja odabira sloja te promjenu kartografske
projekcije (slika 2) Klikom na link neke od funkcija web preglednik bi poslao HTTP (HyperText
Transfer Protocol) zahtjev web poslužitelju Web poslužitelj bi primio zahtjev proveo određene
operacije na karti generirao novu kartu te ju vratio web pregledniku koji je zahtjev poslao Web
preglednik bi nakon zaprimanja kartu prikazao korisniku Upravo mogućnost otvaranja GIS-a unutar
web preglednika bez da korisnik mora prethodno GIS lokalno instalirati najveća je razlika i prednost
nad tradicionalnim desktop GIS softverima
Nakon što je uočila prednosti ovakvog pristupa GIS zajednica brzo je prihvatila koncept korištenja
GIS funkcija u web preglednicima Shodno tome ubrzo su se pojavile brojne webGIS aplikacije
National Atlas of Canada 1994 godina ndash Canadian National Atlas Information Service
ovim projektom omogućio je korisnicima da u svojim domovima na web stranici
pregledavaju karte za koje su sami mogli izabrat koje slojeve žele da karta prikaže
(primjerice ceste rijeke administrativne granice ekološki značajna područja)
Alexandria Digital Library 1995 godina ndash Sveučilište u Kaliforniji Santa Barbara
stvorilo je alat kojim su korisnici na temelju ključnih riječi i odabranog područja na karti
mogli vrlo lako doći do karata i satelitskih snimaka koji su odgovarali zadanim kriterijima
National Geospatial Data Clearinghouse 1995 godina - US Geological Survey (USGS)
razvio je projekt koji je funkcionirao na istom principu kao Alexandria Digital Library
Oba projekta potiču dijeljenje geoprostornih informacija te su rani primjeri geoportala
TIGER (Topologically Integrated Geographic Encoding and Referencing) Mapping
Service 1995 godina - US Census Bureau objavom ovog kartografskog servisa
omogućio je korisnicima da vrše upite i kreiraju karte s demografskim podacima o
državama okruzima i grafovima nudeći im velik broj informacija dostupnih u državnoj
bazi podataka popisa stanovništva
GRASSLinks 1995 godina ndash Projekt koji je Susan Huse razvila kao dio svoje doktorske
disertacije na Berkeleyu Sveučilište u Kaliforniji GRASS (Geographic Resources
Analysis Support System) u tom je trenutku već postojao kao desktop GIS alat a Huse je
razvila sučelje koje je povezalo web poslužitelja i GRASS Ovo je bio jedan od najranijih
9
pokazatelja da su mogućnosti webGIS-a veće od prikazivanja karta i izvršavanja upita nad
njima
MapQuest 1996 godine - GeoSystems Global Corporation današnji MapQuest objavio je
svoju web kartografsku aplikaciju koja danas za područje Sjedinjenih Američkih Država
ima drugi najveći udio na tržištu online kartiranja odmah iza Google Maps-a Od svog
prvog objavljivana aplikacija je služila korisnicima za pregled karata potragu za lokalnim
tvrtkama pronalazak optimalnih ruta do željene lokacije i planiranje putovanja
Slika 2 Prvi webGIS ndash Web map viewer (URL 3)
PARC-ov kartografski preglednik i ostale webGIS aplikacije iz tog doba bile su ograničenih
funkcionalnosti te nisu istovremeno mogle služiti velik broj korisnika Svejedno prednosti korištenja
Web-a kao medija za prijenos GIS funkcija široj publici nakon ovih projekata bile su neupitne (Fu
2011)
2004 godine održana je prva Web 20 konferencija čime je započela nova era razvoja Web-a Sve do
2011 godine ova konferencija održavala se jednom godišnje u San Franciscu u Kaliforniji Na
konferenciji su se okupljali mnogi od najistaknutijih poduzetnika i mislilaca Web zajednice kako bi
raspravljali o World Wide Webu Cilj im je bio dići kvalitetu Web-a na višu razinu odnosno učiniti ga
10
što interaktivnijim integriranijim i što više korisnim zajednici U nastavku (1) prikazan je izraz kojim
je opisan Web 20
Web 20 = User-generated content + the Web as a platform + a rich user experience (1)
Industrija geoprostornih informacija također pokušava pratiti razvoj Weba slijedeći njihova načela o
osiguravanju bogatog korisničkog iskustva potičući sudjelovanje korisnika te nudeći jednostavne
API-e kako bi korisnik mogao sam kreirati svoju aplikaciju Profesionalne GIS kompanije usvojile su
načela Web-a 20 u svojim webGIS proizvodima kako bi potaknule dijeljenje komunikaciju
interoperabilnost suradnju i integraciju geoprostornih informacija na Webu (Fu 2011)
12 Koncept webGIS-a
U svojim početcima webGIS bio je GIS koji se mogao otvoriti pomoću web preglednika
WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente kao i klijente
web preglednika
WebGIS je bilo koji GIS koji koristi web tehnologiju U užoj definiciji Web GIS je bilo koji GIS koji
koristi web tehnologiju za komuniciranje između komponenti (Fu 2011) Najjednostavnija se forma
webGIS-a sastoji od najmanje jednog poslužitelja (engl server) i jednog korisnika (engl client)
Poslužitelj je uglavnom klasični web poslužitelj a klijent je web preglednik desktop aplikacija ili
mobilna aplikacija Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource
Locator) URL adresa poslužitelja je putanja do tog poslužitelja na webu Oslanjajući se na
specifikacije HTTP-a klijent šalje zahtjev (engl request) poslužitelju Poslužitelj prima zahtjev i
provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3)
Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup
Language) formata XML (Extensible Markup Language) JSON (JavaScript Object Notation) ili
binarna slika
Slika 3 Klijent-poslužitelj arhitektura (Wong 2010)
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
9
pokazatelja da su mogućnosti webGIS-a veće od prikazivanja karta i izvršavanja upita nad
njima
MapQuest 1996 godine - GeoSystems Global Corporation današnji MapQuest objavio je
svoju web kartografsku aplikaciju koja danas za područje Sjedinjenih Američkih Država
ima drugi najveći udio na tržištu online kartiranja odmah iza Google Maps-a Od svog
prvog objavljivana aplikacija je služila korisnicima za pregled karata potragu za lokalnim
tvrtkama pronalazak optimalnih ruta do željene lokacije i planiranje putovanja
Slika 2 Prvi webGIS ndash Web map viewer (URL 3)
PARC-ov kartografski preglednik i ostale webGIS aplikacije iz tog doba bile su ograničenih
funkcionalnosti te nisu istovremeno mogle služiti velik broj korisnika Svejedno prednosti korištenja
Web-a kao medija za prijenos GIS funkcija široj publici nakon ovih projekata bile su neupitne (Fu
2011)
2004 godine održana je prva Web 20 konferencija čime je započela nova era razvoja Web-a Sve do
2011 godine ova konferencija održavala se jednom godišnje u San Franciscu u Kaliforniji Na
konferenciji su se okupljali mnogi od najistaknutijih poduzetnika i mislilaca Web zajednice kako bi
raspravljali o World Wide Webu Cilj im je bio dići kvalitetu Web-a na višu razinu odnosno učiniti ga
10
što interaktivnijim integriranijim i što više korisnim zajednici U nastavku (1) prikazan je izraz kojim
je opisan Web 20
Web 20 = User-generated content + the Web as a platform + a rich user experience (1)
Industrija geoprostornih informacija također pokušava pratiti razvoj Weba slijedeći njihova načela o
osiguravanju bogatog korisničkog iskustva potičući sudjelovanje korisnika te nudeći jednostavne
API-e kako bi korisnik mogao sam kreirati svoju aplikaciju Profesionalne GIS kompanije usvojile su
načela Web-a 20 u svojim webGIS proizvodima kako bi potaknule dijeljenje komunikaciju
interoperabilnost suradnju i integraciju geoprostornih informacija na Webu (Fu 2011)
12 Koncept webGIS-a
U svojim početcima webGIS bio je GIS koji se mogao otvoriti pomoću web preglednika
WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente kao i klijente
web preglednika
WebGIS je bilo koji GIS koji koristi web tehnologiju U užoj definiciji Web GIS je bilo koji GIS koji
koristi web tehnologiju za komuniciranje između komponenti (Fu 2011) Najjednostavnija se forma
webGIS-a sastoji od najmanje jednog poslužitelja (engl server) i jednog korisnika (engl client)
Poslužitelj je uglavnom klasični web poslužitelj a klijent je web preglednik desktop aplikacija ili
mobilna aplikacija Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource
Locator) URL adresa poslužitelja je putanja do tog poslužitelja na webu Oslanjajući se na
specifikacije HTTP-a klijent šalje zahtjev (engl request) poslužitelju Poslužitelj prima zahtjev i
provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3)
Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup
Language) formata XML (Extensible Markup Language) JSON (JavaScript Object Notation) ili
binarna slika
Slika 3 Klijent-poslužitelj arhitektura (Wong 2010)
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
10
što interaktivnijim integriranijim i što više korisnim zajednici U nastavku (1) prikazan je izraz kojim
je opisan Web 20
Web 20 = User-generated content + the Web as a platform + a rich user experience (1)
Industrija geoprostornih informacija također pokušava pratiti razvoj Weba slijedeći njihova načela o
osiguravanju bogatog korisničkog iskustva potičući sudjelovanje korisnika te nudeći jednostavne
API-e kako bi korisnik mogao sam kreirati svoju aplikaciju Profesionalne GIS kompanije usvojile su
načela Web-a 20 u svojim webGIS proizvodima kako bi potaknule dijeljenje komunikaciju
interoperabilnost suradnju i integraciju geoprostornih informacija na Webu (Fu 2011)
12 Koncept webGIS-a
U svojim početcima webGIS bio je GIS koji se mogao otvoriti pomoću web preglednika
WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente kao i klijente
web preglednika
WebGIS je bilo koji GIS koji koristi web tehnologiju U užoj definiciji Web GIS je bilo koji GIS koji
koristi web tehnologiju za komuniciranje između komponenti (Fu 2011) Najjednostavnija se forma
webGIS-a sastoji od najmanje jednog poslužitelja (engl server) i jednog korisnika (engl client)
Poslužitelj je uglavnom klasični web poslužitelj a klijent je web preglednik desktop aplikacija ili
mobilna aplikacija Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource
Locator) URL adresa poslužitelja je putanja do tog poslužitelja na webu Oslanjajući se na
specifikacije HTTP-a klijent šalje zahtjev (engl request) poslužitelju Poslužitelj prima zahtjev i
provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3)
Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup
Language) formata XML (Extensible Markup Language) JSON (JavaScript Object Notation) ili
binarna slika
Slika 3 Klijent-poslužitelj arhitektura (Wong 2010)
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
11
Pojam webGIS usko je vezan uz još dva termina internet GIS i geoprostorni Web Web se često
pogrešno koristi kao sinonim za Internet pa se tako često pogrešno smatra i da su Internet GIS i
webGIS isto Među njima ipak postoje određene razlike Web je samo jedan od servisa koje Internet
podržava GIS koji koristi bilo koji od Internet servisa ne samo Web smatra se Internet GIS-om
Stoga Internet GIS širi je pojam od webGIS-a Ipak Web je glavna atrakcija Interneta i najčešće
korišteni Internet servis pa je tako i WebGIS najčešći oblik Internet GIS-a
Geoprostorni Web ili skraćeno GeoWeb nešto je potpuno drugačije od webGIS-a Definicija
GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje
trenutno dominiraju Web-om (URL 4) Ova definicija slična je definicijama prostornog tagiranja i
raščlanjivanja područja istraživanja WebGIS-a
Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora omogućen je brz
pristup informacijama preko Weba bez obzira na to koliko su korisnik i server udaljeni Ova osobina
daje webGIS-u važne prednosti nad tradicionalnim desktop GIS-om uključujući sljedeće
globalan doseg ndash korisnici mogu pristupiti webGIS-u sa svojih kućnih računala ili mobilnih
uređaja
veći broj korisnika ndash dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan
korisnik kod webGIS-a može ih biti stotine ili tisuće istovremeno
više podržanih platformi ndash većinu klijenata webGIS-a čine web preglednici kao što su
Internet Explorer Mozilla Firefox Apple Safari i Google Chrome koji djeluju na
različitim operativnim sustavima uključujući Microsoft Windows Linux i Apple Mac OS
jeftiniji ndash dok se za desktop GIS često mora platiti softver ili kupiti licenca korištenje
webGIS-a najčešće je besplatno
jednostavno korištenje ndash desktop GIS je namijenjen profesionalnim korisnicima s
godinama iskustva dok je webGIS namijenjen široj publici uključujući i javne korisnike
od kojih neki ne znaju ništa o GIS-u
ujednačeno ažuriranje ndash kod desktop GIS-a ažuriranja se moraju instalirati na svako
pojedino računalo no kod webGIS-a jedno ažuriranje dovoljno je za sve korisnike
različite aplikacije ndash kako je broj korisnika webGIS-a veći nego kod desktop GIS-a postoji
i veći broj korisničkih zahtjeva te se tako webGIS koristi kod većeg broja raznih aplikacija
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
12
2 Popis stanovništva
Popis stanovništva (cenzus) sustavan je postupak prebrojavanja odnosno evidentiranja
sveukupne populacije nekoga područja najčešće države Popis stanovništva trenutačan je demografski
pokazatelj budući da je definiran tzv kritičnim trenutkom popisa (URL 5)
Postoje dvije temeljne metode popisivanja stanovništva ndash popisivanje stalnog (de iure) stanovništva i
popisivanje prisutnog (de facto) stanovništva Prema koncepciji stalnoga stanovništva popisuju se sve
osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne Prema
koncepciji prisutnoga stanovništva popisuju se svi zatečeni u trenutku popisa Prvi popisi stanovništva
provodili su se više prema načelu prisutnosti no u novije doba češći su popisi prema načelu stalnosti
Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu
sustavni popisi stanovništva novijeg su datuma Prve popise stanovništva u Europi imale su Švedska
(1749 godine) Norveška (1760 godine) i Danska (1769 godine) Brzo su uslijedile i ostale europske
zemlje poput Velike Britanije njemačkih kneževina Habsburške Monarhije i Rusije Izvan Europe
popise su provodile SAD (1790 godine) (slika 4) Japan te djelomično Kina i Indija (Jugoslavenski
leksikografski zavod 1981)
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6)
Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je 1857 godine Provela ga
je Habsburška Monarhija na cijelom svojem teritoriju a popisu se odazvalo skoro 40 milijuna ljudi Za
svakog stanovnika bilježilo se ime i prezime datum rođenja bračno stanje zanimanje
vjeroispovijest mjesto pripadnosti oznaka o prisustvu ili odsutnosti osobe te podaci o stoci Od 1857
godine popis stanovništva provodio se otprilike svakih deset godina (URL 7)
Zadnji popis stanovništva na području Hrvatske proveden je 2011 godine Popis je proveden temeljem
Zakona o Popisu stanovništva kućanstava i stanova u Republici Hrvatskoj 2011 godine (Narodne
novine broj 9210) Popisom su se obuhvatile sljedeće jedinice popisa stanovništvo kućanstva te
stanovi i ostale stambene jedinice Popis je pripremio organizirao i proveo Državni zavod za
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
13
statistiku Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine
Državna geodetska uprava Državna geodetska uprava bila je dužna također izraditi tehničku
dokumentaciju za provođenje Popisa (Narodne novine broj 9210 )
Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja
stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim
kilometrima Ona pokazuje koliko žitelja prosječno živi na 1 km2 U promatranju gustoće naseljenosti
razlikujemo i
fiziološku gustoću ndash broj stanovnika na jedinici za obradbu pogodne površine
poljoprivrednu gustoću ndash broj poljoprivrednog stanovništva na jedinici poljoprivredne površine
agrarnu gustoćundash broj agrarnog stanovništva na jedinici oranične površine
ruralnu gustoću
urbanu gustoću
druge gustoće (Jugoslavenski leksikografski zavod 1981)
21 Državni zavod za statistiku
Državni zavod za statistiku (DZS) je državna upravna organizacija koja se bavi poslovima
službene statistike Republike Hrvatske U radu je samostalan te obavlja svoje poslove u skladu s
odredbama Zakona o službenoj statistici Program statističkih aktivnosti Republike Hrvatske temelj je
po kojem DZS provodi redovita statistička istraživanja (URL 8) Glavni ured DZS-a je u Zagrebu a u
svakoj od županija postoji dodatno po još jedan ili više županijskih ureda
DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku Slavoniju i Dalmaciju Utemeljen
je 1875 godine za vrijeme Austro-Ugarske Od 1924 godine djelovao je pod imenom Statistički ured
u Zagrebu Nakon što je kralj Aleksandar I Karađorđević 6 siječnja 1929 u Kraljevini SHS uveo
monarhističku diktaturu (Šestosiječanjska diktatura) ured je tada u potpunosti izgubio svu novčarsku i
strukovnu samostalnost u radu Organizacijski je postao podređen direkciji državne statistike
Kraljevine Jugoslavije Ured je 1939 godine pripojen Predsjedničkom uredu Banske vlasti Banovine
Hrvatske
Nakon što je 1941 godine osnovana NDH (Nezavisna Država Hrvatska) Predsjedništvo Vlade
uspostavilo je Ured opće državne brojidbe Statistički ured Narodne Republike Hrvatske utemeljen
1945 godine već 1951 godine mijenja ime u Zavod za statistiku i evidenciju Isti je 1956 godine
preimenovan u Zavod za statistiku Narodne Republike Hrvatske a 1963 godine u Republički zavod
za statistiku Socijalističke Republike Hrvatske (URL 9)
Državni zavod za statistiku osnovala je Republika Hrvatska 1992 godine Zavod je u svome radu
potpuno samostalan Od pristupanja Hrvatske Europskoj uniji teži se program DZS-a što više
uskladiti sa statistikom Europske unije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
14
3 Korištene tehnologije
U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta
31 Hyper Text Markup Language
HyperText Markup Language (HTML) je znakovni (engl markup) jezik za opisivanje web
dokumenata (web stranica) Znakovni jezik zapravo je skup oznaka (engl tag) HTML oznake se
stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju
Svaka oznaka opisuje drugačiji sadržaj stranice Dokumenti pisani ovim jezikom imaju ekstenziju htm
ili html Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika
(Đurek 2016)
HTML se prvi put javno spominje i opisuje 1991 godine u dokumentu čiji je autor Tim Berners-Leej
fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje) Dokument se zvao
bdquoHTML tagsldquo a opisivao je 18 oznaka koje je jezik tada sadržavao Mnoge od tih oznaka nastale su na
temelju jednog od ranih jezika za formatiranje teksta zvanog runoff Runoff je razvijen u ranim 1960-
im za CTSS (Compatible Time-Sharing System) operacijski sustav a kasnije je inkorporiran u UNIX
operativni sustav u neke od naprednijih formatirajućih programa Berners-Lee 1994 godine napustio
je CERN te osnovao organizaciju W3C koja se bavi standardizacijom tehnologija korištenih na webu
Prva verzija HTML jezika objavljena je 1993 godine Sadržavala je samo osnovne elemente i bila je
vrlo ograničenih mogućnosti Krajem 1995 i početkom 1997 godine objavljene su druga i treća
verzija Druga nije sadržavala velike promjene a u trećoj je uvedena mogućnost kreiranja tablica Ta
verzija je također bila prva koju je razvio i standardizirao W3C
HTML 40 objavljen je krajem 1997 godine kao preporuka W3C-a Imao je tri izdanja Strict
Transitional i Frameset Razlika između izdanja bila je u elementima koji su se mogli koristiti
Nadogradnja na HTML 40 objavljena je 1991 godine pod imenom HTML 41 Također je bila
preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija
Krajem 2014 godine objavljen je HTML5 Nastao u suradnji W3C i Web Hypertext Application
Technology Working Group (WHATWG) Do 2006 godine su ove dvije grupe radile odvojeno
WHATWG je radio s web formama i aplikacijama a W3C sa XHTML 20 Udruživanjem snaga
kreirali su ovu novu verziju HTML-a (URL 10)
Uz Cascading Style Sheets (CSS) i JavaScript HTML je jedna temeljnih tehnologija za World Wide
Web Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta a za
pregledavanje web dokumenata potreban je preglednik (engl browser) Web preglednici primaju
HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web
stranice (URL 11)
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
15
32 JavaScript
Dok HTML određuje sadržaj web stranice a CSS definira njihov izgled JavaScript
omogućuje dinamičan i interaktivan sadržaj na web stranicama To je objektno orijentiran skriptni
jezik koji se izvršava u web pregledniku na strani korisnika Naziva se skriptnim ili interpretiranim
jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine ndash
skripti (Kalafatić 2012) Objektno orijentiran znači da je sposoban raditi sa objektima
Jezik je nastao 1995 godine nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape
Communications Inspiracija su mu bili programski jezici Java Scheme i Self Razvijan je pod
imenom Mocha no službeni naziv bio mu je LiveScript Naknadno je preimenovan u JavaScript
Konačni odabir imena najčešće se tumači kao marketinški trik kojim je tvrtka htjela dići popularnost
svoga proizvoda povezujući ga sa Javom u to vrijeme jako popularnim jezikom za web programiranje
(URL 12)
I danas ljude često zbunjuje jesu li Java i JavaScript isto no razlike između ova dva jezika su velike
Java je objektno orijentirani programski jezik dok je JavaScript iako podržava klase i objekte više
objektno orijentiran skriptni jezik Kod pisan u Javi mora se cijeli kompilirati da bi se proveo a
JavaScript kod se čita i odmah interpretira redak po redak Java je samostalan jezik dok se JavaScript
kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo Java je puno veći i složeniji jezik
koji kreira bdquosamostalneldquo aplikacije (URL 13)
JavaScript je programski jezik niže razine Ne sadrži složenije funkcije manipulacije i dekoracije
stranica što onemogućuje kreiranje animacija Korištenje direktnog JavaScript koda čak može
uzrokovati probleme vezane uz nekompatibilnost preglednika JQuery je JavaScript biblioteka koja
omogućuje korisnicima da izbjegnu ove probleme dodajući joj mnoge napredne funkcije standardnom
jeziku Biblioteka je besplatna i otvorenog koda a njezinim razvojem bavi se vrlo dinamična
zajednica
JQuery je najpopularnija JavaScript biblioteka danas u uporabi Njezina sintaksa je dizajnirana kako bi
olakšala navigaciju dokumenta odabir objekata DOM (Document Object Model) modela podržala
izmjene i razvoj Ajax aplikacija (URL 14) Ajax funkcije koje omogućuju ažuriranje web stranice bez
da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica
već učitana danas su skoro neizostavan dio web aplikacija
Chartjs je JavaScript biblioteka za crtanje grafikona koja omogućuje korisnicima da jednostavno
vizualiziraju svoje podatke (URL 15) Podržava 8 vrsta grafova od kojih je svaki animiran i vrlo
prilagodljiv Biblioteka je besplatna i otvorenog koda Moguće ju je koristiti na svim modernim web
preglednicima
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
16
33 OGC standardi
Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki
agencija i sveučilišta koji nastoji razvijati javne otvorene standarde za rad s prostornim podacima na
webu i općenito Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima
odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne
i korisne unutar raznih računalnih aplikacija (URL 16)
Konzorcij je osnovan 1994 godine pod imenom Open GIS Consortium Tada je konzorcij činilo tek 8
članova Sveučilište u Arkansasu ndash CAST Center for Environmental Design Research Sveučilišta u
Kaliforniji ndash Berkeley PCI Remote Sensing USACERL (US Army Corps of Engineers Construction
Engineering Research Laboratory) USDA Soil Conservation Service QUBA Camber Corporation i
Intergraph Corporation Intergraph je bio prvi komercijalni član OGC-a (URL 17)
Open GIS Consortium 2004 godine mijena ime u Open Geospatial Consortium Od 1994 do 2015
konzorcij je došao do više od 500 članova među kojima su brojne vladine i akademske organizacije te
organizacije privatnog sektora Danas OGC surađuje s više od 20 međunarodnih tijela za standarde
uključujući W3C (World Wide Web Consortium) OASIS (Organization for the Advancement of
Structured Information Standards) i druge
Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata zajedničkog
naziva Abstract Specification Ovi dokumenti opisuju osnovni model podataka za prikazivanje
geografskih značajki Osnovu OGC standarda čini više od 30 standarda među kojima se nalazi i Web
Map Service (WMS)
WMS je protokol za objavu georeferencirane karte koju generira poslužitelj Ovaj standard putem
HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka Klijent putem
HTTP-a šalje zahtjev poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom
vraća gotovu kartu (Mikolić 2015) WMS zahtjevom definira se određen geografski sloj i područje
interesa čiji se prikaz želi Odgovor na zahtjev je jedan ili više kartografskih prikaza rasterskog
formata koji se mogu prikazati u pregledniku aplikacije HTTP veza podržava također i mogućnost
postavljanja hoće li slika biti transparentna kako bi se slojevi s više poslužitelja mogli kombinirati ili
neće biti transparenta (URL 18)
Uz WMS često se koristi i Web Feature Service (WFS) protokol za dobivanje geoprostornih
obilježjaprostornih podataka Dok je rezultat WMS protokola rasterska karta korištenjem WFS
protokola dohvaćeni su podaci najčešće u vektorskom obliku tj geometrija s atributima WMS
omogućuje bdquosamoldquo pregledavanje karte no podatke dobivene WFS servisom moguće je dalje uređivati
(Mikolić 2015)
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
17
34 ESRI Shape
Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera
webGIS aplikacija i aplikacija za upravljanje prostornim bazama podataka Središte tvrtke je u
Sjedinjenim Američkim Državama u gradu Redlans u Kaliforniji Tvrtka je osnovana 1969 godine
kao savjetodavna tvrtka za korištenja zemljišta Danas je tvrtka vodeća na tržištu kada su u pitanju GIS
softveri Shapefile je njihov najpoznatiji vektorski format (URL 19)
Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju lokaciju i
povezane atribute Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka
između Esri i drugih GIS softverskih proizvoda Format je predstavljen ranih 1990-ih s drugom
verzijom ArcView GIS-a Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima
Naziv bdquoshapefileldquo je dosta čest no ponekad je zbunjujući pošto se format sastoji od seta datoteka koje
nose isto ime i pohranjene su unutar iste mape no različitih ekstenzija Tri osnovne ekstenzije su
shp shx i dbf Pod nazivom bdquoshapefileldquo podrazumijeva se shp datoteka no pri distribuciji nije
dovoljna ona sama (URL 20) Potrebne su i druge dvije pomoćne datoteke
3 osnovne datoteke
shp (shape format) ndash sadrži geometriju
shx (shape indeks format) ndash sadrži pozicijske indekse geometrije koji omogućuju brzo
pretraživanja
dbf (atributni format) ndash sadrži tablicu atributa za svaku geometriju u dBase IV formatu
U sve tri datoteke zapisi oblika (engl shapes) su poredani istim redoslijedom Dodatno postoji još
nekoliko datoteka koje su opcionalne
prj (format projekcije) ndash podaci o koordinatnom sustavu i projekciji u WKT (Well-known
text) formatu
sbn i sbx mdash prostorni indeks značajki
fbn i fbx mdash prostorni indeks značajki koje se mogu samo čitati (engl read-only)
ain i aih mdash atributni indeks aktivnih polja u tablici
ixs mdash indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl read-write)
mxs mdash indeks geokodiranja za podataka koji se mogu i čitati i uređivati u ODB formatu
atx mdash atributni indeks za dbf datoteku
shpxml mdash geoprostorni metapodaci u XML formatu
cpg mdash datoteka koja određuje kodnu stranicu koja će se koristit zadbf datoteku
qix mdash alternativni prostorni indeks oblika stabla četverokuta (engl quadtree spatial index)
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
18
35 ASPNET
ASPNET je web radni okvir (engl framework) otvorenog koda za izradu dinamičkih web
stranica (URL 21) Nastao je integracijom ASP-a (Active Server Pages) i NET-a
ASP razvijen 1996 godine Microsoft-ov je jezik za programiranje i kodiranje web stranica koji se
koristi zajedno s HTML kodovima HTML služi kao standardan format za opisivanje web
dokumenata Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan no za bilo
kakvu interakciju s korisnicima potrebno je nešto više Jedan od načina rješavanja problema dinamike
web stranice je ASP danas često zvan klasični APS kao skripta koja se izvršava na strani poslužitelja
Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page danas rekurzivni
akronim za Hypertext Preprocessor) koji je od svoje pojave bio puno popularniji od ASP-a PHP je
bio otvorenog koda te je mogao raditi na LinuxUnix-oidnim operativnim sustavima koji su besplatna
platforma dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu
Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove NET
tehnologije (URL 22)
2001 godine predstavljen je NET a 2002 godina finaliziran NET Framework 10 NET Framework
predstavlja osnovu NET-a Pojednostavljenom definicijom to je sustav koji nadograđuje mogućnosti
samog operativnog sustava Predstavlja posebnu infrastrukturu koja programerima nudi gotova
rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika
ASPNET dio je NET Framework-a Ovom integracijom jezika i sustava na poslužitelju (NET
Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima
desktop aplikacija Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica web
aplikacija i web servisa
Velika prednost ASPNET-a u odnosu na neka druga rješenja je brzina Ta brzina je direktna
posljedica toga što se ASPNET aplikacije prevode Prevođenje se odvije u dva stupnja U prvom
stupnju kod se prevodi u međujezik nazvan Microsoft Intermeidate Language (MSIL ili samo IL)
Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava Tada se IL prevodi u strojni
kod Ova faza poznata je kao Just-In-Time (JIT) prevođenje i odvija se na isti način i kod svih NET
aplikacija JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki
put kada se izvrše promjene u kodu
Zahvaljujući prevođenju u IL NET kod moguće je pisati u čitavom nizu različitih jezika (C
VisualBasic) Za razliku od ASP-a čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i
HTML-a ASPNET nudi pravi objektno orijentirani model (URL 23)
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
19
4 Korišteni alati
U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta Važno su
korišteni isključivo alati otvorenog koda
41 Apache HTTP Server
Apache HTTP Server (Apache HTTP Poslužitelj) najčešće zvan samo Apache najčešće je
korišteni web poslužitelj Ovim projektom koji je dio Apache Software Foundation zajedničkim
snagama upravlja grupa volontera sa svih strana svijeta koristeći Internet i Web za komunikaciju
planiranje i razvoj poslužitelja i uz njega vezane dokumentacije Također stotine korisnika doprinijelo
je projektu svojim idejama kodovima i dokumentacijom (URL 24)
Objavljen je pod Apache licencom a besplatan je i otvorenog koda Operabilan na raznim operativnim
sustavima kao što su Unix-oidni sustavi (najčešće Linux) Microsoft Windows eComStation
NetWare OpenVMS OS2 i TPF
Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd) sredinom 1990-ih
najpopularniji poslužiteljski softver na Web-u Razvio ga je Rob McCool za National Center for
Supercomputing Applications (NCSA) Sveučilišta u Illinoisu Kada je 1994 godine McCool napustio
Centar razvoj HTTPd-a je stao Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune
i ispravljati pogreške Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti
svoje promjene U kratkom roku njih 8 osnovalo je Apache Group koja nakon porasta broja članova
promijenila svoje ime u Apache Software Foundation
U travnju 1995 godine objavljeno je prvo izdanje Apache-a (verzija 062) dostupno javnosti Apache
10 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji
web poslužitelj Sredinom 1999 godine osnovana je Apache Software Foundation kao bez-profitna
korporacija Na konferenciji ApacheCon održanoj 2000 godine u Orlandu na Floridi tijekom
završne sesije objavljen je Apache 20 Alpha (URL 25)
Iako bi Apache Software Foundation kao kompanija koja drži više od 60 tržišta mogao uvesti
naplatu korisnicima ovog web poslužitelja oni drže strogu politiku kako Apache mora ostati
besplatan Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima a kako bi
tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver poput
specijaliziranih modula i korisničke podrške Jasnog su stava kako Apache mora ostati besplatna
platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave u eksperimentalne i
ozbiljnije svrhe
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
20
42 PostgreSQL i PostGIS
PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka Sustav je
besplatan i otvorenog koda Kod je dostupan pod PostgreSQL licencom Sustav je u početku razvijan
za rad na UNIX platformama no s vremenom je prilagođen radu na svim većim operativnim
sustavima uključujući Linux UNIX i Windows
Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova uključujući cijele brojeve
decimalne brojeve logičke podatke znakove i datume Također podržava pohranu slika zvukova i
videa Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije PostgreSQL ima
programsko sučelje za CC++ Java Net Perl Python Ruby Tcl ODBC i drugo (URL 26)
PostgreSQL originalnog naziva Postgres nastao je na temeljima Ingres baze podataka čiji je danas
vlasnik Computer Associates Postgres je razvio Michael Stonebraker profesor računale znanosti na
Sveučilištu u Birminghamu Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix
Corporation koji je danas dio korporacije IBM Projekt je pokrenut 1986 godine a Stonebraker ga je
sa studentima razvijao 8 godina Dvojica studenata pod vodstvom Stonebrakera 1995 godine
zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali
sustav u Postgres95
Projekt je javnosti objavljen 1996 godine s otvorenim kodom Grupa razvojnih programera
prepoznala je tada potencijal projekta Nakon uložene velike količine truda i rada Postgres je brzo
stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost U vrijeme novog početka u
svijetu tehnologija otvorenog koda s mnogim novim značajkama i poboljšanjima Postgres95
preimenovan u PostgreSQL
PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka Može se koristiti
na svim većim računalnim platformama Dizajniran je kako bi udovoljio svim potrebama korisnika
od pisanja jednostavnog SQL upita do razvoja složenih baza podataka Grafičko sučelje podržava sve
PostgreSQL značajke te olakšava upravljanje Razvila ga je zajednica PostgreSQL stručnjaka diljem
svijet te je dostupan na mnogim jezicima Besplatan je te objavljen pod PostgreSQL licencom
PostGIS je dodatak PostgreSQL-a koji proširuje mogućnosti ove objektno-relacijske baze podataka
tako što omogućava podršku za prostorne podatke Dodavanjem PostGIS proširenja omogućuje se
vršenje SQL upita vezanih uz lokaciju PostgreSQL bazi podataka tada se mogu dodati novi tipovi
podataka (geometrija geografija raster itd) PostGIS slijedi Simpe Featires for SQL specifikaciju
OGC-a (Open Geospatial Consortium) a softver je otvorenog koda objavljen pod GNU General
Public licencom (URL 27)
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
21
43 GeoServer
GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java koji omogućuje
korisnicima pregled i uređivanje geoprostornih podataka Koristeći OGC standarde GeoServer pruža
veliku fleksibilnost u kreiranju karte i dijeljenju podataka Pomoću WMS standarda GeoServer može
kreirati karte u raznim izlaznim formatima Također je u skladu s WFS standardom koji omogućava
stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28)
Ovu tehnologiju je 2001 godine pokrenuo The Open Planning Project (TOPP) Osnivači su predviđali
razvoj geoprostornog Weba kao analogiju World Wide Webu Pretražujući World Wide Web moguće
je pronaći tekst i preuzeti ga Ideja geoprostornog Weba bila je pretraživanje i preuzimanje
geoprostornih podataka (URL 29) Pružatelji podataka mogli bi objavljivati svoje podatke na ovom
webu a korisnici bi im mogli direktno pristupiti
Uskoro je pokrenut GeoTools projekt set GIS alata otvorenog koda temeljenih na Javi pomoću kojeg
su GeoServeru dodane podrška za Shapefile Oracle baze podataka integracija ArcSDE i više
Paralelno s razvojem GeoServera OGC je radio na razvoju WFS i WMS protokola Ubrzo je
GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom GeoServer
danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate
GeoServer je besplatan softver otvorenog koda Njegova cijena velika je prednost u usporedbi s
tradicionalnim GIS produktima a i ispravljanje pogrešaka i unapređivanje značajki kod softvera
otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima Ovaj alat
može prikazati podatke na svakoj od popularnih kartografskih aplikacija kao što su Google Maps
Google Earth Yahoo Maps i Microsoft Virtual Earth OpenLayers besplatna kartografska biblioteka
integrirana je u GeoServer što stvaranje karata čini brzim i jednostavnim
Ovaj poslužitelj podržava razne formate podataka uključujući ndash PostGIS Oracle Spatial ArcSDE
DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW MrSID JPEG2000 Preko standardnih
protokola proizvodi KML GML Shapefile GeoRSS PDF GeoJSON JPEG GIF SVG PNG i više
Dodatno podatke je moguće uređivati pomoću WFS transactional profile (WFS-T)
GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih
podataka Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu
HTML-a GeoServer želi napraviti isto za geoprostorne podatke (URL 30)
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
22
44 OpenLayers
OpenLayers je biblioteka napisana u JavaScript programskom jeziku za kreiranje
interaktivnih web karata vidljivih u skoro svakome pregledniku Biblioteka znači da je OpenLayers
kartografski alat koji nudi API API može biti korišten za razvitak vlastitih web karata Umjesto
izgradnje kartografske aplikacije od početka za dio kartiranja se može koristiti OpenLayers (Gratier
T 2015)
Biblioteku je originalno razvila privatna tvrtka MetaCarta djelomično kao odgovor na Google Maps
2x serija biblioteke razvila se u zreo popularan radni okvir s mnogim strastvenim razvojnim
programerima i zajednicom koja mnogo doprinosi Biblioteku je uspostavio Open Source Geospatial
Foundation (OSGeo) (URL 31)
Alat je besplatan i otvorenog koda Zajednica pruža dobru podršku no također postoje i opcije
komercijalne podrške Vrlo je jednostavan za korištenje zahvaljujući brojnim primjerima na službenoj
web stranici (slika 5) Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju
aplikaciju otvorenog ili zatvorenog koda pošto je objavljen pod BSD 2-Clause licencom (Gratier
2015) Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu što znači da se korisnik ne mora
brinuti o tome da li svojom aplikacijom krši zakon
Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva
posebne softvere poslužiteljske strane ili postavke ndash moguće ju je koristiti bez ikakvih preuzimanja
Alat podržava GeoRSS KML GML GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC
standarde kao što su WMS i WFS
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
23
5 Izrada webGIS aplikacije
Izrada web aplikacije proces je koji se sastoji od više koraka Prije svega prikupljaju se podaci
te pripremaju za unos u bazu podataka Također potrebno je izvršiti instalacije svih potrebnih alata
te se tek tada može pristupiti pisanju koda aplikacije
51Prikupljanje podataka
Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu odnosno
njihovom ukupnom broju Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po
određenim teritorijalnim jedinicama Da bi se podaci prikazali na karti prikupljene su također i
granice županija te gradova i općina na području Hrvatske Ovi geometrijski podaci preuzeti su u
vektorskom obliku Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica
511 Statističkiatributni podaci
Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku
(httpwwwdzshr) DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina od
prvog popisa stanovništva 1857 godine do zadnjeg 2011 godine
Otvaranjem web stranice DZS-a lako se uočava opcija za pregled baze podataka Zavoda Unutar baze
podataka potrebni podaci razvrstani su u dvije glavne skupine Naselja i stanovništvo Republike
Hrvatske 1857 - 2001 te Popis stanovništva 2011
Naselja i stanovništvo Republike Hrvatske 1857 - 2001 sadrži prikupljene podatke o stanovništvu za
sve popise stanovništva održane između 1857 godine i 2001 godine Klikom na ime skupine
korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo
Pod općim informacijama nalaze se podaci o površinama županija te broju gradova općina naselja i
bivših naselja unutar njih Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju
stanovnika razvrstani posebno po županija gradovima i općinama naseljima te bivšim naseljima
Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu
gradova i općina Preuzimanje podataka za županije vrši se na sljedeći način
- potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke
- potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke
- potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka
Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi
preuzeti podatke Podaci su preuzeti u csv (Comma-separated values) datotekama razdvojeni
međusobno točkom sa zarezom i bez zaglavlja
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
24
Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan
način Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj csv datoteci
Naime podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se
gradovi i općine nalaze Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku za 20 županija i
Grad Zagreb
Podaci Popisa stanovništva 2011 preuzimaju se odvojeno U trenutku izrade ovog diplomskog rada
još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po
županijama
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po naseljima
- Popisane osobe kućanstva i stambene jedinice prema prvi rezultati popisa 2011 po gradskim
četvrtima Grada Zagreba
Pri odabiru podataka za županije u ovom slučaju ne bira se godina popisa stanovništva nego kriterij
po kojem korisnik želi prikaz podataka (slika 6) Moguće je odabrati
popisane osobe ndash ukupno
broj stanovnika ndash ukupno
kućanstva ndash ukupno
privatna kućanstva
stambene jedinice ndash ukupno
stambene jedinice ndash stanovi za stalno stanovanje
Slika 6 Preuzimanje statističkih podataka za 2011 godinu
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
25
Za potrebe ovog rada preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu
Podaci o stanovništvu po gradovima i općina za 2011 godinu nisu u trenutku izrade rada bili dostupni
te se oni neće prikazivati
512 Geometrijskivektorski podaci
Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas
(httpwwwgadmorg) Global Administrative Areas (GADM) prostorna je baza podataka državnih
administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima
Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na
manja područja U slučaju Hrvatske GADM nudi tri razine podjele ndash teritorij države u cjelini
(HRV_adm0shp) podjela teritorija države na županije (HRV_adm1shp) te podjela teritorija države
na gradove i općine (HRV_adm2shp) GADM uz sva administrativna područja daje i određene
atribute poput njihova naziva
Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno Korisnik samo mora odabrati
državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7) Za format podataka
moguće je odabrati između
bull ESRI file geodatabasse
bull Shapefile
bull Geopackage (SpatiaLite)
bull R (SpatialPolygonsDataFrame)
bull Google Earth kmz
bull ESRI personal geodatabase
Slika 7 Preuzimanje geometrijskih podataka
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
26
52 Priprema i obrada podataka
Za spajanje podataka korišten je Quantum GIS (QGIS) softver Kako bi se podaci što
uspješnije spojili potrebno ih je prvo odvojeno pripremiti Za pripremu podataka za njihovo spajanje
korišteni su Microsoft Excel i Notepad++ QGIS je korišten u verziji 2160 a Excel iz Office paketa
2016
521 Spajanje statističkih i geometrijskih podataka
Prvo je izvršeno spajanje podataka o županijama S obzirom da su statistički podaci DZS-a za županije
nakon preuzimanja razdvojeni u dva dokumenta jedan s podacima popisa 2011 godine i drugi s
podacima svih popisa održanih između 1857 i 2001 godine prvi korak bio je spajanje svih podataka
u jednu datoteku To je izvršeno u Microsoft Excel-u Novonastala datoteka s podacima svih
provedenih popisa stanovništva potom je pohranjena u csv format kako bi se mogla učitati u QGIS
softver
Datoteka csv formata učitava se u QGIS pomoću naredbi Sloj gt Dodaj sloj gt Add Delimited Text
Layer QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja
se unosi Od standarda koji podržavaju hrvatske dijakritičke znakove moguće je odabrati Windows-
1250 ISO-8859-2 ili UTF-8 U ovom slučaju za hrvatske znakove korišten je standard Windows-1250
Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez
U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja a za definiranje geometrije
postavlja se kako geometrije nema odnosno da tablica sadrži samo atribute
Zatim je u QGIS učitan vektorski sloj s granicama županija originalno nazvan HRV_adm1shp
pomoću naredbi Sloj gt Dodaj sloj gt Dodaj vektorski sloj Nakon što je sloj dodan naredbom Sloj gt
Open Attribute Table moguće je otvoriti atributne tablice Unutar atributne tablice sloja nakon
pregleda svih atributa dobivenih s vektorskim podacima izbrisani su svi nepotrebni stupci te ostavljen
samo atribut imena županije Također ispravljene su sve pogreške u imenima poput velikih i malih
slova te pogrešaka u dijakritičkim znakovima Kako bi se vektorski i statistički podaci uspješno spojili
nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja
QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom
Odabirom Sloj gt Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja
primjerice općenitih informacija vezanih uz sloj stila oznaka načina prikaza i slično Tu se također
nalazi i opcija Spoji kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja Potrebno je
odabrati Spoji gt bdquo+ldquo (znak na dnu prozora) Tada se otvara novi prozor u kojem se odabire ime sloja
čiji će se atributi pridodati uređivanom sloju Nužno je postaviti polje spoja u sloju s atributima i ciljno
polje u sloju s geometrijom kao bdquoključldquo po kojem će se podaci spojiti Ovdje su za bdquoključldquo odabrana
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
27
imena županija pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju
odabrani stupci s imenima županija (slika 8) Nakon odabire tipke OK podaci su spojeni
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja
Nakon uspješnog spajanja podataka za županije (slika 9) sličan postupak ponovljen je za općine i
gradove Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web
stranice DZS-a te su svi podaci spojeni u jedan dokument Prilikom objedinjavanja ovih podataka
uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10) što kod
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
28
podataka za županije nije bio slučaj Novonastali dokument pohranjen je u csv format nakon čega je
otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina
Naredbom Edit gt Convert Case to gt lowercase unutar programa Notepad++ sva velika slova
pretvorena su u mala (slika 11) Zatim su ručno ispravljana prva slova u imenima kako bi imena bila
pravopisno ispravno napisana (slika 12) Datoteka je učitana u QGIS
Slika 10 Originalan izgled podataka
Slika 11 Izgled podataka nakon
izvršavanja naredbe Edit gt Convert Case
to gt lowercase
Slika 12 Izgled podataka nakon svih
izvršenih korekcija
Učitani su također i geometrijski podaci originalnog imena HRV_adm2shp te su u atributnoj tablici
izbrisani svi atributi osim imena županija i imena gradova i općina Imena gradova i općina detaljno su
pregledani i sve uočene pogreške su ispravljene Radi spajanja sa statističkim podacima ponovno je
važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao bdquoključldquo po kojem će se
podaci spojiti Pomoću Sloj gt Osobine gt Spoji gt bdquo+ldquo (znak na dnu prozora) otvara prozor unutar
kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog
sloja Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s
imenima općina i gradova Odabirom tipke OK podaci su spojeni
Oba geometrijska sloja HRV_adm1 i HRV_adm2 koja nakon spajanja s tekstualnim slojevima u
svojim atributnim tablicama sadrže i podatke popisa stanovništva potrebno je pohraniti u nove ESRI
Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama U
suprotnome ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz
kojeg potječu ukloni ili izbriše Novi slojevi nazvani su HRV_zupanijeshp i
HRV_gradovi_opcineshp
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
29
522 Određivanje gustoće stanovništva teritorijalnih jedinica
Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine
Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog
područja Dakle za određivanje gustoće na teritoriju županija gradova i općina koji će se prikazati u
ovom radu potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje
na njihovu teritoriju Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim
slojevima HRV_zupanije i HRV_gradovi_opcine Površinu je moguće jednostavno odrediti pomoću
alata ugrađenih u QGIS
Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle
Editing Mode) Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator)
Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja
pomoću raznih ugrađenih funkcija Prvo je određen naziv novog stupca te kao tip podatka odabran
Decimalni broj (realni) dužine 7 znamenaka s preciznošću od dvije znamenke Izraz za određivanje
vrijednosti definiran je s $area Unutar QGIS-a osnovna mjerna jedinica dužine je metar pa tako ova
funkcija površinu daje u kvadratnim metrima Kako bi se pretvorila u kvadratne kilometre vrijednost
je podijeljena s 1 000 000 Odabirom tipke OK stvorene su vrijednosti površine za sve županije unutar
sloja Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine
Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva Za svaku godinu
popisivanja stanovništva napravljen je izračun gustoće pa je tako kreirano ukupno 16 novih stupaca za
gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva
tijekom godina u sloju HRV_gradovi_opcine Naime kao što je već spomenuto podaci popisa 2011
godine za gradove i općine još nisu dostupni dok za županije jesu Unutar kalkulatora polja određeno
je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni) dužine 7
znamenaka s preciznošću od dvije znamenke Izraz za određivanje vrijednosti novog stupca definiran
je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine Do imena
stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values
Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva
slojevi su spremni za unos u bazu podataka U bazu se unose u ESRI Shape formatu
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
30
53 Postavljanje PostgreSQL baze podataka i unos podataka
PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu
Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav dok poslužitelj koristi
Linux operativni sustav odnosno njegovu verziju Ubuntu 1404 Kao poslužitelj koristi se Virtual
Private Server (VPS) usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava
znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja Poslužitelju udaljenom
Linux računalu pristupano je pomoću PuTTY programa
Na službenim stranicama PostGIS-a (httppostgisnetinstall) postavljen je link s uputama za
instaliranje PostGIS baze podataka na Linux operativnom sustavu Link vodi na stranice OSGeo
organizacije Praćenjem uputa instalirani su PostgreSQL 95 PostGIS 22 i PGAdmin
Za početak je repozitorij dodan u sourceslist
sudo sh -c echo deb httpaptpostgresqlorgpubreposapt trusty-pgdg main gtgt etcaptsourceslist
Unutar Linuxa ova datoteka nalazi se u mapi apt odnosno etc unutar root direktorija Skraćenica
bdquoetcldquo dolazi od Et-Cetera a sadrži sve konfiguracijske datoteke operacijskog sustava bdquoAptldquo dolazi od
Advanced Package Tool Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri
instalaciji i deinstalaciji aplikacija kao i pri njihovom ažuriranju U sklopu svog djelovanja apt koristi
datoteku s popisom izvora (engl sources) iz kojih se mogu dobiti paketi Ova datoteka upravo je
etcaptsourceslist
Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke sourcelist pomoću
naredbi
wget --quiet -O - httpaptpostgresqlorgpubreposaptACCC4CF8asc | sudo apt-key add -
sudo apt-get update
Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom
sudo apt-get install postgresql-95-postgis-22 pgadmin3 postgresql-contrib-95
Baza podataka u koju će se pripremljeni podaci pohraniti naziva bdquostanovnistvoldquo kreirana je također
naredbama unutar PuTTY-a pri čemu su korištene administratorske ovlasti (Adminpack)
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
31
sudo -u postgres psql
CREATE EXTENSION adminpack
CREATE DATABASE stanovnistvo connect stanovnistvo
CREATE EXTENSION postgis
SELECT postgis_full_version()
Čim je baza podataka stanovnistvo kreirana dodano joj je odmah i proširenje za prostorne podatke
PostGIS Korisnik postgres kreiran je pri instalaciji PostgreSQL-a Nove korisnike moguće se
naknadno definirati s
Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na
lokalnom računalu S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina
(engl Host) na bazu podataka stanovnistvo i u nju unijeti podatke
Kao što je već spomenuto lokalno računalo na kojem je rad pripreman koristi kao operativni sustav
Microsoft Windows 7 u 64-bit verziji Instalater (engl installer) za ovaj operativni sustav preuzet je sa
službene web stranice PostgreSQL-a (httpswwwpostgresqlorgdownloadwindows) Odabrana
verzija PostgreSQL-a je Version 953 Daljnja instalacija potom je vrlo jednostavna
Nakon preuzimanja aplikacije dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a
Dvostrukim klikom na tipku Next za direktorij instalacije i direktorij podataka prihvaćene su mape
koje čarobnjak predlaže Odabran su vrata (engl port) 5432 te kao lokacija odabrana Hrvatska
Instalacija je tako mogla započeti
Po završetku instalacije otvoren je pgAdminIII te je odabrana opcija dodavanja veze na poslužitelj
(engl Add a connection to a server) Podešene su potrebne postavke kao na slici 13
sudo su - postgres
createuser -d -E -i -l -P -r -s imeNovogKorisnika
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
32
Slika 13 Spajanje na bazu podataka na web poslužitelju
Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine
učitani su u bazu podataka stanovnistvo
Baza podataka također je povezana i s QGIS softverom kako bi u slučaju potrebe za naknadnom
korekcijom podataka to bilo što lakše izvedivo Povezivanje je napravljeno unutar QGIS-a naredbom
Sloj gt Dodaj sloj gt Dodaj PostGIS slojeve te odabirom Nova veza Potrebni podaci za uspostavu veze
su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14)
Slika 14 Povezivanje QGIS-a i baze podataka
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
33
54 Postavljanje GeoServera i unos podataka
GeoServer je među popularnijim kartografskim poslužiteljima prvenstveno zbog
jednostavnog rukovanja njime Upakiran je kao samostalan servlet za uporabu s postojećim
aplikacijskim poslužiteljima kao što su Tomcat ili Jetty Korištene verzije alata su GeoServer 281 i
Apache Tomcat 7 Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost) za
izradu ovog rada potrebne su bile samo instalacije na web poslužitelju
Prvo je izvršena instalacija Tomcata Datoteka potrebna za instalaciju preuzeta je sa službene web
stranice (httptomcatapacheorg) Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a
wget httpftpcarnethrmiscapachetomcattomcat-7v7070binapache-tomcat-7070targz
Preuzimanje je izvršeno Linuxovom naredbom wget koja služi za ne-interaktivno preuzimanje
podataka s web stranica Preuzeta datoteka je formata targz te je potrebno bdquoraspakiratildquo
tar xvzf apache-tomcat-7070targz
Raspakirana mapa premještena je u opttomcat direktori Opt direktorij rezerviran je za sve softvere i
dodatke koji nisu dio standardne instalacije
sudo mv apache-tomcat-7070 opttomcat
Prije uporabe Tomcata nužno je instalirati Java Development Kit (JDK) što se lako izvrši slijedećom
naredbom
apt-get install default-jdk
Nakon instalacije JDK-a pristupa se konfiguraciji bashrc datoteke Potrebno je podesiti varijable
okoline
vim ~bashrc
Na dno datoteke dodaje se
export JAVA_HOME=usrlibjvmdefault-java
export CATALINA_HOME=opttomcat
Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem
upisivanju naredbi Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat
~bashrc
$CATALINA_HOMEbinstartupsh
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
34
Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera Datoteka za
instalaciju preuzeta je sa službene stranice GeoServera (httpgeoserverorgdownload ) Preuzeta je
bdquoWeb Archiveldquo verzija paketa koja se odmah po preuzimanju raspakirava iz zip formata
wget httpsourceforgenetprojectsgeoserverfilesGeoServer281geoserver-281-warzip
unzip geoserver-281-warzip
Alat se pokreće kopiranjem geoserverwar datoteke iz raspakirane zip datoteke u webapps mapu
aplikacijskog poslužitelja što je u ovom slučaju Tomcat
cp geoserverwar opttomcatwebapps
Za kraj Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile
sh opttomcatbinshutdownsh
sh opttomcatbinstartupsh
GeoServer je tada instaliran a Web sučelju (slika 15) pristupa se na adresi
httpposlužitelj8080geoserver
Slika 15 Web-sučelje GeoServer-a
Otvaranjem web sučelja korisniku se odmah nudi mogućnost logiranja Za prvi put korisnik kao
korisničko ime treba upisati bdquoadminldquo a kao lozinku bdquogeoserverldquo Nakon prvog ulaska u svoj profil
poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun Korisničko se ime ne mijenja
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
35
541 Unos podataka u GeoServer
Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora U izborniku s lijeve
strane korisničkog sučelja pod Data nalazi se opcija Workspaces U prozoru koji se otvara nakon
klika na Workspaces moguće je vidjeti popis svih već kreiranih radnih prostora Također nudi se i
opcija kreiranja novog radnog prozora (engl Add new workspace) Za kreiranje novog radnog
prostora potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator
primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora
Kako bi se u radni prostor unijeli podaci odabire se Data gt Stores Klikom na ovu opciju otvara se
prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru Također
nudi se opcija unosa novih podataka (engl Add New Store) Moguće je unijeti podatke različitih
formata a u ovom radu korišten je unos podataka povezivanjem na bazu podataka Na PostgreSQL
odnosno PostGIS moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora
podataka U postavkama se potom odabire radni prostor u koji će se podaci pohraniti proizvoljno se
daje ime izvoru podataka te se potom postavljaju parametri veze na bazu Time je stvorena veza
između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni
Slojevi podataka kreiraju se odabirom Data gt Layers Prozor koji se otvara klikom na ovu opciju
nakon odabira radnog prostora i izvora podataka nudi mogućnost objavljivanja (engl Publish) slojeva
generiranih na temelju tablica podataka u bazi Također korisnik je u mogućnosti i sam kreirati
slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl Configure
new SQL view) Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada
Pomoću SQL upita kreirana su dva sloja ndash jedan s podacima za županije i jedan s podacima za općine i
gradove SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih
podataka no s njima je moguće vršiti i parametrizaciju prikaza Parametrizacija prikaza bazirana je na
SQL upitu koji sadrži imenovane parametre Vrijednosti parametara mogu biti dodijeljene dinamički u
WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva Parametrima se mogu
dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl Default values)
SQL upiti za definiciju sloja s podacima o županijama
SELECT name_1 AS Ime županije area_km2 AS Površina gust_god AS gust_2011 geom
FROM granice_zupanija
Parametar unutar SQL upita označen je sa znakom bdquoldquo U upitu za prikaz županija jedini je
parametar godina provođenja popisa stanovništva bdquo god ldquo Za slučaj kada ne bude definiran unutar
WMS ili WFS zahtjeva postavljeno je da mu vrijednost bude bdquo2011ldquo
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
36
SQL upit za definiciju sloja s podacima o općinama
SELECT name_2 AS Naziv name_1 AS Županija area AS Površina
gust_god AS gust_2001 geom
FROM granice_gradovi_i_opcine
WHERE id_1=zup
Za prikaz podataka o gradovima i općinama postavljena su dva parametra ndash godina provođenja popisa
stanovništva (god) te županija unutar koje se gradovi i općine nalaze (zup) ldquo Ukoliko WMS
ili WFS zahtjevom parametri ne budu definirani postavljeno je da se prikazuje gustoća stanovništva
gradova i općina u Zagrebačkoj županiji 2001 godine (slika 16)
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima
Klikom na Save parametarski SQL upiti su pohranjeni Za konačno kreiranje slojeva potrebno im je
potom još proizvoljno dodijeliti ime podesiti HTRS96TM (EPSG3765) kao referentni koordinatni
sustav te namjestiti granični okvir (engl Bounding Box) Ponovnim klikom na Save slojevi su
kreirani
Pod Data gt Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva pomoću ugrađene
JavaScript kartografske biblioteke OpenLayers Vrijednosti parametara mogu se mijenjati upisivanjem
bdquoampviewparams=p1v1p2v2ldquo pri čemu su p1 i p2 imena parametara a v1 i v2 vrijednosti koje se
parametrima dodjeljuju
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
37
542 Stilsko uređivanje slojeva
Pod Data gt Styles nalazi se popis svih slojeva već dostupnih na GeoServeru koje je moguće
dodjeljivati vlastitim podacima Također opcija Add a new style korisniku omogućuje da kreira
vlastiti stil Stil je moguće kreirati generirajući ga unutar GeoServera uređujući neki od već postojećih
slojeva ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu Za potrebe ovog rada
stil je kreiran u QGIS softveru pohranjen u novu datoteku u sld formatu te tako učitan u GeoServer
Kreirana su dva stila jedan za županije i jedan za općine i gradove
U QGIS-u je kreiranje stila vrlo jednostavno Kako je QGIS već povezan s bazom podataka na
poslužitelju podacima se vrlo jednostavno pristupa Naredbama Sloj gt Osobine gt Stil otvara se
dijalog za uređivanje stila sloja Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se
sloj stilizirati Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani Kao
atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva 2011 godine za županije
i gustoća stanovništva 2001 godine kod gradova i županija Granice klasa postavljene su ručno a za
boju prikaza odabrana je crvena boja stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena
područja do tamne nijanse za ona najgušća područja (slika 17)
Za granice klasa postavljeno je
Županije Gradovi i općine
1 klasa 0-10 0-10
Rijetko naseljena
područja
2 klasa 10-15 10-15
3 klasa 15-20 15-20
4 klasa 20-25 20-25
5 klasa 25-30 25-30
6 klasa 30-35 30-35
7 klasa 35-40 35-40
Gusto naseljena
područja
8 klasa 40-50 40-50
9 klasa 50-60 50-60
10 klasa 60-70 60-70
11 klasa 70-80 70-80
12 klasa 80-90 80-90
13 klasa 90-100 90-100 Gusto naseljena
područja 14 klasa 100-150 100-150
15 klasa 150-200 150-300
16 klasa 200-1500 300-500 Izrazito gusto
naseljena područja 17 klasa 500-5000
Nakon postavljanja klasa na dnu prozora moguće je odabrati Stil gt Save Style gt SLD File nakon čega
je stil pohranjen u sld datoteku
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
38
Kao što je već spomenuto stil se u GeoServer unosi odabirom Data gt Styles gt Add a new style Na
dnu otvorenog prozora nudi se mogućnost učitavanja sld datoteke Ispravnost koda provjerena je sa
Validate nakon čega je stil pohranjen odabirom tipke Submit
Stil je potom potrebno dodijeliti sloju Odabirom Data gt Layer gt Ime sloja otvara se prozor za
uređivanje sloja Stil se dodaje na kartici Publishing pod Default Style Odabirom tipke Save
promjene su pohranjene
Slika 17 Definiranje sloja unutar QGIS softvera
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
39
55Priprema za pisanje koda
Kod aplikacije pisan je u besplatnom softveru Visual Studio Community 2015 To je softver
namijenjen pisanju ASPNET web stranica Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a
a kao programski jezik kod ASPNET web stranice korišten je C Kako je Visual Studio softver koji
je razvio Microsoft moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft
Windows Ipak softverska platforma Mono Project omogućuje da se gotova ASPNET web aplikacija
može otvarati i na drugim operativnim sustavima poput Linuxa Platformu sponzorira Microsoft no
ona je otvorenog koda Za pokretanje web stranice na web poslužitelju čiji je operativni sustav Linux
nužna je instalacija ove platforme Datoteke potrebne za instalaciju moguće je preuzeti sa službene
web stranice (httpwwwmono-projectcom) Ipak za potrebe ovog rada Mono Project instaliran je
koristeći skriptu objavljenu na korisničkom profilu GitHub-a (httpsgithubcomedgarrc)
Prije samog pisanja koda potrebno je otvoriti Visual Studio Visual Studio nudi korisničko sučelje
slično ostalim alatima razvijenim u Microsoftu poput Word-a ili Excel-a iz Microsoft Office Paketa
Odabirom File gt New gt Web Site otvara se prozor koji nudi predloške za kreiranje web stranice
Razlikuju se predlošci namijenjeni pisanju u C programskom jeziku i predlošci za jezik Visual Basic
U radu je korišten C a od predložaka je odabran ASPNET Empty Web Site Stranici je proizvoljno
dodijeljeno ime te je tipkom OK prazna web stranica kreirana Visual Studio automatski je kreirao
projekt istog imena a unutar projekta osim prazne web stranice nalazi se i Webconfig datoteka
također automatski generirana (slika 18)
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
40
56 Pisanje koda webGIS aplikacije
Kreiranje web aplikacija složen je postupak koji se u ovom slučaju sastojao od više koraka
Prvo je kreirana osnovna stranica (engl Master Page) U njoj su postavljeni naziv web stranice te
izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po
gradovima i općinama Kako bi se budućim korisnicima ukratko opisao projekt u izborniku je dodana
i opcija bdquoO projektuldquo
Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama Ona se sastoji od dva
dijela prikaza podataka na karti i prikaza podataka na grafovima Grafovi su kreirani pomoću Chartjs
i jQuery-1102minjs biblioteka Karta je kreirana koristeći OpenLayers biblioteku
Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama I ona
se sastoji od dva dijela karte i grafa kreirana istim principom kao kod županija Za kraj stvorena je
posebna stranica čija je svrha opis osnovnih podataka o projektu
561 Kreiranje osnovne stranice web aplikacije
Web aplikacija sastoji se od više elemenata koji se u Visual Studiu dodaju pojedinačno
Dodavanje novih elemenata postiže se s Website gt Add New Item Kao prvi dio stranice koji će se
kreirati odabrano je zaglavlje web stranice odnosno osnovna stranica odabirom Master Page Time
je nastala nova datoteka formata master Odmah po otvaranju nove datoteke u osnovnoj stranici se
već nalazi osnovna html struktura pri kreiranju stranice
(HTML)
lt Master Language=C AutoEventWireup=true CodeFile=MasterPagemastercs Inherits=MasterPage gt ltDOCTYPE htmlgt lthtml xmlns=httpwwww3org1999xhtmlgt lthead runat=servergt lttitlegtlttitlegt ltaspContentPlaceHolder id=head runat=servergt ltaspContentPlaceHoldergt ltheadgt ltbodygt ltform id=form1 runat=servergt ltdivgt ltaspContentPlaceHolder id=body runat=servergt ltaspContentPlaceHoldergt ltdivgt ltformgt ltbodygt lthtmlgt
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
41
Iznad osnovne html strukture nalazi se dodatni redak koda koji NET automatski dodaje za svoje
uređaje Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji bdquorezervirajuldquo prostor
za sadržaj svih stranica koje će biti povezane na osnovnu stranicu Ideja osnovne stranice je
centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju kako se one ne bi morale
unositi na svaku stranicu pojedinačno Ukratko osnovna stranica sadrži elemente koji su zajednički
svim stranicama unutar web aplikacije Pomoću ContentPlaceHolder elementa osnovna stranica
povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih
Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se
prikaz gustoće stanovništva po županijama ili prikaz po općinama To je postignuto dodavanjem
sljedećih linija koda unutar body elementa osnovne stranice
(HTML)
ltdiv class=menu-wrappergt ltdiv class=menugt
ltulgt ltligtlta class=active href=gtPregled po županijamaltagtltligt ltligtlta href=gtPregled po općinamaltagtltligt ltligtlta href=gtO projektultagtltligt ltulgt
ltdivgt ltdivgt
(HTML)
ltdiv class=header-wrappergt ltdiv class=logogt
lth1gtltspangtGustoća stanovništva Hrvatskeltspangtlth1gt lth1gttijekom godinalth1gt ltdivgt
ltdiv class=right-panel universitygt lth2gtGeodetski fakultet ltbr gtSveučilište u Zagrebulth2gt
ltdivgt ltdivgt
Elementi su postavljeni u klase kako bi ih se kasnije moglo stilizirati Poveznice (engl link) unutar
izbornika za početak postavljene su kao bdquoslijepeldquo poveznice pošto još nisu kreirane stranice na koje bi
trebale voditi
Također na dno web stranice postavljena je obavijest budućim posjetiteljima kako Geodetski fakultet
zadržava autorska prava
(HTML)
ltdiv class=bottomgt ltdiv class=contentgt ltpgtCopyrightlta href=httpwwwgeofunizghrgtGeodetski fakultetltagtltpgt ltdivgt ltdivgt
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
42
562 Kreiranje stranice za prikaz gustoće stanovništva po županijama
Dodavanje nove stranice ovaj put vrši se pomoću Website gt Add New Item gt Web Form Web
forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika Datoteci je potrebno
dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom Time
nastaje nova datoteka formata aspx Unutar nje odmah po otvaranju nalaze se elementi koji sadržaj
stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default gt ltaspContent ID=Content1 ContentPlaceHolderID=head Runat=Servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Stranicu s podacima o županijama čine dva osnovna elementa prikaz podataka na grafovima i prikaz
podataka na karti Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl
framework) za HTML CSS i JavaScript Da bi se mogao koristiti potrebno je ili preuzeti Bootstrap
datoteku sa službene stranice (httpgetbootstrapcom) ili unutar web koda stranice postaviti linkove
na datoteke koje se nalaze na Internetu Linkovi su postavljeni u head element osnovne stranice
aplikacije sljedećim linijama koda
(HTML)
lt--Bootstrap--gt
ltlink rel=stylesheet href=httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszK68vbdEjh4u crossorigin=anonymousgt ltscript src=httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs integrity=sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin=anonymousgtltscriptgt
Tada je kreiran razmještaj elemenata na stranici
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
43
ltdivgt ltdivgt ltaspContentgt
Grafovi su kreirani pomoću JavaScript biblioteke Chartjs uz koju se koristi i jQuery-1102minjs
biblioteka za postizanje dinamike grafa Za kartografski prikaz podataka koristi OpenLayers
biblioteka također napisana jezikom JavaScript Stiliziranje elemenata definirano je css datotekama
Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice
(HTML)
ltmdashGrafovi--gt ltscript src=httpscodejquerycomjquery-1102minjs integrity=sha256-C6CB9UYIS9UJeqinPHWTHVqhE1uhG5Twh+Y5qFQmYg= crossorigin=anonymousgtltscriptgt ltscript src=httpscdnjscloudflarecomajaxlibsChartjs221Chartminjs type=textjavascriptgtltscriptgt lt--OpenLayers--gt ltscript rel =httpscdnjscloudflarecomajaxlibsol33140oljsgtltscriptgt ltlink rel=stylesheet href=httpscdnjscloudflarecomajaxlibsol33140olcss gt
5621 Prikaz podataka na grafovima
1) SQL upiti
Za prikaz podataka korištena su dva grafa Prvi graf prikazuje kako se gustoća stanovništva
pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva Drugi graf pak uspoređuje
gustoće stanovništva svih županija istovremeno no samo za pojedinu godinu Podaci za grafove
dobiveni su vršenjem upita nad bazom podataka Upiti korišteni za kreiranje prvog i drugog grafa
definirani su na sljedeći način
(SQL) SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 FROM granice_zupanija WHERE id_1= + id_zup +
U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa za
županiju čiji je identifikacijski broj bdquoid_1ldquo jednak vrijednosti parametra bdquoid_zupldquo Drugi upit odabire
sve imena županija te gustoću za godinu vrijednosti parametra nakon čega se imena županija redaju
abecednim redom
(SQL) SELECT name_1 gust_ + godina FROM granice_zupanija ORDER BY name_1
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
44
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za
postavljene SQL upite Uz izbornik u oba slučaja postavljen je i gumb (engl button) čijim će
pritiskom pokrenuti jQuery AJAX poziv Također kako bi se grafovi mogli prikazati na sučelju
stranice potrebno je u HTML kodu postaviti i oznaku za platno (engl canvas) po kojem će se grafovi
crtati
(HTML)
ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtŽupanijaltoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltinput id=btnGustocaZaZupaniju type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaZupanijugt ltcanvasgt ltdivgt
Za izbornik je odabrana padajuća forma (engl drop down list) Moguće je izabrati između 20 županija
i Grada Zagreba a vrijednost koja se prosljeđuje SQL upitu je redni broj županije koji u ovom slučaju
ima ulogu identifikacijskog broja Izbornik za godinu vršenja popisa stanovništva također je padajućeg
oblika
(HTML)
ltdiv class=rowgt ltselect id=ddl_godinegt ltoption value=gtGodina popisa stanovništvaltoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
45
ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption value=2001gt2001 godinaltoptiongt ltoption selected=selected value=2011gt2011 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGodinu type=button value=Prikažigt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGodinugt ltcanvasgt ltdivgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON
(JavaScript Object Notation) formatom Ova funkcionalnost omogućuje slanje upita na REST
(Representational State Transfer) pozadinu aplikacije REST je arhitektonski stil blisko vezan uz
HTTP putem kojeg klijent i poslužitelj mogu slati i primati podatke Neke od funkcionalnosti koje
jQuery sadrži su odabir HTML elemenata manipulacija HTML elementima i dodavanje animacija na
web stranice
(JavaScript)
$(btnGustocaZaZupaniju)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var jsonData = JSONstringify( id_zup red_br ) $ajax( type POST url myWebServiceasmxGetGustocaZaZupaniju data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
46
datasets [ label Gustoća stanovništva tijekom godina fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaZupaniju)get(0)getContext(2d) ctxcanvasheight = 70 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var lineChart = new Chart(ctx type line data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
Znak bdquo$ldquo predstavlja jednu od funkcija jQuery biblioteke JQuery raščlanjuje tekst koji je proslijeđen
ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element
Elemente je moguće odabrati preko njihovih identifikacijskih oznaka klasa ili nekih njihovih osobina
Klikom na gumb čiji je identifikator jednak btnGustocaZaZupaniju pokreće se funkcija Vrijednost
odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli
čija se vrijednost potom pohranjuje u JSON format Tako pohranjena odabrana vrijednost prosljeđuje
se Ajax pozivom u pozadinski kod Uloga pozadinskog koda je da primi vrijednost odabranu u
padajućem izborniku i ovisno o njoj vrati određene podatke Ako se poziv uspješno izvrši i vrati te
podatke poziva se funkcija OnSuccess koja potom iz dobivenih podataka generira graf i prikazuje ga
na platnu s identifikatorom grafGustocaZaZupaniju U slučaju neuspješnog poziva odnosno ne
vraćanja podataka nakon Ajax poziva poziva se funkcija OnError koja javlja kako je došlo do greške
pri uspostavi veze s bazom podataka
Nakon izbora unutar drugog padajućeg izbornika poziva se odvojena funkcija Princip ove funkcije
jednak je kao kod izbora unutar prvog padajućeg izbornika Odabrana vrijednost se u JSON formatu
prosljeđuje Ajax pozivom u pozadinski kod koji vraća tražene podatke iz baze podataka U slučaju
uspješno izvršenog poziva generira se graf Prvi graf je linijskog tipa dok je drugi graf horizontalni
stupčani
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
47
(JavaScript)
$(btnGustocaZaGodinu)on(click function () var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( godina god ) $ajax( type POST url myWebServiceasmxGetGustocaZaGodinu data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Gustoća stanovništva po županijama fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGodinu)get(0)getContext(2d) ctxcanvasheight = 120 setting height of canvas ctxcanvaswidth = 150 setting width of canvas var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) )
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Unutar Visual Studia kreira se nova datoteka za ovaj kod Website gt Add New Item gt Web Service
Web servisi su komponente na web poslužitelju koje klijentska aplikacija može pozivati slanjem
HTTP zahtjeva preko Web-a Uz dodjeljivanje imena nove datoteke potrebno je također i označiti
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
48
Place code in a separate file Tako istovremeno nastaju dvije nove datoteke jednakog imena ali
različitih ekstenzija ndash jedna formata asmx i jedna formata cs Unutar cs datoteke postavljen je
sljedeći kod pisan u C programskom jeziku
(C)
[WebMethod] public Listltobjectgt GetGustocaZaZupaniju(string id_zup) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaZupaniju = SELECT gust_1857 gust_1869 gust_1880 gust_1890 gust_1900 gust_1910 gust_1921 gust_1931 gust_1948 gust_1953 gust_1961 gust_1971 gust_1981 gust_1991 gust_2001 gust_2011 queryGustocaZaZupaniju += FROM granice_zupanija queryGustocaZaZupaniju += where id_1= + id_zup + using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() foreach (DataColumn label in dsTables[0]Columns) labelsAdd(stringFormat(0 labelColumnNameSubstring(5))) resultAdd(labels) foreach (DataRow row in dsTables[0]Rows) Listltdoublegt gustoce = new Listltdoublegt() foreach (var gustoca in rowItemArray) gustoceAdd(ConvertToDouble(gustocaToString())) resultAdd(gustoce) return result
Kod u pozadini čini Web metoda odnosno funkcija imena GetGustocaZaZupaniju Ovo je funkcija
koja se poziva s strane korisnika pri čemu joj se prosljeđuje vrijednost odabrana u padajućem
izborniku Na temelju te vrijednosti u pozadini se kreira upit koji se potom vrši nad podacima u bazi
podataka Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
49
Na istom principu kreira se i druga Web metoda odnosno funkcija GetGustocaZaGodinu
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGodinu(string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGodinu = SELECT name_1 gust_ + godina queryGustocaZaGodinu += FROM granice_zupanija queryGustocaZaGodinu += ORDER BY name_1 using (NpgsqlConnection con = new NpgsqlConnection(
WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu con)) DataSet ds = new DataSet() daFill(ds) Listltstringgt labels = new Listltstringgt() Listltdoublegt gustoce = new Listltdoublegt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
5622 Prikaz podataka na karti
Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku koristeći OpenLayers biblioteku
Ideja karte je da prikaže površine županija obojane nijansama crvene boje od najsvjetlije do izrazito
tamne nijanse ovisno o njihovoj gustoći ndash rjeđe naseljene županije u svjetlijim nijansama a gušće
naseljene u tamnijim Kartu čini više slojeva podataka pri čemu svaki sloj predstavlja prikaz podataka
za jednu godinu prikupljanja podataka o stanovništvu Kako je na području Hrvatske popis
stanovništva izvršen ukupno 16 puta kartu čini jednako toliko slojeva Izbornik na kojoj korisnik
može mijenjati godinu popisa stanovništva smješten je na karti Ova mogućnost mijenjanja slojeva
ostvarena je koristeći skriptu ol3-layerswitcherjs preuzetu s web stranice GitHub
(httpsgithubcomwalkermat) Autor skripte je Matt Walker Uz skriptu je preuzeta i datoteka za
stiliziranje ol3-layerswitchercss
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
50
Obje datoteke postavljene su u head element osnovne stranice zajedno s ostalim vanjskim izvorima
(HTML) ltmdashLayerSwitcher--gt ltscript src=srcol3-layerswitcherjsgtltscriptgt ltlink rel=stylesheet href=srcol3-layerswitchercss gt
Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera Svih 16 slojeva
kreirano je pozivanjem istog sloja na GeoServeru Kako je sloj na GeoServeru definiran SQL upitom
koji u sebi sadrži parametar za godinu popisa stanovništva svih 16 slojeva karte oslanja se na samo
jedan sloj na GeoServeru no s drugačijim parametrima Unutar GeoServera sloju je već dodijeljen stil
kojim se podaci gustoće stanovništva klasiraju u 16 klasa
Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu
(JavaScript)
(function () var map = new olMap( target map layers [ new ollayerImage( type base source new olsourceImageWMS( urlhttpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije Konstruktor olMap omogućuje kreiranje
nove karte Pri kreiranju karte nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl
layers) te definirati način prikaza karte (engl view) Da bi se karta povezala s html kodovima
potrebno je definirati njezino ciljano mjesto (engl target) Ako je unutar html koda napisano bdquoltdiv
id=ldquomapldquogtltdivgtldquo tada su karta definirana JavaScript jezikom i html div element povezani
Sloj je moguće kreirati na više načina Konkretno u ovom primjeru korištena je funkcija
ollayerImage Pri definiciji sloja nužno je postaviti njegov izvor (engl source) Izvoru se također
može pristupati na različite načine U ovom projektu uvijek je korišteno povezivanje putem URL
adrese i određenih parametara Pri prikazu teritorija Države s podjelom na županije postoji samo
jedan parametar ndash godina koje je popis izvršen
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
51
Na isti način kao što je u primjeru kreiran sloj s podacima za 1857 godinu kreirano je još 15 slojeva
za 15 preostalih cenzusa Kao što je već spomenuto izmjena slojeva omogućena je odvojenom
skriptom ol3-layerswitcherjs Ipak ovu kontrolu karte potrebno je još odvojeno dodati karti Dovoljno
je napisati sljedeće
(JavaScript)
var layerSwitcher = new olcontrolLayerSwitcher( tipLabel Leacutegende Optional label for button ) mapaddControl(layerSwitcher)
Također da bi se slojevi mogli izmjenjivati moraju svi biti okupljeni unutar iste grupe te moraju biti
tipa base što onemogućuje preklapanje podataka Isječak iz koda gdje je definirana grupa slojeva
prikazana je u nastavku
(JavaScript)
var map = new olMap( target map layers [ new ollayerImage( title 1857 godina type base visible false source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god1857 ) ) new ollayerImage( title 2011 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080geoserver stanovnistvowms params LAYERS stanovnistvozupanijeSQL VIEWPARAMS god2011 ) ) ] ) ] view new olView( center olprojtransform([165 445] EPSG4326 EPSG3857) zoom 7 ) )
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
52
563 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama
Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao
prethodno opisana stranica s podacima o županijama Nova stranica dodana je pomoću Website gt Add
New Item gt Web Form Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se
datoteku povezalo s osnovnom stranicom Time nastaje nova datoteka formata aspx Tek kreirana
stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom
(HTML)
lt Page Title= Language=C MasterPageFile=~MasterPagemaster AutoEventWireup=true CodeFile=Gradovi_opcineaspxcs Inherits=Gradovi_opcine gt ltaspContent ID=Content1 ContentPlaceHolderID=title runat=servergt ltaspContentgt ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltaspContentgt
Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama Čine ju dva
dijela ndash prikaz podataka na karti i prikaz podataka pomoću grafa U ovom slučaju korišten je samo
jedan graf koji se generira ovisno o dva padajuća izbornika Unutar jednog izbornika bira se županija
za koju korisnik želi prikaz svih njezinih gradova i općina dok se drugim izbornikom bira godina
popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati
Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika Naime nakon
odabira županije na karti se prikazuju gradovi i općine samo unutar te županije Karta ne ovisi o
izborniku za godinu popisa stanovništva nego sadrži vlastiti izbornik slojeva pri čemu svaki sloj
predstavlja podatke za jednu godinu popisivanja stanovništva
Osnovna forma stranice predstavljena je sljedećim kodom
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=body Runat=Servergt ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-4 row-eq-heightgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgtltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
53
5631 Prikaz podataka na grafovima
1) SQL upiti
Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu pa je
stoga potreban samo jedan SQL upit Ipak ovaj upit sadrži dva parametra ndash identifikacijski broj
županije i godinu popisivanja stanovništva
(SQL)
SELECT name_2 gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1= + id_zup + ORDER BY name_2
2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti
Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima
Kako postoje dva parametra kreirana su i dva padajuća izbornika Unutar prvog izbornika odabire se
županija čiji su gradovi i općine predmet interesa korisnika Upitu se prosljeđuje identifikacijski broj
županije odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj
projektu ima ulogu identifikacijske oznake županija Drugim izbornikom određuje se godina za koju
korisnik želi prikaz podataka Odmah uz izbornike postavljeno je i platno za crtanje grafa
(HTML)
ltaspContent ID=Content3 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=clearinggtltdivgt ltdiv class=row panel-wrappergt ltdiv class=col-md-4 row-eq-height style=float left margin-left 3pxgt ltdiv class=rowgt ltselect id=ddl_zupanijegt ltoption value=gtOdaberite županijultoptiongt ltoption selected=selected value=1gtZagebačka županijaltoptiongt ltoption value=2gtKrapinsko-zagorska županijaltoptiongt ltoption value=3gtSisačko-moslavačka županijaltoptiongt ltoption value=4gtKarlovačka županijaltoptiongt ltoption value=5gtVaraždinska županijaltoptiongt ltoption value=6gtKoprivničko-križevačka županijaltoptiongt ltoption value=7gtBjelovarsko-bilogorska županijaltoptiongt ltoption value=8gtPrimorsko-goranska županijaltoptiongt ltoption value=9gtLičko-senjska županijaltoptiongt ltoption value=10gtVirovitičko-podravka županijaltoptiongt ltoption value=11gtPožeško-slavonska županijaltoptiongt ltoption value=12gtBrodsko-posavska županijaltoptiongt ltoption value=13gtZadarska županijaltoptiongt ltoption value=14gtOsječko-baranjska županijaltoptiongt ltoption value=15gtŠibensko-kninska županijaltoptiongt ltoption value=16gtVukovarsko-srijemska županijaltoptiongt ltoption value=17gtSplitsko-dalmatinska županijaltoptiongt ltoption value=18gtIstarska županijaltoptiongt ltoption value=19gtDubrovačko-neretvanska županijaltoptiongt ltoption value=20gtMeđimurska županijaltoptiongt
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
54
ltoption value=21gtGrad Zagrebltoptiongt ltselectgt ltselect id=ddl_godinegt ltoption value=gtOdaberite godinultoptiongt ltoption value=1857gt1857 godinaltoptiongt ltoption value=1869gt1869 godinaltoptiongt ltoption value=1880gt1880 godinaltoptiongt ltoption value=1890gt1890 godinaltoptiongt ltoption value=1900gt1900 godinaltoptiongt ltoption value=1910gt1910 godinaltoptiongt ltoption value=1921gt1921 godinaltoptiongt ltoption value=1931gt1931 godinaltoptiongt ltoption value=1948gt1948 godinaltoptiongt ltoption value=1953gt1953 godinaltoptiongt ltoption value=1961gt1961 godinaltoptiongt ltoption value=1971gt1971 godinaltoptiongt ltoption value=1981gt1981 godinaltoptiongt ltoption value=1991gt1991 godinaltoptiongt ltoption selected=selected value=2001gt2001 godinaltoptiongt ltselectgt ltinput id=btnGustocaZaGradove type=button value=Prikaži gt ltdivgt ltdiv class=rowgt ltcanvas id=grafGustocaZaGradovegt ltcanvasgt ltdivgt ltdivgt ltdiv class=col-md-7 row-eq-height style=float rightgt ltdiv id=mapgt ltscript src=httpfotogeofunizghrstanovnistvolboskovicmapsmap_1jsgtltscriptgt ltdivgt ltdivgt ltdivgt ltdivgt ltaspContentgt
3) Kod na strani klijenta ndash Pozivanje jQuery Ajax metode
Prijenos vrijednosti od izbornika do SQL upita koji će se vršiti nad bazom podataka ostvaren je
ponovno pomoću jQueryjs biblioteke odnosno njezine Ajax metode
(JavaScript)
$(btnGustocaZaGradove)on(click function () var red_br = $(ddl_zupanije)val() if (red_br) alert(Niste odabrali županiju) return var god = $(ddl_godine)val() if (god) alert(Niste odabrali godinu) return var jsonData = JSONstringify( zupanijared_br godina god )
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
55
$ajax( type POST url MyWebService2asmxGetGustocaZaGradove data jsonData contentType applicationjson charset=utf-8 dataType json success OnSuccess error OnError ) function OnSuccess(response) var aData = responsed var aLabels = aData[0] var aDataset = aData[1] var data = labels aLabels datasets [ label Broj stanovnika po kvadratnom kilometru fillColor rgba(15118720502) strokeColor rgba(1511872051) pointColor rgba(1511872051) pointStrokeColor fff pointHighlightFill fff pointHighlightStroke rgba(1511872051) data aDataset ] var ctx = $(grafGustocaZaGradove)get(0)getContext(2d) ctxcanvasheight = 220 ctxcanvaswidth = 150 var barChart = new Chart(ctx type horizontalBar data data ) function OnError(response) alert(Veza s bazom podataka nije uspostavljena) $(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_+red_br + js $(map)append(script) ) )
Pritiskom tipke s identifikatorom btnGustocaZaGradove pokreće se funkcija Vrijednosti odabrane u
izbornicima tada se pohranjuju u JSON format Ajax metodom se vrijednost u JSON formatu
prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu koja vraća rezultat
SQL upita nad bazom podataka Ako je Ajax poziv uspješno izvršen započinje kreiranje grafa Za tip
grafa postavljen je horizontalni stupčani prikaz
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
56
4) Pozadinski kod ndash Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu
Kod u pozadini ponovno je napisan C programskim jezikom u novoj datoteci Website gt
Add New Item gt Web Service pri čemu je označena opcija Place code in a separate file
Uspostavljena je veza s bazom podataka te je izvršen SQL upit Ova metoda korištena je za
dobavljanje i podataka o gustoći stanovništva i imena gradova i općina kojima te gustoće pripadaju
(C)
[WebMethod] public Listltobjectgt GetGustocaZaGradove(string zupanija string godina) Listltobjectgt result = new Listltobjectgt() string queryGustocaZaGradove = SELECT name_2 gust_ + godina queryGustocaZaGradove += FROM granice_gradovi_i_opcine queryGustocaZaGradove += WHERE id_1= + zupanija + queryGustocaZaGradove += ORDER BY name_2 using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManagerConnectionStrings[db_stanovnistvo]ConnectionString)) conOpen() using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove con)) DataSet ds = new DataSet() daFill(ds) Listltobjectgt labels = new Listltobjectgt() Listltobjectgt gustoce = new Listltobjectgt() foreach (DataRow row in dsTables[0]Rows) labelsAdd(row[0]ToString()) gustoceAdd(ConvertToDouble(row[1]ToString())) resultAdd(labels) resultAdd(gustoce) return result
Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsqldll biblioteka za dinamičko
povezivanje (engl Dynamic-link library) Podaci o adresi poslužitelja vratima (engl Port)
korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u
Webconfig datoteku Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta
(XML)
ltconnectionStringsgt ltadd name=db_stanovnistvo connectionString=Server=31147204204Port=5432User Id=name Password=XXXXDatabase=stanovnistvo gt ltconnectionStringsgt
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
57
5632 Prikaz podataka na karti
Ovisno o odabiru županije u izborniku postavljenom uz graf stranica prikazuje drugačiju
kartu Za svaku županiju karta je kreirana u posebnoj skripti Ukupno dakle za ovu stranicu postoji
21 kreirana skripta tj 21 karta Sve skripte i sve karte kreirane su na isti način jedina je razlika
između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte
definiran koordinatama drugačijih točaka Sličnost definicije slojeva vidljiva je u sljedećim kodovima
Zagrebačka županija (id=1) Dubrovačko-neretvanska županija (id=2)
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup1 ) )
new ollayerImage( title 2001 godina type base visible true source new olsourceImageWMS( url httpfotogeofunizghr8080 geoserverstanovnistvowms params LAYERS stanovnistvogradoviSQL VIEWPARAMS god2001zup19 ) )
Svi slojevi svih kreiranih karata definirani su dvama parametrima Prvi parametar je jednak kao kod
prikaza karte za županije ndash godina popisa stanovništva Drugi parametar je identifikacijski broj
županije odnosno njezin redni broj prema službenoj državnoj dokumentaciji Unutar jedne skripte
koja definira kartu gradova i općina unutar jedne određene županije definirano je 15 slojeva Ponovno
svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva Svi ti slojevi unutar jedne karte
imaju jednaku vrijednost za parametar identifikatora županije dok je vrijednost parametra za godinu
popisa drugačija za svaki sloj Slojevi unutar karte mijenjaju se ponovno izbornikom koji je sastavni
dio karte te je kreiran koristeći skriptu ol3-layerswitcherjs
Centar prikaza karte definiran je u otprilike u centroidima županija stoga svaka karta ima drugačije
koordinate centra Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326) pa se
stoga koordinate upisuju u stupnjevima No kako su podaci prikaza definirani u HTRS96
(EPSG=3857) koordinatnom sustavu OpenLayers metodom potrebno je koordinate transformirati u
ovaj koordinatni sustav Gdje je potrebno i mjerilo je prilagođeno obliku županije kako bi sve općine
i gradovi bili vidljivi na karti
Zagrebačka županija
view new olView( center olprojtransform([16063 45635] EPSG4326 EPSG3857) zoom 9 )
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
58
Dubrovačko neretvanska županija
view new olView( center olprojtransform([1760042859] EPSG4326 EPSG3857) zoom 85 )
Izmjena karata postignuta je pomoću metoda jQuery biblioteke Naime sve skripte u kojima su
kreirane karte nazvane su bdquomaps_njihovIDjsldquo Zahvaljujući tome pri pozivanju izvora skripte
moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta za županiju koja je
odabrana u izborniku
(JavaScript)
$(map)empty() var script = documentcreateElement(script) scriptsrc = httpfotogeofunizghrstanovnistvolboskovicmapsmap_ + red_br + js $(map)append(script)
564 Kreiranje stranice s opisom projekta
Za kraj na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i
u koje svrhe Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u
pdf formatu za one željne više detalja Također navedeni su i izvori podataka korištenih pri izradi
projekta
(HTML)
ltaspContent ID=Content2 ContentPlaceHolderID=contentBody Runat=Servergt ltdiv class=container-fluid wrappergt ltdiv class=row special-wrappergt
lth4gtOva web aplikacija izrađena je kao dio diplomskog rada ltspangtWebGIS gustoće stanovništva Hrvatskeltspangtlth4gt
lth4gtIzradila Lovorka Boškovićlth4gt lth4gtMentor Doc dr sc Dubravko Gajskilth4gt lth4gtDrugi mentor Drsc Mateo Gašparovićlth4gt lth4gtVoditelj Drsc Mateo Gašparovićlth4gt lth4gtltspangtGeodetski fakultetltspangtlth4gt lth4gtltspangtSveučilište u Zagrebultspangtlth4gt lth4gtAkademska godina 20152016lth4gt
lth4gtDiplomski rad u cijelosti moguće je pročitati lta href=Tekstpdfgtovdjeltagtlth4gt
lth4gtIzvori korištenih podatakalth4gt lth4gtPodaci o stanovništvu lta href=httpwwwdzshrgtDržavni zavod za statistikultagtlth4gt lth4gtGeometrijski podaci lta href=httpwwwgadmorggtGlobal Administrative Areasltagtlth4gt lth4gtPri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog kodalth4gt
ltdivgt ltdivgt ltaspContentgt
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
59
57 Prikaz konačnog rezultata
Uz dodatno stiliziranje pozadine web aplikacije postignut je konačan cilj projekta Aplikacija
je postavljena na web te joj svi mogu pristupit (httpfotogeofunizghrstanovnistvolboskovic) U
nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po
županijama
Slika 19 Prikaz grafova kreirane web aplikacije (prikaz po županijama)
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
60
Slika 20 Prikaz karte kreirane web aplikacije (pikaz po županijama)
Izgled web aplikacije odnosno njezine stranice za prikaz po županijama moguće je u cijelosti vidjeti
na slici 21
Slika 21 Prikaz cjelovite stranice s pregledom podataka po županijama
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
61
Na stranici s prikazom podataka po gradovima i općinama dizajn elemenata je vrlo sličan Na slici 22
i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika
Cjeloviti izgled stranice moguće je vidjeti na slici 24
Slika 22 Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama)
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
62
Slika 23 Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama)
Slika 24 Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
63
6 Zaključak
Statistički podaci o stanovništvu važan su pokazatelj za svaku zemlju Opisuju razvoj zemlje
migracije njezina stanovništva i eventualne posljedice političkih situacija koje se u zemlji odvijaju
poput ratova Hrvatska popis stanovništva vodi već više od 150 godina a prosječan razmak između
popisa je 10 godina Tijekom tih 150 godina izmijenilo se mnogo toga u svijetu Broj stanovnika
općenito gledano raste no problem većine zemalja zadnjih nekoliko godina je masovno napuštanje
sela i selidba prema gradovima Iz tog razloga ovi statistički podaci zanimljiv su predmet brojnih
analiza
Ovim diplomskim radom izrađena je webGIS aplikacija pomoću koje je lakše usporediti gustoće
stanovništva po godinama i tako doći do određenih zaključaka Aplikacija nudi korisniku da sam
odabere godine koje ga zanimaju Dostupna je na internetu neovisna je o web pregledniku i
operacijskom sustavu koje korisnik koristi na svome računalu To ju čini dostupnom svima i vrlo
jednostavnom za korištenje Svi korišteni alati preuzeti su besplatno te su otvorenog koda što je razlog
zašto je izrada webGIS-a sve popularnija zadnjih nekoliko godina
Aplikacija pokazuje kako je stanovništvo Hrvatske tijekom godina uglavnom pratilo svjetske trendove
što se tiče unutarnjih migracija Do sredine prošlog stoljeća prostor Hrvatske bio je uglavnom
ravnomjerno naseljen Nakon toga kreće razvoj prometnica prijevoz postaje sve jednostavniji i
dostupniji što većini ljudi otvara nove mogućnosti putovanja i istraživanja dijelova države koje nikada
prije nisu vidjeli i posjetili Razvojem industrije otvaraju se brojna nova radna mjesta uglavnom u
gradovima ili njihovim okolicama Nove prometnice i sve jeftiniji transport uvelike doprinose razvoju
trgovine koja kupcima nudi sve više proizvoda
Razvojem trgovine pada popularnost poljoprivrede i seoskog života Isplativost je sve manja što
seoskog čovjeka navodi da potraži nove načine preživljavanja za sebe i svoju obitelj Tako kreću sve
češća napuštanja sela i naseljavanje gradova Prve selidbe su uglavnom iz sela prema najbližim
gradovima u okolici no dolaskom novih generacija raste želja za još boljim životom i čovjek počinje
napuštati manje gradove te naseljavati one veće unutar regija Obrazovanje je također važan faktor
kod migracija stanovništva Kako obrazovanje postaje sve popularnije i dostupnije običnim
građanima tako mladi ljudi kreću prema centrima obrazovanja što su uglavnom veći gradovi te na
kraju često tamo i ostanu i osnuju svoje obitelji
Aplikacija vrlo jednostavno korisniku daje uvid u sve ove faktore i njihovo djelovanje tijekom godina
Ne samo da je na ovaj način lagano vršiti analize prošlih događaja nego je moguće i predvidjeti
buduće događaje i trendove koji će se tek pojaviti GIS nudi velik broj mogućnosti rada s podacima a
webGIS je tehnologija budućnosti sve popularnija i sa sve većim utjecajem na donošenje odluka
svakodnevnih korisnika
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
64
7 Literatura
Chrisman N (1997) Exploring Geographic Information Systems (First edition) New York USA
Đurek M (2016) Primjena računala 8 laboratorijske vježbe Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Fu Pinde Jiulin Sun Fang Yin (2011) Web GIS Principles and applications GIS in the web era 2-
24
Gratier T Spencer P Hazzard E (2015) OpenLayers 3 Beginnerss Guide Packt Publishing Ltd
Birmingham UK
Jugoslavenski leksikografski zavod (1981) Opća enciklopedija Zagreb
Kalafatić Z (2012) Skriptni jezici Materijali s predavanja Fakultet elektrotehnike i računarstva
Sveučilište u Zagrebu
Mikolić A (2015) Geo Servisi Urban Planning 4 Citizens Institut za GIS
Narodne novine broj 9210 Zakon o popisu stanovništva kućanstava i stanova u Republici Hrvatskoj
u 2011g
Wong W (2010) Introduction to Systems Concepts and Systems Architecture Chapter 2
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
65
Mrežne stranice
URL 1 CRCSI What is Spatial Information httpwwwcrcsicomauaboutwhat-is-spatial-
information 182016
URL 2 Community GIS httpwwwcommunitygiscomhtmllayershtml 282016
URL 3 Digital Archaeology httpdigital-archaeologyorgplotting-the-past 382016
URL 4 Your Dictionary geoweb httpwwwyourdictionarycomgeoweb 182016
URL 5 Hrvatska enciklopedija httpwwwenciklopedijahrnatuknicaaspxid=57806 282016
URL 6 United States Census Berau httpswwwcensusgovhistorywwwcensus_then_now
382016
URL 7 Geografijahr Popis stanovništva 1857 godine httpwwwgeografijahrtemepopis-
stanovnistva-1857-godine 782016
URL 8 Državni zavod za statistiku httpwwwdzshrHrvabout_usabout_ushtm 882016
URL 9 Wikipedija Državni zavod za statistiku
httpshrwikipediaorgwikiDrC5BEavni_zavod_za_statistiku 1282016
URL 10 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 11 Wikipedia HTML httpsenwikipediaorgwikiHTML 2372016
URL 12 Wikipedia JavaScript httpsenwikipediaorgwikiJavaScript 1582016
URL 13 How is JavaScript different from Java
httpswwwjavacomendownloadfaqjava_javascriptxml 2082016
URL 14 Wikipedia jQuery httpsenwikipediaorgwikiJQuery 982016
URL 15 Chartjs httpwwwchartjsorg 2082016
URL 16 Geografijahr Geografijahr na 2nd Annual Geospatial Summitu
httpwwwgeografijahrsvijetgeografija-hr-na-2nd-annual-geospatial-summitu 782016
URL 17 Open Geospatial Consortium History httpwwwopengeospatialorgogchistory
2082016
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
66
URL 18 Open Geospatial Consortium Web Map Service
httpwwwopengeospatialorgstandardswms 2382016
URL 19 Wikipedia Esri httpsenwikipediaorgwikiEsri 982016
URL 20 Wikipedia Shapefile httpsenwikipediaorgwikiShapefile 982016
URL 21 Home ASPNET 2016 httpwwwaspnet 2082016
URL 22 Wikipedija NET httpshrwikipediaorgwikiNET 1582016
URL 23 Dizajn WEB korisničkih sučelja ASPNET tehnologija
httpwebzprferhrergonomija2003glavasindexhtml 1582016
URL 24 Wikipedia Apache HTTP Server httpsenwikipediaorgwikiApache_HTTP_Server
1382016
URL 25 Apache HTTP Server Project About Apache
httphttpdapacheorgABOUT_APACHEhtml 1282016
URL 26 About PostgreSQL httpswwwpostgresqlorgabout 1382016
URL 27 Home PostGIS httppostgisnet 1482016
URL 28 About GeoServer httpgeoserverorgabout 1482016
URL 29 History GeoServer httpdocsgeoserverorgstableenuserintroductionhistoryhtml
1482016
URL 30 Wikipedia GeoServer httpsenwikipediaorgwikiGeoServer 1282016
URL 31 Wikipedia OpenLayers httpsenwikipediaorgwikiOpenLayers 1282016
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
67
Popis slika
Slika 1 Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7
Slika 2 Prvi webGIS ndash Web map viewer (URL 3) 9
Slika 3 Klijent-poslužitelj arhitektura (URL 4) 10
Slika 4 Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL
31) 12
Slika 5 Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju
korištenje biblioteke 22
Slika 6 Preuzimanje statističkih podataka za 2011 godinu 24
Slika 7 Preuzimanje geometrijskih podataka 25
Slika 8 Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja 27
Slika 9 Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja 27
Slika 10 Originalan izgled podataka 28
Slika 11 Izgled podataka nakon izvršavanja naredbe Edit gt Convert Case to gt lowercase 28
Slika 12 Izgled podataka nakon svih izvršenih korekcija 28
Slika 13 Spajanje na bazu podataka na web poslužitelju 32
Slika 14 Povezivanje QGIS-a i baze podataka 32
Slika 15 Web-sučelje GeoServer-a 34
Slika 16 Definiranje SQL upita za prikaz podataka o općinama i gradovima 36
Slika 17 Definiranje sloja unutar QGIS softvera 38
Slika 18 Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije
68
Prilozi
Prilog 1 Diplomski rad i korišteni materijali pohranjeni na DVD-u
Sadržaj priloženog medija
Datoteka Opis
1 lboskovicdocx Tekst diplomskog rada
2 lboskovicpdf Tekst diplomskog rada
Mapa Sadržaj
1 Web aplikacija Kod web aplikacije