SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Preddiplomski sveučilišni studij računarstva

Završni rad

WEB APLIKACIJA ZA IZRADU ŽIVOTOPISA

Rijeka, srpanj 2015. Ivan Bošković Pavković

0069053058

SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Preddiplomski sveučilišni studij računarstva

Završni rad

WEB APLIKACIJA ZA IZRADU ŽIVOTOPISA

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

Rijeka, srpanj 2015. Ivan Bošković Pavković

0069053058

SADRŽAJ

1. UVOD……………………………………….………………………………………....1

2. ALATI I TEHNOLOGIJE…..…………………………………………………………2

3. POSTAVLJANJE WEB APLICKAIJE.……………………………………………….3

3.1. Online radno okruženje………………………………………...………………….3

3.2. Lokalno radno okruženje…………………………………………………………..3

4. ULOGA KORISNIKA U APLIKACIJI..........................................................................4

5. OPIS SUSTAVA WEB APLIKACIJE…………………………………......………….5

5.1. Tab – Početna……………………………………………………………………...5

5.1.1. Kontakt……………………………………………………………………..6

5.2. Tab – Prijava……………………………………………………………………....7

5.2.1. Registracija…………………………………………………………………8

5.2.2. Oporavak lozinke………………………………………………………....10

5.3. Tab – Admin panel...……………………………………………………………..11

5.4. Odjava……………………………………………………………………………11

6. KORISNIČKO SUČELJE................………………………………………………….12

6.1. Dodaj kategoriju………………………………………………………………….13

6.2. Obriši kategoriju………………………………………………………………….14

6.3. Kreiraj CV………………………………………………………………………..15

6.4. Uredi CV…………………………………………………………………………18

6.5. PDF ispis…………………………………………………………………………21

6.6. Uredi profil……………………………………………………………………….23

7. BAZA PODATAKA………………………………………………….………………25

8. ZAKLJUČAK………………………............……………..………………………….26

LITERATURA………………………...………………………………………………….27

1

1. UVOD

Web aplikacija za izradu životopisa je aplikacija čija je uloga omogućiti vlasniku izradu

potpuno osobnog i prilagodljivog životopisa, kako i omogućiti ostalim korisnicima da izrađuju

svoje životopise, također prilagodljive, ali u okvirima koje zadaje vlasnik aplikacije.

Dok se aplikaciji može pristupiti s tri stajališta, odnosno iz stajališta posjetitelja, stajališta

korisnika i stajališta administratora, ona je primarno namijenjena za vlasnika, koji ima potpunu

kontrolu nad izradom svojeg životopisa. Vlasnik proizvoljno stvara kategorije od kojih će se

životopis sastojati i određuje što će te kategorije sadržavati, te isto tako ima ovlast i mogućnost

brisanja istih. Korisnik i administrator imaju mogućnost izrade životopisa po kategorijama koje

dodaje administrator i njegovo uređivanje po volji, u što spada popunjavanje kategorija, pomicanje

kategorija i sadržaja unutar kategorija po želji, vidljivost kategorija, brisanje i uređivanje sadržaja

unutar kategorija te na kraju ispis kreiranog životopisa u PDF formatu. Posjetitelj ima samo

mogućnost pregleda početne stranice, kontaktiranja vlasnika i registriranja. Nakon registriranja i

prijavljivanja, posjetitelj postaje korisnik i može krenuti u izradu svog životopisa.

U radu će detaljno biti opisana struktura web aplikacije i sve mogućnosti koje pruža. Biti će

opisane tehnologije i alati korišteni za izradu ove web aplikacije kao i analiza baze podataka koju

aplikacija koristi.

2

2. ALATI I TEHNOLOGIJE

Za izradu same strukture web aplikacije korišten je HTML5 [1]. Za poslužiteljsku stranu

web aplikacije korišten je PHP programski jezik [2]. Tehnika AJAX [3], knjižnica jQuery [4] i

dinamički programski jezik JavaScript [5] korišteni su za klijentsku stranu aplikacije, odnosno za

dinamičko osvježavanje i rad na aplikaciji. MySQL [6] jezik pozivan od strane PHP-a korišten je

za pristup odgovarajućoj bazi podataka koja se dinamički širi i sužuje, ovisno o potrebama vlasnika

aplikacije. PHP knjižnica HTML2PDF [7] korištena je za ispis podataka u PDF formatu, a izrađena

je s PHP kodom. U konačnici, CCS stilski jezik [8] korišten je za dizajn stranice.

Notepad++ [9] korišten je za izradu same aplikacije, odnosno pisanja svih skripti. Baza podataka

izrađena je u MySQL-u a dodatno se njome upravlja s PHP skriptama preko korisničkog sučelja

same stranice. Kako bi se aplikacija podigla u lokalnom radnom okruženju korišten je WAMP

poslužitelj [10]. Pored autorskog koda, aplikacija sadrži i izvorni i modificirani otvoreni kod, kako

bi se pospješio dio dizajna i funkcionalnosti stranice. Ostali elementi dizajna dobiveni su uz pomoć

raznih stranica za generiranje CSS-a [11].

3

3. POSTAVLJANJE WEB APLIKACIJE

Web aplikacija može se koristiti za vlastitu uporabu na lokalnom radnom okruženju ili kao

sustav za izradu životopisa s potencijalno više korisnika. Aplikacija je napravljena upravo s

drugom, odnosno „online“ verzijom na umu. U lokalnome okruženju, neke opcije poput kontakta

vlasnika ili oporavka lozinke neće funkcionirati.

