SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Sveučilišni preddiplomski studij Računarstva

Završni rad

Aplikacija za elektroničko glasanje

Mentor: izv. prof. dr. sc. Miroslav Joler

Rijeka, srpanj 2014. Ricardo Čerljenko

0069050792

IZJAVA O SAMOSTALNOJ IZRADI RADA

Ja, Ricardo Čerljenko (OIB – 47955302538, JMBAG - 0069050792), kandidat za

prvostupnika na Tehničkom fakultetu u Rijeci, smjer Računarstvo, izjavljujem i svojim potpisom

potvrđujem da je ovaj Završni rad rezultat isključivo mog samostalnog rada, uz preporuke mentora.

Rijeka, srpanj 2014. Ricardo Čerljenko

SADRŽAJ

1. UVOD ...................................................................................................................................... 1

2. SPECIFIKACIJA ZAHTJEVA ............................................................................................... 2

3. PRIPREMA OKRUŽENJA ZA RAD ..................................................................................... 3

3.1 Instalacija i konfiguracija XAMPP paketa ....................................................................... 3

3.2 Pristupanje web aplikaciji ................................................................................................. 5

4. STVARANJE BAZE PODATAKA ........................................................................................ 6

4.1 Model entiteta i veza ......................................................................................................... 6

4.2 Objašnjenje veza stranih ključeva .................................................................................... 7

4.3 Struktura polja tablica ....................................................................................................... 7

5. SUČELJA ZA UNOS I IZMJENU PODATAKA ................................................................. 11

5.1 Registracija korisnika ..................................................................................................... 11

5.2 Kreiranje ankete .............................................................................................................. 12

5.3 Manipulacija podacima zgrade ....................................................................................... 14

5.4 Kreiranje e-mail predložaka ........................................................................................... 15

5.5 Tehnički podaci .............................................................................................................. 16

5.6 Popis svih korisnika ........................................................................................................ 17

5.7 Pregledavanje profila korisnika ...................................................................................... 18

6. IZRAČUNAVANJE I PRIKAZ REZULTATA ANKETE ................................................... 19

6.1 Izračunavanje rezultata ................................................................................................... 19

6.2 Prikaz rezultata ............................................................................................................... 20

7. KORISNIČKE ULOGE ......................................................................................................... 22

7.1 Gosti................................................................................................................................ 22

7.2 Korisnici ......................................................................................................................... 22

7.3 Blokirani korisnici .......................................................................................................... 23

7.4 Administratori ................................................................................................................. 23

8. SIGURNOST I STABILNOST APLIKACIJE ...................................................................... 24

8.1 Kontrole na razini HTML-a ............................................................................................ 24

8.2 Kontrole na razini JavaScript-a ...................................................................................... 24

8.3 Kontrole na razini PHP-a ................................................................................................ 25

8.4 Kontrole na razini MySQL-a .......................................................................................... 26

9. TESTIRANJE RADA APLIKACIJE .................................................................................... 27

9.1 Unos novog suvlasnika stana .......................................................................................... 27

9.2 Istovremena raspodjela udjela ........................................................................................ 28

9.3 Kontrole glasanja na anketama ....................................................................................... 30

9.4 Kreiranje nove ankete ..................................................................................................... 31

10. ZAKLJUČAK .................................................................................................................... 40

11. LITERATURA ................................................................................................................... 41

1

1. UVOD

Tema ovog završnog rada je razvoj web aplikacije kojoj je zadaća omogućiti

objavljivanje anketnih pitanja s ponuđenim odgovorima, glasanje na tim pitanjima, prikaz

statističkih rezultata anketa te razne manipulacije koje se tiču korisnika aplikacije. Kroz ovaj

dokument objasniti će se dizajniranje i razvoj aplikacije s popratnom bazom podataka,

namještanje i konfiguracija sustava za testiranje rada aplikacije, kontrole pristupa i korištenja te

sve funkcionalnosti aplikacije kao i stabilnost i sigurnost.

Aplikacija je prvobitno namijenjena stanarima jedne stambene zgrade kako bi se lakše

raspravljalo o pitanjima koje se tiču svih stanara. Najveća prednost aplikacije je izbjegavanje

fizičkih sastanaka stanara u svrhu glasanja, pošto za veliki broj stanara u jednoj zgradi vrlo je

teško dogovoriti sastanak na kome će svi moći prisustvovati. Pomoću ove aplikacije, svaki stanar

može glasati iz portala smještenog u ulazu zgrade kad on to želi i rezultati su lako dostupni

svima za pregledavanje.

2

2. SPECIFIKACIJA ZAHTJEVA

Zadatak ovog završnog rada bio je razviti web aplikaciju koja će omogućiti elektroničko

glasanje o jednom ili više anketnih pitanja. Sigurnost osigurati jedinstvenom

šesteroznamenkastom šifrom koja će biti generirana i dodijeljena svakom glasaču kao

identifikator prije glasanja. Kroz administratorsko sučelje omogućiti generiranje nove šifre za

pojedinoga glasača, slanje šifre glasaču na e-mail, dodavanje, izmjenu i brisanje pojedinih

glasača, postavljanje anketnih pitanja za pojedino glasanje te spremanje rezultata glasanja u

arhivu. Uz svakog glasača omogućiti upis težinskog faktora koji njegov glas nosi pri glasanju.

Izvještaje s glasanja omogućiti dvojako: kao čiste statističke podatke te s popisom imena,

glasačkom odlukom i postotkom koji to donosi.

Tjekom dizajniranja aplikacije, odlučilo se da će se aplikacija odnositi isključivo na

stanare stambene zgrade, pri čemu je nastala proširena specifikacija zahtjeva.

U administratorskom sučelju, pored gore navedenih zahtjeva, treba biti omogućeno i

reguliranje podataka o zgradi, unošenje vlasnika stanova s njihovim udjelima u vlasništvu, pri

čemu treba paziti da ukupan udio vlasništva za jedan stan ne preraste 100%, te brisanje i

