SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Preddiplomski sveučilišni studij računarstva

Završni rad

WEB APLIKACIJA ZA ADMINISTRATIVNO VOĐENJE POSTUPKA

ZADAVANJA DIPLOMSKIH RADOVA

Rijeka, svibanj 2015. Renato Pavleković

0069055089

SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Preddiplomski sveučilišni studij računarstva

Završni rad

WEB APLIKACIJA ZA ADMINISTRATIVNO VOĐENJE POSTUPKA

ZADAVANJA DIPLOMSKIH RADOVA

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

Rijeka, svibanj 2015. Renato Pavleković

0069055089

ZADATAK(na ovu stranicu dolazi orginal print zadatka)

IZJAVA(na ovu stranicu dolazi orginal print izjave)

5

Sadržaj

1. Uvod ............................................................................................................................................ 7

2. Zadatak i zahtjevi ........................................................................................................................ 8

3. Implementacija i rješenje zahtjeva .............................................................................................. 9

3.1. Baza podataka ...................................................................................................................... 9

3.1.1. Korisnici (users) .......................................................................................................... 10

3.1.2. Kolegiji ........................................................................................................................ 10

3.1.3. Radovi .......................................................................................................................... 11

3.2. Aplikacija ........................................................................................................................... 12

3.2.1. Unos novog završnog ili diplomskog rada .................................................................. 12

3.2.2. Pregled radova ............................................................................................................. 13

3.2.3. Liste završnih / diplomskih radova .............................................................................. 15

3.2.4. Mentorske liste ............................................................................................................ 16

3.2.5. Statistika ...................................................................................................................... 16

3.2.6. Postavke ....................................................................................................................... 17

3.3. Validacije ........................................................................................................................... 19

3.3.1 Unos završnog ili diplomskog rada .............................................................................. 20

3.3.2. Postavke ....................................................................................................................... 20

3.3.3. Unos zadatka završnog ili diplomskog rada ................................................................ 21

4. Alati i tehnologije izrade ........................................................................................................... 22

4.1. Alati .................................................................................................................................... 22

4.2. Tehnologije......................................................................................................................... 23

5. Instalacija i pokretanje aplikacije.............................................................................................. 25

6. Primjeri rada i korištenja aplikacije .......................................................................................... 26

6.1. Početna stranica .................................................................................................................. 26

6.2. Unos završnog / diplomskog rada ...................................................................................... 27

6.3. Pregled radova .................................................................................................................... 28

6.4. Liste završnih / diplomskih radova .................................................................................... 29

6.5.Mentorske liste .................................................................................................................... 30

6.6. Statistika ............................................................................................................................. 31

6.7. Postavke ............................................................................................................................. 32

6.8. Izgled izbornika .................................................................................................................. 33

6

7. Zaključak................................................................................................................................... 34

8. Literatura ................................................................................................................................... 35

9. Prilozi ........................................................................................................................................ 37

7

1. Uvod

Web aplikacija [1] je aplikacijski software koji se pokreće u internet pretraživaču, a

sadrži jednu ili više web stranica koje omogućuju interakciju korisnika. Obično se sastoji od

samog programa (engl. software) i baze podataka.

Ova web aplikacija ima funkciju olakšati administrativno voĎenje postupka zadavanja

diplomskih radova. To uključuje postupak upisa novih radova na temelju popunjenog obrasca od

strane studenta, odnosno mogućnost mijenjanja postojećih zapisa. TakoĎer, mogućnost da nakon

što administrator upiše sve radove, mentori mogu upisati naslov i sadržaj zadatka za svakog

studenta, a potom ispunjeni obrazac zadatka završnog ili diplomskog rada pohraniti.

Administrator ima uvid u podatke koji je mentor predao zadatak te je li student podignuo svoj

zadatak, odnosno predao dovršeni rad.

Za izradu projekta korišteno je znanje stečeno na kolegijima „Razvoj web aplikacija“ i

„Izborni projekt – Razvoj web aplikacija“ te znanje stečeno istražujući.

8

2. Zadatak i zahtjevi

Zadatak za ovaj završni rad bio je razviti web sučelje i bazu podataka na način da se

posao unošenja i voĎenja postupka zadavanja završnih i diplomskih radova pojednostavi. U tom

cilju, ostvarene su sljedeće stavke:

Implementiranje padajuće (engl. drop-down) liste postojećih kolegija prilikom

unosa novog rada

Automatsko dodjeljivanje mentora na temelju odabira sa padajuće liste

Ispis trenutnog opterećenja pojedinog profesora prilikom unosa novog rada

Implementiranje pregleda svih upisanih radova sa podacima o studentu te

informacijama o prvom i drugom odabiru studenta, kao i konačnom dodijeljenom

mentoru odnosno kolegiju

Mogućnost ureĎivanja postojećih radova dvoklikom na stavku u tablici

Mogućnost ažuriranja postojećih radova u smislu promjene podataka koji se