3.1. Online radno okruženje

Kao prvi korak postavljanja aplikacije potrebno je otpakirati datoteku „cv.zip“ te

otpakirane podatke prebaciti na web poslužitelj. Zatim je potrebno pristupiti stranici

„PhpMyAdmin“ i u tome sučelju potrebno je stvoriti novu bazu podataka nazvanu „cv“ te zatim u

novonastalu bazu uvesti datoteku „cv.sql“, koja se nalazi u otpakiranoj datoteci. Svaki poslužitelj

zahtjeva unos autorizacijskih podataka koji služe za povezivanje sučelja „PhpMyAdmin“, preko

kojeg direktno upravljamo s podacima u bazi. Navedene autorizacijske podatke potrebno je

ažurirati u skripti „baza.php“ koja služi za globalno povezivanje na bazu. Pomoću web pretražnika

upisuje se adresa „<adresa poslužitelja>“ te se time web aplikacija pokreće. Za vlasnika, korisnik

imena „admin“ s administratorskim ovlastima već je u bazi, a lozinka za prijavu je „admin“.

3.2. Lokalno radno okruženje

Kao prvi korak postavljanja aplikacije potrebno je imati instaliran i aktiviran WAMP

lokalni poslužitelj. Nakon toga, potrebno je izvršiti otpakiranje datoteke „cv.zip“ u mapu

„/wamp/www/“. Zatim je u web pregledniku potrebno unijeti „localhost“ i na novootvorenom

korisničkom sučelju odabrati „phpmyadmin“, odnosno sučelje za kreiranje i upravljanje MYSQL

bazama podatka. U tome sučelju potrebno je stvoriti novu bazu podataka nazvanu „cv“ i zatim u

novonastalu bazu uvesti datoteku „cv.sql“ koja se nalazi u otpakiranoj datoteci „/wamp/www/cv/“.

U konačnici, za pokretanje web aplikacije, u web pregledniku potrebno je upisati „localhost/cv/“

te započeti s radom. Nakon registriranja novog korisnika potrebno je ručno u bazi podatka

izmijeniti ovlast za novonastalog korisnika u „admin“ ili se logirati sa zadanim korisničkim

podacima za administratora s korisničkim imenom „admin“ i lozinkom „admin“.

4

4. ULOGA KORISNIKA U APLIKACIJI

Aplikaciji pristupaju tri različite kategorije korisnika. Administrator, odnosno vlasnik,

registrirani korisnik i posjetitelj. Razlika među tim korisnicama je u ovlastima koje imaju.

Administrator, odnosno vlasnik, ima potpunu kontrolu nad izradom svojeg životopisa u pogledu

da upravo on i jedino on ima ovlast i mogućnost stvaranja te brisanja novih kategorija životopisa.

Registrirani korisnik, odnosno korisnik koji je prošao registraciju i ima svoje podatke pohranjene

u bazi podataka, kao i vlasnik ima ovlast i mogućnost stvaranja svojeg životopisa nakon što se

prijavi, s time da je kardinalna razlika da registrirani korisnik može unositi podatke samo u

kategorije zadane od strane vlasnika te nema mogućnost dodavanja proizvoljnih kategorija, no kao

i vlasnik ima mogućnost odabira želi li zadane kategorije prikazati na ispisu životopisa ili ne.

Posjetitelj je korisnik, odnosno osoba, koja vrši samo pregledavanje web aplikacije te nema pristup

korisničkom panelu, odnosno stvaranju životopisa. Posjetitelj ima opciju slanja upita vlasniku,

opciju registriranja kako bi postao registrirani korisnik i opciju prijavljivanja u sustav, u slučaju

da je već registriran.

5

5. OPIS SUSTAVA WEB APLIKACIJE

Pri otvaranju web aplikacije korisniku, u ovome slučaju posjetitelju, prikazuje se web

sučelje (Sl. 5.1.) s opisom aplikacije kao i alatna, tj. navigacijska traka, koja uz logo stranice sadrži

i tabove „Početna“, „Kontakt“ te „Prijava“. Ukoliko je korisnik prijavljen kao registrirani korisnik

ili administrator (Sl. 5.2.), navigacijska traka, osim taba „Početne“ i „Kontakt“, prikazuje tab

„Admin panel“ te tipku „Odjava“.

Kako bi se izbjeglo ponovno učitavanje cijele stranice, sadržaj navigacijske trake i podnožje web

aplikacije nalazi se unutar skripte „indeks.php“ u kojoj se nalaze funkcije i skripte potrebne za

puni prikaz web stranice. Unutar „<body>“ elementa nalazi se PHP kod koji uz pomoć uvjeta

„ako“ učitava i uključuje potrebne skripte kako bi se prikazao željeni tab bez ponovnog učitavanja

cijele stranice. To se postiže preko GET [12] metode, kojom šaljemo željene podatke u provjeru

prilikom odabira željenog taba.

5.1. Tab – Početna

Početna stranica, odnosno tab „Početna“ sastoji se, kao i sve stranice unutar aplikacije, od

navigacijske trake u zaglavlju, podnožja te glavnog dijela koji se prostire između njih. Pri

otvaranju web stranice, zadani otvoreni tab, odnosno stranica, upravo je tab „Početna“. Osim

kratkog opisa aplikacije, tab „Početna“ nudi i opcije registriranja, prijave i odlaska u korisničko

sučelje, ovisno o ovlastima korisnika. Za posjetitelje, tj. neregistrirane korisnike i/ili neprijavljene

