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

Transcription

1 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

2

3 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

4 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

5 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.

6

7 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.

8

9 KAZALO 1. UVOD SPLETNO OGLAŠEVANJE Tehnike spletnega oglaševanja SEO-oglaševanje Socialna omrežja Google Adsense oglaševanje marketing PROGRAMSKI JEZIKI HTML Javascript Ajax PHP CSS SQL BOOTSTRAP Nastanek Kako deluje Bootstrap OBLIKOVANJE SPLETNE STRANI GOSTOVANJE Domena Strežnik VARNOST SQL-injekcija Prijava in registracija spam... 37

10

11 7.3.1 Kako zmanjšati količino nezaželenih sporočil Kraja podatkov uporabnikov Preprečitev podvajanja dogodkov PREDSTAVITEV SPLETNE APLIKACIJE Podatkovna baza Domača stran HTML-koda Registracija uporabnika HTML-koda Pogled prijavljenega uporabnika HTML-koda Objava dogodkov HTML-koda Google zemljevid Sprememba podatkov in urejanje dogodkov ZAKLJUČEK LITERATURA IN VIRI... 65

12

13 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 KAZALO SLIK Slika 4.1: Mreža Slika 6.1: Struktura domene Slika 8.1: UML-diagram Slika 8.2: Ikone markerjev Slika 8.3: Vpisno okno Slika 8.4: Iskalna vrstica Slika 8.5: Potek iskanja dogodkov Slika 8.6: Registracijski obrazec Slika 8.7: Pogled prijavljenega uporabnika Slika 8.8: Obrazec za objavo dogodka Slika 8.9: Urejanje uporabnikovih podatkov Slika 8.10: Prikaz objavljenih dogodkov Slika 8.11: Urejanje dogodka Slika 8.12: Izbris dogodka

14

15 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. 1

16 Spletne strani, ki oglašujejo dogodke po Sloveniji: Za veselice po Sloveniji je spletna stran (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 (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 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 2

17 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 3

18 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. 4

19 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 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. 5

20 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 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 6

21 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 7

22 zahteven, zato ponovno ni neke standardne cene, vendar nas to pogostokrat stane med 1000 in 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 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 8

23 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 9

24 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) 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 10

25 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 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. 11

26 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> 12

27 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; 13

28 v primeru vpisa e-poštnega naslova mora imeti vnos sledečo strukturo (tekst@tekst.tekst); 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, 14

29 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 15

30 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 16

31 urejanje le-teh. Z uporabo JQuery je možno tudi spreminjati, dodajati in brisati CSSlastnosti 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 17

32 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 18

33 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> 19

34 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. 20

35 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 21

36 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)) 22

37 {$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 23

38 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č HTMLdatotek, 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); 24

39 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) ); 25

40 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=" </script> <script src="js/bootstrap.min.js"></script> 26

41 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 class="col-md-6">.col-md-6 <- to je desna polovica 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. 27

42 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 28

43 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. 29

44 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» zakupil na spletni strani» 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: 30

45 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 naročnikov. Brezplačna selitev vaših strani k nam. 31

46 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 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. 32

47 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 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. 33

48 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 34

49 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. Koda na strani strežnika: $stavek = " SELECT * FROM Users WHERE UserId = 105 or 1=1"; 35

50 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 ""=""«. Koda na strani strežnika: $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«. Koda na strani strežnika: $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: 36

51 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 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 37

52 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) 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 38

53 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 napišemo (at), potlej bo moral uporabnik lastnoročno prekopirati naslov in zamenjati (at) 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.: admin@domain.com. To tehniko se lahko prepreči na način, da uporabimo unikaten e-poštni naslov. Torej namesto admin@domain.com uporabimo company.admin@domain.com. 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 39

54 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. 40

55 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 idkategorije, 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. 41

56 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 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 42

57 Slika 8.1: UML-diagram Vir: Delak, lastni prikaz (2016) 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; 43

58 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 Vir: Delak, lastni prikaz (2016) 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. 44

59 Slika 8.3: Vpisno okno Vir: Delak, lastni prikaz (2016) 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 Vir: Delak, lastni prikaz (2016) 45

60 Programska koda za funkcijo iskanja dogodkov poteka po naslednjem postopku (glej Slika 8.5). Slika 8.5: Potek iskanja dogodkov Vir: Delak, lastni prikaz (2016) 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 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-mdoffset-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> 46

61 <nav class="navbar-form navbar-inverse navbar-static " style="backgroundcolor:#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" datatoggle="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> 47

62 <li class="category2"><input type="checkbox" id="martialarts"/><label> Borilni športi</label></li> <li class="category2"><input type="checkbox" id="cycling"/><label> Kolesartstvo</label></li> <li class="category2"><input type="checkbox" id="basketball"/><label> Košarka</label></li <li class="category2"><input type="checkbox" id="football"/><label> Nogomet</label></li> <li class="category2"><input type="checkbox" id="volleyball"/><label> Odbojka</label></li> <li class="category2"><input type="checkbox" id="tennis"/><label> Tenis</label></li> <li class="category2"><input type="checkbox" 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 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> </li> <div class="col-sm-3 col-lg-3 col-xs-12"> <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"> 48

63 <span class="glyphicon glyphicon-calendar"></span> </span> </li> <div class="col-sm-3 col-lg-3 col-xs-12"> <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> </li> </ul> </nav> <div id="map" style="width: 100%; height: 600px"> <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 class="modal-body"> <form> <div class="form-group"> <label class="control-label">uporabniško ime: </label> 49