odnose na dostavu zadatka od strane mentora, podizanje zadatka od strane

studenta te predaje rada po dovršetku

Kreiranje jedinstvenih lista dodijeljenih radova pojedinim profesorima sa

mogućnošću upisa konkretnog zadatka od strane mentora te pohrane generiranog

obrasca lokalno i u bazu podataka

Statistika u smislu tablice sa informacijama u kojoj su vidljivi mentori i

odgovarajući studenti za svakog mentora

Unos novog kolegija, brisanje i mijenjanje postojećih - dvoklikom na stavku u

tablici svih kolegija

Automatsko generiranje lozinka za sve mentore

Automatsko kreiranje direktorija za spremanje radova u bazi podataka

9

3. Implementacija i rješenje zahtjeva

3.1. Baza podataka

Budući da je aplikacija namijenjena manjem broju korisnika, sama baza je veoma

jednostavna i sastoji se od tri entiteta: korisnici (users), kolegiji i radovi.

Slika 3.1. ER dijagram baze podataka

10

3.1.1. Korisnici (users)

U ovoj tablici se nalaze korisnici koji su ovlašteni koristiti aplikaciju. Sastoji se od

sljedećih atributa:

id: jedinstvena oznaka za svakog korisnika koja se automatski dodjeljuje od strane

servera

admin: podatak prema kojemu se razlikuju korisnici i administrator, može imati

vrijednost 0 ili 1

email_nositelja: podatak koji se automatski dodijeljuje za svakog mentora iz

tablice kolegiji

password: lozinka koja se automatski generira od strane administratora i to po

uzorku: prvi dio lozinke je e-mail adresa dotičnog mentora do znaka „@“, drugi

dio su četiri slučaja broja

3.1.2. Kolegiji

Ovdje se nalaze svi kolegiji koji se mogu dodijeliti nekom studentu za završni ili

diplomski rad. Tablica se sastoji od sljedećih atributa:

id: jedinstvena oznaka koja se automatski dodjeljuje od strane servera za svaki

kolegij

ime_kolegija: puni naziv kolegija

nositelj_kolegija: puno ime i prezime profesora koji je nositelj kolegija, zajedno

sa pripadnim titulama. Automatski se generira kao spoj varijabli

ime_prezime_nositelja i titule

ime_prezime_nositelja: ime i prezime nositelja kolegija (bez titula)

titula: titula profesora

email_nositelja: e-mail adresa nositelja kolegija

vrsta_kolegija: identifikator prema kojemu se razlikuju kolegiji diplomskog od

kolegija preddiplomskog studija

11

3.1.3. Radovi

Ovo je tablica svih upisanih radova koja se sastoji od sljedećih atributa:

id: jedinstvena oznaka svakog rada koja se automatski dodjeljuje od strane servera

vrsta_kolegija: podatak koji se automatski dodjeljuje iz tablice kolegiji, a na

osnovu odabira kolegija

ime_prezime: ime i prezime studenta na kojeg se rad odnosi

jmbag: jedinstveni podatak za svakog studenta

lok_mat_br: podatak koji se izdaje od strane fakulteta

klas_ozn: punim nazivom klasifikacijska oznaka, podatak koji se izdaje od strane

fakulteta

uru_br: punim nazivom urudžbeni broj, podatak koji se izdaje od strane fakulteta

kolegij1: prvi odabrani kolegij studenta

mentor: pripadni mentor kolegija naznačenog kao prvi izbor

kolegij2: drugi odabrani kolegij studenta

mentor2: pripadni mentor kolegija naznačenog kao drugi izbor

odabrani_kolegij: kolegij koji je dodijeljen studentu za diplomski ili završni rad

od strane administratora

odabrani_mentor: pripadni mentor dodijeljenog kolegija

ch1: podatak je li mentor dostavio zadatak administratoru, može imati vrijednost 0

ili 1

ch2: podatak je li student preuzeo svoj zadatak, može imati vrijednost 0 ili 1

ch3: podatak je li rad dovršen odnosno predan, može imati vrijednost 0 ili 1

12

3.2. Aplikacija

U ovom poglavlju opisuje se sama aplikacija i njene bitne funkcionalnosti.

3.2.1. Unos novog završnog ili diplomskog rada

Unos završnog ili diplomskog rada obrazac je kojeg ispunjava administrator. Izbor

izmeĎu unosa završnog ili diplomskog rada ostvaren je tako što postoji jedna php skripta za unos

završnog, a druga za unos diplomskog rada. Ovdje se unose svi podaci koji odgovaraju

atributima iz tablice „radovi“. Odabir kolegija kao prvog i drugog izbora ostvaren je sa

padajućom listom gdje se prikazuju podaci iz tablice „kolegiji“.

Nakon što se odaberu prvi i drugi izbor kolegija, automatski se prikažu pripadni nositelji