korisnike, opcije na tabu „Početna“ jesu „Registriraj se“ i „Prijavi se“ koje vode na odgovarajuće

stranice ili tabove. Ako je korisnik prijavljen, umjesto opcija registracije i prijave nudi mu se opcija

„Kreiraj CV“ koja ga vodi u korisničko sučelje, odnosno tab „Admin panel“. Pomicanjem web

preglednika za dolje dolazimo do obrasca za kontaktiranje vlasnika aplikacije do kojeg se može

doći i preko navigacijske trake u zaglavlju.

6

Slika 5.1. Izgled početne stranice i navigacijske trake kakvu vidi neprijavljeni korisnik.

Slika 5.2. Izgled početne stranice i navigacijske trake kakvu vidi prijavljeni korisnik.

5.1.1. Kontakt

Do obrasca za kontaktiranje korisnika (Sl. 5.3.) dolazi se preko „Kontakt“ opcije na

navigacijskoj traci ili pak pomicanjem web preglednika za dolje ako je otvorena početna stranica

tj. tab „Početna“.

7

Slika 5.3. Obrazac za kontaktiranje vlasnika stranice

Svi korisnici, neovisno o ovlastima, mogu koristiti kontakt obrazac kako bi kontaktirali vlasnika i

podijelili svoja mišljenja, komentare, kritike i/ili pitanja s vlasnikom aplikacije. Obrazac se sastoji

od četiri polja – „Ime“, „Email“, „Predmet“ i „Sadržaj“, u koja se upisuju željeni komentari i

informacije, kao i tipke „Pošalji poruku“. Nakon pritiska na tipku, izvršava se skripta

„kontaktMail.php“ te ako je sve pravilno uneseno, vlasniku se šalje e-mail a stranica se vraća na

tab „Početna“, odnosno na vrh preglednika.

5.2. Tab – Prijava

Na tab, odnosno stranicu, „Prijava“ dolazi se preko navigacijske trake pritiskom na tipku

„Prijava“ ili preko početne stranice pritiskom na tipku „Prijavi se“. Prijava se sastoji od obrasca

za prijavu i dvije poveznice (Sl. 5.4.). Obrazac se sastoji od dva polja za unos podataka,

„KORISNIČKO IME“ i „LOZINKA“ te tipke „Prijava“. Poveznica „Zaboravili ste lozinku“ vodi

na stranicu za oporavak lozinke, a poveznica „Registriraj se!“ vodi na stranicu za registraciju novih

korisnika.

8

Slika 5.4. Tab prijava

Obrazac služi kako bi se registrirani korisnik, odnosno korisnik čiji podaci već postoje u bazi

podataka, prijavio u sustav i dobio mogućnosti za izradu životopisa na temelju svoje ovlasti.

Podaci se šalju POST [13] metodom, password se prvo kriptira md5 hash funkcijom [14], te se

zatim provjeravaju ako odgovaraju podacima u bazi podataka. Ako podaci nisu točni, tj. ne

odgovaraju ekvivalentnim podacima u bazi podataka, otvara se nova stranica koja obavještava

korisnika da uneseni podaci nisu ispravni i nudi tipku „Natrag“ pritiskom na kojeg se korisnik

vraća na stranicu „Prijava“. U slučaju da su podaci ispravni, otvara se nova sesija, ovisna o

ovlastima prijavljenog korisnika te se otvara stranica „Admin panel“ tj. korisničko sučelje.

5.2.1. Registracija

Do stranice za registraciju novih korisnika dolazi se ili preko tipke „Registriraj se“ na

početnoj stranici ili preko poveznice „Registriraj se!“ na „Prijava“ tabu. Registracija služi za

registriranje novih korisnika kako bi postali aktivni korisnici stranice. Sastoji se od obrasca (Sl.

5.5.) koji osim klasičnih podataka poput korisničkog imena, lozinke, ponovnog upisa lozinke i e-

maila, zahtijeva sve osobne podatke relevantne za kreiranje životopisa koji će se automatski

koristiti pri ispisu životopisa. Svako polje obrasca zahtijeva da je ispunjeno, te se registracija ne

može završiti dokle god sva polja nisu ispravno unesena. Nakon popunjavanja svih polja i pritiska

na tipku „Registriraj se“ skripta „registracija.php“ prvo provjerava da li korisničko ime već postoji

u bazi podataka, da li se lozinke podudaraju i postoji li e-mail već u bazi podataka. U tim

slučajevima, ponovno se otvara stranica za registraciju koja preko GET metode dobiva svojstvo

odgovarajuće pogreške te preko obavijesti [15] obznanjuje pogrešku.

9

Slika 5.5. Obrazac za registraciju korisnika.

U slučaju da je sve ispravno uneseno, skripta kriptira lozinku u md5 oblik, te šalje upit prema bazi

koji upisuje novog korisnika i njegove podatke u bazu u tablicu „korisnici“ (Sl. 5.6.) s ovlastima

registriranog korisnika i otvara ponovno „Prijava“ tab tj. stranicu.

10

Slika 5.6. MD5 enkripcija lozinke spremljene u bazi podataka.

5.2.2. Oporavak lozinke

Stranici „Oporavak“ može se pristupiti samo iz taba „Prijava“ preko poveznice „Zaboravili

ste lozinku?“. Stranica se sastoji od obrasca (Sl. 5.7.) s dva polja za unos s tipkom „Pošalji

lozinku“ i tipke „Natrag“ koja nas vodi na prijašnju stranicu, odnosno tab „Prijavi se“.

