d i p l o m s k a n a l o g a - milovan tomaševićdk.fis.unm.si/dip/vs_2016_jure_delak.pdf ·...

FAKULTETA ZA INFORMACIJSKE ŠTUDIJE

V NOVEM MESTU

D I P L O M S K A N A L O G A

VISOKOŠOLSKEGA STROKOVNEGA ŠTUDIJSKEGA PROGRAMA

PRVE STOPNJE

JURE DELAK

FAKULTETA ZA INFORMACIJSKE ŠTUDIJE

V NOVEM MESTU

DIPLOMSKA NALOGA

SPLETNA APLIKACIJA ZA ISKANJE

DOGODKOV PO SLOVENIJI

Mentorica: doc. dr. Biljana Mileva Boshkoska

Novo mesto, september 2016 Jure Delak

IZJAVA O AVTORSTVU

Podpisani Jure Delak, študent FIŠ Novo mesto, izjavljam:

da sem diplomsko nalogo pripravljal samostojno na podlagi virov, ki so navedeni

v diplomski nalogi,

da dovoljujem objavo diplomske naloge v polnem tekstu, v prostem dostopu, na

spletni strani FIŠ oz. v elektronski knjižnici FIŠ,

da je diplomska naloga, ki sem jo oddal v elektronski obliki, identična tiskani

verziji,

da je diplomska naloga lektorirana.

V Novem mestu, dne _________________ Podpis avtorja ______________________

ZAHVALA

Iskreno se zahvaljujem mentorici doc. dr. Biljani Milevi Boshkoski za vodenje in strokovno

pomoč pri pisanju diplomske naloge.

Posebna zahvala gre tudi Klemnu Turšiču za pomoč pri pisanju programske kode in Jerneju

Predaniču za pomoč pri izdelavi ikon in oblikovanju spletne strani.

POVZETEK

Dogodki se v tem modernem času intenzivno oglašujejo po spletu, zato sem sklenil poiskati

spletno stran, ki bi ponujala večje število dogodkov oziroma več kategorij dogodkov, a sem

bil nad ugotovitvijo, da primerne spletne strani ni, razočaran. Našel sem nekaj manjših in

večjih spletnih strani, ki oglašujejo dogodke, vendar imajo zelo majhno število zbranih

dogodkov ali pa jih imajo več, a samo za določene kategorije. Zato sem se odločil, da bom

poskušal to težavo rešiti z izdelavo spletne strani, na kateri naj bi bili zbrani vsi dogodki iz

Slovenije. Spletna stran bo z uporabo Googlovih zemljevidov prikazovala dogodke, ki

bodo na zemljevidu označeni z markerji. Dogodki bodo ločeni po kategorijah, vsako

kategorijo pa bo zaradi lažje razpoznavnosti označeval drugačen marker. Vsak, ki bi želel

objaviti dogodek, se bo moral registrirati, vpisati podatke o dogodku, in že ga bo lahko

objavil.

KLJUČNE BESEDE:

HTML, CSS, JavaScript, JQuery, SQL, AJAX, Jquery, najdi dogodek, spletna stran.

ABSTRACT

In this modern times events have been advertising online very intensively so I decided to

look for a site that would offer a great number of events or categories of events. But I soon

became disappointed because I could not find any suitable sites. I found some minor and

major websites promoting events, but they had a very small number of events collected or

a large number but only for certain categories. So I decided to solve this problem by

creating a website where all events in Slovenia will be collected. The site will be using

Google maps showing the events, which will be indicated on the map with markers. Events

will be separated into categories and each category will have a different marker for easier

recognition. Anyone who wants to post an event, will have to register, enter information

about it and the even will be posted immediately.

KEY WORDS:

HTML, CSS, JavaScript, JQuery SQL, AJAX, Jquery, find event, web page.

KAZALO

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

2. SPLETNO OGLAŠEVANJE........................................................................................... 3

2.1 Tehnike spletnega oglaševanja ................................................................................... 6

2.1.1 SEO-oglaševanje ................................................................................................. 6

2.1.2 Socialna omrežja ................................................................................................. 8

2.1.3 Google Adsense oglaševanje ............................................................................. 10

2.1.4 E-mail marketing ............................................................................................... 11

3. PROGRAMSKI JEZIKI ................................................................................................ 12

3.1 HTML....................................................................................................................... 12

3.2 Javascript .................................................................................................................. 15

3.3 Ajax .......................................................................................................................... 17

3.4 PHP........................................................................................................................... 21

3.5 CSS ........................................................................................................................... 23

3.6 SQL .......................................................................................................................... 24

4. BOOTSTRAP ................................................................................................................ 26

4.1 Nastanek ................................................................................................................... 26

4.2 Kako deluje Bootstrap .............................................................................................. 26

5. OBLIKOVANJE SPLETNE STRANI .......................................................................... 28

6. GOSTOVANJE.............................................................................................................. 30

6.1 Domena .................................................................................................................... 30

6.2 Strežnik..................................................................................................................... 31

7. VARNOST ..................................................................................................................... 33

7.1 SQL-injekcija ........................................................................................................... 35

7.2 Prijava in registracija ................................................................................................ 37

7.3 E-mail spam.............................................................................................................. 37

7.3.1 Kako zmanjšati količino nezaželenih sporočil ................................................... 38

7.4 Kraja podatkov uporabnikov .................................................................................... 39

7.5 Preprečitev podvajanja dogodkov ............................................................................ 40

8. PREDSTAVITEV SPLETNE APLIKACIJE ................................................................ 41

8.1 Podatkovna baza ....................................................................................................... 41

8.2 Domača stran ............................................................................................................ 44

8.2.1 HTML-koda ....................................................................................................... 46

8.3 Registracija uporabnika ............................................................................................ 50

8.3.1 HTML-koda ....................................................................................................... 51

8.4 Pogled prijavljenega uporabnika .............................................................................. 53

8.4.1 HTML-koda ....................................................................................................... 54

8.5 Objava dogodkov ..................................................................................................... 55

8.5.1 HTML-koda ....................................................................................................... 56

8.6 Google zemljevid ..................................................................................................... 60

8.7 Sprememba podatkov in urejanje dogodkov ............................................................ 60

9. ZAKLJUČEK ................................................................................................................ 63

10. LITERATURA IN VIRI .............................................................................................. 65

KAZALO GRAFOV

Graf 1.1: Število spletnih strani po celem svetu .................................................................. 1

Graf 2.1: Vložki v spletno oglaševanje v milijardah ameriških dolarjev letno. .................. 6

KAZALO SLIK

Slika 4.1: Mreža ................................................................................................................. 28

Slika 6.1: Struktura domene ............................................................................................... 30

Slika 8.1: UML-diagram .................................................................................................... 43

Slika 8.2: Ikone markerjev ................................................................................................. 44

Slika 8.3: Vpisno okno ....................................................................................................... 45

Slika 8.4: Iskalna vrstica .................................................................................................... 45

Slika 8.5: Potek iskanja dogodkov ..................................................................................... 45

Slika 8.6: Registracijski obrazec ........................................................................................ 45

Slika 8.7: Pogled prijavljenega uporabnika ....................................................................... 54

Slika 8.8: Obrazec za objavo dogodka ............................................................................... 56

Slika 8.9: Urejanje uporabnikovih podatkov ..................................................................... 61

Slika 8.10: Prikaz objavljenih dogodkov ........................................................................... 45

Slika 8.11: Urejanje dogodka ........................................................................................... 452

Slika 8.12: Izbris dogodka ............................................................................................... 453

1

1. UVOD

Internet se je v 21. stoletju zelo razvil, saj dosegamo višje hitrosti, večje število

uporabnikov, razvijajo se nove tehnologije in programski jeziki, ki nam prinašajo novosti.

Od leta 2000 se je število spletnih strani drastično povečalo. Marca leta 2016 smo presegli

milijardo spletnih strani po celem svetu.

Graf 1.1: Število spletnih strani po celem svetu

Vir: Internetlivestats (26. avgust 2016)

V diplomski nalogi se bom lotil problema z vidika zbiranja vseh vrst dogodkov na enem

mestu, saj v Sloveniji ni spletne strani, ki bi vsebovala vse dogodke oziroma več zvrsti

dogodkov, kot so na primer: avto-šovi, tekaški maratoni, kolesarski maratoni, koncerti,

predstave, pohodi, veselice, plesna tekmovanja, tečaji, moto-zbori itd. Imamo veliko

spletnih strani, vendar se osredotočajo le na par zvrsti kategorij, če pa so že osredotočene

na eno zvrst kategorij, pa pokrivajo le eno regijo s to zvrstjo dogodkov.

2

Spletne strani, ki oglašujejo dogodke po Sloveniji:

Za veselice po Sloveniji je spletna stran www.veselice.si. (Veselice, 21. julij 2016)

Za prodajo vstopnic za športne, glasbene, kulturne dogodke skrbi Eventim.

(Eventim, 21. julij 2016)

Dogajanja po ljubljanskih lokalih spremlja krbi spletna stran www.kamzvecer.si.

(Kamzvercer, 21. julij 2016)

Napovednik ponuja več zvrsti dogodkov, vendar jih še vedno dosti manjka, med

njimi recimo kolesarski in tekaški maratoni, moto-zbori, nogometni turnirji itd.

(Napovednik, 21. julij 2016)

Dj-slovenija.si posreduje podatke za dogodke in prireditve za vso Slovenijo, a

vendar je zvrsti objavljenih dogodkov precej malo, poleg tega je tudi nepregledna

oziroma bi jo bilo treba malo posodobiti. (Dj-slovenija, 21. julij 2016)

Spletna stran www.prireditve.rtvslo.si ponuja izbiro po regijah in vrsti prireditev,

vendar se tudi tu osredotočajo le na določene vrste dogodkov. (Rtvslo, 21. julij

2016)

Za slovensko obalo skrbi obala.net, ki nima objavljenih veliko dogodkov, hkrati pa

prav tako ne pokriva več zvrsti dogodkov. (Obala, 21. julij 2016)

Ljubljanska občina na svoji spletni strani zelenaljubljana.si objavlja dogodke,

vendar, kolikor sem uspel razbrati, objavljajo samo tiste dogodke, pri katerih tudi

občina sama sodeluje. (Zelenaljubljana, 21. julij 2016)

Slovenia.info ima zelo veliko bazo dogodkov, kar pomeni, da se redno ažurira,

vendar pa, kot mnoge že omenjene, ne pokriva vseh zvrsti dogodko. (Slovenia, 21.

julij 2016)

V Sloveniji je še kar nekaj strani, ki objavljajo dogodke, vendar te niso najbolj ažurirane

oziroma konkurenčne, saj imajo popolnoma zastarel dizajn ali pa zelo majhno število

dogodkov. Poleg vsega tega so osredotočene samo na neko območje, ne pa na celo

Slovenijo. Izmed konkurentov samo eventim.si uporablja Googlove zemljevide za

prikazovanje dogodkov z uporabljanjem označb. Naj še enkrat spomnim, da ta konkurent

nima vseh zvrsti dogodkov, poleg tega le-ti niso na začetni strani, ampak je treba to možnost

poiskati. Druge spletne konkurence imajo prikaz lokacije na zemljevidu samo v primeru,

da kliknemo na posamični dogodek, šele po kliku pa vidimo lokacijo na Googlovem

zemljevidu, ki se prikaže samo za dogodek, katerega smo izbrali. Prednost moje spletne

3

strani bo v tem, da bom že takoj ob prihodu prikazal Googlov zemljevid z označenimi

dogodki, z možnostjo izbiranja po kategorijah dogodkov, datumu in iskalnem nizu.

2. SPLETNO OGLAŠEVANJE

V današnjem času je spletno oglaševanje zelo aktualno, saj je tako najlažje doseči čim večjo

množico. Vložek v spletno oglaševanje kakor tudi količina samih oglasov se od začetka

dobe računalnikov in pametnih telefonov le še povečujeta, saj nam oglaševalci že na

vsakem koraku »vsiljujejo reklame«. Količina oglasov je odvisna od tipa spletne strani,

tako nekateri oglaševalskega prostora ne dajejo v najem ali ga sploh nimajo, saj služijo na

drugačne načine.

Odgovor na vprašanje, čemu oglaševalci zakupijo prostor za oglaševanje, je preprost:

njihov cilj je pridobiti prepoznavnost oz. pritegniti pozornost. Nekateri oglaševalci

oglašujejo, da bi pridobili na prepoznavnosti podjetja, medtem ko drugi za povečanje

prodaje izdelka ali storitve. Razlogi za oglaševanje se razlikujejo od človeka do človeka,

saj ima vsak svoj cilj, ki ga želi z oglaševanjem doseči. Oglaševalci plačujejo po kliku, po

prodaji ali pa preprosto zakupijo oglaševalni prostor za določeni znesek. Na kakšen način

dobivamo plačilo, je zopet odvisno od nas samih, saj jim mi pogojujemo način, na katerega

bodo oglaševali. AdSense oglasi se plačajo po kliku ali prikazu oglasa, partnerski oglasi

(ang. affiliate) se plačajo glede na prodajo, direktni oglasi (ang. direct), kot so oglasne

pasice, se prodajo za ceno, ki nam jo bo stranka pripravljena plačati. Denar, ki nam ga

oglaševalci izplačajo, je seveda odvisen tudi od tega, kje se nek oglas nahaja. Za oglase, ki

se nahajajo na vrhu spletne strani, se plača več, saj jih ljudje zaradi izpostavljenosti prej

opazijo kot pa oglase, ki se nahajajo na spodnjem delu strani. Oglaševanje je lahko zelo

donosno za lastnike spletnih strani z velikim pretokom obiskovalcev. Čeprav obstaja več

načinov zaslužka s prometom obiskovalcev, je oglaševanje eden hitrejših in lažjih načinov.

Raznorazni spletni blogi po večini dopuščajo oglase, da s tem nekaj malega zaslužijo in si

tako plačajo sami za tisto, kar objavljajo na blogu. Spletni časopisi prodajajo oglase zaradi

zelo širokega spektra množice in zaradi svojih poslovnih modelov, saj tiskani časopisi ne

prinašajo več takšnega zaslužka, kot so ga še pred leti. V večini primerov je oglaševanje

4

eden izmed najbolj pomembnih razlogov za uspeh posla. Za storitev ali izdelek, pri katerem

splet uporablja za prodajo oziroma pridobivanje strank, je oblikovalčevo delo pri kreiranju

spletne strani zelo pomembno. Pri ustvarjanju take strani moramo biti zelo pozorni na to,

da bomo storitve uspešno promovirali našim obiskovalcem, to pa velja tudi za strani, ki se

preživljajo z zaslužkom od oglaševanja. Za lastnike strani in podjetij, ki se preživljajo z

zaslužkom od oglaševanja na njihovih straneh, je zelo pomembno, da imajo prostor in

lokacije za oglase, ki so za obiskovalce hitro vidni. Preveliko število oglasov lahko

obiskovalca tudi odvrne, kar ga posledično lahko pripelje do tega, da predčasno zapusti

spletno stran, zato torej morajo oblikovalci dobro razmisliti, kako bodo spletno stran

oblikovali, da do tega ne bi prihajalo. (Snell, 2008)

Oglaševalni prostor lahko zelo hitro zasede velik del spletne strani. Bodisi do tega pride z

uporabo velikih oglasnih pasic ali z uporabo več manjših pasic. Nekatere spletne strani

razporedijo oglase po več spletnih straneh, medtem ko bodo nekateri oglaševali samo na

določenih območjih ali samo na določenih spletnih straneh. Količina in stil oglaševanja sta

zopet odvisna od zvrsti spletne strani. Primer: spletni časopisi oglašujejo po vseh straneh

in na vse možne načine tako s standardnimi oglasnimi pasicami kakor tudi s pojavnimi okni

(ang. pop-up). Novičarske strani imajo pogostokrat ob strani oglasne pasice velikosti 300

x 250 pikslov, zato morajo biti stranski okvirji dovolj veliki, da lahko vsebujejo oglase take

velikosti. Pogostokrat oglasi niso samo v stranskih okvirih, ampak tudi v glavi spletne

strani, saj ravno s temi dosegamo najvišje cene. Barve, ki se uporabljajo za izdelavo

oglasov, so pogostokrat raznobarvne in svetlih barv, ker obiskovalcem tako prej padejo v

oči. (Snell, 2008)

Poznamo več vrst spletnih oglasov (tekstovna in oglasna pasica, oglas vmesne strani,

pojavno okno, multimedijski oglasi), uporaba katerih je odvisna od namena oglaševanja in

od želenega načina doseganja ciljne množice. (Spletnik, 2012)

Oglasna pasica (ang. banner) je najbolj razširjen način oglaševanja, saj je tudi eden izmed