kolegija. To je ostvareno Ajax JavaScript tehnologijom u funkciji showUser(), koja uzima

podatak odabranog mentora sa padajuće liste (koristeći identifikator) te šalje taj podatak GET

metodom skripti get_user.php koja na temelju dohvaćenog podatka o kolegiju, vraća

odgovarajućeg nositelja kolegija tj. mentora. Funkcija showUser() (slika 3.2.) podatak koji je

dobila šalje objektu na istoj stranici, ponovno koristeći identifikator.

Koji će od navedenih kolegija biti dodjeljen studentu, vrši se putem „radio-buttona“.

Postoji mogućnost unosa podatka je li mentor dostavio zadatak, je li student preuzo svoj zadatak,

te je li zadatak predan tj. dovršen. To je ostvareno „checkbox“ objektima.

Na istoj stranici nalazi se statistika za svakog profesora u kojoj je vidljivo koji profesor

ima koliko već upisanih radova tj. studenata kojima je mentor. To uvelike olakšava posao

administratora pri izboru koji će odabir biti dodijeljen studentu jer u svakom trenutku ima uvid u

opterećenje pojedinog profesora. Ako se radi o unosu završnog rada, bit će izlistani nositelji

kolegija preddiplomskog studija, a analogno tome, ako se radi o unosu diplomskog rada, bit će

izlistani nositelji kolegija diplomskog studija.

13

Unos novih radova dostupan je samo administratoru aplikacije.

3.2.2. Pregled radova

U odabiru pregled, moguće je birati prikaz završnih ili diplomskih radova. U njemu je

vidljiva tablica sa svim upisanim studentima i sa svim pripadnim unosima za svakog studenta

(podaci koji su unešeni u unosu novog završnog ili diplomskog rada). Svi podaci ovdje vidljivi

mogu se brzo i lako editirati dvoklikom na odreĎenu stavku, pri čemu odabrana ćelija tablice

poprima klasu „cellEditing“ i u njoj se pojavljuje „text“ objekt u kojem je već unešena stara

vrijednost ćelije. Nakon željenih promjena, pritiskom na tipku „enter“ podaci se spremaju u bazu

podataka u tablicu „radovi“.

To je ostvareno upotrebom jQuery biblioteke unutar JavaScript-a (slika 3.3.) koja na klik

korisnika u odreĎenu ćeliju tablice pronalazi roditeljsku ćeliju reda u kojem se odabrana ćelija

nalazi (u ovom slučaju jmbag studenta), njenu vrijednost sprema u varijablu „row“, pronalazi

Slika 3.2. Programski kod 1: Funkcija showUser

14

roditeljsku ćeliju stupca u kojem se ćelija nalazi (u ovom slučaju atribut u bazi) te i nju sprema u

varijablu „column“.

Dvoklikom na ćeliju, ona se može ureĎivati. Pritiskom na tipku „enter“ nova unešena

vrijednost se prema u varijablu „newContent“ te se, zajedno sa varijablama „row“ i „column“

šalje skripti update_table.php. Skripta update_table.php dohvaća podatke GET metodom te ih

sprema u bazu.

Pregled radova bilo završnih, bilo diplomskih, dostupan je samo administratoru

aplikacije.

Ovakva funkcionalnost čini posao ureĎivanja i ažuriranja podataka o radovima brzim i

jednostavnim, što je jedan od osnovnih zahtjeva ove aplikacije.

Slika 3.3. Programski kod 2: jQuery funkcija

15

3.2.3. Liste završnih / diplomskih radova

Pod listama završnih ili diplomskih radova vidljivi su osnovni podaci o studentima,

njihovim mentorima, te činjenici je li mentor dostavio zadatak. U slučaju da mentor nije još

upisao zadatke svojim studentima, pored gore navedenog nalazi se gumb „Dodaj zadatak“.

Klikom na navedeni gumb, pojavljuje se sučelje u kojem je vidljiva informacija o kojem se

studentu radi, te postoji forma za upis naslova zadatka i sadržaja zadatka. Upisom zadatka,

podaci koji su unešeni spremaju se u word predložak koji služi kao osnovna forma za zadavanje

zadatka završnog ili diplomskog rada. Takva se forma sprema u bazu podataka, a u zavisnosti

koja je trenutno godina i je li riječ o završnom ili diplomskom radu, kreira se novi direktorij koji

u nazivu sadrži aktualnu godinu u kojoj se radovi unose, te skraćenicu po kojoj se indicira radi li

se o završnom ili diplomskom radu. Ako direktorij već postoji, zapis se sprema u njega.

Ako je zadatak unešen, pojavljuje se pored guma „Dodaj zadatak“ gumb „docx“ i gumb

„PDF“, a klikom na njih, postojeći word dokument ili PDF se može pohraniti lokalno na

računalo s kojeg mentor ili administrator pristupa aplikaciji. Pošto ne postoje unaprijed ugraĎene