Slika 5.7. Obrazac za oporavak lozinke.

U prvo polje obrasca unosi se korisničko ime ili e-mail. Drugo polje zahtijeva ispravno unesenu

šifru provjere autentičnosti zahtijeva („captcha“ [16]) koja se generira na stranici. Ako „captcha“

ili korisničko ime odnosno e-mail nisu ispravno uneseni, stranica se ponovno otvara te s GET

metodom prima svojstvo pogrešnog upisa i to obznanjuje obaviješću. U slučaju da upit bude

prihvaćen, poziva se skripta „posaljiLozinku.php“ te se na uneseni e-mail ili e-mail koji odgovara

unesenom korisničkom imenu u bazi, šalje nasumična lozinka koja se sastoji od brojeva između

1000000 i 9999999 generirana „rand“ funkcijom [17]. Lozinka se sprema u tablicu „korisnici“ u

stupac „oporavak“, kriptirana s md5 funkcijom, te ne zamjenjuje staru lozinku. Korisnik se s

novom lozinkom može prijaviti na svoj račun.

11

5.3. Tab – Admin panel

„Admin panel“ je korisničko sučelje koje služi za izradu životopisa i dodavanje kategorija,

ovisno o ovlastima prijavljenog korisnika. Skripta „admin.php“ provjerava sesije i ovisno o

ovlastima prijavljenog korisnika generira korisničko sučelje s odgovarajućim opcijama. Tab

„Admin panel“ detaljnije će biti opisan u nastavku rada, u poglavlju „KORISNIČKO SUČELJE“.

5.4. Odjava

Tipka „Odjava“ pojavljuje se na navigacijskoj traci ako je korisnik prijavljen, odnosno ako

postoji sesija. Pritiskom na tipku „Odjava“ poziva se skripta „logout.php“ koja prekida sesiju i

postavlja korisnika koji se sada vodi kao posjetitelj tj. neprijavljeni korisnik, na tab „Prijava“.

Skripta „logout.php“ nema provjere, te se na klik prijavljeni korisnik trenutačno odjavljuje iz

sustava.

12

6. KORISNIČKO SUČELJE

„Admin panel“ je korisničko sučelje čiji izgled i opcije ovise o ovlastima prijavljenog

korisnika. Nakon provjere otvorene sesije, ako prijavljeni korisnik ima normalne, korisničke

ovlasti, odnosno ako u tablici „korisnici“ u stupcu „ovlast“ nema uneseno „admin“, prikazuju mu

se tri slike, koje su ujedno i poveznice (Sl. 6.1.). Sve slike se pozivaju iz mape

„/wamp/www/cv/images/“ te su u „png“ obliku. Slike izgledom odgovaraju poveznicama,

odnosno stranicama, koje otvaraju i skriptama koje pozivaju. Ako se lebdi mišem iznad slika

pojavi se i objašnjenje poveznica. Regularni korisnik ima pristup „Kreiraj CV“, „Uredi CV i

preuzmi kao PDF“ i „Uredi profil“ slikama odnosno poveznicama koje vode odgovarajućim

stranicama. Vlasnik, odnosno korisnik s „admin“ sesijom, osim gore navedenim poveznicama ima

pristup i slikama/poveznicama, odnosno stranicama, „Dodaj kategoriju“ i „Obriši kategoriju“ (Sl.

6.2.).

Slika 6.1. Izgled sučelja „Admin panel“ za prijavljenog korisnika.

13

Slika 6.2. Izgled sučelja „Admin panel“ za administratora, odnosno vlasnika.

6.1. Dodaj kategoriju

Stranici za dodavanje kategorija ima pristup samo korisnik s ovlastima administratora,

odnosno prijavljeni korisnik koji u bazi podataka „cv“ u tablici „korisnici“ u stupcu „ovlast“ ima

vrijednost „admin“. To se provjerava preko sesije prijavljenog korisnika. Tipka „Nazad“ vraća

korisnika natrag na „Admin panel“. Stranici se pristupa preko „Admin panel“ taba, pritiskom na

sliku, odnosno poveznicu, „Dodaj kategoriju“.

Stranica služi za dodavanje novih kategorija u bazu podataka. Stranica se sastoji od obrasca i tipke

„Nazad“ koji vraća korisnika na „Admin panel“ tj. korisničko sučelje (Sl. 6.3.). Obrazac se sastoji

od imena kategorije, opisa kategorije i dva okvira, okvira za datume i okvira za podnaslov, te tipke

„Spremi“. Okviri i opis kategorije su opcionalni, dok je naziv kategorije jedni potreban za izvršiti

upit prema bazi podataka. Ako je sve ispravno uneseno, nakon pritiska na tipku „Spremi“ zove se

skripta „dodajKategoriju.php“ koja prvo provjerava postoji li u bazi već kategorija s unesenim

imenom, te ako postoji ponovno otvara skriptu za dodavanje kategorije i s GET metodom prima

signal da upisani naziv kategorije već postoji te obavještava korisnika o tome obaviješću. Ako je

sve u redu, skripta „dodajKategoriju.php“ u tablici „kategorije“ stvara novi zapis i unosi podatke

pod „naziv“ i „opis“ kategorije koje je primila POST metodom iz obrasca. Zatim skripta stvara

novu tablicu koja kao naziv ima naziv kategorije te je povezana s tablicom „kategorije“. Osim

redova „id“, „sadrzaj“, „id_korisnika“, „redniBroj“ koji se uvijek generiraju, stupci ovise o