mijenjanje podataka o stanovima. Mijenjanje tih podataka dozvoljeno je samo administratorima,

te se njihovim mijenjanjem direktno mijenjaju statistički podaci rezultata anketa.

3

3. PRIPREMA OKRUŽENJA ZA RAD

3.1 Instalacija i konfiguracija XAMPP paketa

Kompletna aplikacija rađena je lokalno uz pomoć XAMPP paketa. XAMPP je besplatan

paket korisnih alata za dinamičko testiranje rada web stranice bez pristupa Internetu, tj. na

lokalnoj razini. Umjesto da se skida i konfigurira svaki program zasebno, XAMPP omogućuje

skidanje instalera ili portabilne inačice svih konfiguriranih programa zajedno. Osim što pruža

usluge web poslužitelja, omogućuje i rad sa bazama podataka, FTP dijeljenje datoteka i rad s

mail funkcijama. XAMPP se većinom koristi za razvoj web stranica i omogućuje web

programerima razvijanje svojih stranica lokalno bez pristupa Internetu. Jednom kad je stranica

dovoljno razvijena na lokalnoj razini, postavlja se na Internet.

Paket XAMPP se može besplatno preuzeti sa stranice Apache Friends-a:

https://www.apachefriends.org/download.html. Može se instalirati na sva četiri operacijska

sustava (Windows, Linux, Mac OS, Sun Solaris) u portabilnoj ili instaler verziji.

Nakon preuzimanja instaler verzije i pokretanja instalacije, pruža se mogućnost odabira

modula za instalaciju.

Slika 1: Odabir modula u instalaciji XAMPP paketa

4

Nakon što je završena instalacija, ulazi se u korisničko sučelje XAMPP-a te se

konfiguriraju moduli po volji.

Slika 2: Odabir konfiguracijske datoteke PHP modula

Promijenjene vrijednosti za PHP modul u odnosu na standardne:

date.timezone = Europe/Zagreb – postavljanje vremenske zone.

post_max_size = 10M – postavljanje maksimalne veličine podataka poslanih

POST metodom.

upload_max_filesize = 10M – postavljanje maksimalne veličine uploada.

Moduli se pokreću pritiskom na Start dugme. U ovom konkretnom slučaju pokreću se

Apache server i MySQL server moduli. Nakon toga, kompletni direktorij aplikacije treba

smjestiti u posebnu predodređenu datoteku unutar xampp datoteke, odnosno htdocs (npr.

xampp/htdocs/anketa). Datoteka htdocs služi za hosting web aplikacije, odnosno sve što se nalazi

unutar te datoteke biti će vidljivo na serveru nakon pokretanja.

5

3.2 Pristupanje web aplikaciji

Kada se aplikacija nalazi u datoteci xampp/htdocs i Apache server modul je pokrenut,

lokalno joj se preko preglednika može pristupati na tri načina:

preko IPv4 adrese lokalno pokrenutog Apache servera - 127.0.0.1 (IPv6

ekvivalent - ::1).

preko DNS imena te iste adrese – localhost.

preko imena računala – ovisno o nazivu računala, npr. PC.

Stoga ako se u preglednik upiše URL http://localhost/anketa/index.php ili

http://127.0.0.1/anketa/index.php ili http://pc/anketa/index.php, dobiti će se potpuno ista stranica,

odnosno početna stranica aplikacije anketa.

U trenutku kada se pristupi datoteci na serveru, PHP modul prepoznaje taj zahtjev i

počinje prevoditi tu datoteku, te je vraća pregledniku kao čisti prevedeni HTML dokument.

Za razliku od JavaScript-a, koji je skriptni jezik na klijentskoj strani, PHP je skriptni jezik

koji se koristi samo na poslužiteljskoj strani, što znači da ne putuje mrežom i kao takvog ga web

preglednici ne razumiju.

6

4. STVARANJE BAZE PODATAKA

Iz specifikacije zahtjeva, aplikacija zahtjeva barem tri tablice: ankete, korisnike i

glasanja. Dodatnim modeliranjem i implementiranjem funkcionalnosti, dodane su i tablice:

stanovi, predlošci i prikaz.

4.1 Model entiteta i veza

Slika 3: Model entiteta i veza baze podataka

Model entiteta i veza (eng. Entity-Relationship model) baze podataka izrađen je u