naredbe niti interne funkcije da se php datoteka pretvori u docx dokument na bilo kakav način,

ovdje je ta funkcionalnost ostvarena dodavanjem „PHPWord“ knjižnice koja je preuzeta sa

interneta, te je prilagoĎena i doraĎena za ovu aplikaciju. Za generiranje PDF formata zapisa,

korištena je biblioteka „fpdf“, takoĎer prilagoĎena i dostupna na internetu za slobodnu upotrebu.

Time se omogućava jednostavno zadavanje zadataka svim studentima, dok se generirani

word dokumenti lako mogu spremiti, potom i mijenjati. Ovim načinom smanjeno je vrijeme koje

je potrebno mentorima za unos zadataka, a vrijeme dostave zadataka administratoru od strane

mentora svedeno je na minimum.

Ako je korisnik koji se je prijavljen u aplikaciju mentor, u prikazu liste radova, njemu su

vidljivi samo studenti kojima je on mentor. Ako je taj korisnik administrator, njemu su vidljivi

svi upisani studenti sa svim mentorima.

16

3.2.4. Mentorske liste

Pod ovim prikazom pojavljuje se tablica svih nositelja kolegija, te se može vidjeti koliko

koji profesor ima studenata kojima je mentor, posebno za preddiplomski, a posebno za diplomski

studij. TakoĎer se vidi ukupan broj studenata kojima je pojedini profesor mentor (preddiplomski

i diplomski studij).

Ovime je omogućen jednostavan pregled opterećenja za svakog profesora. Prikaz

informacija za pojedini studij i ukupno, olakšava administratoru praćenje gore navedenih,

statističkih podataka, a time i posao dodijeljivanja mentora studentima.

Mentorske liste vidljive su svim korisnicima, bez obzira je li korisnik administrator ili

nije, što omogućuje i mentorima da prate svoje pojedinačno opterećenje u sklopu mentoriranja na

završnim ili diplomskim radovima.

3.2.5. Statistika

Pod statistikom omogućen je uvid u to koji mentor ima koje studente dodijeljene za

završne ili diplomske radove. To je ostvareno dvjema tablicama, jednom za završne, a drugom za

diplomske radove. Tablice su organizirane tako da je prva ćelija svakog stupca ime pojedinog

profesora, a sve ćelije istog stupca u redovima ispod su imena studenata kojima je dotični

profesor mentor.

Ovakav ispis zapisa iz baze ostvaren je na način da se prvo uzimaju zapisi iz baze koji su

sortirani po mentoru, a zatim studentu. Ovako organizirani podaci (prvi podatak mentor, a potom

njegov student) zapisuju se u polje koje je organizirano tako da se u njega upišu svi postojeći

mentori, potom se upisuju studenti za svakog mentora do broja koji odgovara veličini polja, a to

je broj postojećih mentora izlistanih u prethodnom koraku. Ako u nekom redu više ne postoje

studenti dodijeljeni nekom mentoru, ne upisuje se ništa, ali se nastavlja brojati i ne upisivati ništa

do broja koji odgovara veličini polja. Nakon toga se u tablici u prvom redu ispisuju svi postojeći

mentori (do veličine polja – broja mentora), potom kao i u gore navedenom polju, po redovima

za svakog mentora, do broja puta koji je jednak veličini polja. Ako za nekog mentora ne postoji

17

zapis u polju(u prethodnom koraku upisano je ništa), u ćeliju se ne upisuje ništa i preskače se na

drugu ćeliju u istom redu.

Ovo uvelike olakšava jednostavan pregled mentorima koje sve studente imaju za

diplomske ili završne radove, ali omogućuje i administratoru dodatnu provjeru i praćenje

podataka za svakog mentora. Ovo ukazuje da je statistika dostupna svim korisnicima bez obzira

je li korisnik administrator ili nije.

3.2.6. Postavke

Pod postavkama mogu se naći informacije bitne za samu strukturu aplikacije i svi podaci

koji se mogu mijenjati. Ovdje spadaju tablica kolegija, obrazac za upis novog kolegija, tablica

postojećih korisnika, tablica administratora i forma za brisanje svih radova iz baze podataka.

3.2.6.1. Tablica kolegija

Pod postavka u tablici kolegija vidljivi su svi kolegiji upisani u bazu podataka. Svi

atributi iz tablice „kolegiji“ prikazani su u ovoj tablici. Tablicu kolegija moguće je ureĎivati na

isti način kao i tablicu pregleda radova (str. 14.), dvoklikom na odreĎenu ćeliju. Ovo je jako

korisno administratoru pri promjeni titule odreĎenog profesora, primjerice, ili pri promjeni

nositelja odreĎenog kolegija. Ako je riječ o ureĎivanju odnosno mijenjanju titule profesora,

promjena se primjenjuje u svim zapisima tablice, a ne samo u odabranoj ćeliji.

Pored mogućnosti mijenjanja svih postojećih kolegija, postoji i mogućnost brisanja