označenim okvirima. Ako administrator kod kreiranja kategorije označio okvir „Odaberi ako želite

datume od-do“ tablica se generira s dodatnim stupcima „datumOd“ i „datumDo“. Ako se označi

„Odaberi ako želite uključiti naslov“ tablica se generira s dodatnim stupcem „naslov“. Time se

14

baza dinamički širi po potrebi vlasnika. Nakon što se upiti uspješno provedu, otvara se „Admin

panel“ i preko GET metode s obaviješću administratora se obavještava da je kategorija uspješno

unesena.

Slika 6.3. Izgled obrasca za dodavanje nove kategorije.

6.2. Obriši kategoriju

Stranici za brisanje kategorija (Sl. 6.4.) ima pristup samo korisnik s ovlastima

administratora, odnosno prijavljeni korisnik koji u bazi podataka „cv“ u tablici „korisnici“ u stupcu

„ovlast“ ima vrijednost „admin“. To se provjerava preko sesije prijavljenog korisnika. Tipka

„Nazad“ vraća korisnika natrag na „Admin panel“. Stranici se pristupa preko „Admin panel“ taba,

pritiskom na sliku, odnosno poveznicu, „Obriši kategoriju“.

Slika 6.4. Ispis kategorija i mogućnost njihovog brisanja.

15

Skripta „obrisiKategoriju.php“ koja se poziva na stranici služi za brisanje željenih kategorija iz

baze podataka. Na stranici su s lijeve strane ispisane sve kategorije koje postoje u bazi podataka

dok se s desne strane, u istome redu, za svaku kategoriju nalaze slike koje asociraju na brisanje,

odnosno slovo „x“, te one na klik pozivaju JavaScript funkciju „potvrdiBrisanje()“ [18] koja

zauzvrat zahtijeva potvrdu želi li se obrisati odabrana kategorija kako ne bi došlo do slučajnog

brisanja važnih podataka (Sl. 6.5.). Pri negativnom odgovoru nema nikakve promijene, dok se pri

potvrdnom odgovoru šalje upit bazi podataka koji briše red u tablici „kategorije“ pod tim imenom

kao i tablicu koja je nastala s imenom te kategorije te sve podatke koje su povezane s tom

kategorijom iz ostalih tablica. Stranica se zatim ponovno otvara te se ponovno prikazuju sve

kategorije, ovoga puta bez one koja je bila izbrisana. Time se baza podataka dinamički skuplja po

potrebi vlasnika tj. administratora.

Slika 6.5. Funkcija „potvrdiBrisanje()„ i potreba koju zahtijeva.

6.3. Kreiraj CV

Stranici za kreiranje životopisa imaju pristup i prijavljeni korisnik i administrator. Stranici

se pristupa preko „Admin panel“ taba, pritiskom na sliku, odnosno poveznicu „Kreiraj CV“.

Stranica služi za izradu životopisa, odnosno unosa podatka u unaprijed stvorene kategorije. S

desne strane stranice ispisane su sve kategorije te je pored njih padajući izbornik s opcijama

„Sakrij“ i „Prikaži“ (Sl. 6.6.). Po zadanim postavkama, sve novostvorene kategorije imaju

vrijednost „Sakrij“. Vrijednosti „Sakrij“ i „Prikaži“ određuju hoće li kategorija i njene vrijednosti

16

biti prikazane na ispisu. Sve kategorije pri upisu u bazu dobivaju vrijednost ekvivalentnu

vrijednosti „Sakrij“ u tablici „prikaz“, što znači da je kategorija skrivena i da se ne prikazuje na

ispisu životopisa. Ako se vrijednost promijeni na „Prikaži“, u bazi se uz pomoć AJAX-a [19]

dinamički mijenja vrijednost bez ponovnog učitavanja stranice, za odgovarajućeg korisnika, na

ekvivalent vrijednosti „Prikaži“ što zauzvrat znači da će se ta kategorija prikazivati na ispisu

životopisa, bilo to u HTML ispisu ili PDF ispisu, tome korisniku. To se postiže sa skriptom

„kreirajCv.php“ i tablice „prikaz“ u bazi podataka koja uz pomoć kategorije i identifikacije

korisnika omogućuje da svaki korisnik ima opciju skrivanja i prikazivanja kategorija, neovisno o

ostalim korisnicima.

Slika 6.6. Početni izgled „Kreiraj CV“ stranice

Ispisane kategorije mogu biti povućene prema gore ili dolje po želji (Sl. 6.7.). To ujedno i mijenja

njihov redoslijed prilikom ispisa životopisa. To se postiže pomoću jQuery-a koji pomiče tablice

[20], te tablice u bazi podataka nazvane „tablice“, koja kao i tablica „prikaz“, za svakog korisnika

stvara jedinstveni redoslijed pomoću zapisa u tablici „tablice“. Kategorijama se dinamički, bez

ponovnog učitavanja stranice, mijenja vrijednost, ekvivalentna poziciji na kojoj se nalazi nakon

povlačenja, u bazi podataka, za što se koristi skripta „updateDB.php“.

17

Slika 6.7. Primjer povlačenja kategorija.

Pri kliku na ime kategorije na desnoj se strani, pomoću AJAX-a se bez ponovnog otvaranja

stranice, dinamički, prikazuje obrazac (Sl. 6.8.) za upis podataka za odabranu kategoriju [21].

Izgled samog obrasca ovisi o vrijednostima koje je administrator odabrao kada je kreirao