najlažjih. Poznamo ležeče in pokončne oglasne pasice, njihova uporaba pa je odvisna od

tega, na katero mesto ga bomo vstavili. Oglasi se znotraj tega okenca redno menjavajo –

ali so teksti, slike ali celo kratki video posnetki. S klikom na oglas nas preusmeri na stran,

ki jo oglas oglašuje.

5

Tekstovni oglasi so sestavljeni iz samega teksta. Lahko bi se reklo, da je to malo bolj

moderen oglas iz časopisa. Ob pritisku na preusmeritveno povezavo v oglasu nas ta

preusmeri na drugo spletno stran, na katero se ta oglas navezuje.

Oglas vmesne strani se pojavi ob prehodu z ene spletne strani na drugo, po navadi je tak

oglas večpredstavnostni, lahko vsebuje sliko, animacijo, video posnetek, zvočni zapis …

Pojavno okno (ang. pop-up ad) se pojavi ob obisku spletne strani ali ob kliku na njen

element. Taki oglasi najpogosteje vsebujejo slike in so zelo nadležni, saj se nam nehote

pojavljajo sredi ekrana in je za to, da jih zapremo, potrebno pritisniti na križec. Tak tip

oglasov je najbolj pogost pri spletnih straneh, kjer je njihov prihodek le oglaševanje oz. je

le-to večji del prihodka.

Večpredstavnostni so najpogosteje slike, kratke animacije, zvočni zapisi ali video posnetki.

Take oglase lahko opazimo na spletni strani 24ur.com pred začetkom posnetka, ki si ga

želimo ogledati. Posnetku, ki je objavljen na njihovi spletni strani, je zmeraj dodan nek

video oglas, ki po navadi traja od 10 pa vse do 30 sekund. Ker je to novičarska spletna stran

in jim je glavni del prihodka ravno oglaševanje, je ta način oglaševanja zanje primeren,

vendar pa je za samega obiskovalca zelo moteč, saj mu pred želeno video vsebino vsilijo

še nek posnetek video reklame.

Poznamo tudi še način oglaševanja preko e-naslova, in sicer se imenuje Opt-In oglaševanje.

Tak tip oglaševanja je zelo priljubljen pri oglaševalcih, saj jim oseba, ki želi prejemati

oglase, sama pošlje e-naslov oziroma jim dovoli, da ji pošiljajo oglase.

Opt-In oglaševanje hitro pridobiva na popularnosti pri oglaševalcih. Na spletnih straneh se

lahko obiskovalec sam naroči na elektronske novice. S tem ko so se obiskovalci strinjali,

imajo lastniki strani dovoljenje, da jim pošiljajo oglase na e-naslov. Nekatere internetne

strani tudi prodajajo elektronske naslove uporabnikov oglaševalcem, kar je seveda

nedopustno, in posledično taka dejanja pogosto vodijo do velike količine nezaželenih

sporočil.

Spodnji graf prikazuje vložek v spletno oglaševanje v ZDA od leta 2000 do leta 2015. V

letu 2015 je skupna poraba za spletno oglaševanje v ZDA znašala 59,6 milijarde ameriških

dolarjev, kar je za 10,1 milijarde več kot leto prej.

6

Graf 2.1: Vložki v spletno oglaševanje v milijardah ameriških dolarjev letno

Vir: Statista (18. avgust 2016)

2.1 Tehnike spletnega oglaševanja

Poznamo več vrst spletnega oglaševanja, vsaka je specifična glede na ciljno publiko. Če

želimo naše oglase prikazati neki skupini ljudi, ki se zanimajo za določeni produkt ali

storitev, ne bo dovolj, da to samo prikažemo v določenih okencih, ampak bo potrebno

pridobiti več podatkov o obiskovalcu, rečeno drugače, treba mu bo slediti in opazovati, kaj

ga zanima.

2.1.1 SEO-oglaševanje

Optimizacija za iskalnike (ang. Search Engine Optimization – SEO) je tista vrsta

oglaševanja, s katero želimo pridobiti čim boljšo pozicijo na straneh iskalnikov. Ko v

iskalnik vtipkamo neko besedo, na primer dogodek, bi si jaz osebno želel, da bi mojo

spletno stran prikazalo kot prvi zadetek v iskalniku, kar posledično pomeni tudi veliko večji

obisk. Kriteriji za določitev uvrstitve v rezultate iskanja so ločeni glede na dve veji, in sicer

na on-site in off-site optimizacijo. Če torej sedaj obrazložimo, bi lahko rekli, da je on-site

optimizacija optimizacija vsega tistega, kar se nahaja neposredno na naši spletni strani.

Spletna stran naj vsebuje kratke in opisne vsebine ter tudi naslove, saj lahko preobsežna

7

besedila škodijo. Ključne besede naj bodo tiste, ki se jih v iskalnik največ vnaša, saj bo, če

bomo vnesli malokrat iskane besede, posledično tudi prikaz spletne strani med zadetki zelo

slab. Off-site optimizacija pa je za razumevanje zahtevnejša. Znano je, da spletni iskalniki

pogostokrat menjajo algoritme, ki se jim moramo prilagajati za nadaljnjo uspešnost pri

oglaševanju, zato je potrebno spremljati novosti. Ta način optimizacije se tiče vsega, kar se

dogaja zunaj naše spletne strani. Zelo pomembne so povratne povezave, ki se nahajajo na

drugih straneh in jih ob kliku preusmeri na našo spletno stran. Ta način optimizacije tudi

preverja strani, na katerih se te povratne povezave nahajajo. Ob velikem številu povratnih

povezav na isti strani je vsaka povratna povezava vredna manj, kakor bi bila v primeru, da

bi bila samo ena. To velja tudi v primeru, ko imamo enake naslove in besedila v povratnih

povezavah, kar posledično pomeni, da uvrščanje ne bo tako uspešno. Ti algoritmi so zelo

pametni in preverjajo, kolikokrat so bile uporabljene iste besede v posameznih povratnih

povezavah. Da se ustvari povratna povezava, je potrebno ustvariti oglas, ki nas ob kliku

preusmeri na spletno stran, zato je pridobivanje povratnih povezav še težje, saj ga je

potrebno plačati in pridobiti zaupanja vredno spletno stran.

Če se ne spoznamo na SEO-oglaševanje, je najbolje najeti agencijo, ki se s tem ukvarja.

Plačila SEO-storitev se ločijo po štirih kategorijah:

Mesečno vzdrževanje: stranka plačuje mesečno neki znesek, za katerega se

predhodno dogovori, v zameno pa ji agencija izvede svoje storitve. Ta način je

najbolj pogost in zagotavlja najboljši izkupiček pri oglaševanju. Ta storitev

zagotavlja analize, izboljšavo vsebine na spletni strani, novice, grajenje povezav,

raziskovanje ključnih besed in optimizacijo. Cena se giblje od 750 do 5,000

dolarjev na mesec. Večina podjetij plačuje med 2,500 in 5,000 dolarjev za mesečne

usluge. (DeMers, 2013)

Pogodbene storitve s fiksirano ceno: skoraj vse SEO-agencije prodajo svoje storitve

preko pogodb. Pogodbe se sklepajo na nekih obstoječih ponudbah SEO-agencij, ki

jih imajo objavljene na spletni strani. Cene so popolnoma odvisne od želja strank,

zato ni neke splošne cene. (DeMers, 2013)

Projektne cene: projektne cene so podobne pogodbenim, vendar s to razliko, da so

prilagojene našemu projektu. Cene variirajo glede na projekt. Recimo, da si želi

slaščičarna SEO-oglaševanje in za pomoč zaprosi agencijo. Glede na strankine

zahteve in težavnost agencija določi ceno. Projekti so različni in vsak je po svoje

8

zahteven, zato ponovno ni neke standardne cene, vendar nas to pogostokrat stane

med 1000 in 30000 dolarjev. (DeMers, 2013)

Svetovanje na uro: ta način se plačuje po uri, v zameno pa nam povedo informacije.

Svetovanja navadno stanejo od 100 do 300 dolarjev na uro. (DeMers, 2013)

SEO je tako rekoč obvezen za vsako spletno stran, saj z njim povečamo in/ali izboljšamo

poslovanje. Najbolje je, da najamemo agencijo, ker je za to potrebnega veliko časa in

znanja. Naš rang se vseskozi spreminja tako zaradi konkurence kakor tudi sprememb

algoritma, zato se je potrebno konstantno prilagajati. Pri izboru SEO-agencije je najbolje

preveriti njihove kompetence, koliko časa se ukvarjajo s tem, koliko strank imajo, ceno itd.

Zelo pomembno je tudi, da ne uporabljajo tako imenovanega »black hat sea«, ki je

nedovoljen in se koncentrira samo na pridobivanje mest v iskalniku, ne pa na ljudi. Če

opazijo uporabo le-tega, nam lahko za zmeraj blokirajo prikaz v iskalniku.

2.1.2 Socialna omrežja

Uporaba socialnih omrežij, kot so Facebook, Twitter, Instagram, LinkedIn, je zelo

primerna, saj nam lahko zelo hitro prinese pozitivne učinke. Storitve socialnih omrežij za

pridobivanje pozornosti in spletnega prometa so zelo popularne, saj jih uporablja zelo

velika množica ljudi. Oglaševanje na socialnih omrežjih je zelo primerno, saj si profile

lahko ustvarimo brezplačno, ciljno množico zelo hitro najdemo in plačujemo oglaševanje

glede na svoj lastne želje. Na socialnih omrežjih uporabniki sami vnesejo interese, svoje

osebne podatke (spol, starost, kraj), tako je oglaševalcem veliko lažje, saj že v osnovi

pridobijo nekaj podatkov, s katerimi lažje najdejo ciljno množico. Na socialnem omrežju

Facebook uporabniki tudi všečkajo (ang. like) določene strani raznih podjetij, interesnih

dejavnosti, klubov, trgovin … Iz tega, kar je uporabnikom všeč, lahko ugotovimo, kaj jih

zanima, in jim prikazujemo oglase iz teh kategorij.

Leta 2013 so oglaševalci zapravili 5,1 milijarde dolarjev za oglaševanje na socialnih

omrežjih. V letu 2018 se pričakuje, da bo znesek, ki ga bodo oglaševalci zapravili za

oglaševanje, poskočil že na 18 milijard dolarjev. V tretjem četrtletju 2014 je Facebook imel

za 2,96 milijarde prihodkov iz oglaševanja, od tega kar 66 odstotkov samo od oglaševanja

na mobilnih napravah. Twitter je ustvaril 85 odstotkov vseh prihodkov od mobilnega

9

oglaševanja v istem četrtletju, kar je približno 320 milijonov dolarjev. Do junija leta 2014

se je skoraj 80 odstotkov ameriških oglaševalcev tržilo na Twitterju. (LePage, 2015)

Največja prednost socialnih omrežij je iskanje ciljne množice. Tradicionalno oglaševanje

je v iskanju ciljne množice šibkejše, zato pa so Twitter, LinkedIn, Facebook in druga

socialna omrežja v tem veliko bolj uspešna. Na Twitterju lahko ciljamo omrežje ljudi, zato

vemo, kakšen tip občinstva bomo dosegli. Medtem ko lahko na Facebooku ciljno množico

iščemo po njihovih interesih, jo lahko na LinkedInu po njihovih izobrazbah, poslovnih

izkušnjah in delovnih mestih. Vsi ti podatki, ki jih socialna omrežja zberejo o svojih

uporabnikih, so za oglaševalce pri doseganju ciljne množice velika prednost. (LePage,

2015)

Cene oglaševanja so večinoma dostopne večini oglaševalcev. Leta 2014 je v anketi

sodelovalo 200 trgovcev, ki prodajajo na veliko (ang. B2B – bussiness to bussiness), da bi

podali oceno o stroških, ki so potrebni, da se neki obiskovalec prijavi na novice (ang CPL

– cost per lead). Malo čez 50 odstotkov anketirancev je odgovorilo, da so stroški zelo

majhni. Stroški oglaševanja na Twitterju so odvisni od vrste oglasa, promovirani tviti in

računi nas lahko stanejo 10 dolarjev na neki dogodek (ogled videa, klik na spletno

povezavo, sledenje ...), hkrati pa je odvisno tudi od vrste množice, na katero ciljamo.

Povprečni strošek Facebook oglasov je prav tako odvisen od vrste podjetniških panog in

vrste oglasov. Nekateri viri poročajo, da Facebook oglasi povprečno stanejo 25 centov

ameriških dolarjev na vsakih 1000 prikazov, medtem ko drugi govorijo o povprečju med 6

in 7 ameriških dolarjev. Socialna omrežja so zelo učinkovita za oglaševanje, saj nam

omogočajo, da oglašujemo zelo specifičnemu občinstvu. Za uspešnost na socialnih

omrežjih sta potrebna pravilna uporaba platforme in vednost o tem, kdo je ciljna množica,

v nadaljnje pa je potrebno pravilno oglaševanje. Socialna omrežja so zelo dostopna in tako

ponujajo možnost oglaševanja za vsakega posameznika ali podjetje. Objaviti oglas na

socialnih omrežjih je zelo lahko, vendar pa je za oglaševanje potrebno imeti denar.

(LePage, 2015)

Oglaševanje na socialnih omrežjih je dokaj nova platforma. V primeru, da imamo v

podjetju delničarje, jih bo težje prepričati, da ima tako oglaševanje neko vrednost. Ljudje

ne bodo znali razumeti, kako močno nam lahko socialna omrežja pomagajo pri oglaševanju.

Zato je na nas, da z ustrezno dokumentacijo dokažemo nasprotno. Slabša prilagodljivost na

10

nove platforme je tudi ena izmed slabosti. Pogostokrat ljudje ostanejo privrženi samo eni

platformi, saj se ne želijo spoznati z ostalimi socialnimi omrežji ali pa menijo, da to ni

potrebno. Vendar bi bilo bolje, če bi se oglaševali in predstavljali na več platformah ter bi

tako pridobili še večji spekter morebitnih strank. (LePage, 2015)

Oglasi na socialnih omrežjih se hitro obračajo, saj se lahko v primeru, da imamo

zakupljenih 1000 prikazov oglasov, to zgodi že v enem dnevu, kajti obiski socialnih

omrežjih so zelo pogosti na dnevnem nivoju. Zato je potrebno menjati oglase z novimi ali

menjati vsebino. Morebiti je menjavanje oglasov v očeh podjetja videti kot težava, a

potrebno se je zavedati, da nam oglasi na socialnih omrežjih predstavljajo naše podjetje,

zato jih je potrebno redno urejati, da lahko uporabniki socialnih omrežij opazijo, da smo

pri delu resni. Ne smemo pa pozabiti na naš profil, ki ga moramo redno pregledovati in

objavljati nove stvari. (LePage, 2015)

2.1.3 Google Adsense oglaševanje

Google Adsense oglaševanje deluje po principu, kdo ponudi več. Na svoji spletni strani

lahko prostor za oglaševanje ponudimo v zakup. Oglaševalske prostore, ki se prodajajo,

lahko kupci v realnem času vidijo in oddajo svoje ponudbe. Ponudniki nam plačujejo po

kliku na oglas ali po številu prikazov oglasa. Kolikšno bo plačilo, je odvisno od same

ponudbe in od tega, kolikšen obisk ima oziroma kako popularna je naša spletna stran. Če

se oglasno okence nahaja na delu spletne strani, kjer je manj opazno, lahko pričakujemo

manjše plačilo, če pa v zakup ponudimo oglasno okence na samem vrhu spletne strani, kjer

ga lahko vsak vidi, bo plačilo večje. V prodaji oglasnih okenc kupci med seboj tekmujejo

na avkcijah za pojavitev njihovega oglasa na spletni strani. Rezultati se razlikujejo od kupca

do kupca, ampak objava oglasa lahko vodi do nakupa ali samo do prijave na novice. Za

boljšo voljo oglaševalcev, da bodo nekaj od tega oglaševanja pridobili, lahko Google celo

poseže v samo ponudbo in jo zniža v primeru, da njihov algoritem pokaže nedoseganje

ciljev oglaševalca. Avkcija nam izbere oglase, ki se bodo prikazali na spletni strani, in

posledično prinese znesek, ki ga bomo zaslužili. Na tradicionalnih avkcijah kupci ponudijo

svoj maksimalni znesek, ki so ga pripravljeni plačati. Podobno delujejo tudi avkcije na

Adsense straneh, samo da tu ponudijo denar za plačilo po kliku na oglas ali za prikaz na

spletni strani. Avkcije rangirajo oglaševalce po njihovih ponudbah in oceni. Če algoritem

meni, da klik na oglas ne bo pripeljal do boljših poslovnih rezultatov, se lahko kupčeva

11

ponudba še zniža. Google pri posameznih avkcijah razvrsti ponudbe oglaševalcev po ceni