odreĎenih kolegija pritiskom na gumb „X“ koji se nalazi uz svaki zapis.

18

3.2.6.2. Upis novog kolegija

Pod postavkama takoĎer je dostupnan obrazac za upis novog kolegija koji zahtijeva unos

podataka: naziv kolegija, ime i prezime nositelja, titula nositelja, e-mail adresa nositelja i odabir

je li kolegij preddiplomskog ili diplomskog studija

3.2.6.3. Tablica korisnika

U tablici korisnika moguće je vidjeti koji korisnik ima koju dodijeljenu lozinku, a postoji

mogućnost brisanja svih lozinki, kao i generiranja novih lozinki po uzorku. Prvi dio lozinke je

e-mail adresa dotičnog mentora do znaka „@“, drugi dio su četiri slučajno generirana broja. U

slučaju da se generiraju nove lozinke, postojeće se brišu.

3.2.6.4. Tablica administratora

U ovoj tablici vidljivi su svi administratori i njihove lozinke. Moguće je mijenjati e-mail

adrese administratora kao i pripadne lozinke dvoklikom na ćeliju kao i kod pregleda radova (str.

14.).

3.2.6.5. Forma za brisanje radova iz baze

Ova forma omogućuje brzo brisanje svih radova iz baze podataka, što može poslužiti

administratoru ako želi izbrisati sve radove pri dodavanju novih, ako su recimo, u bazi podataka,

radovi prijašnje godine. Radovi zapisani u docx i PDF formatu u bazi se time ne brišu.

19

3.3. Validacije

Validacije imaju bitnu ulogu kod očuvanja integriteta i stabilnosti same aplikacije i

pripadne baze podataka. Neke od validacija (ponajviše kod unosa podataka) ostvarene su

„HTML 5 pattern“ značajkama (slika 3.4.). Funkcioniraju na način da se pri deklariranju vrste

objekta unutar obrasca doda opcija „required“ ako želimo naglasiti kako je unos u odreĎeno polje

obavezan, meĎutim može se upotrijebiti i opcija „pattern“ ako želimo definirati i ograničenja pri

unosu znakova od strane korisnika u formu.

Validacije koje se odnose na postavke i služe da se potvrdi namjera korisnika, ostvarene

su JavaScript confirm funkcijama (automatski se pojavljuje skočni prozor u obliku „dialog box-

a“ sa dvije opcije; potvrdi ili odustani) .

Slika 3.4. Programski kod 3: Required i pattern značajke HTML 5

20

3.3.1 Unos završnog ili diplomskog rada

Pri unosu završnog ili diplomskog rada postoje sljedeće validacije:

Obavezan unos samo slova u objekt „Ime i prezime“

Obavezan unos samo deset brojeva u objekt „JMBAG“

Obavezan unos u objekt „LOK. MAT. BR.“

Obavezan unos u objekt „Klasifikacijska oznaka“

Obavezan unos u objekt „Urudžbeni broj“

Obavezan odabir na padajućoj listi u objektu „Prvi odabir“

Obavezan odabir u objektu PRVI IZBOR/DRUGI IZBOR

3.3.2. Postavke

Pri mijenjanju postojećih podataka ili brisanju zapisa implementirane su sljedeće

validacije:

Pri pokušaju brisanja zapisa iz tablice „kolegiji“ potrebna potvrda ili odustajanje

ostvareno putem JavaScript dialog box-a

Pri pokušaju brisanja svih lozinki potrebna potvrda ili odustajanje ostvareno

putem JavaScript dialog box-a (samo ako u bazi ima spremljenih lozinki)

Pri pokušaju generiranja novih lozinki potrebna potvrda ili odustajanje ostvareno

putem JavaScript dialog box-a (samo ako u bazi već postoje lozinke)

Pri pokušaju brisanja zapisa iz tablice „radovi“ potrebna potvrda ili odustajanje

ostvareno putem JavaScript dialog box-a

21

Pri unosu novog kolegija implementirane su sljedeće validacije:

Obavezan unos u objekt „Naziv kolegija“

Obavezan unos u objekt „Titula nositelja“

Obavezan unos u objekt „Ime i prezime nositelja“

Obavezan e-mail tip unosa podatka u objekt („E-mail nositelja“)

Obavezan odabir sa padajuće liste u objektu „Razina studija“

3.3.3. Unos zadatka završnog ili diplomskog rada

Pri unosu zadatka za završni ili diplomski rad od strane mentora, implementirane su

sljedeće validacije:

Obavezan unos samo velikih štampanih slova u objektu „Naslov zadatka“

Obavezan unos samo velikih štampanih slova u objektu „Thesis title“

Obavezan unos u objekt „Sadržaj zadatka“

22

4. Alati i tehnologije izrade

4.1. Alati

Za potrebe završnog rada korišteni su sljedeći alati:

„WAMPServer“[3], okruženje za razvoj web stranica na Windows operacijskom sustavu