kategoriju. Također s obrascem pojavi se i tipka „Nazad“ koja na klik vodi na „Admin panel“

stranicu. Nakon ispunjavanja obrasca, ako su ispunjena sva potrebna polja, pritiskom na tipku

„Spremi“, poziva se skripta „dodajPodatak.php“ koja šalje upit prema bazi podataka koji unosi

podatke u tablicu odgovarajuće kategorije pod posebnom identifikacijom za korisnika koji je unio

te podatke. Podaci se unose u tablicu koja ima ime kao odabrana kategorija. Zatim se stranica

ponovno učitava na svoje prvotno stanje, bez odabrane kategorije, odnosno prikazanog obrasca.

Slika 6.8. Aktivo otvaranje obrasca pri kliku na naziv kategorije „EDUKACIJA“.

18

6.4. Uredi CV

Stranici za uređivanje životopisa imaju pristup i prijavljeni korisnik i administrator.

Stranici se pristupa preko „Admin panel“ taba, pritiskom na sliku, odnosno poveznicu, „Uredi CV

i preuzmi kao PDF“.

Stranica služi za HTML ispis kao i za uređivanje prije ispisa u PDF formatu te poziva skriptu

„ispisiCv.php“. Na zaglavlju stranice ispisuju se osobni podaci korisnika koje je unio prilikom

registracije. Ispod toga ispisuju se kategorije s popratnim sadržajem i padajućim izbornikom.

Nakon zadnje ispisane kategorije ispisuje se slika, odnosno poveznica, s titulom „Preuzmi kao

pdf“ (Sl. 6.9.). Ispisuju se samo kategorije koje je imaju „Prikaži“ vrijednost na stranici za unos

podatka u kategorije, te se ispisuju redoslijedom određenim na istoj stranici, a samim time i u bazi

podataka. Ispisuju se samo podaci koje je prijavljeni korisnik unio. Njihov ispis unutar kategorija

ovisi o obliku kategorije, odnosno koje vrijednosti su još pridružene u bazi podataka prilikom

kreiranja kategorije. Svi ispisani podaci imaju i dvije slike odnosno poveznice pored sebe. Ako

kategorija nema red u tablici za godine od i do, podaci se ispisuju kao lista s točkama. U slučaju

da sadrži godine od i do, podaci se ispisuju kao normalan ispis, jedan ispod drugog, ali se onda uz

ime kategorije imaju i dvije slike, odnosno poveznice – „Sortiraj rastuće po godini“ i „Sortiraj

padajuće po godini“.

19

Slika 6.9. Izgled „Uredi CV“ stranice.

Padajući izbornik ima vrijednosti „Auto“ i „Nova stranica“. S tim vrijednostima, odnosno

njihovim ekvivalentima u tablici „tablice“, reguliramo ispis u PDF formatu. Zadana vrijednost za

sve kategorije je „Auto“ što znači da će se ta kategorija normalno, automatski, ispisivati iza

prijašnje u PDF-u. Ako se vrijednost promijeni na „Nova stranica“, kategorija čija se vrijednost

promijenila ispisivat će se na novoj stranici u PDF-u. Promjena podataka u bazi izvršava se

dinamički, bez ponovnog otvaranja stranice, uz pomoć AJAX-a.

20

Kategorije koje ne sadržavaju godine, podatke ispisuju kao liste s točkama. Podacima je moguće

dinamički mijenjati redoslijed, bez ponovnog otvaranja stranice, pomoću vuče odabrane kategorije

gore ili dolje po listi s točkama (Sl. 6.10.). Na svako pomicanje, u tablici koja ima ime kao i

kategorija, dinamički se mijenja vrijednost koja je ekvivalentna poziciji podataka u listi za

prijavljenog korisnika. To se postiže pomoću AJAX-a [22]. Podaci ispisani ispod kategorija koje

sadrže godine nemaju mogućnost pomicanja s povlačenjem. Takve kategorije imaju dvije slike,

odnosno poveznice „Sortiraj rastuće po godini“ i „Sortiraj padajuće po godini“ s kojima se

određuje redoslijed njihovih podataka. Slike odgovaraju njihovoj namijeni, tako da strelica za gore

odgovara uzlaznom sortiranju, dok strelica za dolje odgovara silaznom sortiranju. Pritiskom na

strelicu okrenutu prema gore, odnosno poveznicu „Sortiraj rastuće po godini“, stranica se ponovno

otvara a podaci s godinama se ispisuju uzlazno, ovisno o godini početka, odnosno godini od. Slično

tome, pritiskom na strelicu za dolje, odnosno poveznicu „Sortiraj padajuće po godini“, stranica se

ponovno otvara, ovoga puta s podacima koji sadrže godine ispisanim silazno, ovisno o godini

početka.

Slika 6.10. Pomicanje podataka povlačenjem.

Slike, tj. poveznice pored svakog ispisanog podatka služe za uređivanje tog podatka, odnosno

brisanja istog. Lebdjenjem pokazivačem iznad slika dobivaju se opisi poveznica koji glase „Uredi

zapis“ i „Izbriši zapis“. Pritiskom na „Uredi zapis“ poveznicu, otvara se nova skripta „uredi.php“

koja se sastoji od obrasca čiji izgled ovisi o izgledu kategorije, a polja su popunjena podacima koji

se pozivaju iz baze podataka za tu stavku, te od tipke „Nazad“ koje na pritisak korisnika vraća

natrag na stranicu za uređivanje životopisa (Sl. 6.11.). Sva ponuđena polja mogu se proizvoljno

