Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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