bazirano na Apache-u, PHP-u i MySQL-u. Omogućuje kreiranje web stranica u PHP-u i

MySQL, a budući da su to tehnologije koje su se koristile za izradu ovog projekta te je

preuzimanje programa besplatno, za projekt je korišten WAMPServer. Kada se ova web

aplikacija bude pokretala, preporuka je da se to izvrši uz pomoć WAMPServera jer je na njemu

raĎena i testirana te se vrti optimalno. Spomenuti alat takoĎer sadržava i alat PhpMyAdmin.

„PhpMyAdmin“[4], program napisan u PHP-u, a koristi se za laganu i brzu

administraciju MySQLa (baza podataka) preko web stranice.

„Notepad++“[5] je besplatan ureĎivač (engl. editor) izvornog koda koji podržava

nekoliko jezika. Podržava rad u kraticama (engl. tabs) što uvelike olakšava kreiranje web

stranica iz razloga što često razne PHP datoteke komuniciraju meĎusobno te je potrebno

višestruko prebacivanje sa jedne datoteke na drugu kako bi se povezale i kako bi se omogućila

njihova komunikacija. Notepad++ je takoĎer besplatan za preuzimanje.

„Mozilla Firefox“[6] i „Google Chrome“[7] su internet pretraživači u kojima je testirana i

pokretana web aplikacija.

„draw.io“[8], besplatni online alat za crtanje dijagrama i tokova rada (engl. workflow).

Korišten je za izradu ER-dijagrama.

23

4.2. Tehnologije

Za potrebe završnog rada korištene su sljedeće tehnologije:

„PHP Hypertext Preprocessor“ (PHP) [9], poslužiteljski skriptni jezik koji se koristi za

izradu web aplikacija. Lako se kombinira sa HTML kodom i služi za dinamičko generiranje

stranica. Kada korisnik odabere odreĎenu opciju za prikaz na stranici, PHP skripta na

poslužitelju napravi odreĎeni zadatak te se korisniku na njegov web preglednik vraća samo

HTML kod izgeneriran na poslužitelju uz pomoć PHP-a. Krajnji korisnici nemaju uvid u PHP

dio web aplikacija.

„HyperText Markup Language“ (HTML) [10] je markup jezik za opisivanje i kreiranje

web stranica. On sačinjava osnovnu strukturu i dizajn svih internet stranica. Sastoji se od oznaka

(engl. tags) koje služe kako bi se označili, razlikovali i time oblikovali djelovi stranice koju web

preglednik otvara. Web preglednik ne prikazuje sam HTML i njegove tagove nego ih koristi

kako bi prikazao pravi sadržaj stranice. Uz pomoć HTML-a se mogu prikazati razni sadržaju

poput slika, tekstova, videa, poveznica (engl. link), tablica ili čak formulara (engl. form) sa

kojima korisnik može vršiti interakciju, uz pomoć PHP-a, kao što je opisano iznad.

„Cascading Style Sheets“ (CSS)[11] je jezik koji se koristi za dizajn i izgled web

stranica pisanih u HTML-u. Budući da HTML ima ograničene sposobnosti oblikovanja stranica,

gotovo je nemoguće napraviti web stranicu bez korištenja CSS-a. Uz pomoć CSS-a se odvaja

sadržaj stranice od izgleda stranice te je jedan sadržaj stranice moguće prikazati u neograničeno

mnogo različitih izgleda. Postoje tri različita korištenja CSS-a „External“, „Embeded“ i „Inline“.

„MySQLi“[12] (engl. SQL- Structured Query Language, SQLi – SQL Improved), sistem

za upravljanje relacijskim bazama podataka. Baza podataka za ovaj rad je napravljena u

MySQLi-u iz razloga što se MySQLi vrlo jednostavno implementira sa PHP-om i imaju jako

dobro razraĎenu i jednostavnu komunikaciju izmeĎu naredbi. U MySQLi-u se podaci sortiraju u

tablice, svaki redak u tablici je jedan zapis, a svaki stupac u tablici je atribut tog zapisa.

„JavaScript“[13] je dinamični programski jezik koji se koristi za web stranice,

kompjuterske programe, programe za pametne telefone, tablete, laptope te razne ureĎaje. Najširu

24

primjenu našao je upravo u web stranicama iz razloga što dopušta kreiranje skripti (malih

programa) koji će se odraĎivati kod korisnika te time smanjuje posao poslužitelju. Uz pomoć tih

skripti može kontrolirati rad internet pretraživača, vršiti interakciju sa korisnikom, i mijenjati

dokumente koji su prikazani (bez da se ponovno šalje zahtjev na poslužitelja). U ovom projektu

je tehnologija JavaScript-a pretežno korištena za validacije, provjere te dinamičko mijenjanje

obrazaca bez da se stranica ponovno učitava.