uređivati, te se pritiskom na tipku „Ažuriraj“, novi uneseni podaci ažuriraju unutar baze podataka.

21

Slika 6.11. Obrazac za ažuriranje podataka.

Pritiskom na poveznicu „Izbriši zapis“ pokreće se JavaScript funkcija „potvrdiBrisanje()“ koja

traži potvrdu (Sl. 6.12.). Ako je potvrda pozitivna, poziva se skripta „delete.php“ koja briše

podatke na čiju se poveznicu kliknulo iz baze podataka, te se stranica za uređivanje ponovno

pokreće. Ako je potvrda negativna, ne dolazi do nikakve promijene.

Slika 6.12. Funkcija „potvrdiBrisanje()“ koja čeka potvrdu.

6.5. PDF ispis

Ispisu životopisa u PDF formatu imaju pristup i prijavljeni korisnik i administrator. Stranici

se pristupa preko slike odnosno poveznice s titulom „Preuzmi kao pdf“ (Sl. 6.13.) koja se nalazi

na stranici za uređivanje životopisa tj. skripti „ispisiCv.php“. Pritiskom na poveznicu otvara se

skripta „pdf.php“.

22

Slika 6.13. Poveznica za ispis u PDF formatu.

Skripta „pdf.php“ kao izlaz daje stvoreni životopis u pdf formatu (Sl. 6.14.). Kako bi to postigla,

skripta „pdf.php“ zove skriptu „zivotopis.php“ koja generalno ima isti kod poput skripte

„ispisiCv.php“ što se tiče podataka i njihovog ispisa, ali ne sadrži nikakve poveznice, slike, ni

tipke. Skripta „pdf.php“ koristi HTML2PDF knjižnicu napisanu u PHP-u kako bi konvertirala

HTML kod iz skripte „zivotopis.php“ u PDF format. U pravilu kategorije i podaci kategorija

ispisuju se jedni ispod drugih. Ako je na skripti „ispisiCv.php“ kod kategorije na padajućem

izborniku izabrana vrijednost „Nova stranica“, što automatski znači da je i u bazi ekvivalentna

vrijednost unesena, ta kategorija ispisat će se na novoj stranici PDF ispisa.

23

Slika 6.14. Ispis u PDF formatu

6.6. Uredi profil

Stranici za uređivanje profila imaju pristup i prijavljeni korisnik i/ili administrator. Stranici

se pristupa preko „Admin panel“ taba, pritiskom na sliku, odnosno poveznicu, „Uredi profil“.

Stranica za uređivanje profila, odnosno skripta „profil.php“, služi za uređivanje, odnosno

ažuriranje, osobnih podataka koji se unose prilikom registracije. Dopušteno je mijenjanje svih

podataka osim korisničkog imena. To se obavlja pomoću obrasca sličnog onome na stranici za

registriranje korisnika, s osnovnom razlikom da su u poljima već upisane vrijednosti koje su se

unijele u bazu podataka za prijavljenog korisnika pri registraciji. Sva polja moraju sadržavati

podatke kako bi se upit prema bazi mogao poslati, te se lozinka, bilo nova ili stara mora upisivati

svaki put. Ako se lozinka i njen ponovan upis ne podudaraju, skripta „profil.php“ se ponovno

otvara te obaviješću obavještava da se lozinke ne podudaraju. Nakon izmjena željenih podatka

24

pritiskom na tipku „Ažuriraj“ skripta „profil.php“ s POST metodom dobiva vrijednosti i ažurira ih

u bazi podataka, te nakon toga otvara tab „Admin panel“.

25

7. BAZA PODATAKA

Baza podatka sastoji se od četiri međusobno povezanih, unaprijed izrađenih tablica. To su:

„kategorije“

„korisnici“

„prikaz“

„tablice“

Na slici 7.1. prikazan je EER model [23] baze podataka. Osim te 4 statičke tablice, baza podataka

se dinamički ekspandira i sužuje po potrebi administora, odnosno za svaku stvorenu kategoriju od

strane administratora preko korisničkog sučelja u bazi se kreira nova tablica koja ima naziv

kategorije i polja koja je administrator zadao i dodaje se zapis u tablicu „kategorije“, „tablice“ i

„prikaz“. Te dodane tablice i unosi mogu se i brisati preko „Admin panel“ korisničkog sučelja

unutar web aplikacije. Brisanjem kategorije briše se tablica stvorena pod tim imenom kao i svi

podaci povezani s tom kategorijom.

Upravo pomoću baze i povezanosti tablica ostvaruje se da svaki korisnik ima svoj osobni ispis

životopisa, osobne podatke unutar kategorija i osobnu vidljivost te redoslijed kategorija i njihovih

podatka.

Slika 7.1. EER model „cv.sql“ baze podataka

26

8. ZAKLJUČAK

Generalno slijedeći specifikaciju zahtijeva, dobivena je web aplikacija za izradu životopisa

koja se može koristiti u osobne svrhe na lokalnom okruženju, za što je i prvenstveno namijenjena,

ali može se i podignuti online kao sustav koji bi koristilo više korisnika. Aplikacija je od najveće

koristi vlasniku, odnosno administratoru, jer upravo on ima mogućnost dodavanja kategorija i

određivanja koja polja će imati, no odluči li se administrator ikada podignuti ovu aplikaciju online

i podijeliti s drugim korisnicima funkcionirat će kao stabilan sustav, a korisnici će moći na

aplikaciji raditi apsolutno sve osim dodavanja i brisanja kategorija. Online, aplikacija ima i dvije