besplatnom alatu MySQL Workbench 6.1.6 CE (http://dev.mysql.com/downloads/workbench).

7

4.2 Objašnjenje veza stranih ključeva

users 1:m ankete – jedan administrator može i ne mora kreirati više anketa, jedna anketa

može biti kreirana od samo jednog administratora.

users m:1 stanovi – korisnik može biti vlasnik samo jednog stana, jedan stan može i ne

mora imati više vlasnika (može biti i prazan).

users 1:m glasanje – korisnik može i ne mora glasati na više anketa, jedan glas pripada

isključivo jednom korisniku.

ankete 1:m glasanje – na anketi mogu i ne moraju glasati više glasača, jedan glas

pripada isključivo jednoj anketi.

4.3 Struktura polja tablica

Tablica 1: tablica users

Naziv polja Tip polja Integritet Objašnjenje

Full_name VARCHAR(50) NOT NULL Ime i prezime

korisnika

Name VARCHAR(6) PRIMARY Jedinstvena šifra

email VARCHAR(30) NULL, UNIQUE e-mail korisnika

(ako postoji)

Udio DECIMAL(5,2) NOT NULL Udio u vlasništvu

stana u %

Stan TINYINT(4) NOT NULL Broj stana

User_since TIMESTAMP NOT NULL Datum i vrijeme

registracije

Rank VARCHAR(10) NOT NULL Admin ili

korisnik

Last_login TIMESTAMP NULL Datum i vrijeme

zadnjeg logina

Slika LONGBLOB NULL Profilna slika

korisnika

8

Tablica users služi za čuvanje podataka o registriranim administratorima i korisnicima.

Tablica 2: tablica ankete

Naziv polja Tip polja Integritet Objašnjenje

id INT(4) PRIMARY,

AUTO_INCREMENT

Jedinstveni

identifikator ankete

Tekst TEXT NOT NULL Tekst ankete

Odgovori VARCHAR(510) NOT NULL Svi odgovori odvojeni

crticom

Statistika VARCHAR(50) NOT NULL

Broj glasova po

odgovoru odvojeno

crticom

Autor VARCHAR(6) NOT NULL Jedinstvena šifra

autora ankete

Status VARCHAR(10) NOT NULL Aktivna ili blokirana

Anonimnost VARCHAR(2) NOT NULL Anonimna ili javna

Promjena_glasa VARCHAR(2) NOT NULL

Dozvoljava li se

ponovno glasanje

istog korisnika

Start TIMESTAMP NOT NULL Datum i vrijeme

početka ankete

Stop TIMESTAMP NULL

Datum i vrijeme

završetka ankete (ako

postoji)

Tablica ankete služi za čuvanje podataka stvorenih anketa.

9

Tablica 3: tablica glasanje

Naziv polja Tip polja Integritet Objašnjenje

id_ankete INT(4) PRIMARY Jedinstveni

identifikator ankete

Autor VARCHAR(6) PRIMARY Jedinstvena šifra

autora

Odgovor VARCHAR(50) NOT NULL Odabrani odgovor

Tablica glasanje služi za praćenje glasanja korisnika na pojedinim anketama, pomoću nje

se korisniku ne dozvoljava glasanje na anketi za koju je već glasao.

Tablica 4: tablica stanovi

Naziv polja Tip polja Integritet Objašnjenje

Broj TINYINT(4) PRIMARY Broj stana

Kat TINYINT(4) NOT NULL Kat na kojem se

nalazi

Kvadrati DECIMAL(5,2) NOT NULL Kvadrati u m2

Tablica stanovi služi za čuvanje unesenih stanova i njihovih podataka.

Tablica 5: tablica predlosci

Naziv polja Tip polja Integritet Objašnjenje

Naziv VARCHAR(30) PRIMARY Naziv predloška

Naslov VARCHAR(30) NOT NULL Naslov predloška

Tekst TEXT NOT NULL Tekst predloška

Tablica predlosci služi za čuvanje kreiranih e-mail predložaka.

10

Tablica 6: tablica prikaz

Naziv polja Tip polja Integritet Objašnjenje

id TINYINT(1) PRIMARY,

AUTO_INCREMENT

Jedinstveni

identifikator prikaza

Ankete TINYINT(4) NOT NULL Broj prikazanih

anketa po stranici

Ukupno_kvadrata DECIMAL(7,2) NOT NULL Ukpna površina svih

stanova zgrade

Katova TINYINT(4) NOT NULL Broj katova zgrade

Stanova TINYINT(4) NOT NULL Broj stanova zgrade

Tablica prikaz služi za čuvanje općih podataka o aplikaciji: broj anketa koje se prikazuju

po jednoj stranici, ukupno kvadrata cijele zgrade, broj katova i broj stanova te zgrade.

Kompletna baza podataka izrađena je u sučelju koje dolazi kao integrirani dio XAMPP

paketa – phpMyAdmin. Sučelje je popularna web aplikacija pisana u PHP-u, laka za korištenje i

nudi pregršt mogućnosti za izradu i manipulaciju tablica direkto korištenjem MySQL modula

preko web preglednika (http://localhost/phpmyadmin).

Slika 4: Sučelje phpMyAdmin

11

5. SUČELJA ZA UNOS I IZMJENU PODATAKA

5.1 Registracija korisnika

Slika 5: Sučelje za registraciju novih korisnika

Korisnike registrira administrator aplikacije. U sučelju za registraciju administrator unosi

podatke o korisniku kojeg registrira, i to: puno ime i prezime, stan kojega je vlasnik, udio u

vlasništvu toga stana, e-mail (ako postoji) te ovlast (radi li se o običnome korisniku ili

administratoru). Jedinstvena šifra korisnika generira se sama ali može se generirati i ručno.

Ponuđuje se i opcija slanja e-maila korisniku kojega se unosi (ako je e-mail unesen).

Nakon unosa podataka vrši se validacija tih podataka: provjerava se jesu li sva polja

pravilno ispunjena, je li e-mail jedinstven (ako je unesen), te u slučaju više vlasnika, je li udio

manji ili jednak od 100%. Ako nije, vrši se regulacija udjela. Kontrole i validacija unosa

napravljene su tako da se nikako ne može dogoditi da se u bazu podatka spreme neispravni

podaci. U bazi se dodatno dodaje datum i vrijeme kreiranja zapisa, odnosno registracije, te pri

svakom loginu korisnika, datum i vrijeme tog logina.

12

Jedine podatke koje korisnik sam sebi može promjeniti jesu jedinstvena šifra, e-mail i

profilna slika. Sve ostale podatke mijenja isključivo administrator. Jedinstvena šifra korisnika

zamišljena je kao laka za pamćenje ali teška drugima za probijanje ili otkrivanje. Upravo zato

služi kao jedinstveni identifikator između korisnika i kao jedini potreban login podatak.

5.2 Kreiranje ankete

Slika 6: Sučelje za kreiranje nove ankete

13

Sučelje za kreiranje ankete namijenjeno je administratorima kako bi objavili ankete.

Sadrži osnovna polja koja svaka anketa treba imati, a to su tekst ankete i ponuđeni odgovori

(barem dva). Dodatna polja koja sadrži jesu opcije ankete kao što su:

Status – hoće li anketa pri kreiranju biti odmah aktivna ili blokirana?

Anonimnost – hoće li anketa biti javna ili anonimna? Ako je anketa anonimna,

obični korisnici ne vide tko je kako glasao, samo broj glasova.

Promjena glasa – dozvoljava li se korisnicima koji su već glasali da promjene

glas? Ako da, prijašnji glas se briše.

Vrijeme trajanja – mogućnost postavljanja datuma i vremena početka i

završetka ankete. Ako nije navedeno, anketa počinje odmah (ako nije statusno

blokirana).

Sučelje pruža mogućnost dodavanja, premještanja i brisanja odgovora uz ograničenje od

minimalno 2 i maksimalno 10 mogućih odgovora. Dodatno pri unosu teksta ankete, pružaju se

usluge ukrašavanja teksta (podebljano, nakošeno, podcrtano, eksponent, indeks, velika i mala

slova), te se s desne strane prostora za pisanje u realnom vremenu ispisuje se tekst kakav će

izgledati nakon objave ankete. Dostupne su i akcije kreiranja poveznica, poništavanja

formatiranja teksta, rezanja teksta, poništavanja zadnjih akcija (eng. Undo) i ponavljanja zadnjih

akcija (eng. Redo).

Nakon željenog unosa, obrazac se prosljeđuje i započinje validacija unešenih podataka. U

validaciji se provjerava jesu li sva polja ispravno unesena (npr. ako je postavljeno vremensko

ograničenje ankete, gleda se je li datum početka i završetka minimalno današnji datum). Ako je

validacija uspješno završena, anketa se sprema u bazu podataka.

U istom sučelju nalazi se i kontrola kojom se određuje koliko će se anketa prikazivati po

jednoj stranici (minimalno 2, a maksimalno 10).

Pored toga nalazi se i popis svih završenih i blokiranih anketa. Mogu se pregledati

rezultati tih anketa, izbrisati ankete iz baze ili odblokirati blokirane ankete (anketa prelazi u

aktivno stanje i vidljiva je korisnicima).

14

5.3 Manipulacija podacima zgrade

Slika 7: Izmjena podataka o zgradi i unos novoga stana

Sučelje služi kako bi administratori regulirali opće podatke o zgradi (ukupna površina,

broj katova i broj stanova), unosili nove stanove (redni broj stana, kat na kojem se nalazi i

površina stana) te mijenjali ili brisali postojeće stanove iz baze.

Kontrola unosa koja se vrši nad ovim formama je da pri unošenju ili izmjeni podataka o

stanu, maksimalan broj stana i broj kata može biti najviše broj koji je postavljen kao broj stanova

i broj katova na općim podacima o zgradi. To znači da ako zgrada ima 50 stanova, nikako se ne

smije dogoditi da u bazi postoji stan sa brojem većim od 50. Isto vrijedi i za kat. Nadalje, u bazi

ne smiju postojati dva ili više stana s istim brojem. Također, treba pripaziti da se upravo

mijenjanjem tih podataka mijenjaju i statistički podaci rezultata anketa, a brisanjem jednog stana

brišu se i njegovi vlasnici (ako postoje).

15

5.4 Kreiranje e-mail predložaka

Slika 8: Sučelje za kreiranje novih e-mail predložaka

Sučelje služi kako bi administratori kreirali e-mail predloške koji će im služiti bržim

promjenama podataka i registraciji. Sama svrha predloška je da već postoji gotov tekst koji se

eventualno malo modificira bez potrebe pisanja e-maila od početka.

16

Predlošci mogu koristiti takozvane „oznake“ koje će sustav prepoznati i umjesto njih

postaviti određene podatke u tekst poruke. Tako postoje oznake:

<ime> - sustav prepoznaje tu oznaku na način da umjesto nje postavi ime i

prezime korisnika na kojem se vrši operacija promjene podataka ili registracija.

<alias> - sustav prepoznaje tu oznaku na način da umjesto nje postavi generiranu

jedinstvenu šifru korisnika.

<stan> - sustav prepoznaje tu oznaku na način da umjesto nje postavi redni broj

korisničevog stana.

<ovlast> - sustav prepoznaje tu oznaku na način da umjesto nje postavi ovlast

korisnika.

Sučelje predloška omogućuje i izmjenu ili brisanje postojećih predložaka. Validacija se

vrši na način da se u bazi ne smiju nalaziti dva ili više predloška s istim nazivom.

5.5 Tehnički podaci

Slika 9: Sučelje prikaza tehničkih podataka

Sučelje namijenjeno administratorima kako bi vidjeli osnovne tehničke podatke o

okruženju i aplikaciji. Podaci prikazuju broj anketa i korisnika u bazi, veličinu baze podataka i

zauzeće sistemske memorije, naziv, IP adresu i protokol servera na kojem se nalazi aplikacija,

verzije PHP i MySQL modula te naziv i verziju operativnog sustava servera.

17

5.6 Popis svih korisnika

Slika 10: Popis svih korisnika

Sučelje koje je dostupno i korisnicima i administratorima, a služi kako bi korisnici mogli

vidjeti osnovne podatke drugih korisnika (ime i prezime, kat, stan, datum registracije i zadnji

login) i poveznice na njihove profile. Administratori, pored navedenih mogućnosti, vide

detaljniji popis, i to: korisničke šifre, površinu stana te kontrole poput blokiranja korisnika ili

promoviranja korisnika u administratora. Također, administratori vide i druge dvije tablice –

tablicu popisa blokiranih korisnika s kontrolama odblokiranja ili brisanja, te tablicu popisa

administratora s kontrolama vraćanja u korisnika.

Pored navedenih mogućnosti, sučelje dozvoljava i pretragu korisnika po imenu, uzlazno i

silazno sortiranje svakog polja te odabir broja prikazanih korisnika po stranici.

Slika 11: Administratorski pogled na sučelje popisa korisnika

18

5.7 Pregledavanje profila korisnika

Slika 12: Sučelje korisničkog profila u ulozi administratora

19

Sučelje služi kako bi korisnici aplikacije mogli vidjeti svoje ili tuđe podatke (samo

osnovne). U ulozi običnoga korisnika dozvoljava se promjena jedinstvene šifre, e-maila i

profilne slike, dok se u ulozi administratora dozvoljava promjena svih podataka (vidljivo na slici

11). Za razliku od običnog korisnika, administrator može mijenjati i svoje i tuđe podatke (osim

profilne slike). Postoji i opcija brisanja profila korisnika, odnosno vlastitog profila. Kada se

korisnik nalazi na vlastitom profilu, ispisuje se i podatak o zadnjoj konekciji te informacija o

pregledniku i operativnom sustavu s kojeg pristupa aplikaciji.

6. IZRAČUNAVANJE I PRIKAZ REZULTATA ANKETE

6.1 Izračunavanje rezultata

Kod svake ankete, najbitinija stvar za pojedinog korisnika je njegov težinski faktor u

odnosu na druge korisnike, odnosno koliko u postotcima teži njegov glas za taj odgovor. Iznos

težinskog faktora za pojedinog korisnika ovisi o tri podfaktora:

Ukupna površina zgrade (svih stanova).

Površina stana korisnika.

Udio u vlasništvu korisnika za taj stan.

Što je ukupna površina zgrade manja, a površina stana i udio u vlasništvu veći, to će

težinski faktor korisnika biti veći, po izrazu (6.1.1):

Tf = (P * U) / Up, Tf, P, U, Up ∈ R+ (6.1.1)

gdje je: Tf – težinski faktor (u postocima), P – površina korisničevog stana (u m2), U – udio u

vlasništvu stana (u postocima), Up – ukupna površina zgrade (u m2).

Npr. za ukupnu površinu zgrade od 1357 m2, površinu stana od 78.25 m

2 i udio u

vlasništvu toga stana od 60%, korisnički težinski faktor bi po formuli iznosio 3.46%.

20

6.2 Prikaz rezultata

Statističke rezultate ankete moguće je pregledavati u svakom trenutku, neovisno o tome

je li anketa aktivna, blokirana ili završena. Za razliku od običnih korisnika, administratori vide

tko je kako glasao bez obzira je li anketa javna ili anonimna. Rezultate se može pregledavati na

tri načina:

Opća statistika o broju glasova i postocima po odgovoru (slika 13).

Statistika koja se tiče pojedinog odgovora zasebno (slika 14).

Detaljna statistika koja kombinira mogućnosti obje gornje (slika 15).

Slika 13: Opća statistika

Opća statistika prikazuje rezimirane podatke o ishodu ankete. S lijeva prema desno,

govori nam koliko je brojčano i u postocima korisnika glasalo za pojedini odgovor, te koliko

iznosi suma njihovih težinskih faktora za taj odgovor (Realni postotak) i koliko je to površine

zgrade. Težinski faktor računa se prema izrazu 6.1, te se tako zbraja za svaki odgovor zasebno.

21

Slika 14: Statistika pojedinog odgovora zasebno

Statistika pojedinog odgovora zasebno prikazuje sve korisnike koji su glasali za taj

odgovor. Pored imena i prezimena korisnika prikazuje još i kat, broj stana, udio u vlasništvu

stana te udio u glasanju. Površinu i udio u vlasništvu stana vide samo administratori.

Slika 15: Detaljna statistika

22

Detaljna statistika otvara se u novom prozoru, a prikazuje sve korisnike u bazi podataka

bez obzira jesu li glasali ili ne. Ako je korisnik glasao, izračunava mu se težinski faktor, a ako

nije ispisuje se Suzdržan. Ispod tablice korisnika ispisuje se i opća statistika o glasanju po

odgovorima te podaci o odazivu i ishodu ankete. Pruža se i mogućnost proširivanja i sužavanja

(od 50 do 100%) tablice rezultata, zatvaranje prozora te ispis tablice pomoću pisača.

7. KORISNIČKE ULOGE

Sve korisnike koji koriste aplikaciju može se klasificirati u sljedeće četiri grupe: gosti,

obični korisnici, blokirani korisnici i administratori.

7.1 Gosti

Gosti su svi neregistrirani korisnici, odnosno korisnici koji se ne nalaze u bazi podataka,

u tablici users. Imaju jedino mogućnost pristupanju početnoj stranici te pregledavanju rezultata

(ako je anketa anonimna onda vide samo opću statistiku).

7.2 Korisnici

Korisnici su svi registrirani korisnici u bazi podataka sa statusom „korisnik“. Pored

mogućnosti koje imaju gosti, korisnici mogu glasati na anketama, pregledavati profile drugih

korisnika (samo čitati opće podatke) te promijeniti svoju jedinstvenu šifru, e-mail ili profilnu

sliku.

23

7.3 Blokirani korisnici

Blokirani korisnici imaju iste mogućnosti kao i obični korisnici, osim što ne mogu glasati

na anketama dok ih administrator ne odblokira.

7.4 Administratori

Administratori su korisnici koji pored navedenih mogućnosti običnih korisnika mogu

dodatno:

Kreirati, blokirati i brisati ankete.

Registrirati, blokirati, promovirati i brisati korisnike.

Mijenjati sve svoje i tuđe podatke (osim tuđe profilne slike).

Pregledavati detaljne rezultate ankete iako je ona anonimna, blokirana ili završena.

U rezultatima ankete i popisu korisnika vidjeti polja koja obični korisnici ne vide

(površina stana i udio u vlasništvu).

Unijeti, izmjeniti ili brisati podatke o zgradi i stanovima.

Kreirati, izmjeniti ili brisati e-mail predloške te ih koristiti u svrhu promjene podataka ili

registracije korisnika.

Pregledati tehničke podatke servera i aplikacije.

24

8. SIGURNOST I STABILNOST APLIKACIJE

Kako bi unos podataka kroz HTML obrasce bio kontroliran, koristi se niz akcija kroz

različite web jezike za validaciju tih podataka.

8.1 Kontrole na razini HTML-a

Svaki unosni element obrasca ima svoj tip i koristi niz drugih atributa za kontrolu unosa.

Neki od njih jesu:

maxlength – maksimalna duljina unesenih znakova (korisno kada je unos

ograničen u bazi podataka).

min/max – minimalni i maksimalni dozvoljeni broj u unosu (npr. broj stana ne

smije biti manji od 1 ni veći od broja definiranog u podacima o zgradi).

step – najmanji razmak između unesenih brojeva (npr. ako je postavljen na 1, ne

može se unijeti broj 3.5, već se unosi 3 ili 4).

type=“number“ – dozvoljava se jedino unos brojeva (korisno za korištenje u

sinergiji s min, max i step atributima).

type=“email“ – unos mora biti e-mail formata.

required – unos je obavezan, bez njega se obrazac neće proslijediti.

Svi se obrasci prosljeđuju POST metodom što znači da podaci koji se šalju poslužitelju

neće biti vidljivi u URL-u.

8.2 Kontrole na razini JavaScript-a

JavaScript kontrole odnose se većinom na skrivanje dijela stranice, iskorištavanje AJAX

potencijala te prikazivanja potvrdnih ili informativnih poruka korisniku. AJAX je mogućnost

osvježavanja dijela stranice bez potrebe za ponovnim učitavanjem cijele stranice korištenjem

JavaScripta.

25

Npr. kada administrator unosi novog korisnika, pri odabiru stana AJAX provjeri ima li

već nekih vlasnika za taj stan, te ako ima izračuna novi raspodjeljeni udio i upiše ga u polje

udjela obrasca.

Dodavanjem i brisanjem odgovora u sučelju za kreiranje nove ankete, JavaScript brine o

tome treba li dodanome odgovoru sakriti mogućnost premještanja prema dolje. Logično, ako je

odgovor zadnji na listi nema smisla da postoji ta mogućnost. Isto tako odgovoru koji je prije bio

zadnji sada više nije, što znači da mu se mora vratiti mogućnost premještanja prema dolje. U

istom sučelju, pri ukrašavanju teksta, JavaScript-om se provjerava ukrašava li se tekst na

ispravan način (npr. početak podebljanog teksta ne smije biti ispred kraja).

JavaScript također prikazuje informativne poruke i poruke upozorenja kada je to potrebno

(npr. kada se glasanje uspješno izvrši, prikazuje se poruka „Vaš je glas zaprimljen.“, a kada se

želi izbrisati korisnika prikazuje se upitna poruka „Jeste li sigurni?“).

8.3 Kontrole na razini PHP-a

Za razliku od JavaScript-a, PHP je jezik koji se nalazi na poslužiteljskoj strani. Jednom

kada je obrazac uspješno proslijeđen, prije zapisa podataka u bazu podataka, PHP kontrolira i

ispravlja te podatke. Najčešće korištene funkcije:

strip_tags() – izbacuju se iz danog teksta sve HTML i PHP oznake. Mogu se

navesti i oznake koje se žele zadržati.

trim() – izbacuju se iz danog teksta sva nepotrebna prazna mjesta i redovi na

početku i kraju teksta.

strtolower() – postavlja sva slova danog teksta u mala slova (korisno za unos e-

mail adrese koja je uvjek u malim slovima).

ucwords() – postavlja prva slova svake riječi danog teksta u velika (korisno kod

unosa imena i prezimena korisnika).

addslashes() – obavezna funkcija kada tekst sadrži navodnike. Formatira

navodnike na način da postavlja kose crte kako se nebi dogodila pogreška pri

unosu podataka u bazu podataka.

empty() – provjerava je li dana vrijednost prazan skup.

is_nan() – vraća TRUE ako dana vrijednost nije broj.

26

Npr. $email=strtolower(trim(strip_tags($_POST['email']))); u varijablu $email sprema

vrijednost iz koje su izbačene HTML oznake i nepotrebna prazna mjesta te su sva slova

postavljena u mala slova.

Za jednostavniju portabilnost aplikacije, parametri za spajanje s bazom podataka odvojeni

su u posebnoj config.php datoteci. To znači da kada bi se aplikacija trebala migrirati na neki

drugi poslužitelj s nekim drugim pristupnim podacima, jedino što se treba promijeniti jesu

parametri u toj datoteci. Ti parametri za testno okruženje imaju sljedeće vrijednosti:

SERVER – „localhost“ – naziv MySQL poslužitelja.

USER – „root“ – korisnik koji pristupa bazi podataka.

PASS – „“ – zaporka korisnika (nema je).

DATABASE – „anketa“ – naziv baze podataka kojoj se pristupa.

pa funkcija kojom se PHP spaja s MySQL bazom podataka izgleda ovako:

$con=mysqli_connect(SERVER,USER,PASS,DATABASE);

8.4 Kontrole na razini MySQL-a

U samim tipovima podataka, u tablicama, postavljaju se dodatne kontrole, kao što su:

Postavljanje primarnih ključeva kako nebi došlo do bitnih dvojakih zapisa (npr.

jedinstvena korisnička oznaka).

Postavljanje određene duljine podataka (npr. jedinstvena korisnička oznaka je

znakovni niz točne duljine od 6 znakova pa se stavlja tip VARCHAR(6)).

Za brojevne tipove podataka, postavlja se ograničenje veličine (npr. za polje kat i

stan postavlja se tip TINYINT(4) koji je 8-bitni broj, a s tim se osigurava da

maksimalna vrijednost polja može biti 255).

Za polje email, koje može biti i prazno, postavlja se parametar UNIQUE koji

osigurava da ne dolazi do dvojakog zapisa (e-mail, ako postoji, mora biti

jedinstven).

Za sva obavezna polja postavlja se parametar NOT NULL koji osigurava da u

polje mora biti unesena vrijednost.

27

9. TESTIRANJE RADA APLIKACIJE

Testiranjem rada ove aplikacije pokazati će se način rada nekih glavnih funkcija. Akcije i

koraci testiranja pojedinih funkcija prikazivati će se u slijednim slikama kako bi se što lakše

shvatio mehanizam i način rada.

9.1 Unos novog suvlasnika stana

Scenarij se odvija kada se u bazi podataka već nalazi vlasnik stana, a sada se dodaje novog

suvlasnika. Npr. u stanu broj 4 živi vlasnik stana Igor Bojanić sa svojim udjelom u vlasništvu od

60% (slika 16 lijevo). Dodavanjem novog suvlasnika, Ive Ivića, automatizirani AJAX proces

izračuna raspodjeljeni udio od 40% za Ivu, te se to prikaže u polju za unos udjela (slika 16

desno).

Slika 16: Prikaz raspodjele udjela za novog suvlasnika

28

U slučaju da je admin prilikom unosa novog suvlasnika forsirao udio, npr. da je admin

postavio udio Ive Ivića na 70%, vlasniku Igoru bi se udio smanjio na 30%. Odnosno čim ukupan

udio pređe 100%, novi se udio raspodjeluje tako da se ostatak udia dijeli na broj preostalih

suvlasnika. Npr. da su postojala dva ili više suvlasnika prije unosa Ive Ivića, njihov bi se novi

udio raspodjelio pravilno.

Ovakva se raspodjela udjela u vlasništvu stana radi samo pri unosu novog suvlasnika ili

mijenjanju podataka postojećih. Pametnija raspodjela udjela biti će objašnjena u sljedećem

testnom scenariju (9.2).

9.2 Istovremena raspodjela udjela

Ovakvoj se raspodjeli udjela pristupa iz sučelja za manipulaciju podataka o zgradi gdje se pri

odabiru postojećeg stana prikažu njegovi podaci (redni broj, kat i površina) ali i imena i

pripadajuće udjele svih suvlasnika toga stana.

Slika 17: Istovremena raspodjela udjela

29

Sučelje radi na način da JavaScript konstantno prati svaki unos podataka u polja udjela i

pritom zbraja vrijednosti svih tih polja. U slučaju da postotak nije 100% ne dozvoljava se

prosljeđivanje obrasca dok se vrijednost ne ispravi. Jednom kada se obrazac proslijedi, na

serverskoj strani PHP još jednom kontrolira da nije slučajno došlo do greške prije spremanja

promijena u bazu podataka.

Slika 18: Krivi unos udjela i blokiranje gumba za unos podataka

Do sučelja se može doći i klikom na broj stana kod popisa svih korisnika. Npr. ako korisnik

pripada stanu broj 10, klikom na taj broj (link) odvede nas direktno na gore navedeno sučelje s

izabranim stanom broj 10.

Sučelje pruža i mogućnost brisanja stana iz baze podataka uz upozorenje da ako stan ima

vlasnike da se brišu i oni.

30

9.3 Kontrole glasanja na anketama

Kao što se prije napomenulo, pri kreiranju ankete, administratori određuju hoće li se

dozvoliti promijena glasa korisnika ili ne. Ako se dozvoli, korisnik može mijenjati svoj glas po

volji ali se pritom stari glas briše iz statistike. Npr. korisnik Ricardo Čerljenko glasao je na

anketi za odgovor „Da, definitivno“ (slika 19).

Slika 19: Korisničev glas na odgovoru „Da, definitivno“

No, kasnije se predomislio i odlučio je ipak da želi glasati za odgovor „Ne, ova je dobra“ te

iste ankete. U tom trenutku njegov se stari glas briše i zapisuje se u bazu novi glas (slika 20 i 21).

Slika 20: Korisničev glas više nije u statistici koja prikazuje glasove za „Da, definitivno“

Slika 21: Korisničev glas je sada u statistici koja prikazuje glasove za „Ne, ova je dobra“

31

9.4 Kreiranje nove ankete

Pri kreiranju nove ankete, korisnik izrađuje anketu kroz tri faze: unos teksta ankete,

definiranje odgovora i postavljanje dodatnih opcija ankete.

Slika 22: Unošenje teksta ankete

Prva faza kreiranja nove ankete uključuje i opcionalno ukrašavanje teksta. Korisniku se

ponuđuje postavljanje teksta u podebljano, nakošeno, podcrtano, eksponent ili indeks. Navedene

akcije rade slično kao i u poznatim tekstualnim programima (omeđuju označeni tekst ili počinju

pa završe kad se opet klikne na njih). Pored toga, moguće je kreirati poveznice, postaviti tekst u

velika ili mala slova, rezati tekst oko označenog teksta te poništavanje bilo kakvog prijašnjeg

formatiranja teksta.

32

Slika 23: Ukrašavanje unesenog teksta

Unos i modifikacije teksta vidljive su u realnom vremenu (s desne strane) kako će ustvari

izgledati na početnoj stranici pa je kreatorima anketa lakše ukrasiti tekst po volji. Taj se

mehanizam odvija uz pomoć JavaScript AJAX-a koji pored toga provjeri ako su sva ukrašavanja

pravilno završena. Npr. ako se započne podebljani tekst i ne završi se, PHP to prepozna i

automatski na kraju teksta zatvori podebljani tekst. Takvo započinjanje ukrašavanja signalizira

se zelenom pozadinom aktivnog dugma.

Slika 24: Započeto podebljavanje teksta

33

Za slučaj sa slike 24, kao što je iznad nje navedeno, PHP je nakon „?“ zatvorio podebljavanje

teksta (jer je „?“ zadnji znak teksta) te je dugme zeleno da korisnik zna da mu je uključeno

podebljavanje. Također, ako korisnik forsira završavanje podebljavanja prije mjesta gdje je

započeto javlja mu se greška. Ove kontrole vrše se na svim ukrasnim elementima koji imaju

početak i kraj (podebljano, nakošeno, podcrtano, eksponent i indeks).

Slika 25: Poruka kada se završetak podebljanog teksta pokuša postaviti prije početka

Sučelje podržava i stvaranje poveznica. Poveznice se mogu kreirati na tri načina:

označavanjem dijela teksta, unosom potpuno novog teksta poveznice i slobodnim pisanjem

ispravnog URL-a.

Kada se označuje tekst koji želimo da bude poveznica, JavaScript testira taj dio teksta na

način da provjerava je li taj dio teksta ustvari ispravna poveznica (npr. www.youtube.com). Ako

je, ponuđuje se unos naslova te poveznice (slika 26), a ako nije, ponuđuje se unos poveznice

kojoj će naslov biti označeni tekst (slika 27). Pri unosu potpuno novog teksta poveznice

ponuđuju se oba gore navedena unosa (poveznica pa naslov). Slobodno pisanje ispravno

unesenog URL-a znači da se jednostavno može u tekstu napisati npr. www.riteh.uniri.hr i sustav

će to obraditi kao poveznicu (slika 28).

34

Slika 26: Za ispravnu označenu poveznicu nudi se unos naslova

Slika 27: Za običan označeni tekst nudi se unos poveznice

Mehanizam unosa poveznice i naslova je osmišljen tako da ako se unese krivi unos (npr.

URL „bla bla“), sustav ne kreira poveznicu.

35

Slika 28: Rezultati oba gornja slučaja i slobodno napisana poveznica ispod njih

Ako korisnik primjeti da je krivo ukrasio dio ili pak cijeli tekst, ne mora ići ručno brisati

oznake ukrašavanja, već samo označi dio (ili cijeli) tekst i pritisne dugme za poništavanje

formatiranja teksta.

Slika 29: Stanje teksta prije poništavanja formatiranja

Označavanjem samo dijela teksta i pritiskom na gumb za poništavanje formatiranja, poništiti

će formatiranje samo na tom dijelu teksta dok će ostatak teksta ostati netaknut (slika 30 i 31),

dok bez označavanja, poništiti će se formatiranje na cijelom tekstu (slika 32).

36

Slika 30: Označavanje željenog dijela teksta za poništavanje formatiranja

Slika 31: Rezultat formatiranja teksta označenog na slici 30

Slika 32: Poništavanje formatiranja cijelog teksta

37

Nakon unosa i ukrašavanja teksta ankete, prelazi se na fazu u kojoj se definiraju ponuđeni

odgovori ankete. Manipulacija odgovorima dozvoljava premještanje svih odgovora prema dolje

ili gore.

Slika 33: Početni redosljed odgovora

Klikom na strelice odabrani odgovor će se premjestiti prema gore ili dolje. Logično, prvom

odgovoru nije dozvoljen premještaj prema gore kao i zadnjemu premještaj prema dolje. Na slici

34 vidjeti će se da su se odgovorili pravilno premjestili te su ukinuta bespotrebna prazna mjesta

na početku i kraju svakog odgovora.

Slika 34: Redosljed odgovora nakon premještanja

Zadnja faza u kreiranju ankete je postavljanje dodatnih opcija ankete. Te se opcije odnose na

status ankete (aktivna ili blokirana), anonimnost, mijenjanje glasa i trajanje ankete. Opcije su

detaljnije opisane u poglavlju 5.2.

38

Slika 35: Postavljanje opcija ankete

Rezultat postavljanja gore prikazanih opcija biti će da će ova anketa odmah pri kreiranju biti

aktivna, ali vidljiva korisnicima od 07.07.2014. u 20:10 pa do 14.07.2014. u 20:00. Uz to, na nju

će se moći glasati samo jednom i samo administratori će vidjeti glasove korisnika (slika 36).

Slika 36: Administratorski pogled na stvorenu anketu

Slika 37: Pogled korisnika na stvorenu anketu

39

Iz slika 36 i 37 vidljivo je da samo administratori mogu vidjeti korisničke glasove na

stvorenoj anketi, dok obični korisnici ne mogu. Razlog tome je što je pri kreiranju ankete bila

uključena opcija anonimnosti. Također, ispisano je i trajanje ankete baš kako je i bilo definirano.

Prilikom glasanja na toj anketi javiti će se poruka (slika 38) koja nas upozorava da više neće

biti moguća promijena glasa jer je pri kreiranju ankete bila zagašena opcija koja dozvoljava

promijene glasa.

Slika 38: Poruka upozorenja za glasanje

40

10. ZAKLJUČAK

Aplikacija za elektroničko glasanje prvenstveno je namijenjena korisnicima jedne stambene

zgrade, te je malo vjerojatno da se može koristiti u neke druge svrhe. Najviše koristi će od

aplikacije imati administratori koji mogu sve što i obični korisnici, te dodatne funkcije

reguliranja, unosa, izmjene i brisanja podataka. Običnim korisnicima aplikacija služi kako bi dali

svoj glas na ponuđenim anketnim pitanjima u svrhu odlučivanja o pitanjima koje se tiču svih

stanara zgrade. Izgled aplikacije je jednostavan kako bi se korisnici koji slabije barataju

računalom lako snašli i uspješno glasali. Aplikacija je portabilna, što znači da se ne mora uvjek

nalaziti na jednom mjestu, već se lako može migrirati na neki drugi poslužitelj uz jako malu

promjenu podataka.

Kroz izradu ovog završnog rada, stekao sam korisno znanje u tehnologijama PHP, MySQL,

JavaScript i HTML5/CSS kao i rad sa serverom i datotekama u testnom i live okruženju.

41

11. LITERATURA

[1] Wikipedia, „XAMPP“, opis i upotreba paketa, http://en.wikipedia.org/wiki/XAMPP

[2] Stack Overflow, razne forumske teme iz područja HTML/CSS, JavaScript i PHP,

http://stackoverflow.com/

[3] PHP, sintaksa i upotreba raznih PHP funkcija, http://www.php.net/

[4] W3Schools, sintaksa i primjeri raznih HTML/CSS i JavaScript/AJAX funkcija,

http://www.w3schools.com/