„Asynchronous JavaScript and XML“ (Ajax) [14] je skup tehnologija za web-razvoj koje

se provode na klijentskoj strani. Njime se omogućuje slanje i primanje podataka prema serveru,

ali u pozadini, tako da se stranica pritom ne učitava ponovno. Primanje podataka se ostvaruje

koristeći XMLHttpRequest objektom. Koristi se u kombinaciji sa HTML – om i CSS – om za

učinkovitiju primjenu.

„jQuery“ [15] je JavaScript knjižnica smišljena da pojednostavi programiranje na

klijentskoj strani, a danas je najkorištenija JavaScript knjižnica. Sintaksa je tako osmišljena da

pojednostavljuje interakciju sa DOM elementima, stvaranje animacija te upravljanje dogaĎajima

(engl. events). TakoĎer omogućava nadogradnju postojeće knjižnice, a sve to u cilju kreiranja

mogućnosti stvaranja moćnih i dinamičnih web aplikacija.

25

5. Instalacija i pokretanje aplikacije

Za instalaciju i pokretanje aplikacije potrebno je imati program poput WAMPServer-a

koji će obraĎivati PHP kod i povezivati aplikaciju sa bazom podataka. Osim takvog programa,

potreban je i internet pretraživač u kojem će se aplikacija prikazivati.

Aplikaciju je potrebno kopirati u www direktorij u datoteci WAMPServer-a. Zatim je potrebno

pokrenuti WAMPServer, a početnoj stranici se pristupa tako da se u internet pretraživač upiše

localhost/zavrsni_diplomski/login.php

Bazu podataka racunarstvo_db.sql je potrebno uvest (engl. import) u PhpMyAdminu.

Cjelokupna aplikacija i baza podataka nalaze se na CD-u priloženom ovom radu.

Detaljne upute za pokretanje aplikacije i spajanje na aplikaciju nalaze se u dokumentu

„README.txt“ na CD-u.

26

6. Primjeri rada i korištenja aplikacije

6.1. Početna stranica

Prva stranica ove aplikacije je login.php i na njoj se vrši upis dodijeljene lozinke u, za to,

predviĎeno mjesto (slika 6.1.).

Slika 6.1. Početna stranica - login.php

27

6.2. Unos završnog / diplomskog rada

Na ovo stranici se upisuju završni ili diplomski radovi, a u zavisnosti što se odabere u

izborniku na vrhu. U središtu stranice se nalazi obrazac za upis (slika 6.2.), dok je sa lijeve strane

smješten statistički dio opterećenosti za svakog profesora. Pritiskom na „UPIŠI“ obrazac se

sprema u bazu i stranica se ponovno učitava.

Slika 6.2. Obrazac za upis

28

6.3. Pregled radova

Ovdje se nalaze svi radovi upisani u bazu podataka, a u ovisnosti što se odabere u

izborniku iznad, pojavljuju se završni, odnosno diplomski radovi (slika 6.3.). Svaku ćeliju je

moguće ureĎivati dvoklikom na istu. Unešeni sadržaj se sprema pritiskom na tipku „enter“.

Slika 6.3. Pregled diplomskih radova

6.4 Uređivanje ćelije

29

6.4. Liste završnih / diplomskih radova

Ovdje se nalaze izlistani radovi, a u ovisnosti o prijavljenom korisniku. Ako je korisnik

ujedno i administrator, pojavljuju se svi upisani radovi (slučaj na slici 6.4.). Pritiskom na gumb

„Dodaj zadatak“ korisnik se preusmjerava na unos_rada.php (slika 6.6.). Ako nema upisanih

zadataka u bazi, nema potvrde da je mentor dostavio zadatak, niti se pojavljuju gumbovi „docx“ i

„pdf“ (slika 6.5.). Ako je zadatak upisan, klikom na navedene rad se sprema u već odabranom

formatu lokalno.

Slika 6.5. Diplomski radovi za određenog korisnika

Slika 6.6. Prikaz gumbova

30

6.5.Mentorske liste

Ovdje su vidljivi svi mentori i broj radova koje imaju upisane.

Slika 6.7. Obrazac za dodavanje zadatka

Slika 6.8. Liste mentora i upisanih radova

31

6.6. Statistika

Pod statistikom se prikazuju mentori, dok su u stupcu ispod njih redom izlistani studenti

kojima su dotični profesori, mentori. Ovo olakšava preglednost svakom mentoru za svoje

studente.

Slika 6.9. Statistika mentora

32

6.7. Postavke

Pod postavkama moguće je mijenjati podatke o postojećim kolegijima, brisati ih,

dodavati nove kolegije, obrisati sve lozinke i generirati nove. Moguće je, takoĎer, promijeniti

lozinku administratora i obrisati sve radove u bazi. Ovome ima pristup samo administrator.

Slika 6.10. Postavke

33

6.8. Izgled izbornika

Ovako izgleda izbornik koji se nalazi pri vrhu svake stranice (slika 6.10.). Na prijelaz