dodatne mogućnosti. Prva je da posjetitelji stranice putem kontaktnog obrasca mogu kontaktirati

vlasnika. Druga je oporavak od zaboravljene lozinke.

Za razvijanje ove aplikacije bilo je potrebno dobro poznavanje tehnologija i alata navedenih u

„ALATI I TEHNOLOGIJE“ tabu. Njihovom kombinacijom ostvarena je funkcionalna web

aplikacija koja je jednostavna za prenijeti na bilo koji poslužitelj, uz minimalan trud, odnosno

izmjenu svega par redova u jednoj skripti. Zahvaljući dobroj povezanosti tablica unutar baze

podataka, svaki korisnik ima jedinstveno iskustvo, te se sve izmjene koje napravi spremaju u bazu

tako da će podaci, njihovi redoslijedi i ostale modifikacije biti na istome mjestu sljedeći puta kada

se korisnik odluči prijaviti i koristiti aplikaciju.

Iako dizajnom ne može konkurirati popularnim profesionalnim web aplikacijama za izradu

životopisa, funkcionalnošću i mogućnostima optimiziranja neke i nadmašuje. Uz podosta rada,

većinom na dizajnu, vjerujem da bi se mogla u budućnosti koristiti kao web aplikacija za izradu

životopisa kojoj bi najveća snaga bila upravo mogućnost optimiziranja gotovo svega. Neke od

ideja koje bi pospiješile funkcionalnost stranice su da se stvaranje, uređivanje i optimiziranje

životopisa odvija u potpunosti na jednoj stranici, te da se samo pojedini elementi mjenjaju, a da se

stranica gotovo nikad ponovno ne pokreće. Također, poželjno bi bilo omogućiti dodatne

mogućnosti dizajniranja ispisa u PDF formatu osim nove stranice, koja već postoji, kao i

dopuštenje svakom korisniku da stvara svoje kategorije i unos slikovnih datoteka, poput profilne

slike. Najveća mana ove aplikacije, osim dizajna, jest da postoji previše stranica za obavljanje

stvari koje neke aplikacije izvršavaju na jednoj. Najveća vrlina aplikacije je upravo baza podataka,

njena interakcija, kako s administratorima, tako i s korisnikom, te njeno dinamičko širenje i

skupljanje ovisno o potrebama korisnika aplikacije.

27

LITERATURA

[1] HTML5. [Online]. Dostupno na: http://www.w3schools.com/html/html5_intro.asp, 2. lipnja

2015.

[2] PHP. [Online]. Dostupno na: http://www.php.net/, 2. lipnja 2015.

[3] Ajax. [Online]. Dostupno na: http://www.w3schools.com/ajax/default.asp, 10. lipnja 2015.

[4] jQuery. [Online]. Dostupno na: http://www.jquery.com, 11. lipnja 2015.

[5] W3Schools Javascript Tutorial. [Online]. Dostupno na:

http://www.w3schools.com/js/default.asp, 13. lipnja 2015.

[6] MySQL. [Online]. Dostupno na: http://www.mysql.com, 4. lipnja 2015.

[7] HTML2PDF. [Online]. http://html2pdf.fr/en/default, 22. lipnja 2015.

[8] W3Schools CSS. [Online]. Dostupno na: http://www.w3schools.com/css/, 8. lipnja 2015.

[9] Notepad ++. [Online]. Dostupno na: http://notepad-plus-plus.org, 2. lipnja 2015.

[10] WAMP. [Online]. Dostupno na: http://www.wampserver.com/en/, 2. lipnja 2015.

[11] Generiranje CSS-a. [Online]. Dostupno na: http://css3generator.com/, 7. lipnja 2015.

[12] GET metoda. [Online]. Dostupno na: http://www.w3schools.com/tags/ref_httpmethods.asp,

6. lipnja 2015.

[13] POST metoda. [Online]. Dostupno na: https://en.wikipedia.org/wiki/POST_(HTTP) , 6. lipnja

2015.

[14] Md5. [Online]. Dostupno na: http://www.hr.wikipedia.org/wiki/MD5, 7. lipnja 2015.

[15] Windows alert() metoda. [Online]. Dostupno na:

http://www.w3schools.com/jsref/met_win_alert.asp, 11. lipnja 2015.

[16] Captcha. [Online]. Dostupno na: http://spyrestudios.com/build-an-html5-signup-form-with-

dynamic-captcha/, 13. lipnja 2015.

[17] Php rand() funkcija. [Online]. Dostupno na:

http://www.w3schools.com/php/func_math_rand.asp, 13. lipnja 2015.

[18] Window confirm() metoda. [Online]. Dostupno na:

http://www.w3schools.com/jsref/met_win_confirm.asp, 11. lipnja 2015.

[19] AJAX onchange. [Online]. Dostupno na:

http://www.w3schools.com/asp/asp_ajax_database.asp, 15. lipnja 2015.

[20] jQuery Sortable [Online]. Dostupno na: http://johnny.github.io/jquery-sortable/, 24. lipnja

2015.

[21] AJAX onclick [Online]. Dostupno na: http://www.w3schools.com/ajax/ajax_example.asp,

20. lipnja 2015.

28

[22] AJAX draggable [Online]. Dostupno na: http://www.webresourcesdepot.com/dynamic-

dragn-drop-with-jquery-and-php/, 22. lipnja 2015

[23] ERR model [Online]. Dostupno na: http://dev.mysql.com/doc/workbench/en/wb-model-

editor.html, 26. lipnja 2015