64 <input id="username" class="form-control" type="text" placeholder="uporabniško ime" > <div class="form-group"> <label class="control-label "> Geslo:</label> <input id="password" class="form-control" type="password" placeholder="geslo" type="text"> </form> <div id="warningmessage" style="color:red"> <div class="checkbox"> <label><input type="checkbox"> Zapomni si me</label> <button id="loginbutton" class="btn btn-default">vpis</button> 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. 50

65 Slika 8.6: Registracijski obrazec Vir: Delak, lastni prikaz (2016) 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-xsoffset-1"> <h2>vpišite podatke:</h2> <div id="alert" style="font-size:14;color:red"> <form class="form-horizontal" role="form" > <div class="form-group"> <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" > 51

66 <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Priimek:</label> <div class="col-sm-4 col-lg-4 col-md-3 col-xs-12 "> <input type="text" class="form-control" id="surname" > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Ulica:</label> <div class="col-sm-4 col-lg-4 col-md-3 col-xs-12 "> <input type="text" class="form-control" id="street" > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Kraj:</label> <div class="col-sm-4 col-lg-4 col-md-3 col-xs-12 "> <input type="text" class="form-control" id="city" > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Država:</label> <div class="col-sm-4 col-lg-4 col-md-3 col-xs-12 "> <select id="country" class="form-control"></select> <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" > </label> <div class="col-sm-4 col-lg-4 col-md-3 col-xs-12 "> <input type="text" class="form-control" id=" " > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Uporabniško ime:</label> 52

67 <div class="col-sm-4 col-lg-4 col-md-3 col-xs-12 "> <input type="text" class="form-control" id="username" > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Password:</label> <div class="col-sm-4 col-lg-4 col-md-3 col-xs-12 "> <input type="password" class="form-control" id="password" > <div class="form-group"> <div class="col-sm-4 col-lg-4 col-lg-offset-2 col-md-3 col-xs-8 g-recaptcha" datasitekey="6le3fqcuaauuuadlzpi3ww3krvbzbvnl3pkgt9bcs" > <div class="form-group"> <div class="control-label col-sm-2 col-xs-8 col-lg-offset-1"> <button class="btn">registriraj se</button> </form> 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 53

68 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 Vir: Delak, lastni prikaz (2016) HTML-koda <div class= "container-fluid" style="background-color:#383939; border-radius:0px 0px 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"> 54

69 <li><a href="#">uredi dogodke</a></li> <li><a href="#">uredi podatke</a></li> </ul> <button type="button" class="btn btn-default log-off"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button> <div id="line"> <div id="map" style="width: 100%; height: 600px"> 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. 55

70 Slika 8.8: Obrazec za objavo dogodka Vir: Delak, lastni prikaz (2016) HTML-koda <div class= "container-fluid" style="background-color:#383939; border-radius:0px 0px 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" datatoggle="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> 56

71 <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-xsoffset-1 "> <h2>objavi dogodek</h2> <div id="alert" style="font-size:14;color:red;display:none">prosim vpišite podatke! <form class="form-horizontal" role="form" > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Dodaj sliko:</label> <div class="col-sm-5 col-lg-5 col-md-5 col-xs-12 "> <input type="file" class="form-control" id="eventimage" > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Naslov eventa:</label> <div class="col-sm-5 col-lg-5 col-md-5 col-xs-12 "> <input type="text" class="form-control" id="eventname" > <div class="form-group"> <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> 57

72 <option>moto</option> <option>avto</option> <option>meetingi</option> <option>veselice</option> <option>seminarji</option> <option>dobrodelni</option> </select> <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Število predvidenih mest:</label> <div class="col-sm-5 col-lg-5 col-md-5 col-xs-12 "> <input type="text" class="form-control" id="eventfreespace" > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Opis eventa:</label> <div class="col-sm-5 col-lg-5 col-md-5 col-xs-12 "> <textarea class="form-control" rows="5" id="eventdescription" ></textarea> <div class="form-group"> <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 class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Konec eventa:</label> <div class="col-sm-5 col-lg-5 col-md-5 col-xs-12 "> <input type="text" class="form-control" id="endevent" > <div class="form-group"> 58

73 <label class="control-label col-sm-2 col-xs-12" >Ulica:</label> <div class="col-sm-5 col-lg-5 col-md-5 col-xs-12 "> <input type="text" class="form-control" id="street" > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Kraj:</label> <div class="col-sm-5 col-lg-5 col-md-5 col-xs-12 "> <input type="text" class="form-control" id="city" > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Država:</label> <div class="col-sm-5 col-lg-5 col-md-5 col-xs-12 "> <select id="country" class="form-control"></select> <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Latitude koordinate:</label> <div class="col-sm-5 col-lg-5 col-md-5 col-xs-12 "> <input type="text" class="form-control" id="latitude" > <div class="form-group"> <label class="control-label col-sm-2 col-xs-12" >Longitude koordinate:</label> <div class="col-sm-5 col-lg-5 col-md-5 col-xs-12 "> <input type="text" class="form-control" id="longtitude" > <div class="form-group"> <div class="control-label col-sm-2 col-xs-12 col-lg-offset-2"> <button class="btn btn-default">objavi event</button> 59

74 </form> 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 naslov poslano obvestilo o spremembi gesla. 60

75 Slika 8.9: Urejanje uporabnikovih podatkov Vir: Delak, lastni prikaz (2016) 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 Vir: Delak, lastni prikaz (2016) 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. 61

76 Slika 8.11: Urejanje dogodka Vir: Delak, lastni prikaz (2016) 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. 62

77 Slika 8.12: Izbris dogodka Vir: Delak, lastni prikaz (2016) 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. 63