plačila in oceni kakovosti. S tem načinom pridobita obe strani, prodajalec z večjim

zaslužkom in s primernimi oglasi, medtem ko oglaševalec pridobi ciljno publiko, ki jo želi.

(Google AdSense, 2. september 2016)

Za objavo Googlovih Adsense oglasov se je potrebno registrirati v njihov sistem, kjer nam

preverijo spletno stran, če sploh ustreza njihovem kriterijem. Po uspešnem preizkusu se

določi velikost oglasnih okenc in se jih lahko začne prodajati. Prodajalec oglasnega okenca

lahko tudi blokira prikazovanje določenih oglasov, povezave na sumljive spletne strani,

kategorijo oglasov ali celo omrežje oglasov.

2.1.4 E-mail marketing

Oglaševanje preko e-pošte je zelo pomembna zvrst oglaševanja, saj tako ustvarimo stik z

bodočimi strankami. Pošiljanje oglasov prek e-pošte je najbolje izvajati v primeru, da je

uporabnik naročen na novice. Stranke se največkrat prijavijo na novice preko spletnih

obrazcev, na katerih potrdijo, da dovoljujejo pošiljanje e-sporočil. S pošiljanjem le-teh

lahko predstavimo izdelke, storitve, novosti, posebne ugodnosti za naše naročnike itd.

Za povečanje zaslužka od pošiljanja e-pošte lahko stranki za prijavo na listo za prejemanje

novic ponudimo nekaj, česar ne želi zavrniti. To so najpogosteje popusti ali kakšne druge

ugodnosti:

dajmo jim nekaj več, da se zavedajo, da bodo imeli koristi od prijave na novice;

pošiljanje ne prevelikega števila e-sporočil, da ne bodo novice postale nezaželene;

s pomočjo strank in njihovih nasvetov izboljšamo ali ustvarimo nov

produkt/storitev;

ustvarimo več različnih e-poštnih list, ki jih razvrstimo po določenih kriterijih oz.

njihovih interesih, saj s tem še podrobneje analiziramo stranke;

uporabimo recenzije;

uporabimo plačljiva naročila;

ponavljamo uspešne ugodnosti;

obveščanje o nagradnih igrah.

12

3. PROGRAMSKI JEZIKI

3.1 HTML

HTML je kratica za HyperText Markup Language, ki je označevalni jezik za izdelavo

spletnih strani. Z njim opišemo gradiva, ki jih želimo objaviti na spletu. Vendar s samo

uporabo html značk ne bomo bili pretirano ustvarjalni. Poleg znanja HTML-jezika je

smiselno tudi poznati CSS-programski jezik, s katerim lahko spreminjamo tip pisave, barvo,

velikost, obliko posameznih elementov … S pomočjo HTML, razen prikaza dokumenta v

brskalniku, hkrati določimo tudi strukturo in semantični pomen delov dokumenta. HTML

lahko izdelamo v vsakem urejevalniku besedil (kot npr. beležnici idr.), saj je zapisan v obliki

HTML-elementov, ki so sestavljeni iz značk, zapisanih v špičastih oklepajih (npr. kot <p>)

znotraj vsebine spletne strani. HTML-značke so običajno zapisane v parih, kot

npr. <p> in </p>. Prva značka se imenuje tudi začetna značka in druga značka končna

značka. Znotraj para značk lahko oblikovalec spletne strani vpiše poljubno besedilo in tudi

druge značke (gnezdenje značk). Dokumenti HTML se končajo s končnico .html. (Nsa, 18.

avgust 2016)

Za izdelavo čisto preproste spletne strani, kjer nanjo izpišemo tekst, je popolnoma dovolj

koda spodaj:

<!DOCTYPE html>

<html>

<head>

<title>Naslov spletne strani</title>

</head>

<body>

<p>Tukaj lahko napišemo kakršenkoli tekst.</p>

</body>

</html>

13

V zadnji verziji HTML, ki je izšla leta 2014, je kar nekaj novosti, ki so kar pomembne pri

razvoju in napredku HTML. Izdelali so nekaj novih značk za strukturo in formular ter nekaj

novih elementov.

Dodali so nekaj novih značk za strukturo. Z njimi si pomagamo pri določanju pozicije

posameznih elementov spletne strani. Danes so spletne strani po večini sestavljene iz glave,

navigacijske vrstice, vsebine, stranskega menija, noge in ostalih elementov, posledično so

zaradi tega kreirali nove značke za podporo teh elementov.

<header> – z njim definiramo glavo spletne strani;

<section> – se uporablja za grupiranje podobnih vsebin. Smiselno jo je uporabiti v

primeru, če je vsebina znotraj njega povezana med sabo, sicer pa lahko uporabimo

<div> element;

<footer> – naj bi vseboval informacijo o tem, kdo jo je napisal, o avtorskih pravicah,

o url-jih, ki so povezani s spletno stranjo itd. Smiselno bi bilo imeti samo en footer

na en dokument, vendar jih lahko imamo več;

<nav> – ta element se uporablja za navigacijsko vrstico, kjer shranimo skupino

povezav, s katerimi se lahko sprehajamo po spletni strani;

<article> – uporabimo ga za označbo člankov ali pomembne vsebine;

<aside> – z njim lahko vsebino postavimo ob stran, kjer lahko vanj dodamo, karkoli

si zaželimo;

<details> – vsebuje podrobnosti o elementu;

<datagrid> – kreira tabelo, ki vsebuje podatke iz baze ali drugih virov.

Dodane so bile nove lastnosti, s katerimi lahko določimo še nekaj novih vrst vnosnih polj

za element <input>. HTML 5 so dodali še nekaj novih zvrsti vnosnih polj:

datetime – datum in čas;

datetime-local – lokalni datum in čas;

date – datum;

month – mesec;

week – teden;

time – čas;

number – številka;

range – uporaba drsnika;

14

email – v primeru vpisa e-poštnega naslova mora imeti vnos sledečo strukturo

([email protected]);

url – za vnos spletnega naslova;

search – iskanje;

color – izbira barve

tel – telefon.

HTML 5 se je razvijal za namen, da bi bil še v večjo pomoč razvijalcem pri lajšanju

izdelave dinamičnih spletnih strani, posledično je tako prisotnih kar nekaj sprememb

pri atributih:

atribut priročni meni (ang. context menu) sedaj omogoča, da z desnim klikom na

element s tem atributom prikažemo skriti meni, žal zaenkrat to podpira samo

brskalnik Firefox;

href ni več potreben v <a> znački, s tem je sedaj omogočena uporaba <a> značk v