pokazivača (engl. mouse), pojavljuju se opcije za svaku stavku.

Slika 6.11. Primjer funkcioniranja izbornika

34

7. Zaključak

Projektirajući ovu web aplikaciju moje znanje o razvoju web aplikacija se jako proširilo.

Ponajviše glede korištenja JavaScript jezika i pripadnih funkcionalnosti i biblioteka. Bilo je i

nužno prilagoditi naučeno znanje i informacije iz područja PHP-a i MySQLi-a zbog promjene u

sintaksi koje su uvedene u MySQLi upitni jezik, a čija je upotreba nužna za korištenje PHP

skriptnog jezika 5.0 ili novijih verzija. Osobno se namjeravam baviti web aplikacijama i u

daljnjem obrazovanju kao i u slobodno vrijeme.

Prema zadanom zadatku, u aplikaciju su implementirani svi zahtjevi koji su bili

postavljeni. Za poboljšanja, kao i uvijek, ima mjesta ponajprije kod unosa novog rada. Na

primjer, može se poboljšati interaktivnost na način da se pritiskom na prvi ili drugi odabir, u

kratkom prikazu statistike pojedinih mentora sa brojem radova, dinamički nadoda rad (a u

ovisnosti o mijenjanju prvog i drugog izbora da se i on mijenja) i da bude lako uočljiv

administratoru. TakoĎer se može, a radi bolje preglednosti i lakše kontrole, uvesti dinamičko

sortiranje klikom na odreĎeni stupac u pregledu radova. Može se uvesti automatsko slanje

obavijesti pojedinim mentorima sa poveznicom na stranicu i podacima neophodnim za prijavu na

stranicu.

35

8. Literatura

[1] Nations, D. i dr.,“Web Appplications“, internet stranica:

http://en.wikipedia.org/wiki/Web_application, siječanj 2014.

[2] ER Model, internet stranica: https://www.draw.io/#LUntitled%20Diagram.xml, 25. svibanja

2015.

[3] WAMPServer, internet stranica: http://www.wampserver.com/en/, 25. svibnja 2015.

[4] PhpMyAdmin, internet stranica: http://www.phpmyadmin.net/home_page/index.php, 25.

svibnja 2015.

[5] Notepad++, internet stranica: http://notepad-plus-plus.org/, 25. svibnja 2015.

[6] Mozilla Firefox, internet stranica: http://en.wikipedia.org/wiki/Firefox, 25. svibnja 2015.

[7] Google Chrome, internet stranica: http://en.wikipedia.org/wiki/Google_Chrome, 25. svibnja

2015.

[8] draw.io, internet stranica: https://www.draw.io/, 25. svibnja 2015.

[9] PHP: What is PHP?, internet stranica: http://php.net/manual/en/intro-whatis.php, 25. svibnja

2015.

[10] HTML Introduction, internet stranica: http://www.w3schools.com/html/html_intro.asp, 25.

svibnja 2015.

[11] CSS, internet stranica: http://en.wikipedia.org/wiki/Cascading_Style_Sheets, 25. svibnja

2015.

[12] MySQLi Wikipedia, internet stranica: http://en.wikipedia.org/wiki/MySQLi, 11. kolovoza

2014.

[13] JavaScript Introduction, internet stranica: http://www.w3schools.com/js/js_intro.asp, 25.

svibnja 2015.

36

[14] Garrett, J.J. i dr., „ Ajax“ Wikipedia, internet stranica:

http://en.wikipedia.org/wiki/Ajax_%28programming%29, 25. svibnja 2015.

[15] jQuery Wikipedia, internet stranica: http://en.wikipedia.org/wiki/JQuery, 25. svibnja 2015.

37

9. Prilozi

Slika 3.1 ER dijagram baze podataka ............................................................................................. 9

Slika 3.2 Programski kod 1: Funkcija showUser .......................................................................... 13

Slika 3.3 Programski kod 2: jQuery funkcija................................................................................ 14

Slika 3.4 Programski kod 3: Required i pattern značajke HTML 5.............................................. 19

Slika 6.1 Početna stranica - login.php ........................................................................................... 26

Slika 2.2 Obrazac za upis .............................................................................................................. 27

Slika 6.3 Pregled diplomskih radova ............................................................................................ 28

Slika 6.4 UreĎivanje ćelije ............................................................................................................ 28

Slika 6.5 Primjer funkcioniranja izbornika ................................................................................... 29

Slika 6.6 Prikaz gumbova ............................................................................................................. 29

Slika 6.7 Obrazac za dodavanje zadatka ....................................................................................... 30

Slika 6.8 Liste mentora i upisanih radova ..................................................................................... 30

Slika 6.9 Statistika mentora .......................................................................................................... 31

Slika 6.10 Postavke ....................................................................................................................... 32

Slika 6.11 Primjer funkcioniranja izbornika ................................................................................. 33