skriptah in spletnih aplikacijah brez nepotrebne uporabe pošiljanja sider (#);

atribut async je dodan script znački in pove brskalniku, naj se skripta naloži

asinhrono zato, da ne upočasni nalaganja in prikaza preostale vsebine.

HTML 5 ponuja tudi več možnosti na področju multimedijskih vsebin. To sta

elementa <avdio> in <video>, ki omogočata predvajanje zvočnih in video datotek brez

uporabe vtičnikov. Pri obeh lahko uporabimo <source> element, s katerim vključimo več

različnih oblik video vsebin, ki so različno kodirane. Tudi pri dostopnosti je narejen

napredek, in sicer z elementom <track> lahko nad video in avdio vsebine vstavimo

besedilo, ki je odvisno od časa. Verjetno bo v prihodnosti mogoče uporabiti podnapise pri

video vsebinah. Nazadnje je sprememba vidna tudi pri 2D-grafiki. S <canvas> elementom

vstavimo resolucijsko odvisno platno, ki se uporabi za dinamično upodabljanje slik ali

grafik za igre. Velika pridobitev je tudi funkcija premikanja Drag/Drop.

Prav tako se je pojavilo nekaj novih elementov pri obrazcih. Z elementom <datalist> lahko

sedaj vnaprej določimo vrednosti v obrazcu, ki jih nato izberemo ali vnesemo nove. Za

upravljanje s ključi uporabimo element <keygen>, ki predstavlja kontrole, ki nam

generirajo javno-zasebni parni ključ in nato pošljejo javni ključ prejemniku. Za računanje

števil in prikaz rezultata uporabimo element <output>. Dodaja tudi globalne atribute (id,

15

hidden, tabindex), ki jih lahko dopišemo kateremkoli elementu. Prav tako so vnosne forme

dobile podporo metodama PUT in DELETE k obstoječima POST in GET.

HTML 5 ponuja lokalno shranjevanje podatkov (ang. Web Storage). Podatki se shranjujejo

lokalno, v neposredno skladišče brskalnika, na strani odjemalca. Pomembni

funkcionalnosti lokalnega shranjevanja podatkov sta nadomestitev piškotkov in

zagotavljanje večje varnosti. HTML 5 uvaja tudi predpomnilnik aplikacij, kar pomeni, da

je spletna aplikacija dostopna brez internetne povezave. V originalu se imenuje App Cache.

Najpomembnejše prednosti, ki jih nudi predpomnjenje aplikacij, so delo brez povezave,

hitrost in zmanjšana obremenitev strežnika. Pomembna novost je tudi spletni delavec (ang.

web workers), ki omogoča kodi JavaScript, da teče v ozadju procesa, brez vpliva na

delovanje strani, in tako razvijalcem olajša razvoj večnivojskih aplikacij. HTML 5 ponuja

tudi programski vmesnik, ki spletni aplikaciji omogoča določitev trenutne geografske lege.

Funkcija geolokacije (ang. geolocation) je uporabna predvsem pri razvijanju aplikacij za

mobilne naprave, kjer se določanje geografske lege pogosto uporablja. Omeniti velja še

funkcijo SSE (ang. Server-Sent-Events), ki spletni strani omogoča pridobivanje

posodobitev s strežnika. Uporabna je predvsem pri razvijanju rešitev, ki gostujejo na

strežnikih, ki niso njihov primarni strežnik. (Vihprojekt, 15. avgust 2016)

3.2 Javascript

JavaScript spada v eno od velikih skupin programskih jezikov, ki jim rečemo tolmači.

Značilnost teh programskih jezikov je, da se program izvaja sproti med svojim

razčlenjevanjem, torej za poganjanje programa ne potrebujemo prevajalnika, ki bi iz

izvorne kode naredil programsko kodo, ampak tolmača, ki izvorno kodo programa razčleni

in tolmači sproti.

Tolmač za JavaScript je vgrajen v skoraj vseh novejših brskalnikih. Aktiviramo ga s

pomočjo značke <script>, ki jo vgradimo v dokument HTML. Vso besedilo, ki sledi do

značke </script>, bo tolmač razčlenil in sproti tolmačil.

JavaScript pa ni edini programski jezik, ki ga lahko uporabljamo v kombinaciji s HTML.

Pogosto se uporablja tudi VBScript, ki pa s strani brskalnikov ni tako zelo podprt kot

JavaScript. Podpira ga na primer MS Internet Explorer. Zato je potrebno pri uporabi

16

značke script določiti, kateri tolmač želimo aktivirati. To storimo z lastnostjo type, ki ji za

vrednost napišemo tip besedila.

Na tak način lahko izvorno kodo programa vključimo kjerkoli v dokumentu HTML, torej v

glavo (head) ali telo (body) dokumenta. Program lahko razbijemo tudi na več delov in

vključimo vsak del posebej s svojo značko script, pri čemer jih je nekaj v glavi, nekaj pa v

telesu dokumenta.

Daljše programe je nerodno vključevati v HTML na tak način, še posebno, če isti program

potrebujemo v več dokumentih. Da programa ne bi bilo potrebno pisati v vsak dokument

posebej, obstaja možnost, da ga zapišemo na posebno datoteko, ki ji damo končnico .js. To

datoteko vključimo v HTML takole:

<script type="text/javascript" src="program.js"></script>

Če imamo program zapisan na več datotekah, moramo na opisani način vključiti vsako

datoteko posebej. Spet lahko to storimo v glavi ali telesu dokumenta HTML. Opozoriti pa

velja, da z eno značko script ne moremo kombinirati obeh načinov vključevanja programa.

Za vsak del moramo uporabiti svojo značko script.

Ko brskalnik pri prikazovanju dokumenta HTML naleti na značko script, mora s

prikazovanjem strani počakati tako dolgo, da se vsa izvorna koda naloži, razčleni in

tolmači. Šele potem lahko nadaljuje s prikazovanjem. To je lahko zelo neprijetno, če je

tolmačenje izvorne kode časovno zahtevno, kar se lahko pripeti pri daljših programih, ali

če mora tolmač naložiti še dodatne datoteke, kot so slike. V nekaterih primerih si lahko

pomagamo z lastnostjo defer značke script, s katero brskalniku sporočimo, da ni treba

čakati tolmača, da dokonča svoje delo, pač pa lahko takoj nadaljuje s prikazovanjem strani.

Program, katerega tolmačenje lahko preložimo, ne sme ustvarjati nobene vsebine, ki bi jo

bilo potrebno prikazati, niti ne sme biti odgovoren za reakcijo na najrazličnejše dogodke,

ki se lahko zgodijo, še preden se program raztolmači do konca. Lastnost defer nima

vrednosti, žal pa jo podpirajo samo nekateri brskalniki. (Zaversnik, 21. julij 2016)

JQuery je knjižnica za JavaScript in je tako z njim veliko lažje in hitreje ustvariti JavaScript

procese v vseh večjih brskalnikih in brez kakršnekoli podporne kode v ozadju. Z JQuery je

možno spreminjati stil posameznih HTML-elementov kakor tudi dodajanje, brisanje in

17

urejanje le-teh. Z uporabo JQuery je možno tudi spreminjati, dodajati in brisati CSS-

lastnosti posameznim elementom ali več hkrati. Ob določenih potezah uporabnika na

spletni strani, na katere je brskalnik pozoren in jih spremlja, lahko sprožimo nek proces.

Recimo, da uporabnik z miško preide neki element na strani, mu ob tem dejanju sprožimo

neko določeno akcijo. (Duckett, 2014)

Za delo s programskim jezikom potrebujemo datoteko, ki jo lahko vključimo preko

povezave v splet ali jo prenesemo na računalnik in slednjo vključimo v našo programsko

kodo. Zadnjo verzijo lahko prenesemo s spletne strani www. jquery.com. Z omenjenim

programskim jezikom je veliko lažje narediti dinamično spletno stran. V naslednjem

primeru bom prikazal, kako lahko prikazujemo in skrijemo neki element s funkcijo toggle:

<script>

$( document ).ready(function() {

$( "#login" ).click(function( ) {

$(".loginwindow").toggle();});

});

</script>

Za zagon JQuery kode je potreben "ready" dogodek, brez njega lahko poženemo JQuery

samo še tako, da v element »body« dodamo atribut »onload«, kateremu pripišemo

funkcijo. Atribut onload se bo zagnal takoj ob obisku spletne strani. Z dogodkom »ready«

lahko poženemo JQuery kodo kadarkoli. Če jo poženemo z atributom onload, se bo ta

koda izvršila samo enkrat. Ob kliku miške na element z razredom »login«, ki je lahko

kakršenkoli element, bomo v tem primeru z uporabo funkcije toggle prikazali ali skrili

element. Funkcija toggle deluje tako, da ga ob vsakem kliku na ta element prikaže ali

skrije.

3.3 Ajax

Ajax (ang. Asynchronous JavaScript and XML) je tehnika za kreiranje boljših, hitrejših in

bolj interaktivnih spletnih aplikacij s pomočjo programskih jezikov XML, HTML, CSS in

Java Script. Ajax je na strani odjemalca skript, ki komunicira v in iz strežnika / baze

podatkov, brez potrebe za povratno objavo ali osvežitev strani. Ajax najbolje definiramo

kot »način izmenjave podatkov s strežnikom in posodabljanje delov spletne strani brez

18

ponovnega osveževanje celotne strani«. Ajax sam je večinoma sestavljen iz izrazov

različnih JavaScript tehnik za dinamično povezavo s spletnim strežnikom, z brez

nepotrebnih nalaganj več strani. (Seguetech, 21. julij 2016)

Obstajajo 4 glavne prednosti uporabe Ajaxa v spletnih aplikacijah:

Povratni klici (ang. callbacks): Ajax se uporablja predvsem za opravljanje

povratnih klicev, izvajanje hitrih povratnih potovanj v in iz strežnika za

pridobivanje in/ali shranjevanje podatkov, brez pošiljanja celotne strani nazaj na

strežnik. Brez pošiljanja celotne strani in pošiljanja vseh podatkov iz obrazca na

strežnik je zasedenost omrežja manjša in posledično pride do hitrejšega izvajanja

operacij. V mestih in krajih z omejeno pasovno širino lahko to močno izboljša

učinkovitost delovanja omrežja. Poraba časa, ko se podatki pošljejo v in iz

strežnika, je minimalna. Z uporabo povratnih klicev strežniku ni treba obdelati

vseh elementov obrazca. S pošiljanjem le potrebnih podatkov je čas za obdelavo

omejen, hkrati pa tudi ni potrebno obdelati vseh elementov obrazca, ponovno

poslati slik nazaj k obiskovalcu ali ponovno poslati celotne strani. (Seguetech, 21.

julij 2016)

Izdelava asinhronih klicev: Ajax omogoča asinhrone klice na spletni strežnik. To

pomeni, da se lahko več dogodkov izvaja neodvisno eden od drugega. (Seguetech,

21. julij 2016)

Uporabniku prijazen: Zaradi uporabe povratnih klicev brez nepotrebnega

osveževanja spletne strani je spletna stran bolj odzivna, hitrejša in uporabniku

prijaznejša. (Seguetech, 21. julij 2016)

Povečana hitrost: Glavni namen Ajaxa je izboljšati hitrost, učinkovitost in

uporabnost spletne aplikacije. Odličen primer za Ajax je funkcija ocene filma na

Netflixu. Ko uporabnik vnese osebno oceno filma, se bo ocena shranila v

podatkovno bazo brez nepotrebnega osveževanja spletne strani, poleg tega se bo

tudi posodobila skupna ocena filma. (Seguetech, 21. julij 2016)

Drugi velik napredek za JavaScript in Ajax je JavaScript objektna knjižnica, ki se imenuje

jQuery. Ta je brezplačna in odprtokodna programska oprema. JQuery se uporablja za lažje

pisanje v JavaScriptu, za uporabo pri navigaciji in manipuliranju s spletno stranjo in za

uporabo asinhronih Ajaxovih povratnih klicev. Z uporabo jQuery in JSON (JavaScript

19

Object Notation) spletnih storitev so Ajaxovi povratni klici postali standardni del

programske prakse za načrtovanje in razvoj spletnih aplikacij. (Seguetech, 21. julij 2016)

Ajax se lahko uporablja v kakršnihkoli spletnih aplikacijah, kjer bi se lahko manjšo količino

podatkov shranilo ali pridobilo iz strežnika, ne da bi osvežili spletno stran. Dober primer je

preverjanje podatkov ob vpisu ali registraciji ali pri uporabi padajočih menijev, kjer lahko

obkljukamo izbiro. Primeren je tudi za uporabo pri avtomatskem izpolnjevanju tekstovnih

polj, saj lahko z uporabo sej in Ajaxa ob enem kliku na besedo samodejno izpolnimo vsa

tekstovna polja. (Seguetech, 21. julij 2016)

Za aktivacijo Ajax povratnega klica klikanje ni potrebno, dovolj je že sam prehod z

miško, da sprožimo neki dogodek. (Tutorialspoint, 25. julij 2016)

Za delo z Ajaxom potrebujemo Javascript ali JQuery kodo, za aktivacijo Ajaxa pa je

potrebno napisati ukaz »$.ajax« in mu potem pripisati lastnosti, ki jih želimo. Primer bom

predstavil v kodi spodaj:

<script>

$( document ).ready(function() {

$( "button" ).click(function( ) {

$.ajax({

type: 'post',

url: 'preveri.php',

data: {name:name, surname:surname},

success: function (data) {

if (data=="success"){alert ("Podatki so uspešno preverjeni !")};

else if (data=="unknown_name"){alert("To ime ne obstaja !");}

else {alert ("Ime in priimek ne obstajata !");} }

});

});

});

</script>

20

Ob kliku na element gumb (ang. button) sprožimo funkcijo, ki aktivira Ajaxov klic. Ob

klicu Ajax pošlje podatke na strežnik, ker smo pri tipu (ang. type) klica določili »post«. Te

podatke se preveri v PHP-datoteki »preveri.php«. V tej datoteki lahko počnemo karkoli, v

tem primeru pa smo preverili poslane podatke, ali ustrezajo kakršnemukoli zapisu v

podatkovni bazi; in v tem primeru, da torej v podatkovni bazi najdemo zapis, ki temu

ustreza, lahko z uporabo ukaza »echo "success"« v PHP-datoteki sprožimo povratni klic,

ki nam na ekranu izpiše opozorilo, da so podatki uspešno preverjeni. V primeru, da nekaj

ne ustreza, pa lahko z ukazom »echo "unknown_name"« sprožimo malo drugačen povraten

Ajaxov klic, ki nam izpiše opozorilo: »To ime ne obstaja!« Če nič od tega ne ustreza, se

izpiše opozorilo z naslednjim tekstom: »Ime in priimek ne obstajata!«

Z Ajaxom lahko ob kliku na vnosno polje prikažemo opozorilo, ki po določenem času

ponovno izgine:

<script>

$(document).ready(function(){

$("input").focus(function(){

$("#sporočilo").css({ "color": "red", "font-weight":"bolder","font-size":"14px", "display":

"inline"}).fadeOut(2000); });

});

</script>

Ob kliku na vnosno polje (ang. input) se zgodi tako imenovana akcija fokus (ang. focus) in

ob tej akciji elementu z id-jem sporočilo pripišemo naslednje CSS-lastnosti:

rdečo barvo;

odebeljeno pisavo;

velikost pisave 14 px;

prikaz elementa v vrstici.

Prikaz elementa v vrstici (ang. display inline) sem uporabil zato, ker je bilo privzeto

nastavljeno, da se element ne prikaže (ang. display none). HTML-element z id-jem

»sporočilo« lahko vsebuje kakršen koli tekst. Torej sedaj se je ob kliku prikazalo neko

sporočilo, ki je dobilo zgornje lastnosti CSS. To sporočilo ponovno izgine po 2000

milisekundah zaradi uporabe funkcije »fadeOut()«, torej s časom izginotja 2000

milisekund.

21

3.4 PHP

PHP je verjetno najbolj priljubljen skriptni jezik na spletu. S Php-jem lahko ustvarimo

uporabniška imena in gesla za prijavo na strani, preverimo podatke iz obrazca, ustvarimo

forume, galerije slik, ankete, izrišemo slike, izpišemo tako PDF-datoteke kakor tudi Flash

posnetke in še veliko več.

PHP je znan kot strežniški jezik, ker se ne izvaja na računalniku, ampak na strežniku, h

kateremu je bila poslana zahteva s strani obiskovalca. Rezultati se nato pošljejo na naš

računalnik in se prikažejo v brskalniku. Drugi skriptni jeziki, kot so ASP, Python in Perl,

so popolnoma nepotrebni za delo s Php-jem, saj le-ta ne zahteva nobenega predznanja.

Najbolj priljubljena razlaga PHP-kratice je »Hypertext Pre-procesor«, ampak to bi

pomenilo kratico HPP. Alternativna razlaga je, da začetnice prihajajo iz starejših verzij

programa, ki se je imenoval Personal Home Page Tools. Iz tega pa lahko sedaj razberemo

kratico PHP v pravem vrstnem redu. PHP je zelo popularen za kariero ustvarjalca spletnih

strani oziroma za kakršno koli delo s spletnimi aplikacijami, zato je znanje tega

programskega jezika zelo priporočljivo. (Homeandlearn, 26. julij 2016)

PHP je široko uporaben odprtokodni skriptni jezik. Je brezplačno prenosljiv in prosto

uporaben. PHP-datoteka ima končnico .php in lahko vsebuje HTML, CSS, JavaScript in

PHP-kodo. Deluje na več platformah (Windows, Linux, Unix, Mac OS X itd.) in je zelo

primeren za uporabo, saj je kompatibilen s skoraj vsemi strežniki, ki so danes v uporabi

(Apache, IIS itd.)

PHP je zelo uporaben pri izdelavi raznih obrazcev, kot so na primer kontaktni obrazci,

obrazci za registracijo. Uporablja se ga zmeraj, ko potrebujemo podatkovno bazo za

preverbo, vpis novih podatkov ali izpis. Najbolj pogost primer uporabe je, ko na spletni

strani izpolnimo neki obrazec – naj bo bodisi kontaktni, registracijski ali pa za prijavo

pritisnemo na neki gumb, ki sproži neko funkcijo. Ta funkcija lahko vsebuje ukaz POST,

ki je namenjen pošiljanju podatkov, ali ukaz GET, ki je namenjen pridobivanju podatkov.

V primeru, da pošiljamo podatke iz obrazca za vpis na neko spletno stran, se po navadi z

ukazom POST pošlje dve spremenljivki (uporabniško ime ali e-naslov in geslo). Ko ti dve

spremenljivki prispeta na strežniško stran, preverimo, ali v bazi podatkov sploh obstaja ta

uporabnik s tem imenom ali naslovom. Po preverbi v primeru uspešnosti sledi še

22

preverba, ali je geslo, ki je bilo vneseno, enako temu, ki ga imamo shranjenega v bazi

podatkov. V primeru, da je bilo geslo pravilno vneseno, je vpis uspešen, sicer pa

uporabniku na spletni strani izpišemo obvestilo, da je bilo vneseno geslo napačno.

Preverba se izvaja na strežnikovi strani in sam obiskovalec o tem nič ne ve, saj vidi samo

rezultat, ki mu ga koda vrne. Po navadi se po izvedbi PHP celotna stran osveži, razen če

se za komunikacijo med strežnikom in obiskovalcem uporablja programski jezik Ajax, s

katerim lahko dosežemo dinamično spletno stran, s katero lahko obdelujemo povratne

podatke s strani strežnika brez osveževanja strani.

Kaj lahko s php-jem ustvarimo:

PHP lahko generira dinamično spletno stran;

PHP lahko kreira, odpre, bere, piše, izbriše in zapre datoteke na strežniku;

PHP lahko zbere podatke iz formularjev;

PHP lahko pošlje ali sprejme piškotke;

PHP lahko doda, izbriše, modificira podatke v podatkovni bazi;

PHP se lahko uporablja za nadzor nad uporabniki in dostopom;

PHP lahko šifrira podatke. (W3schools, 28. julij 2016)

PHP se najpogosteje uporablja za delo s podatkovnimi bazami, sam ga največkrat

uporabljam za pošiljanje podatkov v bazo, preverbo in izpis le-teh. To pride v poštev tako

pri prijavi in registraciji uporabnikov kakor tudi pri izpisu njihovih podatkov. V primeru

bom prikazal, kako na preprost način preverimo, ali vpisani podatki uporabnika v vpisno

okence ustrezajo podatkom v bazi:

<?php

require('infobaza.php');

$geslo=$_POST['geslo'];

$uporime=$_POST['ime'];

if ($geslo && $uporime) {

$poizvedba=mysql_query("SELECT * FROM uporabnik WHERE Ime='$uporime'");

$stzadetkov=mysql_num_rows($poizvedba);

if($stzadetkov!=0)

{while($row=mysql_fetch_assoc($poizvedba))

23

{$dbIme=$row['Ime'];

$dbGeslo=$row['Geslo']; }

if ($uporime==$dbIme&&$geslo==$dbGeslo)

{session_start();

$_SESSION['imeupor']=$uporime;

header('Location:registriran.html');}

else {die("Napačno geslo!");} }

else{die ("Ta uporabnik ne obstaja!");}}

else{die ("Vpišite uporabniško ime in geslo!");}

?>

V tej datoteki smo prejeli uporabniško ime in geslo z uporabo $_POST funkcije, s katero

smo iz nekega obrazca poslali podatke na strežnik. Geslo in uporabniško ime shranimo v

spremenljivkah $geslo in $uporime in ju v nadaljnjih korakih preverimo. Za povezavo s

podatkovno bazo potrebujemo geslo za dostop, naslov strežnika in ime podatkovne baze,

vse to pa se nahaja v datoteki »infobaza.php«. Če spremenljivki »geslo« in »uporime« nista

prazni, izberemo iz podatkovne baze tisto osebo, pri kateri je uporabniško ime enako

vrednosti spremenljivke »uporime«, v nasprotnem primeru pa prekinemo izvajanje te

datoteke in izpišemo »Vpišite uporabniško ime in geslo!«. Če se to uporabniško ime ne

nahaja v podatkovni bazi, izpišemo »Ta uporabnik ne obstaja!«. V primeru, kjer je to

uporabniško ime vneseno v bazo, pa preverimo, ali vneseno geslo ustreza geslu, ki je

zapisano v podatkovni bazi k temu uporabniškemu imenu. Če je geslo nepravilno, se

prekine izvajanje tega PHP-dokumenta in izpiše se »Napačno geslo!«, v nasprotnem

primeru pa nas preusmeri na novo stran z imenom »registriran.html«.

3.5 CSS

CSS (ang. Cascading Style Sheets) ali kaskadne slogovne predloge je bil razvit pri W3C

(ang. World Wide Web Consortium). Uporabljamo jih pri delu s HTML-kodo, saj brez CSS

ne bomo nikoli ustvarili lepe in privlačne strani. Kaskadne slogovne predloge sestavljata

dva glavna dela: selektor in lastnost.

CSS omogoča izdelovalcem spletnih strani, da predpišejo obliko posameznim elementom.

Večina elementov v HTML je namreč namenjena logičnemu oblikovanju, kjer samo

24

določimo, katere vrste je posamezni element (slika, tabela, vrstica v tabeli, celica v vrstici,

seznam, točka seznama, odstavek, indeks, eksponent, naslov, aktivna povezava ...),

brskalnik pa te elemente oblikuje po svoje. Z uporabo stilov CSS lahko elementom

določimo celo vrsto oblikovnih lastnosti, med katere spadajo ozadje, robovi, razmiki,

odmiki, pisava, poravnava, barva ... CSS nam omogoča, da oblikovne lastnosti določimo

ločeno od vsebine, kar poveča preglednost napisane kode. (NSA, 18. avgust 2016)

Poznamo tri vrste slogovnih predlog:

Zunanjo, ki se nahaja v drugem dokumentu

<link rel="stylesheet" href="oblika.css" type="text/css" />

Notranja se nahaja v glavi (ang. header) znotraj <style> elementa. Primer kode:

<style>

p{ background-color: blue; margin-bottom:10 px; }

</style>

Vrstična, ki se nahaja v posameznem elementu

<a style="color:blue;font-size:medium">Tekst</a>

Če uporabljamo CSS-kodo v zunanji datoteki in to datoteko vključimo v več HTML-

datotek, bodo v tem primeru imeli vsi elementi HTML enake sloge. V primeru, da želimo

spremeniti slog HTML-elementa, nam je dovolj, če spremenimo samo lastnost selektorja v

CSS-datoteki. Z uporabo zunanjih CSS-datotek se spletne strani hitreje nalagajo.

Obiskovalcu se ob obisku na spletno stran slogovna datoteka shrani v spomin brskalnika in

ob naslednjem obisku jo bo imel že pripravljeno, saj jo je hranil v spominu, kar pomeni, da

se bo spletna stran naložila hitreje.

3.6 SQL

SQL (ang. Structured Query Language) je programski jezik, s katerim omogočimo dostop

do podatkov in podatkovne baze, hkrati pa lahko z njimi tudi upravljamo. Poleg upravljanja

s podatki in podatkovnimi bazami lahko tudi ustvarjamo nove baze in tabele podatkov.

Posamezna podatkovna baza vsebuje najmanj eno tabelo, vsaki tabeli lahko določimo

posamezne lastnosti, kot so:

tip tabele (niz, število, datum, čas, datum in čas, denarna valuta …);

vrednosti (prazno polje ali pa privzeto);

25

izbira (samo izpolnjevanje ali lastnoročni vnos, ta lastnost se predvsem uporablja

za nastavljanje ID);

omejitev dolžine vnosov.

Jezik omogoča dostop do podatkov v podatkovnih bazah, omogoča tudi posodabljanje in

dodajanje novih podatkov, z njim pa je možno ustvarjati tudi nove baze in tabele ter

upravljati z njihovimi lastnostmi. SQL-jezik podpira praktično vse podatkovne baze.

SQL-ukaze delimo v dve kategoriji, in sicer se prva kategorija ukvarja s podatki, medtem

ko druga rokuje s tabelami. Ukazi za delo s podatki so naslednji:

SELECT

INSERT INTO

UPDATE

DROP

CREATE

Za izdelavo baze sem uporabil MySQL, katerega uporaba je brezplačna in povsem varna.

MySQL je implementacija relacijske podatkovne baze, ki za delo uporablja SQL

programski jezik. Za to, da je MySQL nameščen na strežniku in da se povežemo na

podatkovno bazo, je potreben PHP. MySQL se redno posodablja s strani razvijalcev,

trenutno je zadnja verzija 5.7.

Z uporabo MySQL sem izdelal tabele in tudi razne poizvedbe v kombinaciji s PHP. V

spodnjem primeru bom prikazal, kako se ustvari tabelo v MySQL:

CREATE TABLE oseba

(

Ime varchar(255),

Priimek varchar(255),

Naslov varchar(255),

Kraj varchar(255),

Država varchar(255)

Telefon int (16)

);

https://sl.wikipedia.org/wiki/Podatkovna_baza

26

4. BOOTSTRAP

Bootstrap je ena izmed platform, s katerimi lahko izdelamo spletno stran. Znotraj platforme

podpira HTML, CSS in JavaScript. Z Bootstrap-om lahko izdelamo prilagodljivo in

mobilno stran, ki se prilagaja sprotni velikosti brskalnika. Lahko bi se reklo, da to, kar je

Jquery za JavaScript, je Bootstrap za CSS.

Platforma je bila oblikovana in ustvarjena s strani Twitter-ja ter je postala ena izmed najbolj

popularnih brezplačnih začelnih platform (ang. front-end frameworks) na svetu.

4.1 Nastanek

Bootstrap sta leta 2010 pri Twitter-ju ustvarila Mark Otto in Jacob Thornton. Prioriteta jima

je bila odprtokodnost. Twitter je gostil prvi dogodek Hack Week, na katerem so to

platformo predstavili. Odziv je bil tako velik, da so programerji različnih znanj priskočili

k razvoju brez kakršnega koli napotka. Platforma je prvotno izšla v petek, 19. avgusta 2011,

od takrat je bilo več kot dvajset verzij vključno z dvema pomembnima (v2 in v3). V

Bootstrap 2 je bila dodana funkcionalnost za odziven dizajn kot opcijsko. V tretji različici

so predelali celotno knjižnico še enkrat, saj so odziven (ang. responsive) dizajn nastavili

kot privzetega. (Bootstrap, 12. avgust 2016)

4.2 Kako deluje Bootstrap

Za delo z Bootstrap-om ne potrebujemo nobene instalacije. Datoteko lahko prenesemo z

uradne strani ter jo shranimo v računalnik. Sam si datoteko zmeraj prenesem v mapo, kjer

imam že ostale datoteke za spletno stran, saj so potem povezave znotraj datotek veliko

krajše. Znotraj mape je veliko število datotek in vsaka izmed teh datotek vsebuje CSS,

JavaScript ali HTML-kodo. Za pričetek uporabe Bootstrap-a na naši spletni strani je dovolj,

če vključimo naslednje tri datoteke:

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>

<script src="js/bootstrap.min.js"></script>

http://byfat.xxx/

27

Prva datoteka vsebuje CSS-kodo, druga nam omogoči JQuery in uporabo knjižnic, tretja

nam vključi vse JavaScript funkcije Bootstrap-a. Največja prednost uporabe Bootstrap-a je

izdelava odzivnih strani, ki se prilagajajo velikosti okenca v brskalniku. Bootstrap je kreiral

tako imenovani mrežni sistem (ang. grid system). Mrežo lahko prilagodimo štirim tipom:

telefon, velikost zaslona, manjša od 768 pikslov

tablica, velikost zaslona, večja ali enaka 768 pikslov

srednje velik zaslon, večji ali enak 992 pikslov

velik zaslon, večji ali enak 1200 pisklov

Za izdelavo mreže je potrebno napisati naslednjo programsko kodo:

<div class="container-fluid">

<div class="row">

<div class="col-md-6">.col-md-6 <- to je leva polovica</div>

<div class="col-md-6">.col-md-6 <- to je desna polovica</div>

</div>

</div>

Za uporabo mreže je vedno potrebno najprej definirati neki element z razredom »container«

ali »container-fluid«. V primeru, da uporabimo razred "cointaner", bo ta imel fiksno širino,

medtem ko bo imel »container-fluid« 100 % širino in se bo raztezal skozi celotno okence.

V naslednji vrstici definiramo element z razredom »row«, ki nam definira vrstico. Ta

vrstica je lahko poljubno visoka. Znotraj te vrstice pa so elementi, katerim določimo

njihovo širino. Vsaka vrstica ima s strani Bootstrap-a definiranih 12 segmentov. V

zgornjem primeru sem spisal kodo tako, da se ji bo v primeru, da bo oseba imela spletno

stran odprto na tablici, prikazala vsebina v dveh okencih in vsako izmed teh bo zasedalo

ravno polovico, saj je vsako okence veliko 6 segmentov.

28

Slika 4.1: Mreža

Vir: Bootstrap (14. september 2016)

Razredi, s katerimi določamo, kako se bo določeni element odzval na širino okna, so

naslednji:

.col-xs – zelo majhne naprave (ang. extra small devices)

.col-sm – majhne naprave (ang. small devices)

.col-md – srednje naprave (ang. medium devices)

.col-lg – velike naprave (ang. large devices)

5. OBLIKOVANJE SPLETNE STRANI

Dizajni spletnih strani in aplikacij so se skozi leta spreminjali, saj je z razvojem samih

programskih jezikov prihajalo tudi do novih znanj programerjev in oblikovalcev. Skozi čas

so spletne strani postajale privlačnejše, hitrejše in bolj napredne za uporabnike. Danes po

spletu brskajo tako rekoč že vsi, tako mladi kot starejši, zato je potrebno spletno stran

prilagoditi tako, da je pregledna in uporabna za vso demografsko populacijo.

Pri načrtovanju spletne strani je prva najbolj pomembna stvar namen spletne strani. V

primeru, da nimamo jasno definiranega namena, se nam lahko zgodi, da uporabniki ne bodo

našli oz. dobili tistega, kar pričakujejo. Zato je potrebno vedeti, kakšen je naš namen spletne

strani: ali je to prodajanje izdelkov, komuniciranje z uporabniki, oglaševanje dogodkov,

izobraževanje …

29

Ciljna množica za mojo spletno stran, kjer bi bili dogodki vseh vrst, bi bila celotna

populacija, saj ciljam na to, da bi čim večje število uporabnikov redno obiskovalo spletno

stran in da bi sami objavili kak obstoječi dogodek. V tej ciljni množici bi bili uporabniki

moškega in ženskega spola, mlajši in starejši ljudje, posledično bo treba prilagoditi obliko

spletne strani, da bo primerna za celotno populacijo.

Za lažjo določitev ciljne publike si pomagamo z naslednjimi vprašanji:

Kaj želimo doseči s spletno stranjo?

Kdo mora obiskovati spletno stran, da dosežemo cilj?

Kaj jih pritegne?

Koliko predznanja morajo imeti o naši organizaciji in misiji?

Ali je kakršna koli pomembna demografska lastnost ciljne množice?

Kaj bo razlog, da obiščejo spletno stran? (Hartstein, 22. avgust 2016)

Že dolgo velja, da je manj več, še posebej pri oblikovanju spletnih strani. Bolj kot je stran

enostavna in pregledna, bolj je obiskovalcu všeč, saj prej najde tisto, kar išče. »Povprečen

obiskovalec na spletni strani ostane približno 15 sekund v primeru, da mu nismo pritegnili

pozornosti« (Haile, 2014). Že s tem, da imamo ustrezno ime domene, ki se navezuje na

vsebino, lahko pritegnemo obiskovalca. Če pa imamo na spletni strani popolnoma drugo

vsebino, kot jo je mogoče razbrati iz naslova domene, pa je povsem logično, da bo

obiskovalec zapustil spletno stran.

Na moji spletni strani se bodo oglaševali dogodki. Ob prihodu na domačo stran se bo

prikazal logotip strani, pod njim bo iskalna vrstica, s katero bomo lahko iskali dogodke.

Pod iskalno vrstico se bo nahajal Googlov zemljevid, s katerim bomo prikazali lokacije

dogodkov. Ob prihodu bo obiskovalec pričakoval pregledno stran, s katere bo lahko hitro

in na lahek način poiskal želeni dogodek. Zelo pomembno bo, da se bodo vse informacije

o dogodkih in tudi sami dogodki dovolj hitro prikazali. Moja ciljna skupina bodo tisti, ki si

želijo iti na kakršen koli dogodek. To pomeni, da bo po moji spletni strani brskala celotna

populacija, ne samo določeni. Posledično se bo potrebno prilagoditi z oblikovnega vidika.

Stran bo morala imeti primerno pisavo in velikost, umirjene tone barv, s katerimi bo stran

oblikovno lepo izgledala.

30

6. GOSTOVANJE

6.1 Domena

Domena je spletni naslov, preko katerega dostopajo uporabniki in je unikaten. Lahko bi se

reklo, da je kot domači naslov. Torej, če nimamo domene, tudi obiskovalci ne morejo

obiskati spletne strani, zato je potrebno domeno kupiti. Ker pa so domene unikatne, je pred

nakupom treba preveriti, če so na voljo in kateri so pogoji za nakup le-teh. Zgradba domene

je sestavljena iz poddomene, domene in vrhnje domene oz. domenske končnice. Domena

je sestavljena iz črk, vendar v ozadju strežnik DNS (ang. domain name system) pretvarja te

črke v IP in ima zatorej vsaka spletna stran svoj IP, ki je edinstven.

Domeno z naslovom »www.find-event.net« sem zakupil na spletni strani

»www.domovanje.com«, ki se ukvarja tudi z gostovanjem spletnih strani. Ta spletni naslov

sem izbral zato, ker bom oglaševal dogodke, zato bi s tem naslovom rad dosegel, da bi me

uporabniki z vnosom dogodka v Googlov iskalnik našli na prvem mestu. Prav tako je bil

moj cilj ob nakupu te domene, da ima njen naslov povezavo z vsebino spletne strani ter da

ga lahko uporabim tudi ob morebitnem širjenju v preostale države.

Slika 6.1: Struktura domene

Vir: Delak, lastni prikaz (2016)

Preko domenske končnice lahko prepoznamo namen spletne strani, če bomo na primer

obiskali spletno stran s končnico .info, lahko predvidevamo, da bo spletna stran vsebovala

informacije o nečem. Torej se z domensko končnico tako rekoč predstavimo na spletu. Pri

nacionalnih končnicah so pogostokrat dodani pogoji glede zakupa, najpogosteje je pogoj,

da ste prebivalec te države. V splošnem poznamo 2 vrsti vrhnjih domen, in sicer:

31

Poznamo veliko končnic, med njimi so najbolj znane:

.com (komercialna);

.net (omrežna);

.org (organizacija);

.biz (poslovna);

.mobi (mobilna);

nacionalne (.si , .eu , .de , .hr ,itd.).

Za poddomene si lahko izberemo kakršno koli. Poddomene lahko uporabljamo za karkoli,

največkrat pa se jih uporablja v primeru hitrejšega dostopa do vsebin. Ponudniki gostovanja

imajo običajno že prednastavljene poddomene, kot so npr.:

www;

ftp (strežnik za prenos datotek);

mail (dostop do e-pošte);

forum.

Z gostovanjem ali z nabavo lastnega strežnika si omogočimo, da domeno objavimo na

spletu. V Sloveniji in po svetu je veliko ponudnikov domen in spletnih gostovanj. Najboljše

je, če domeno in spletno gostovanje kupimo pri istem ponudniku, saj bo v primeru, da bomo

prenesli gostovanje, potrebno vse podatke o spletni strani prenesti na novi strežnik.

6.2 Strežnik

Strežnik oziroma gostovanje sem zakupil na spletni strani domovanje.com. Zanje sem se

odločil sodeč na mnenja ostalih uporabnikov glede njihov storitev in tudi cene. Za nakup

gostovanja pri njih so pripomogla tudi dejstva, ki jih navajajo na svoji spletni strani:

Brezplačna, strokovna in prijazna podpora.

100 % garancija – 60-dnevni rok za vračilo denarja.

Za vas skrbi več kot 30 sodelavcev.

Gostovanje z največ izkušnjami – z vami že 17 let!

Zaupa nam več kot 20.000 naročnikov.

Brezplačna selitev vaših strani k nam.

https://www.domovanje.com/spletno-gostovanje/primerjava-paketov-gostovanja/brezplacni-prenos-gostovanja/

32

Več kot 270 aplikacij z enim klikom.

Domovanje aktivna zaščita.

Najboljši podatkovni center v Sloveniji.

Domovanje kontrola kakovosti - nadzor nad delovanjem strežnikov.

Popolna samostojnost s Plesk nadzorno ploščo.

SSD pospešeno.

Dnevno izdelovanje varnostnih kopij. (Domovanje, 7. september 2016)

Zakupil sem paket Soba, ki je trenutno v akciji, za 23,88 € na leto. Paket v tem trenutku

popolnoma zadostuje mojim potrebam. V paketu Soba dobite poleg gostovanja vaše spletne

strani tudi neomejeno število poštnih predalov, neomejen prostor in neomejen promet. To

je pravi paket za vse, ki ne pričakujejo velikega obiska na spletni strani, a potrebujejo

vedno delujoče e-maile in zanesljivo predstavitev na spletu. (Domovanje, 7. september

2016)

Paket Soba ponuja naslednje:

1 spletno stran

Neomejeno parkiranih domen

Neomejeno prostora

Neomejeno prometa

Neomejeno e-poštnih predalov

Neomejeno MySQL baz

270+ aplikacij

60 € Google AdWords

Domovanje aktivne zaščite

SSD pospešeno (Domovanje, 7. september 2016)

Paket Soba vsebuje tudi že antispam in antivirusno zaščito strežnika, zadnjo verzijo PHP

oz. v bistvu vse, kar je potrebno za zagotavljanje delovanja spletne strani. Najbolj

pomembno mi je to, da imajo tudi boljše strežnike, ki so namenjeni za strani z večjim

prometom in zagotavljajo 99,9 % dosegljivost spletne strani. Preskok na boljši strežnik ob

povečanem obisku tako ne bo problem.

https://www.domovanje.com/spletno-gostovanje/primerjava-paketov-gostovanja/domovanje-aktivna-zascita/

https://www.domovanje.com/spletno-gostovanje/primerjava-paketov-gostovanja/podatkovni-center/

https://www.domovanje.com/spletno-gostovanje/primerjava-paketov-gostovanja/nadzor-nad-delovanjem-streznikov/

https://www.domovanje.com/spletno-gostovanje/primerjava-paketov-gostovanja/ssd-pospeseno/

https://podpora.domovanje.com/podpora/splosne-informacije/politika-izdelave-varnostnih-kopij/

33

7. VARNOST

Varnost na spletu je zelo pomembna, saj ljudje čedalje več storitev opravljamo preko

interneta, zato je nujno, da jih opravimo varno. Decembra 2015 nas je po vsem svetu

uporabljalo internet kar 3,26 milijarde ljudi. »Po svetu je približno 37000 dnevnih vdorov

v spletne strani ali strežnike« (Hostingfacts, 28. julij 2016). Popolnoma zavarovani ne

bomo nikdar, saj se hekerji stalno učijo novih vdorov, medtem ko varnost napreduje

počasneje. Da preprečimo napade na spletne strani, se je seveda najprej treba poučiti o

samih programskih jezikih in o načinih, kako preprečiti določene napade.

Motivi hekerjev pri spletnih napadih so različni. Lahko je njihov cilj ukrasti podatke,

uporabiti spletno stran za propagando ali razpošiljanje spama, morebiti pa smo pozabili

posodobiti spletno aplikacijo ali delec kode, kar je zdolgočaseni heker izkoristil za vdor.

Zato torej moramo biti še posebej previdni pri shranjevanju podatkov o uporabniku, saj se

nam bo, če nam bodo ukradli podatke o uporabnikih in jih zlorabili, slabo pisalo, kajti

stranke nas imajo pravico tožiti zaradi neuspešnega varovanja njihovih podatkov in nastale

škode.

Z uporabo protipožarnih zidov in antivirusnih programov, ki so redno posodobljeni, se

lahko zaščitimo pred spletnimi napadi. Pomembno je tudi, da smo na tekočem s

posodobitvami v programskih aplikacijah ter da redno spremljamo novosti pri programskih

jezikih. Če uporabljamo sistem za upravljanje s spletnimi vsebinami

(ang. Content Management System), je prav tako pomembno, da ga redno posodabljamo,

vendar se tukaj lahko pojavi težava. Glede na to, da so po večini sistemi za upravljanje s

spletnimi sistemi razviti s strani prostovoljcev in jih uporablja velika množica ljudi, se zna

zgoditi, da nam to lahko prinese veliko težav. Ravno zaradi velikega števila ljudi, ki

uporablja sisteme za upravljanje s spletnimi sistemi in se odlično spozna na programsko

kodo, lahko hekerji najdejo programske luknje, preko katerih vdrejo, in ta luknja je

posledično prisotna pri vsakem uporabniku takih sistemov. Priporočljivo je uporabljati tako

spletno gostovanje, kjer redno posodabljajo svojo varnostno opremo, kakor tudi

podporo za novejše različice programskih jezikov in baz. Pazljivi moramo biti tudi pri

odpiranju povezav, ki se nahajajo bodisi na spletnih straneh, e-pošti, video posnetkih itd.

34

Ob kliku na povezave nas te lahko pripeljejo na spletne strani, ki niso varne, ampak so

njihovi cilji zlonamerni. Nasvet je, da spletno povezavo ročno vnesemo, če pa nismo ravno

prepričani, kaj se na tej spletni povezavi nahaja, je bolje, da je ne odpiramo ali se prej vsaj

pozanimamo o njej na spletu. Če uporabljamo kakršnekoli vtičnike (ang. plugins), moramo

paziti na to, da se jih redno posodablja in odstrani vse instalacijske datoteke. Pomembno je

tudi, da si ne ustvarimo mnenja, da naša spletna stran ni zanimiva za hekerje, saj bomo s

tem pozabili na varnost in prevzem spletne strani bo veliko lažji. Priporočljivo je uporabiti

raznorazne vtičnike ali programsko opremo, ki poveča varnost spletne strani, saj s tem

zmanjšamo stroške, ki nastanejo ob morebitnem vdoru. (Greengeeks, 18. avgust 2016)

OWASP (ang. Open Web Application Security Project) na vsaka tri leta obnovi listo 10

najpogostejših aplikacijskih napadov, ki se zgodijo na aplikacijskem nivoju.

Tukaj je 10 najpogostejših napadov iz leta 2013:

1. SQL-injekcija;

2. zloraba pri overjanju in upravljanju sej;

3. podtikanje skript;

4. nezavarovan neposreden dostop do objektov;

5. varnostne nastavitve;

6. razkritje občutljivih informacij;

7. manjkajoče omejitve za dostop;

8. potvarjanje spletnih zahtevkov;

9. uporaba komponent z znanimi ranljivostmi;

10. nepreverjene preusmeritve. (Owasp, 13. september 2016)

Na svoji spletni strani se bom osredotočil tudi na varnost, ker bo spletna stran v prihodnosti

morebiti vsebovala veliko podatkov in bodo le-ti postali dragoceni, zato bo treba bazo

nekako zavarovati. Zavaroval jo bom z vidika preprečitve SQL-injekcije, saj nam s

tovrstnim napadom lahko povzročijo veliko škodo. Ostanemo lahko tudi brez podatkov.

Poleg tega bom zelo pazljiv tudi pri prijavi in registraciji uporabnikov, gesla samih

uporabnikov bodo zaščitena z enkripcijo v podatkovni bazi. Potrebno bo tudi paziti, kako

se pridobivajo podatki iz podatkovne baze na samo stran, saj je SQL-injekcija možna tudi

v samem iskalnem okencu, kamor vnesemo želeno besedo. To bom preprečil že s samo

prepovedjo določenih znakov in z uporabo parametrov v PHP. Z vidika nezaželenih

35

sporočil bo za to poskrbel kontaktni obrazec, ki bo vseboval okence za preverbo, če ste

človek ali robot. Gre za uporabo tako imenovanega »captcha okenca«. V primeru, da tudi

to ne bo zadostovalo, bo potrebno dodati pošiljatelja na seznam nezaželenih in mu

preprečiti pošiljanje sporočil.

7.1 SQL-injekcija

SQL-injekcija (ang. SQL injection) je najbolj razširjen napad na podatkovne baze. Cilj teh

napadov je lahko različen, bodisi gre za pridobitev podatkov ali za uničenje podatkovne

baze. Recimo, da imamo okence, kjer moramo vnesti uporabniško ime. Ko vnesemo

uporabniško ime, se v ozadju pošlje zahtevek za preverbo tega vnosa. Ob pritisku na gumb

se s PHP pošlje zahtevek na strežnik, kjer se izvede preverba s SQL.

Koda na strani strežnika:

$uporabniskoime= input_okno($_POST["uporime"]);

$stavek = " SELECT * FROM users WHERE name = '$uporabniskoime'";

Kot je razvidno iz primera kode, zahtevamo preverbo pod tem uporabniškim imenom. V

primeru, da obstaja uporabniško ime, ki smo ga vnesli, bo izpisalo vse podatke o

uporabnikih, ki se nahajajo v tej tabeli.

Primeri napadov:

1. Napad na osnovi 1=1, ki je zmeraj »TRUE«

Še zmeraj ostajamo pri prvotnem stavku, kjer preverimo vnosno okence z zahtevo

po uporabniškem imenu. V tej vrsti napada lahko uporabnik v vnosno okence vnese

naslednje »105 or 1=1«. Ta vnos se bo zmeraj izvedel uspešno, saj je s tem, ko smo

dodali »or 1=1"«, uspešnost izvedbe zagotovljena, medtem ko je število 105 samo

zaradi tega, da se lahko dopiše preostali del vnosa. Poleg tega, da je 1 zmeraj enako

1, je tu še pogoj »ali«, s katerim damo programu opcijo, da ima za uspešno izvedbo

možna dva pogoja.


$stavek = " SELECT * FROM Users WHERE UserId = 105 or 1=1";

36

V tem primeru napada nam bo sedaj izpisalo vse vrstice uporabnikov, torej bomo

na ta način pridobili vse podatke o vseh uporabnikih, ki so shranjeni v tej tabeli. S

takim napadom bi zlahka pridobili gesla, e-naslove, morebiti celo domači naslov in

telefonsko številko ali celo številko bančne kartice itd.

2. Napad je na osnovi »""=""«, ki je prav tako zmeraj "TRUE"

Ponovno smo fokusirani na stavek, kjer preverjamo vrednosti vnosnega okenca za

preverjanje uporabniškega imena. V tem primeru napadalec vnese »"" or ""=""«.


$stavek = " SELECT * FROM Users WHERE UserId = "" or ""="";

Rezultat SQL je uspešno izveden in bo ponovno vrnil vse vrstice vseh uporabnikov,

ker »WHERE ""=""« je zmeraj »TRUE«.

3. Napad bazira z uporabo SQL-stavkov

Z uporabo stavkov z besedami, kot so DROP, INSERT, UPDATE, lahko lastniku

baze podatkov naredimo ogromno škode, saj lahko v primeru, da lastnik ne izvaja

rednih varnostnih kopiranj podatkovne baze, ostane brez vseh podatkov ali pa s

popolnoma drugimi vrednostmi. Za izvedbo takega napada je dovolj vnos »105;

DROP TABLE Users«.


$stavek = " SELECT * FROM Users WHERE UserId = 105; DROP TABLE Users;

S tem vnosom smo dejansko dodali SQL-ukaz »DROP TABLE Users«, ki bo

zbrisal celotno tabelo Users in povzročil, da bo lastnik ostal brez baze podatkov o

uporabnikih, kar bi zanj pomenilo ogromno škodo.

Napade lahko preprečimo s tem, da preverimo vnose v tekstovne okvire, še preden se

izvedejo SQL-stavki. Preverimo pa jih tako, da poiščemo besede ali znake, s katerimi lahko

povzročimo napad. Besede in znaki, s katerimi to storimo, so:

37

Update ,Insert, Drop

; , " , ; , =

Vendar preverjanje vnosov na strani uporabnika ni najbolj zanesljivo, saj lahko heker pošlje

na strežnik popolnoma nekaj drugega, zato pa lahko to na strežniški strani preprečimo

oziroma zmanjšamo z uporabo parametrov. V spodnjem primeru je prikaz uporabe

parametrov za vpis podatkov v bazo:

$stmt = $dbh->prepare("INSERT INTO prebivalec (ime,naslov,mesto)

VALUES (:ime, :naslov, :mesto)");

$stmt->bindParam(':ime', $tekstmesto);

$stmt->bindParam(':naslov', $tekstnaslov);

$stmt->bindParam(':mesto', $tekstmesto);

$stmt->execute();

7.2 Prijava in registracija

Ob registraciji bo moral uporabnik vnesti določene podatke, geslo in uporabniško ime.

Uporabniško ime in geslo bo moral vnesti ob prijavi na spletno stran. Da bo vse skupaj

dovolj varno, bo tu potrebno šifriranje gesel. Ob potrjenem obrazcu za registracijo se bo

geslo poslalo na strežnik in šifriralo s funkcijo md5. Ob vsakem vpisu se bo kreirala seja z

uporabnikovim ID, ki jo bo potrebno ravno tako zavarovati, da ne bo prišlo do zlorabe. V

primeru trikratnega napačnega vpisa se bo račun zaklenil in potrebno bo odklepanje računa

s strani administratorja. Pri registraciji bo dodano tudi captcha okence, preko katerega

bomo preverili, če gre za človeka, da torej ne bo prevelikega števila neveljavnih registracij.

7.3 E-mail spam

Spam sporočil v obliki reklam in nezaželenih sporočil, pri katerih nas neznanci prosijo za

denar, ga celo ponudijo v zameno za neko uslugo ali pa hočejo, da jim prenakažemo denar,

je danes zelo veliko. Zato je smiselno, da preprečimo ali zgolj omejimo tovrstna sporočila.

Nezaželena sporočila nam jemljejo prostor in povečajo internetni promet, zato je treba

ostati v koraku s časom in čim uspešneje preprečiti e-poštni spam.

Spam računi pošljejo 14,5 bilijona sporočil na dan. Po drugih besedah je to kar 45 % vse

poslane e-pošte na dan. Nekatera podjetja, ki se ukvarjajo z analiziranjem, predvidevajo,

da pošiljanje nezaželene pošte dnevno doseže kar 73 % delež vse poslane e-pošte. ZDA so

38

prve v največjem številu izvora nezaželenih sporočil, Južna Koreja pa se pa nahaja na

drugem mestu. (Spamlaws, 1. september 2016)

Najbolj razširjena vrsta spama je reklamna pošta. Ta vrsta predstavlja približno 36 % vseh

spam sporočil. Druga najpogostejša kategorija je v zvezi z vsebino za odrasle in predstavlja

približno 31,7 % vseh nezaželenih sporočil. Nezaželena e-sporočila v zvezi s finančnimi

zadevami so s 26,5 % tretja najbolj priljubljena oblika. (Spamlaws, 1. september 2016)

Študija, ki jo je izvedlo podjetje Radicati Research Group Inc. s sedežem v Palo Altu v

Kaliforniji, je ugotovila, da nezaželena sporočila zaradi manjše produktivnosti in tehničnih

stroškov stanejo podjetja 20,5 milijarde dolarjev letno. Nucleus Research ocenjuje, da je

povprečna izguba na zaposlenega na leto zaradi tovrstnih sporočil približno 1934 dolarjev.

Napovedi za prihodnost niso nič kaj bolj svetle. Ocenjuje se, da bo poslanih 58 milijard

nezaželenih e-poštnih sporočil vsak dan v naslednjih štirih letih, kar bo podjetja stalo

približno 198 bilijonov letno. Nekateri raziskovalci menijo, da je strošek ocenjen nekje na

49 dolarjev letno na poštni predal, medtem ko bodo celotni stroški nezaželenih sporočil za

podjetja narasli na 257 milijard dolarjev na leto, če se bodo tovrstna sporočila še naprej

tako širila. (Spamlaws, 1. september 2016)

7.3.1 Kako zmanjšati količino nezaželenih sporočil

Količino nezaželenih sporočil lahko zmanjšamo na naslednje načine:

Z izdelavo kontaktnih obrazcev skrijemo e-naslov tako, da ni viden obiskovalcu.

Pri izpolnjevanju kontaktnih obrazcev po navadi dodamo lastnosti posameznih

vnosnih polj. S temi lastnostmi povemo, kolikšna mora biti dolžina vnosa, katera

zvrst vnosa je, ali so samo številke ali črke, lahko pa tudi določimo strukturo

posameznega polja.

Z dodanim »captcha« okencem h kontaktnemu obrazcu. Tako imenovanega

captcha (ang. Completely Automated Public Turing test to tell Computers

and Humans Apart) okenca, s katerim od obiskovalca še dodatno zahtevamo vnos

nekega besedila, števila ali celo kombinacije obojega. Na tak način preprečimo, da

bi nam neki program pošiljal nezaželena sporočila, saj je tekst, ki ga je potrebno

vnesti v okence, shranjen v obliki slike in ga zaradi tega program ne more rešiti, kar

pomeni, da osebi, ki nam želi poslati tovrstno sporočilo, ne bo uspelo poslati

https://en.m.wikipedia.org/wiki/Automatic_test_equipment

https://en.m.wikipedia.org/wiki/Turing_test

39

sporočila. Zaradi tega mora obiskovalec lastnoročno prepisati tekst in ga vnesti v

tekstovno polje. V primeru, da je bil vnos pravilen, bo sporočilo uspešno poslano.

Nekateri boljši captcha programi imajo v sliki še dodatne like raznoraznih oblik in

barv, ki lahko prekrivajo tekst ali se nahajajo v ozadju. Na takšen način

onemogočimo delovanje OCR-programov, saj zaradi likov v ozadju in vse

zmešnjave znotraj slike ne more razbrati teksta s slike, tako torej preprečimo

pošiljanje nezaželenih sporočil.

E-naslova ne zapišemo v obliki teksta, ampak ga shranimo kot sliko, saj na tak način

malce otežimo delo tistemu, ki bi se to spravil početi. Če pa uporabi OCR-program,

bo seveda brez problema razbral e-naslov.

Da preverimo, če ima obiskovalec vključen JavaScript, saj tako lahko ugotovimo,

ali je oseba ali program, ki nam želi pošiljati nezaželena sporočila.

Namesto znaka @ napišemo (at), potlej bo moral uporabnik lastnoročno prekopirati

naslov in zamenjati (at) z @.

S sprotnim kreiranjem črne liste ali dodajanjem že obstoječih, ki vsebujejo e-

naslove in IP-naslove tistih, ki tovrstna sporočila pošiljajo.

Tisti, ki pošiljajo e-pošto glavnim na strani npr.: [email protected]. To tehniko

se lahko prepreči na način, da uporabimo unikaten e-poštni naslov. Torej namesto

[email protected] uporabimo [email protected].

E-naslov shranimo v JavaScript kodo. S to tehniko skrijemo svoj e-naslov v neko

funkcijo. Po navadi je to nastavljeno tako, da se ob kliku na povezavo izpiše e-

naslov. S tem onemogočimo računalniške programe, ki iščejo e-naslove po spletnih

straneh, saj se pogostokrat sesujejo, ko poskušajo interpretirati JavaScript kodo.

S preverjanjem predhodne povezave lahko preverimo, od kod je prišel obiskovalec

na našo stran, vendar so danes v uporabi že zelo napredne skripte, s katerimi

pridobivajo e-naslove. Zato je ta rešitev daleč od primerne, najbolj priporočljiva je

torej uporaba JavaScript-a in captcha okenc.

7.4 Kraja podatkov uporabnikov

V podatkovni bazi bom hranil podatke o uporabnikih oz. organizatorjih dogodkov. V bazi

se bodo hranili osnovni podatki (ime, priimek, naslov, država, e-naslov). Kljub temu da ti

podatki sami po sebi niso nič kaj vredni, ob velikem številu hitro postanejo zanimivi za

mailto:[email protected]



40

hekerje. Za zaščito uporabnikovih podatkov bom moral poskrbeti sam z enkripcijo gesel in

s primernim varovanjem spletne strani pred vdorom.

Del Domovanja aktivne zaščite je tudi požarni zid naslednje generacije, ki nam omogoča,

da mesečno preprečimo tudi do 3 milijone ugibanj gesel.

V realnem času zna ločiti med različnimi oblikami prometa in nudi zaščito pred veliko

oblikami DoS- in DdoS-napadov. T. i. DPI (deep packet inspection) pa preprečuje

različne oblike napadov na CMS-sisteme.

Naš požarni zid naslednje generacije se redno posodablja z novimi vzorci napadov na

najbolj znane CMS-sisteme. Posodabljanje poteka nekajkrat dnevno. (Domovanje, 7.

september 2016)

7.5 Preprečitev podvajanja dogodkov

Da ne bi prišlo do podvajanja dogodkov, bo potrebno uvesti preverbo vpisanih podatkov

pred vnosom v podatkovno bazo. Potrebno jih bo preveriti pri registriranju novih

uporabnikov, objavi novih dogodkov in pri urejanju že obstoječih podatkov o uporabnikih

in dogodkih. Najbolj pomembna stvar bo, da se prepreči podvajanje dogodkov. Pred

objavo dogodka bo potrebno vnesti ime dogodka, opis le-tega itd. Ob pritisku na gumb za

objavo dogodka se bo na strani strežnika preverilo, ali že obstaja kakšen dogodek z enakimi

podatki, kot je ta. Vendar samo tak način preverbe ne bo dovolj, saj bo dovolj že ena

spremenjena črka in dogodek bi se uspešno objavil. Pomembno bo tudi, da se preveri, ali

že obstaja dogodek s takim imenom. Prav tako bo pri registraciji uporabnikov treba paziti

na podvajanje. Ob registraciji bo uporabnik vnesel naslednje podatke. Paziti bo treba na

uporabniška imena in e-naslov, medtem ko na ostale podatke ne bo treba biti tako pozoren,

saj poznamo primere, ko imata dva prebivalca enako ime in naslov, zato bom pri registraciji

pazil samo na uporabniška imena in e-naslove. Uporabniška imena bodo morala biti

unikatna, prav tako bo vsak uporabnik ob registraciji prejel še dodatno vrstico v tabeli z

unikatnim ID.

41

8. PREDSTAVITEV SPLETNE APLIKACIJE

Za izdelavo spletne strani sem uporabil naslednje programske jezike: MySQL, PHP, AJAX,

JavaScript, HTML in JQuery. Izdelave spletne strani sem se lotil po delih, najprej sem začel

z izdelavo domače strani, kjer sem si oblikoval predlogo spletne strani, ki sem jo uporabljal

v nadaljevanju. Sledila je izdelava spletne strani za uporabnike, saj bodo le prijavljeni

uporabniki lahko objavljali dogodke. V ta namen je bilo potrebno dodati par novih strani

za urejanje dogodkov in podatkov uporabnika. Potrebno je bilo tudi izdelati programsko

kodo za preverjanje, ali je uporabnik vpisan in kateri uporabnik je to, da slednjemu torej

izpiše pravilne podatke in objavljene dogodke. Vsak uporabnik ima tudi možnost izbrisa

posameznega dogodka. Za objavo in prikaz dogodkov na spletni strani sem moral izdelati

podatkovno bazo, saj je bilo potrebno shraniti dogodke in podatke o uporabnikih. Za prikaz

dogodkov sem uporabil Googlove zemljevide, ki se nahajajo na domači strani in na strani,

ki jo vidijo registrirani uporabniki. Zemljevid na domači strani v privzetem načinu izpiše

zadnjih 100 dogodkov, na podstrani za registrirane uporabnike pa prikaže vse njihove

aktualne dogodke. Za obiskovalce, ki bodo po zemljevidu iskali dogodke, sem v ta namen

izdelal iskalno vrstico, s katero sem jim olajšal delo. Z iskalno vrstico lahko obiskovalec

išče po kategorijah dogodkov, datumu začetka dogodka, datumu konca dogodka ali po

vnosu besede v iskalni niz. Obiskovalcem, ki so na spletno stran prišli z namenom poiskati

dogodek, registracija ni potrebna.

8.1 Podatkovna baza

Podatkovna baza vsebuje tri tabele, prva je tabela uporabnikov, druga je tabela dogodkov

in tretja je tabela kategorije. Tabeli uporabnik in dogodek sta med seboj povezani z

razmerjem 1 : N (ena proti neskončno) preko id-uporabnika, ki se nahaja tudi v tabeli

dogodkov. Tako razmerje in povezava sta zelo primerna, saj ima lahko en uporabnik

organiziranih več dogodkov hkrati. Tabeli kategorija in dogodek sta povezani preko id-

kategorije, ki se nahaja v tabeli dogodek. Razmerje med kategorijo in dogodkom je 1 : 1

(ena proti ena), saj ima dogodek lahko samo eno kategorijo. Vsi podatki se v bazo

vpisujejo z uporabo parametrov v PHP, ti naj bi preprečili napade SQL-injekcije.

42

Tabela uporabnikov vsebuje naslednje stolpce:

Ime – tipa niz

Priimek – tipa niz

Ulica – tipa niz

Kraj – tipa niz

Država – tipa niz

ID_uporabnik – tipa primarni ključ

Uporabniško_ime – tipa niz

Geslo – tipa niz

Email – tipa niz

Čas_registracije – tipa datum in čas

Tabela kategorij vsebuje naslednja stolpca:

ID_kategorija – tipa primarni ključ

Ime_kategorija – tipa niz

Tabela dogodkov vsebuje naslednje stolpce:

ID_dogodek – tipa primarni ključ

Slika – tipa BLOB

Ime – tipa niz

Opis – tipa niz

ID_kategorija – tipa primarni ključ

Število_predvidenih_mest – tipa število

Začetek – tipa datum in čas

Konec – tipa datum in čas

Ulica – tipa niz

Kraj – tipa niz

Država – tipa niz

Latitude – tipa float

Longtitude – tipa float

ID_uporabnik – tipa primarni ključ

Čas_objave – tipa datum in čas

43

Slika 8.1: UML-diagram


Z iskalno vrstico lahko iščemo po dogodkih na štiri načine: prvi način je z izbiro kategorije,

drugi z določitvijo, kdaj se dogodek začenja, tretji z določitvijo, kdaj se dogodek konča,

zadnji pa je po iskalnem vnosu, in sicer besede, s katero iščemo po bazi podatkov. Z izbiro

kategorije bomo iskali po določenih zvrsteh dogodkov. Dogodke sem razdelil v naslednje

kategorije:

avto;

disko;

dobrodelni;

glasba;

hrana;

kultura;

lokali;

moda;

moto;

seminarji;

šport:

badminton;

borilni športi;

kolesarstvo;

košarka;

nogomet;

odbojka;

44

tenis;

zimski športi.

veselice.

Vsako kategorijo bo možno izbrati po lastni želji tako, da bomo obkljukali kategorije, ki

jih želimo – slednje se bodo prikazale na zemljevidu. Kategorije bodo med seboj

razpoznavne, saj bo vsaka kategorija imela svojo obliko markerja. Ob kategorijah

dogodkov bodo zraven tudi ikone iz markerjev, da bodo lahko ljudje, ki na spletno stran

pridejo prvič, vedeli, kaj se jim je prikazalo na spletni strani.

Slika 8.2: Ikone markerjev


8.2 Domača stran

Predloga domače strani je popolnoma preprosta, saj je zelo pomembno, da se bodo

obiskovalci znašli in da se bo spletna stran dovolj hitro naložila brez odvečnega balasta.

Struktura spletne strani je ustvarjena z Bootstrapom in je odzivna glede na velikost zaslona.

Domača stran v zgornjem delu vsebuje logotip naše spletne strani, oglasno okno in dva

gumba, ki omogočata prijavo in registracijo.

Za prijavo uporabnika je potrebno pritisniti na gumb prijava. Ob pritisku na gumb se nam

prikaže vpisno okence, v katerem se nahajata dve vnosni polji: potrditveno polje, da si nas

zapomni ob naslednji prijavi, in gumb za vpis. Ko uporabnik vnese uporabniško ime in

geslo, lahko po svoji želji obkljuka, da si ga strežnik zapomni oz. ga shrani v sejo, ki traja

eno leto. Ob pritisku na gumb vpis se te podatke pošlje na strežnik, kjer se preveri njihovo

ustreznost. Če uporabniško ime ne obstaja, se izpiše opozorilo »Ta uporabnik ne obstaja!«.

V primeru napačnega gesla se izpiše »Napačno geslo!«. Klik na gumb registracija nas bo

preusmeril na novo stran, kjer se bomo lahko registrirali.

45

Slika 8.3: Vpisno okno


Pod tem delom spletne strani se nahaja tako imenovani iskalnik dogodkov. Vrstica, kjer se

nahaja iskalnik dogodkov, vsebuje štiri možnosti brskanja po dogodkih. Z iskanjem

dogodkov po datumu začetka dogodka nam bo prikazalo vse dogodke, ki se začno na ta

datum oziroma na kasnejši datum od tega, če bomo pa navedli še datum konca, nam bo na

zemljevidu prikazalo vse dogodke, ki se bodo dogajali med tem časom. Lahko bomo iskali

tudi po uri, ne le po datumu, kar bo posledično pripeljalo do nekoliko manj nepotrebnih

prikazov na zemljevidu in s tem bo iskanje za uporabnike lažje. Vnosno polje za iskanje po

dogodkih je namenjeno za primere, ko uporabnik že pozna neki dogodek po naslovu, kraju,

imenu, državi ali po geolokaciji. Ob vnosu besede, ki se bo nahajala v enem izmed teh

stolpcev, bo posledično ta dogodek nato prikazan na zemljevidu.

Slika 8.4: Iskalna vrstica


46

Programska koda za funkcijo iskanja dogodkov poteka po naslednjem postopku (glej Slika

8.5).

Slika 8.5: Potek iskanja dogodkov


Glavni del domače strani je Googlov zemljevid, brez katerega ne gre. Z njim se prikazuje

zemljevid in vsi objavljeni dogodki, ki so se začeli ali se še niso končali. Google je ustvaril

in objavil programsko kodo za uporabo zemljevidov, ki sem jo uporabil tudi sam in malo

modificiral, kar je popolnoma dovoljeno.

8.2.1 HTML-koda

<div class= "container-fluid" style="background-color:#383939; border-radius:0px 0px

6px 6px">

<div class="row">

<div class="col-lg-2 col-lg-offset-10 col-xs-8 col-xs-offset-4 col-sm-offset-9 col-md-

offset-9">

<div class="btn-group">

<button type="button" class="btn btn-primary login">Prijava</button>

<button type="button" class="btn btn-primary register">Registracija</button>

</div>

</div>

</div>

</div>

47

<nav class="navbar-form navbar-inverse navbar-static " style="background-

color:#b9baba; border-radius:6px 6px 0px 0px;margin-bottom:0px" >

<div class="container-fluid">

<div class="row" style="padding-top:6px;padding-bottom:6px">

<ul class="nav navbar-nav">

<div class="col-sm-3 col-lg-2 col-lg-offset-1 col-xs-12">

<li ><button class="btn btn-primary dropdown-toggle" type="button" data-

toggle="dropdown">Kategorije

<span class="caret"></span></button>

<ul class="dropdown-menu " style="left:auto; margin:-1px">

<li class="category1"><input type="checkbox" id="car" /> <label

for="car">Avto</label></li>

<li class="category1"><input type="checkbox" id="disco"/> <label

for="disco">Disko</label></li>

<li class="category1"><input type="checkbox" id="charity"/> <label

for="charity">Dobrodelni</label></li>

<li class="category1"><input type="checkbox" id="music"/> <label

for="music">Glasba</label></li>

<li class="category1"><input type="checkbox" id="food"/> <label

for="food">Hrana</label></li>

<li class="category1"><input type="checkbox" id="culture"/> <label

for="culture">Kultura</label></li>

<li class="category1"><input type="checkbox" id="fashion"/> <label

for="fashion">Moda</label></li>

<li class="category1"><input type="checkbox" id="motor"/> <label

for="motor">Moto</label></li>

<li class="category1"><input type="checkbox" id="seminar"/> <label

for="seminar">Seminarji</label></li>

<li class=" dropdown-submenu category1"><input type="checkbox"

id="sport"/> <label for="sport">Šport<span class="caret"></span></label><ul

class="dropdown-menu">

<li class="category2"><input type="checkbox"

id="badminton"/><label> Badminton</label></li>

48


id="martialarts"/><label> Borilni športi</label></li>


id="cycling"/><label> Kolesartstvo</label></li>


id="basketball"/><label> Košarka</label></li


id="football"/><label> Nogomet</label></li>


id="volleyball"/><label> Odbojka</label></li>


id="tennis"/><label> Tenis</label></li>


id="wintersports"/><label> Zimski športi</label></li></ul></li>

<li class="category1"><input type="checkbox" id="party"/> <label

for="party">Veselice</label></li>

</ul></li>

</div>

<div class="col-sm-3 col-lg-3 col-xs-12">

<li ><div class="form-group">

<div class="input-group date " id='eventstart'>

<input type='text' class="form-control" id="startevent" />

<span class="input-group-addon">

<span class="glyphicon glyphicon-calendar"></span>

</span>

</div>

</div> </li>

</div>


<li >

<div class="form-group">

<div class="input-group date" id='eventend'>

<input type='text' class="form-control" id="endevent" />

<span class="input-group-addon">

49

<span class="glyphicon glyphicon-calendar"></span>

</span>

</div>

</div>

</li>

</div>


<li >

<div class="input-group">

<input type="text" class="form-control" id="search" placeholder="Search" />

<span class="input-group-btn">

<button class="btn " type="button" onClick="search()">

<span class=" glyphicon glyphicon-search"></span>

</button>

</span>

</div>

</li>

</div>

</ul>

</div>

</div>

</nav>

<div id="map" style="width: 100%; height: 600px"></div>

<div class="modal fade" tabindex="-1" id="loginwindow" role="dialog">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span

aria-hidden="true">×</span></button><h3 class="modal-title">Vpis</h3>

</div>

<div class="modal-body">

<form>


<label class="control-label">Uporabniško ime: </label>

50

<input id="username" class="form-control" type="text" placeholder="Uporabniško ime"

>

</div>


<label class="control-label "> Geslo:</label>

<input id="password" class="form-control" type="password" placeholder="Geslo"

type="text">

</div>

</form>

<div id="warningmessage" style="color:red"></div>

<div class="checkbox">

<label><input type="checkbox"> Zapomni si me</label>

<button id="loginbutton" class="btn btn-default">Vpis</button>

</div>

</div>

</div>

</div>

</div>

8.3 Registracija uporabnika

Če smo na domači strani pritisnili na gumb registracija, nas je preusmerilo na novo stran,

kjer se lahko registriramo. Obrazec je povsem standarden. Potrebno je vnesti ime, priimek,

naslov, kraj, državo, e-naslov, uporabniško ime in geslo. Preden obrazec potrdimo, je

potrebno prestati še preverbo Googlovega captcha okenca, za katerega je dovolj, če samo

kliknemo na potrditveno polje, nato pa se preveri, ali smo robot ali človek. V primeru, da

smo sumljivi Googlovemu captcha programu, nam lahko ponudi tudi slikovno preverbo, v

kateri moramo obkljukati slike, ki vsebujejo neko ime ali pa spadajo v določeno kategorijo.

Kaj nam Google ponudi za dodatno preverbo, je popolnoma odvisno od njega. Ko uspešno

prestanemo preizkus, ga Google captcha tudi potrdi in lahko se uspešno registriramo.

Zaradi varnosti se gesla pred samim vnosom v podatkovno bazo tudi kriptirajo. Ob

registraciji dobimo tudi potrditveno sporočilo, s katerim dobimo potrditveno povezavo, na

katero moramo obvezno klikniti, da potrdimo registracijo in da se lahko uspešno prijavimo.

51

Slika 8.6: Registracijski obrazec


8.3.1 HTML-koda

<div class= "container-fluid">

<div class="container" id="container1">

<div class="row " id="row1">

<div class="col-xs-10 col-lg-offset-3 col-lg-9 col-md-offset-3 col-sm-offset-3 col-xs-

offset-1">

<h2>Vpišite podatke:</h2>

<div id="alert" style="font-size:14;color:red"></div>

<form class="form-horizontal" role="form" >


<label class="control-label col-sm-2 col-xs-12" >Ime:</label>

<div class="col-sm-4 col-lg-4 col-md-3 col-xs-12 ">

<input type="text" class="form-control" id="name" >

52

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Priimek:</label>


<input type="text" class="form-control" id="surname" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Ulica:</label>


<input type="text" class="form-control" id="street" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Kraj:</label>


<input type="text" class="form-control" id="city" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Država:</label>


<select id="country" class="form-control"></select>

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Email:</label>


<input type="text" class="form-control" id="email" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Uporabniško ime:</label>

53


<input type="text" class="form-control" id="username" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Password:</label>


<input type="password" class="form-control" id="password" >

</div>

</div>


<div class="col-sm-4 col-lg-4 col-lg-offset-2 col-md-3 col-xs-8 g-recaptcha" data-

sitekey="6Le3FQcUAAUUUADlZpI3Ww3KrVBZBVNL3PKGT9Bcs" ></div>

</div>


<div class="control-label col-sm-2 col-xs-8 col-lg-offset-1">

<button class="btn">Registriraj se</button>

</div>

</div>

</form>

</div>

</div>

8.4 Pogled prijavljenega uporabnika

Ob prijavi uporabnika nas preusmeri na drugo stran, ki je namenjena samo prijavljenim

uporabnikom. Predloga spletne strani je zelo podobna domači strani. Razlika je v tem, da

predloga prijavljenega uporabnika ne vsebuje iskalne vrstice, v Googlovem zemljevidu pa

se prikažejo samo njegovi aktualni objavljeni dogodki, prav tako nima več dveh gumbov

(prijava in registracija), medtem ko je vse ostalo enako. Namesto teh dveh gumbov so sedaj

trije (objavi dogodek, moj račun in gumb za odjavo). Ob pritisku na gumb »objavi

dogodek« nas preusmeri na novo stran, kjer lahko vnesemo podatke o dogodku, ki ga

želimo vnesti in objaviti. Pritisk gumba »moj račun« nam prikaže meni, v katerem imamo

54

dve opciji, in sicer ureditev svojih podatkov (urejanje osebnih podatkov in gesla) ali

urejanje dogodkov. Če se uporabnik ne odjavi, ga bo tudi ob naslednjem obisku

avtomatično preusmerilo na stran za prijavljene uporabnike, saj bo seja ostala v spominu.

Če bi neprijavljeni uporabnik želel dostopati do vsebine, ki je namenjena samo prijavljenim

uporabnikom, bi ga zavrnili in preusmerili nazaj na domačo stran, saj nima ustvarjene seje

ali je le-ta nepravilna.

Slika 8.7: Pogled prijavljenega uporabnika


8.4.1 HTML-koda


6px 6px">

<div class="row">

<div class="col-lg-xs-offset-4 col-xs-8 col-md-offset-8 col-lg-offset-9 col-sm-offset-8"

id="logoff" ><div class="btn-group" role="group" aria-label="...">

<button type="button" class="btn btn-default post-event">Objavi dogodek</button>

<div class="btn-group" role="group">

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">Moj račun

<span class="caret"></span>button>

<ul class="dropdown-menu">

55

<li><a href="#">Uredi dogodke</a></li>

<li><a href="#">Uredi podatke</a></li>

</ul>

</div>

<button type="button" class="btn btn-default log-off"><span class="glyphicon

glyphicon-off" aria-hidden="true"></span></button>

</div>

</div>

</div>

</div>

<div id="line"></div>

<div id="map" style="width: 100%; height: 600px"></div>

8.5 Objava dogodkov

Uporabnika je ob kliku na gumb objavi dogodek preusmerilo na to stran. Za objavo

dogodka mora izpolniti obrazec, ki vsebuje naslednja polja: naslov dogodka, kategorijo

dogodka, dodati mora sliko dogodka, število predvidenih mest (vnos ni obvezen), opis

dogodka, datum in čas začetka dogodka, datum in čas konca dogodka, ulico, kraj, državo

in koordinate (X in Y) za prikaz markerjev na zemljevidu. Slika dogodka je obvezna, saj je

danes na vsakem plakatu in na vsaki spletni strani, kjer se dogodki oglašujejo.

56

Slika 8.8: Obrazec za objavo dogodka


8.5.1 HTML-koda


6px 6px; padding-bottom:8px">

<div class="row">

<div class="btn-group col-xs-offset-5 col-sm-offset-8 col-md-offset-10 col-lg-offset-10 "

id="logoff" >

<button class="btn btn-primary"><a style="color:white" href="registred.html"

type="button">Nazaj</a></button>

<div class="btn-group">

<button class="btn btn-primary dropdown-toggle" type="button" data-

toggle="dropdown">Moj račun

<span class="caret"></span></button>

<ul class="dropdown-menu">

<li><a href="events.html ">Uredi dogodke</a></li>

<li><a href="account.html">Uredi račun</a></li>

</ul></div>

57

</div>

</div>

</div>

</div>

<div class="container" id="container1">

<div class="row " id="row1">

<div class="col-xs-10 col-lg-offset-3 col-lg-9 col-md-offset-3 col-sm-offset-3 col-xs-

offset-1 ">

<h2>Objavi dogodek</h2>

<div id="alert" style="font-size:14;color:red;display:none">Prosim vpišite

podatke!</div>

<form class="form-horizontal" role="form" >


<label class="control-label col-sm-2 col-xs-12" >Dodaj sliko:</label>


<input type="file" class="form-control" id="eventimage" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Naslov eventa:</label>


<input type="text" class="form-control" id="eventname" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Kategorija eventa:</label>

<div class="col-sm-5 col-lg-5 col-md-5 col-xs-12">

<select class="form-control" id="eventcategory" >

<option>Glasba</option>

<option>Diskoteke</option>

<option>Moda</option>

<option>Hrana</option>

<option>Šport</option>

<option>Kultura</option>

58

<option>Moto</option>

<option>Avto</option>

<option>Meetingi</option>

<option>Veselice</option>

<option>Seminarji</option>

<option>Dobrodelni</option>

</select>

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Število predvidenih mest:</label>


<input type="text" class="form-control" id="eventfreespace" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Opis eventa:</label>


<textarea class="form-control" rows="5" id="eventdescription" ></textarea>

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Začetek eventa:</label>

<div class="col-sm-5 col-lg-5 col-md-5 col-xs-12">

<input type="text" class="form-control" id="startevent" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Konec eventa:</label>


<input type="text" class="form-control" id="endevent" >

</div>

</div>


59

<label class="control-label col-sm-2 col-xs-12" >Ulica:</label>


<input type="text" class="form-control" id="street" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Kraj:</label>


<input type="text" class="form-control" id="city" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Država:</label>


<select id="country" class="form-control"></select>

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Latitude koordinate:</label>


<input type="text" class="form-control" id="latitude" >

</div>

</div>


<label class="control-label col-sm-2 col-xs-12" >Longitude koordinate:</label>


<input type="text" class="form-control" id="longtitude" >

</div>

</div>


<div class="control-label col-sm-2 col-xs-12 col-lg-offset-2">

<button class="btn btn-default">Objavi event</button>

</div>

</div>

60

</form>

</div>

</div>

8.6 Google zemljevid

Z uporabo Googlovih zemljevidov, katerih uporaba je do neke mere brezplačna, bom

prikazoval lokacije dogodkov z uporabo markerjev. Za prikaz Googlovih zemljevidov sem

uporabil tako imenovani »Google maps API«.

Kratica API (ang. Application Programming Interface) predstavlja metode in orodja, ki jih

lahko uporabimo za izdelovanje programskih aplikacij. Za uspešen prikaz zemljevida na

spletni strani sem uporabil že obstoječo kodo s strani Googla. Za delovanje zemljevida

potrebujemo MySQL, PHP, XML in JavaScript. Torej z uporabo JavaScripta ustvarimo

določene funkcije, s katerimi prikažemo zemljevid. Ko je zemljevid naložen, se

izvrši Ajax funkcija, s katero pokličemo PHP-datoteko, ki nam iz baze izpiše določene

dogodke in informacije o njih ter jih shrani v XML-datoteko, iz katere nato preberemo

markerje in jih izpišemo na zemljevidu. Privzeta nastavitev zemljevida ob prihodu na

spletno stran je prikaz zadnjih 100 objavljenih dogodkov, ki se bodo odvijali.

Ko nastavimo ali vpišemo iskalne parametre (kategorijo, datum, iskalni niz) in pritisnemo

na gumb za iskanje, sprožimo funkcijo, ki aktivira klic Ajaxa. Ta klic pošlje naše iskalne

parametre v PHP-datoteko, ki izpiše ustrezne rezultate iz tabele dogodkov. Vse izbrane

dogodke PHP shrani v XML-datoteko, iz katere jih nato z uporabo Jquerja razberemo in

prikažemo na zemljevidu.

8.7 Sprememba podatkov in urejanje dogodkov

Ko je obiskovalec prijavljen, ima možnost urejanja podatkov in dogodkov. S klikom na

gumb »Moj račun« pridobi opcijo urejanje svojih podatkov ali urejanje dogodkov. V

primeru, da izbere opcijo urejanje svojih podatkov, lahko uporabnik spremeni svoje osebne

podatke, tudi e-naslov in geslo. Če izbere opcijo sprememba gesla, bo ob uspešni

spremembi gesla na njegov e-mail naslov poslano obvestilo o spremembi gesla.

61

Slika 8.9: Urejanje uporabnikovih podatkov


Opcija urejanje dogodkov nam izpiše vse aktualne dogodke, ki so objavljeni z naše strani.

Dogodke je možno urediti ali izbrisati. Ob vsakem dogodku sta dva gumba, za izbris in za

urejanje (glej Slika 8.10).

Slika 8.10: Prikaz objavljenih dogodkov


Za ureditev dogodka kliknem na gumb »uredi«, nakar se nam ob kliku odpre pojavno okno,

preko katerega lahko uredimo dogodek. Uredimo lahko naslednje podatke za dogodek:

ime dogodka, naslov dogodka, lokacijo, število predvidenih mest, koordinate, opis

dogodka.

62

Slika 8.11: Urejanje dogodka


Za izbris dogodka mora uporabnik pritisniti na gumb izbriši, vendar mora to še dodatno

potrditi, saj se mu ob pritisku na izbriši prikaže še pojavno okno, v katerem lahko prekliče

ali potrdi svoje dejanje.

63

Slika 8.12: Izbris dogodka


9. ZAKLJUČEK

Cilj diplomske naloge, ki sem si ga zadal na samem začetku, je bil dosežen s tem, da sem

ustvaril spletno stran, preko katere bo lahko vsak uporabnik objavljal dogodke. Še bolj

pomembno pa je to, da bo lahko vsak prebivalec Slovenije obiskal spletno stran in si ogledal

vse dogodke, ki se odvijajo po Sloveniji, zbrane na enem mestu.

Pisanje diplomskega dela je zahtevalo kar veliko znanja programskih jezikov, še posebej

znanje jezikov PHP, AJAX in JQuery, saj je največ kode spisano ravno v teh programski

jezikih, vendar tega uporabnik ne vidi. Najbolj zahteven del pri izdelavi spletne strani je

bila izdelava dinamičnega prikaza markerjev na zemljevidu. Ob vsakem vnosu novih

parametrov v iskalno vrstico je bilo to treba prebrati in ob pritisku na gumb vse skupaj

poslati na strežnik, nato pa poslati iskane podatke nazaj na spletno stran brez osveževanja

strani. Ker sem spletno stran ustvaril na tak način, da se ob iskanju dogodkov ne osvežuje,

sem prihranil čas tako uporabniku kakor tudi strežniku z nalaganjem strani na novo.

Cilji za prihodnost so veliki, najprej želim pridobiti veliko število objavljenih dogodkov,

ki bi jih uporabniki objavili sami. Za začetek bi bil popolnoma zadovoljen, če bi mi to

uspelo na področju Slovenije. Da bi to uspelo, bo potrebno veliko oglaševanja. Za

oglaševanje bom uporabljal socialni omrežji, kot sta Twitter in Facebook, saj lahko tako

pridobimo ciljno publiko. Glede na to, da oglaševanje ni poceni oziroma je potrebno vložiti

veliko denarja, ga bom poizkušal pridobiti z udeležbo na start-up tekmovanjih. Na dolgi

rok pa bi rad razširil svojo spletno stran po celem svetu.

65

10. LITERATURA IN VIRI

1. BOOTSTRAP. Dostopno prek: http://getbootstrap.com/about/ (12. 8. 2016).

2. DEMERS, JASON (2013) How Much Should You Spend on SEO Services? Dostopno

prek: https://searchenginewatch.com/sew/how-to/2267471/how-much-should-you-

spend-on-seo-services (29. 8. 2016).

3. DJ-SLOVENIJA. Dostopno prek: www.dj-slovenija.si (21. 7. 2016).

4. DOMOVANJE. Dostopno prek: www.domovanje.com (7. 9. 2016).

5. DUCKETT, JON (2014) Javascript & jquery: interactive front-end web development.

New York: John Wiley & Sons Inc.

6. EVENTIM. Dostopno prek: www.eventim.si (21. 7. 2016).

7. GOOGLE ADSENSE. Dostopno prek: www.support.google.com/adsense#topic=

3373519 (2. 9. 2016).

8. GREENGEEKS. The 7Most Common Reasons Why Your Website Has Been Hacked (

And How to Protect It). Dostopno prek: www. greengeeks.com/blog/2016/01/07/the-

7-most-common-reasons-why-your-website-has-been-hacked-and-how-to-protect-

it/ (18. 8. 2016).

9. HAILE,TONY (2014) What You Think You Know About

the Web Is Wrong. Dostopno prek: http://time.com/12933/what-you-think-you-know-

about-the-web-is-wrong/ (28. 7. 2016).

10. HARTSTEIN, DAVID (2014) The Ways Knowing Your Audience Impacts Your

Website. Dostopno prek: https://wiredimpact.com/blog/knowing-audience-impacts-

website/ (22. 8. 2016).

11. HOMEANDLEARN. What is php? Dostopno prek: www.homeandlearn.co.uk

/php/php1p1.html (26. 7. 2016).

12. HOSTINGFACTS. Dostopno prek: www.hostingfacts.com/internet-facts-stats-2016/

(28. 7. 2016).

13. INTERNELIVESTATS. Dostopno prek: http://www.internetlivestats.com/total-

number-of-websites/ (26. 8. 2016).

14. KAMZVECER. Dostopno prek: www.kamzvecer.si (21. 7. 2016).

http://getbootstrap.com/about/

https://searchenginewatch.com/sew/how-to/2267471/how-much-should-you-spend-on-seo-services

https://searchenginewatch.com/sew/how-to/2267471/how-much-should-you-spend-on-seo-services

http://www.dj-slovenija.si/

http://www.domovanje.com/

https://www.google.si/search?espv=2&biw=1366&bih=643&q=New+York&stick=H4sIAAAAAAAAAOPgE-LUz9U3MMotLypTgjDjjSzMtFSzk63084vSE_MyqxJLMvPzUDhWafmleSmpKQDoj76XPwAAAA&sa=X&ved=0ahUKEwirrMCP7tLOAhVGVBQKHRtSBOMQmxMInAEoATAP

http://www.eventim.si/

http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/

http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/

67

15. LEPAGE, EVAN (2015) Display Ads, Search Ads, and Social Media Ads: Pros and

Cons. Dostopno prek: https://blog.hootsuite.com/display-ads-search-ads-and-social-

media-ads/.

16. NAPOVEDNIK. Dostopno prek: www.napovednik.com (21. 7. 2016).

17. NSA. Dostopno prek: http://www.nsa.zpanel.sckr.si/ (18. 8. 2016).

18. OBALA. Dostopno prek: www.obala.net (21. 7. 2016).

19. OWASP. Dostopno prek: https://www.owasp.org/index.php/Top_10_2013-Top_10

(13. 9. 2016).

20. RTVSLO. Dostopno prek: www.prireditve.rtvslo.si (21. 7. 2016).

21. SEGUETECH (2013) What is Ajax and Where is it Used in Technology?

Dostopno prek: www. seguetech. com/what-is-ajax-and-where-is-it-used-in-

technology/ (22. 7. 2016).

22. SLOVENIA. Dostopno prek: www.slovenia.info (21. 7. 2016).

23. SNELL, STEVEN (2008) Online Advertising And Its Impact On Web Design.

Dostopno prek: www.smashingmagazine.com/2008/12/online-advertising-and-its-

impact-on-web-design/ (27. 8. 2016).

24. SPAMLAWS. Spam Statistics and Facts. Dostopno prek: http://www.spamlaws.com/

spam-stats.html (1. 9. 2016).

25. SPLETNIK (2012) Oblike spletnega oglaševanja. Dostopno prek:

https://spletnik.si/blog/2012/05/18/oblike-spletnega-oglasevanja/ (27. 8. 2016).

26. STATISTA. Dostopno prek: http://www.statista.com/statistics/183816/us-online-

advertising-revenue-since-2000/ (18. 8. 2016).

27. TUTORIALSPOINT. What is AJAX? Dostopno prek: http://www. tutorialspoint.

com/ajax/what_is_ajax.htm (25. 7. 2016).

28. VESELICE. Dostopno prek: www.veselice.si (21. 7. 2016).

29. VIHPROJEKT. Novosti HTML 5. Dostopno prek: http://vihprojekt.weebly.com/

novosti -html5.html (15. 8. 2016).

30. ZAVERSNIK. Dostopno prek: http://zaversnik.fmf.uni-lj.si/gradiva/javascript

/uvod/script. php (21. 7. 2016).

31. ZELENALJUBLJANA. Dostopno prek: www.zelenaljubljana.si (21. 7. 2016).

32. W3SCHOOLS. PHP 5 Introduction. Dostopno prek: http://www. w3schools.com/php

/php_intro.asp (28. 7. 2016).

http://www.obala.net/

http://www.seguetech.com/what-is-ajax-and-where-is

http://www.slovenia.info/

https://www.smashingmagazine.com/author/stevensnell/

https://www.smashingmagazine.com/2008/12/online-advertising-and-its-impact-on-web-design/

http://www.smashingmagazine.com/2008/12/online-advertising-and-its-impact-on-web-design/

http://www.smashingmagazine.com/2008/12/online-advertising-and-its-impact-on-web-design/

https://spletnik.si/blog/2012/05/18/oblike-spletnega-oglasevanja/

http://www.statista.com/statistics/183816/us-online-advertising-revenue-since-2000/

http://www.statista.com/statistics/183816/us-online-advertising-revenue-since-2000/

d i p l o m s k a n a l o g a - milovan tomaševićdk.fis.unm.si/dip/vs_2016_jure_delak.pdf ·...

Documents