Website and online store development for a catering company

Full text

(1)Diplomsko delo univerzitetnega študija Organizacija in management informacijskih sistemov. IZDELAVA SPLETNE STRANI S SPLETNO TRGOVINO ZA GOSTINSKO PODJETJE. Mentorica: doc. dr. Alenka Baggia. Kranj, september 2017. Kandidat: Nejc Bricelj.

(2) ZAHVALA Zahvaljujem se mentorici, doc. dr. Alenki Baggia za usmerjanje in podane informacije pri izdelavi diplomskega dela. Za sodelovanje se zahvaljujem tudi direktorju podjetja HAPECE d.o.o., ki mi je omogočil postavitev spletne strani in prepustil njeno oblikovanje ter g. Avgustu Babiču, ki je diplomsko delo lektoriral. Posebna zahvala gre družini in prijateljem, ki so mi stali ob strani tekom študija ter ob pisanju diplomskega dela..

(3) POVZETEK V današnjem času morajo biti podjetja prepoznavna tudi na spletu. Prav zato se je podjetje HAPECE d.o.o. odločilo za postavitev spletne strani za njihov gostinski lokal Holidays' Pub. Z lično izdelano spletno stranjo bo tako podjetje zlahka konkuriralo ostalim gostinskim lokalom, hkrati pa bo goste obveščalo o prihajajočih dogodkih. Kot dopolnitev strani, bodo obiskovalcem ponudili možnost nakupa artiklov v spletni trgovini. V diplomskem delu podrobno opisujemo postopek izdelave spletne strani in spletne trgovine. V prvem delu predstavimo podjetje in opredelimo problem. V nadaljevanju navedemo teoretične osnove ter analiziramo konkurenčne spletne strani. V tretjem delu sledi predstavitev platforme WordPress in drugih uporabljenih orodij. Nadaljujemo s predstavitvijo poteka izdelave spletne strani ter spletne trgovine. Na koncu opravimo še SWOT analizo spletnega mesta. Rezultat diplomskega dela je izdelana dinamična spletna stran z moderno spletno trgovino. V prihodnje priporočamo prevod strani v tuje jezike, nakup vtičnika za spletno trgovino ter pošiljanje izdelkov v tujino.. KLJUČNE BESEDE: -. spletna stran spletna trgovina gostinsko podjetje. ABSTRACT Today, companies must also be recognizable online. This is the reason why company HAPECE d.o.o. decided to build a website for their bar Holidays’ Pub. With neatly designed website, the company will easily compete with other catering companies and inform guests about upcoming events. As an addition to the website, visitors will be offered the opportunity to purchase items in an online store. In this thesis, the process of building a website and an online store is described in detail. First, we present the company and define the problem. Then we explore the theoretical background and analyse competitive websites. The third part includes the presentation of WordPress platform and other tools used in website development process. A SWOT analysis of the website is presented in conclusion. The result of this thesis is a dynamic website with a contemporary online store. Our future recommendations include translating the website into other languages, purchasing the online store plug-in and shipping of products abroad.. KEYWORDS: -. Web page Online store Catering company.

(4) KAZALO 1.. Uvod ....................................................................................... 1 1.1. Predstavitev problema ............................................................ 1 1.2. Predstavitev okolja ................................................................ 1 1.3. Predpostavke in omejitve......................................................... 2 1.4. Metode dela......................................................................... 2 2. Teoretične osnove ....................................................................... 3 2.1. Internet.............................................................................. 3 2.2. Spletna stran ....................................................................... 4 2.3. Spletna trgovina .................................................................... 5 2.4. Optimizacija spletnih strani (SEO)............................................... 5 3. Predhodno stanje – analiza konkurence .............................................. 7 4. Programska oprema .................................................................... 10 4.1. WordPress .......................................................................... 10 Vtičnik za spletno trgovino (Ecwid Ecommerce Shopping Cart) ................. 11 Vtičnik za prikaz obvestila o piškotkih (Cookie Notice) ........................... 11 Vtičnik za skrivanje strani (Under Construciton) .................................. 11 Vtičnik za prikaz galerije slik (Simple Lightbox) ................................... 12 4.2. Adobe Photoshop .................................................................. 12 4.3. Mozilla Firefox ..................................................................... 12 5. Izgradnja spletne strani ............................................................... 13 5.1. Namestitev sistema WordPress ................................................. 13 5.2. Izbira predloge .................................................................... 13 5.3. Ustvarjanje in urejanje strani................................................... 15 5.4. Meniji ............................................................................... 15 5.5. Optimizacija strani ............................................................... 16 5.6. Prikaz spletne strani .............................................................. 17 6. Izgradnja spletne trgovine ............................................................ 20 6.1. Namestitev in urejanje spletne trgovine ...................................... 20 6.2. Vnos in urejanje artiklov......................................................... 22 6.3. Prikaz procesa nakupa izdelka .................................................. 24 6.4. Prejeta naročila ................................................................... 29 6.5. Urejanje CSS ....................................................................... 30 7. Zaključek ................................................................................ 31 7.1. SWOT analiza ...................................................................... 31 7.2. Ocena učinkov ..................................................................... 32 7.3. Pogoji za uvedbo .................................................................. 32 7.4. Možnosti nadaljnjega razvoja ................................................... 33 Literatura in viri........................................................................... 34 Kazalo slik .................................................................................. 35 Kazalo tabel................................................................................ 35 Kratice in akronimi ....................................................................... 36.

(5) Univerza v Mariboru – Fakulteta za organizacijske vede. 1.. Diplomsko delo univerzitetnega študija. UVOD. Devetdeseta leta prejšnjega stoletja so z razširjenostjo interneta ter pojavom svetovnega spleta prinesla preobrat na področju elektronskega poslovanja, kot ga poznamo danes. Nove tehnologije so dostopne tako organizacijam kot tudi fizičnim osebam. Internet je odprl pot do novega načina poslovanja ter tudi malim podjetjem omogočil lažje tekmovanje s konkurenco (Potočar in Razgoršek, 2009).. 1.1. PREDSTAVITEV PROBLEMA Podjetje HAPECE d.o.o. se z gostinstvom ukvarja že sedem let. V okviru podjetja obratuje lokal Holidays' Pub s 25-letno tradicijo. Gostinski lokal do sedaj ni imel spletne strani, zaposleni pa so s strankami komunicirali zgolj preko družbenih omrežij Facebook in Instagram, oziroma po elektronski pošti. Za naslov elektronske pošte so izbrali brezplačnega ponudnika, kar pa je izgledalo zelo neprofesionalno. V današnjem digitalnem svetu vsi iščemo informacije preko spleta, zato so se v podjetju odločili, da postavijo spletno stran ter vzpostavijo svojo domeno. Postavitev spletne strani načeloma poveča prepoznavnost lokala med domačimi in tujimi gosti, hkrati pa združi informacije o gostinskem lokalu na enem mestu. Podjetje (lokal) želi vzpostaviti tudi spletno trgovino, v kateri bo mogoče kupiti promocijske izdelke lokala. V diplomskem delu bomo prikazali postopek izdelave spletne strani, ki bo vključevala tudi spletno trgovino.. 1.2. PREDSTAVITEV OKOLJA Podjetje HAPECE d.o.o. je bilo ustanovljeno leta 2010. V sklopu podjetja sta sprva obratovala dva gostinska lokala – Holidays' Pub in Cereza bar, od leta 2016 pa je v lasti podjetja le še lokal Holidays' Pub. Glavna dejavnost podjetja je strežba pijač, ponujajo pa tudi preproste jedi kot so pice, rogljički in topli sendviči. Ker je lokal odprt vsak dan do tretje ure zjutraj, je priljubljen kotiček za vse, ki pozno zatavajo v mesto. V lokalu organizirajo zabave z mehansko glasbo, karaoke in koncerte z glasbo v živo. Poleg direktorja sta v podjetju zaposleni dve osebi za nedoločen čas, in približno tri osebe, ki delajo preko študentske napotnice (število se spreminja glede na obseg dela). Po merilih za velikost podjetja se podjetje uvršča med mikro družbe.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 1.

(6) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. 1.3. PREDPOSTAVKE IN OMEJITVE Pri izdelavi spletne strani bomo sodelovali z direktorjem podjetja ter upoštevali njegove želje in zahteve. Omejitev, ki jo pričakujemo pri izdelavi spletne strani s spletno trgovino je zgolj finančna, saj podjetje želi cenovno ugodno rešitev, ki pa mora vseeno biti kvalitetna. Prav zaradi te omejitve smo se odločili za izdelavo spletne strani z uporabo odprtokodne rešitve WordPress, ki je brezplačna in ni prezahtevna za uporabo. Predpostavljamo, da bo spletna stran oblikovana moderno, kar nam omogočajo različne WordPress-ove teme. Izgled bo preprost, vse informacije bodo podane na eni strani, po kateri se uporabnik sprehaja z računalniško miško ali podrsavanjem po zaslonu mobilne naprave.. 1.4. METODE DELA Pri pisanju diplomskega dela bomo uporabili tako deskriptivno kot tudi metodo kompilacije. Z deskriptivno metodo bomo iz literature opredelili pojme, z metodo kompilacije pa razčlenili različna mnenja, stališča in spoznanja drugih avtorjev v posamezne dele, ki bodo za nas uporabni. Analizirali bomo ponudbo, upoštevali želje naročnika ter opravili SWOT analizo postavljene spletne strani in spletne trgovine. Pri izdelavi diplomskega dela bomo uporabili naslednje programske rešitve: - Wordpress - Adobe Photoshop - Mozilla Firefox - Vtičniki za orodje WordPress. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 2.

(7) Univerza v Mariboru – Fakulteta za organizacijske vede. 2.. Diplomsko delo univerzitetnega študija. TEORETIČNE OSNOVE. Elektronsko poslovanje (e-poslovanje) se je v dobi interneta močno razširilo. Sama definicija e-poslovanja je poslovanje z uporabo informacijsko-komunikacijske tehnologije, torej oskrbovanje, prodajanje ali izmenjava izdelkov, storitev ali podatkov z uporabo elektronskih rešitev in računalniških omrežij. Širša opredelitev e-poslovanja poleg prodaje in nabave storitev ali izdelkov vključuje tudi izvajanje poslovnih transakcij, sodelovanje s poslovnimi partnerji ter storitve za stranke (etrgovina, e-banka, e-uprava) (Turban, 2002). Ločitev elektronskega poslovanja glede na vključene udeležence je sledeča: • posameznik, potrošnik – C (ang. Consumer), • podjetje, ustanova – B (ang. Business), • državna uprava, vladne organizacije – G (ang. Government). Povezovanje med temi udeleženci lahko poteka na različne načine: • e-poslovanje med podjetji (business-to-business, B2B), • e-poslovanje med podjetji in potrošniki (business-to-consumer, B2C), • e-poslovanje potrošnika s podjetjem (consumer-to-business, C2B), • e-poslovanje med potrošniki (consumer-to-consumer, C2C), • e-poslovanje med podjetji in vladnimi organizacijami (business-togovernment, B2G), • e-poslovanje med vladnimi organizacijami (government-to-government, G2G), • e-poslovanje med vladnimi organizacijami in državljani (government-tocitizens, G2C) (Turban, 2002). V nadaljevanju bomo predstavili sisteme, preko katerih poteka elektronsko poslovanje, kot so internet, spletna stran in spletna trgovina. Predstavili bomo tudi optimizacijo spletnih strani.. 2.1. INTERNET Leta 1968 je Lawrence Roberts napisal poročilo, v katerem je opisal načrt za izgradnjo omrežja, ki so ga poimenovali Arpanet. Projekt je financirala ameriška agencija za napredne projekte ARPA (Advanced research project agency), ki je leta 1969 postavila prvo vozlišče v Network Measurement Center na UCLA, kjer so ga povezali z računalnikom SDS Sigma-7. Drugo vozlišče so namestili na raziskovalnem inštitutu SRI International, kjer so ga priključili na računalnik SDS 940. Septembra 1969 je bilo tako prek Arpaneta med dvemi vozlišči poslano prvo sporočilo (Frölich, 2013). Leta 1971 je bil razvit TIP (terminal interface processor), ki je terminalom omogočil priklop v omrežje na daljavo, leto pozneje pa je Lawrence Roberts razvil tudi prvi program za pregledovanje, shranjevanje in pošiljanje sporočil. Istega leta sta Jon Postel in Abhay Bhushnan razvila protokol FTP (file transfer protocol). FTP je protokol, ki omogoča prenos datotek (Frölich, 2013).. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 3.

(8) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. V letu 1978 je v Arpanetu pričel delovati protokol TCP, katerega so razdelili na dva protokola – TCP (transmission control protocol) in IP (internet protocol). Prvi skrbi za povezavo med končnima točkama, drugi pa za usmerjanje paketov skozi omrežje (Frölich, 2013). Leta 1989 so Arpanet ugasnili ter ga v nekaj mesecih postopoma umaknili iz omrežja, vozlišče za vozliščem. Manjkala je zgolj še tehnologija Svetovnega spleta (World Wide Web), ki se je pojavila leta 1991. To je najbolj prepoznaven del interneta. Gre za nabor protokolov, pravil in dogovorov za širjenje informacij v obliki spletnih strani po prostranih omrežjih. Zasnoval ga je Tim Berners-Lee, ki je objavil tudi prvo spletno stran v internetu, šestega avgusta leta 1991 (Frölich, 2013). Računalniško omrežje sestavljata dva ali več povezanih računalnikov, ki med seboj komunicirajo prek modemov, po protokolu TCP/IP, in si tako izmenjujejo podatke. Podatki se lahko po omrežju prenašajo brezžično ali po kablih. Delimo jih na krajevna (LAN – Local Area Network) ali prostrana (WAN – Wide Area Network). Internet spada med prostrana omrežja, saj je javno omrežje, do katerega imajo dostop vsi (Frölich, 2013). Brez strežnikov interneta ne bi bilo. Strežniki so posebni računalniki, katerih naloga je usmeriti uporabnika interneta do ustreznega podatka. Ko preko računalnika priključenega v internet, iščemo nek podatek, nam ga posreduje strežnik internetnega ponudnika. Če ta nima podatka, posreduje poizvedbo naslednjemu, vmesnemu strežniku, kjer se zadeva ponovi. Strežniki si poizvedbo posredujejo toliko časa, dokler ta ne pride do pravega strežnika, ki ima želeni podatek (Klemen in Štrancar, 2005).. 2.2. SPLETNA STRAN Spletna stran je skupek več medsebojno povezanih strani z določeno vsebino, ki jih prikaže brskalnik. To so lahko besedila, povezave, slike, videoposnetki ali druge večpredstavnostne vsebine. Ločimo statične in dinamične spletne strani. Statične strani so silno preproste in se vsem uporabnikom prikazujejo enako, s časom se ne spreminjajo. Prepoznamo jih po končnici *.html ali *.htm. Dinamične strani pa so izdelane za vsakega uporabnika posebej, odvisno od njegove želje in zahteve. Tudi pri nekaterih dinamičnih straneh posamezni elementi vedno ostanejo enaki. Najpogostejše končnice pri dinamičnih spletnih straneh so *.asp, *.php, *.jsp, *.cgi in druge (Klemen in Štrancar, 2005). Do spletne strani lahko obiskovalec dostopa z IP naslovom, ki je sestavljen iz težko zapomnljivih nizov številk. Zato tega načina dostopa večina uporabnikov ne uporablja, temveč do spletne strani dostopa tako, da v naslovno vrstico vpiše naslov strani. Lastnik določi naslov tako, da kar najbolje opiše vsebino strani. Naslov mora biti edinstven in prepoznaven, saj tako obiskovalci lažje najdejo iskano spletno stran. Danes se do spletnih strani dostopa preko različnih naprav, kot so tablični računalniki in mobilni telefoni, kar je omogočil razvoj brezžičnih omrežij. Zato je. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 4.

(9) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. pomembno, da je stran zasnovana tako, da se njeni elementi samodejno prilagajajo širini zaslonov. V Republiki Sloveniji je bilo v letu 2015 s svojo spletno stranjo na internetu prisotnih 83% podjetij z vsaj 10 zaposlenimi, 46% podjetij pa ima svoj profil na družbenih omrežjih (Zupan, 2016).. 2.3. SPLETNA TRGOVINA Spletno trgovino lahko opredelimo kot virtualno prodajalno, ki je locirana na spletnem strežniku. Gre za eno izmed področij elektronskega poslovanja, ki je v zadnjih letih pritegnilo največ pozornosti in še vedno vztrajno raste ter predstavlja vse večji delež v skupni prodaji. Spletne trgovine omogočajo nakupe tako fizičnih (oblačila, parfumi, hrana,…) kot tudi digitalnih dobrin (programska oprema, vstopnice, letalske karte,…) (Potočar in Razgoršek, 2009). Spletne trgovine predstavljajo pomemben delež v poslovanju med podjetji in potrošniki (business-to-consumer, B2C). Prednost spletne trgovine je njena priročnost, saj so vsi izdelki v vsakem trenutku na voljo kupcem, vrata trgovine pa niso nikoli zaprta. S prodajo preko spletne trgovine lahko dosežemo kupce na širšem območju in sledimo njihovim kupnim navadam. Operativni stroški se znižajo, saj ne potrebujemo večjega števila zaposlenih, znižajo se stroški najema prostorov, izginejo pa tudi prostorske omejitve, kot so na primer police v fizični trgovini (Potočar in Razgoršek, 2009). Poleg prednosti se pojavljajo tudi slabosti. Veliko ljudi še vedno ne zaupa nakupovanju na spletu, saj jih je strah pred razkritjem njihovih osebnih podatkov ali pa zlorabe kreditnih kartic. Večina si želi izdelke pred nakupom še fizično ogledati ali preizkusiti. Pojavljajo se stroški pošiljanja artiklov, ki so lahko precej visoki, med transportom se lahko artikel poškoduje, poleg tega pa kupci na izdelek niso pripravljeni čakati, saj ga v fizični trgovini lahko dobijo takoj (Gradišar, 2012). Podatki statističnega urada Republike Slovenije kažejo, da je v letu 2015 kar 17% vseh podjetij v Sloveniji prejemalo naročila ali rezervacije preko spletnih strani. V obdobju od aprila 2015 do marca 2016 je 40% oseb, starih med 16 in 74 let, nakupovalo prek spleta. Podjetja v gostinskih nastanitvenih dejavnostih so s spletno prodajo v letu 2015 ustvarila 14,7% celotne vrednosti svojega prihodka (brez DDV) (Zupan, 2016).. 2.4. OPTIMIZACIJA SPLETNIH STRANI (SEO) Optimizacija spletnih strani je proces izboljšanja vidljivosti spletne strani na spletnih iskalnikih, kot so Google, Yahoo! ali Bing. Optimizacija pripomore k višji naravni poziciji med rezultati iskanja določene besede ali fraze. Tako imenovani pajki pregledujejo strani, zbirajo podatke, sledijo povezavam in ustvarjajo kopije strani. Nekateri merijo frekvenco besed, drugi oddaljenost med njimi, tretji štejejo nadpovezave na stran in iz nje. Večini se zdi zanimiva predvsem vsebina znotraj značk ''title'' in ''meta'' (Klemen in Štrancar, 2005). Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 5.

(10) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Značka ''meta'' je del kode jezika HTML, ki pomaga opisati vsebino spletne strani. Nahaja se v glavi HTML kode in uporabniku na splošno ni vidna. Značka ''title'' ponazarja naslov spletne strani. V HTML kodi se pojavi v besedilu med oznakama <title> in </title>. Opiše vsebino strani in je zelo pomemben element optimizacije, saj je velikokrat uporabljena za besedilne povezave na stran z iskalnika (SpletnikSEO Optimizacija strani, 2017). Značka ''description'' se uporablja za kratko predstavitev strani. Neposredno sicer ne vpliva na optimizacijo, vendar je vseeno priporočljiva. Opis vpišemo v oznaki <meta name=''description'' content=''NAŠE BESEDILO''>. V kolikor značke ne uporabimo, bo naša stran na spletnem brskalniku predstavljena generično. Tudi značka ''description'' se nahaja v glavi strani, torej v datoteki header.php (Wordpress.org, 2017a). Značka ''keywords'' pomaga dodati ključne besede, uporabljene na strani. Včasih so se iskalniki osredotočali predvsem na ključne besede, vendar so ustvarjalci to izrabljali. Danes so algoritmi za iskanje veliko pametnejši, a so ključne besede vseeno zaželene, saj algoritmov za iskanje (razen njihovih razvijalcev) nihče popolnoma ne pozna. Ključne besede vstavimo v oznako <meta name=''keywords'' content=''KLJUČNA BESEDA, KLJUČNA BESEDA, KLJUČNA BESEDA,…''>. Ključne besede med seboj ločimo z vejico (Sun, 2016).. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 6.

(11) Univerza v Mariboru – Fakulteta za organizacijske vede. 3.. Diplomsko delo univerzitetnega študija. PREDHODNO STANJE – ANALIZA KONKURENCE. Podjetje do sedaj ni imelo spletne strani. Vse informacije, ki so jih stranke oziroma gostje iskali, so lahko pridobili zgolj preko družbenih omrežij Facebook in Instagram, s telefonskim klicem v sam gostinski lokal ali po elektronski pošti. Elektronski naslov podjetja se je glasil hapece@[zastonjski ponudnik].com, kar je izgledalo zelo neprofesionalno. V tem poglavju bomo analizirali spletne strani neposredne konkurence, torej spletne strani pivnic v Ljubljani. V ožji izbor smo izbrali spletne strani gostinskih lokalov Guinness Pub Ljubljana, Irish Pub Ljubljana, Sir William's pub, Old Scottish Pub ter Pivnica Union. Spletna stran pivnice Cutty Sark Pub Ljubljana je bila med časom pisanja diplomskega dela nedosegljiva. Primerjava spletnih strani po izbranih kriterijih je predstavljena v Tabeli 1. Kriteriji, po katerih smo primerjali strani, so izgled, posodobljenost strani, povezave do družbenih omrežij in prilagojenost mobilnim napravam. Preverili smo tudi, kakšne so prednosti in slabosti spletnih strani ter, če vsebujejo spletno trgovino. Največjo težo smo dali kriterijem izgled, posodobljenost in prilagojenost mobilnim napravam. Sam izgled je sicer subjektivne narave, vendar mora biti stran pregledna in prijetna za ogled. Posodobljenost je pomemben faktor, saj so bile nekatere strani izdelane že pred leti, lastniki pa so na posodabljanje in urejanje informacij pozabili. Pomemben kriterij je tudi prilagojenost mobilnim napravam, saj vedno več ljudi za dostop do spleta uporablja mobilne telefone in tablične računalnike z manjšimi zasloni. Zaželeno je, da se vsebina spletne strani prilagodi višini in širini zaslona.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 7.

(12) Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje /. Vrhunski dizajn, dvojezičnost, cenik pijač. Modern. DA. NE. Večina povezav ne deluje, slaba izbira naslovov. /. Oblikovno nedovršen, slaba izbira barv. https://www.oldscottishpub.com/. https://union-pivnica.si/. DA (v podmeniju). Zastonjska domena, ne delujejo vse povezave. Nekonsistenten izgled Objavljen cenik pijač. DA. NE. NE. DA. DA. Stran je na voljo zgolj v angleškem jeziku. Objavljen cenik pijač. Modern. NE. DA (vendar povezava ne deluje). Ne delujejo vse povezave, slika prekriva gumbe. /. Preprost, minimalističen. Prilagojeno za mobilne naprave. Družbena omrežja. Slabosti. Prednosti. Izgled. http://www.sirwilliamspub.webs.com/. http://www.irishpub-ljubljana.si/. http://www.g-pub.net/. Naslov spletne strani. PRIMERJANI ATRIBUTI. Redno posodobljeno. Ni posodobljeno. Redno posodobljeno. Redno posodobljeno. Zmerno posodobljeno. Posodobljenost. NE. NE. NE. NE. NE. Spletna trgovina. Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo univerzitetnega študija. Tabela 1: Primerjava konkurenčnih spletnih strani. stran 8.

(13) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Iz Tabele 1 je razvidno, da se konkurenčne spletne strani močno razlikujejo med seboj. Spletna stran Pivnice Union je modernega izgleda, redno posodobljena, vsebuje povezave na družbena omrežja, do nje lahko uporabniki dostopajo preko različnih naprav, saj se vsebina samodejno prilagodi velikosti zaslona. Slabosti pri tej spletni strani nismo opazili. Tudi spletna stran pivnice Irish Pub Ljubljana je redno posodobljena, uporabniku prijazna in vsebuje povezave do družbenih omrežij. Stran se samodejno prilagodi širini zaslona. Edina slabost, ki smo jo opazili, je ta, da je stran na voljo le v angleškem jeziku. Spletna stran pivnice Guinness Pub Ljubljana je sicer redno posodobljena, a njen izgled šepa. Na strani je objavljena slika, ki prekriva povezave na družbena omrežja, tako da povezav ne moremo odpreti. Stran se ne prilagaja zaslonom mobilnih naprav. Pri spletni strani pivnice Sir William's Pub lahko pohvalimo objavljen cenik pijač, grajamo pa dejstvo, da podjetje ni zakupilo domene, zaradi česar naslov spletne strani izgleda zelo amatersko. Tudi ta stran se ob obisku preko mobilne naprave ne prilagodi širini zaslona. Stran pivnice Old Scottish Pub ni bila posodobljena že nekaj let, zaradi zelenega ozadja je črna pisava težko berljiva. Objavljene informacije so povečini nepomembne. Manjkajo družbena omrežja, vsebina se ne prilagaja širini zaslona, hkrati pa večina povezav ne deluje. Nobena izmed petih primerjanih spletnih strani ne ponuja nakupov preko spletne trgovine.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 9.

(14) Univerza v Mariboru – Fakulteta za organizacijske vede. 4.. Diplomsko delo univerzitetnega študija. PROGRAMSKA OPREMA. V tem poglavju je predstavljena programska oprema, ki smo jo uporabili za izdelavo spletne strani lokala.. 4.1. WORDPRESS WordPress poganja več kot eno četrtino vseh spletnih strani, ki so danes objavljene na internetu, to je več kot 50 milijonov strani (WordPress.org, 2017c). Skoraj polovica izmed najboljših milijon strani je postavljena na tej platformi, vključno s stranmi, kot sta CNN in NY Times. Sistem je preveden v več kot 70 različnih jezikov (WordPress.org, 2017c). Začetki WordPress-a segajo v leto 2003, ko se je orodje uporabljalo za pisanje spletnih blogov. Danes je sicer med blogerji še vedno popularen, vedno več pa se uporablja za postavitve spletnih strani tako posameznikov kot tudi organizacij. Gre za odprtokodni sistem upravljanja spletnih vsebin (CMS – Content Management System), ki deluje na osnovi PHP jezika in MySQL podatkovnih baz. Dejstvo, da je sistem odprtokoden in brezplačen, je pripomoglo k veliki popularnosti, saj ga pomaga razvijati tisoče razvijalcev (Sabin-Wilson, 2015). Potrebno je razlikovati med dvema različicama WordPress-a. Prva je na voljo na spletni strani WordPress.com, kjer ni potrebna namestitev na računalnik. Stran je nato postavljena na WordPress-ovih strežnikih, vendar ne omogoča vseh storitev, kot je na primer dodajanje vtičnikov in spreminjanje kode. Druga različica je dostopna preko strani WordPress.org in teh omejitev nima, zato nam omogoča neskončno možnosti razvoja, predvsem z dodajanjem vtičnikov. To različico bomo uporabili v nadaljevanju. Da WordPressa lahko deluje, ga je potrebno namestiti na spletni strežnik, ki mora izpolnjevati naslednje sistemske zahteve: PHP verzije 7 ali novejše, MySQL verzije 5.6 ali novejše in podpora HTTPS (Wordpress.org, 2017b). Celoten sistem WordPress se upravlja preko nadzorne plošče, ki je zasnovana zelo preprosto ter omogoča hitro navigacijo med nastavitvami. Predloge, na katerih gradimo stran, se imenujejo teme. Gre za skupino med seboj povezanih datotek, ki ob aktivaciji spremenijo osnovne funkcije in sam izgled strani. Na voljo so tako brezplačne kot tudi plačljive teme (Sabin-Wilson, 2015). Jedro sistema WordPress je ustvarjeno tako, da je enostavno in brez odvečne kode. Dodano vrednost prinašajo vtičniki, ki so način razširjanja funkcionalnosti platforme. Na voljo jih je več kot 51.000. Napisani so v jeziku PHP in se v sistem popolnoma integrirajo. Z njimi upravljamo v nadzorni plošči, kjer jih lahko aktiviramo, urejamo ali odstranimo (WordPress.org, 2017c).. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 10.

(15) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. WordPress bo naše glavno orodje za izdelavo spletne strani, dodali pa mu bomo še kar nekaj vtičnikov, da pridemo do željenega rezultata. Vtičnik za spletno trgovino (Ecwid Ecommerce Shopping Cart) Za nas najpomembnejši vtičnik je Ecwid Ecommerce Shopping Cart. Gre sicer za plačljiv vtičnik, vendar je na voljo tudi brezplačna različica, z manj možnostmi prilagajanja in omejenim številom vnesenih artiklov. Vtičnik ponuja celostno spletno trgovino, ki je že v osnovi prevedena v mnogo jezikov, med drugim tudi v slovenščino. Po namestitvi se najprej sprehodimo skozi nastavitve, kot so izgled trgovine, dodajanje artiklov, podatki o podjetju, možnosti plačila ter vrsta prevzema oziroma dostave. Urejamo lahko valuto, v kateri so na voljo artikli, davčno stopnjo artiklov, izgled košarice, vrstni red prikazanih artiklov ter mnoge druge nastavitve. Spletna trgovina je tako popolnoma prilagodljiva. Vtičnik za prikaz obvestila o piškotkih (Cookie Notice) Cookie Notice je brezplačen vtičnik za WordPress, ki nam omogoči, da na spletno stran enostavno dodamo obvestilo, da stran uporablja piškotke. Leta 2013 se je začela izvajati nova zakonodaja, ki ureja uporabo piškotkov v EU, na podlagi katere moramo na spletni strani poskrbeti za zasebnost obiskovalcev ter jih obvestiti o uporabi piškotkov. Vtičnik je enostaven za uporabo, saj je popolnoma prilagodljiv. Besedilo, ki se izpiše na obvestilu, je v osnovi sicer v angleškem jeziku, vendar lahko v nastavitvah vtičnika sami dodamo svoje besedilo, ali pa zgolj prevedemo že obstoječe. Spremenimo lahko lokacijo sporočila – ta se lahko pojavi na vrhu ali na dnu strani. Izbira barve besedila, ozadja in samega gumba za potrditev je prepuščena uporabniku, prav tako tudi animacija, ko sporočilo potrdimo. Vtičnik za skrivanje strani (Under Construciton) Vtičnik Under Construction je zelo uporaben, kadar želimo stran, ki je že objavljena na spletu, še dodatno urediti. Na voljo je brezplačno. Ko vtičnik namestimo, ga lahko v uporabniških straneh nemudoma aktiviramo. Ko je aktiviran, se vsem obiskovalcem spletne strani pojavi obvestilo, da je stran trenutno v izdelavi. Obvestilo lahko po želji spremenimo, prav tako tudi sliko, ki se prikaže na strani. Vtičnik omogoča povezave na družbena omrežja, kjer lahko obiskovalci poiščejo informacije, dokler stran ni ponovno na voljo za javnost. Zanimiva je tudi možnost ''Automatic End date & time'', kjer nastavimo datum in uro, ko stran samodejno spet postane dostopna. Določimo lahko tudi uporabnike (npr. ustvarjalce strani, administratorje), ki na stran nemoteno dostopajo tudi, ko je vtičnik aktiviran.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 11.

(16) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Vtičnik za prikaz galerije slik (Simple Lightbox) Izmed več kot tisoč vtičnikov, ki omogočajo prikaz slik s pomočjo skripte Lightbox, smo izbrali vtičnik Simple Lightbox. Lightbox je skripta, ki prikaže sliko ali videoposnetek tako, da ob kliku na majhno ikono slike le-to poveča na originalno velikost oz. se prilagodi na velikost okna, hkrati pa zatemni preostanek spletne strani. Kot pove že ime, je silno enostaven za uporabo, saj za namestitev in uporabo ni potrebno kodiranje. Ko vtičnik namestimo, se lahko sprehodimo skozi nastavitve, kot so animacija ob kliku na sliko, diaprojekcija slik in njeno trajanje, ter kakšno stopnjo zatemnitve želimo. Kot pri večini vtičnikov, je tudi pri Simple Lightbox vmesnik v osnovi v angleškem jeziku, zato je potrebno atribute (Slika x od y, Naprej, Nazaj, Zapri) najprej prevesti v slovenski jezik. Ko ustvarimo novo stran, v polje za vnos besedila dodamo slike ali videoposnetke, ki jih želimo prikazati na strani.. 4.2. ADOBE PHOTOSHOP Adobe Photoshop je napredno programsko orodje podjetja Adobe Systems, namenjeno urejanju in obdelavi fotografij. Photoshop ponuja številne funkcije za urejanje na podlagi slojev (ang. layers), kar omogoča obdelavo slik z več prekrivnimi elementi. V plasti je moč dodati tudi sence in druge učinke (Rouse, 2015). Program bomo uporabili za obdelavo fotografij, ki bodo objavljene v spletni trgovini. Med naprednejšimi nastavitvami lahko prilagodimo velikost, obliko in format slik, kar je pri nalaganju na spletno stran pomembno, saj ne želimo, da se slike uporabnikom nalagajo predolgo, hkrati pa je potrebno zagotoviti določeno stopnjo kvalitete slik, da si bodo potencialni kupci artikle pred nakupom lahko podrobneje ogledali.. 4.3. MOZILLA FIREFOX Firefox je odprtokodni grafični spletni brskalnik podjetja Mozilla Corporation. Za namestitev je na voljo brezplačno in podpira operacijske sisteme Windows, MacOS, Linux, Android ter iOS. Pod imenom Netscape se je pojavil že leta 1998, prva različica Firefoxa pa je bila na voljo leta 2004. Preveden je v več kot 70 jezikov, med drugim tudi v slovenščino (Mozilla.org, 2017). Spletni brskalnik Firefox bomo uporabili za dostop do WordPress-ovega vmesnika za izdelavo spletnih strani.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 12.

(17) Univerza v Mariboru – Fakulteta za organizacijske vede. 5.. Diplomsko delo univerzitetnega študija. IZGRADNJA SPLETNE STRANI. V nadaljevanju bomo predstavili postopek izdelave spletne strani s sistemom za upravljanje vsebin WordPress. Predstavili bomo urejanje predloge, dodajanje menijev ter strani. Dotaknili se bomo še urejanja CSS kode, s katero lahko popolnoma prilagodimo izgled in postavitev strani.. 5.1. NAMESTITEV SISTEMA WORDPRESS Postopek začnemo z registracijo domene holidayspub.si. Domena je unikaten elektronski naslov, preko katerega bodo uporabniki dostopali do strani. Tej domeni dokupimo tudi prostor za spletno gostovanje. Postopek vzpostavitve domene je dokaj enostaven, vsa navodila pa nam zagotovi ponudnik storitve. Ko WordPress namestimo na izbrano domeno, se na strežnikih ustvari baza podatkov, v kateri bo shranjena vsa vsebina, ki jo bomo dodali ob ustvarjanju spletne strani in spletne trgovine. Po namestitvi dostopamo do administrativnih strani tako, da v spletni brskalnik vnesemo naslov holidayspub.si/wp-admin.. 5.2. IZBIRA PREDLOGE WordPress omogoča, da sami ustvarimo predlogo, vendar je postopek zapleten in zahteva veliko strokovnega znanja. Prav zato je na voljo več tisoč že ustvarjenih predlog, ki so na voljo proti plačilu ali brezplačno. Po posvetu z direktorjem podjetja HAPECE d.o.o. smo se odločili, da bo celotna vsebina spletne strani (z izjemo spletne trgovine) prikazana na eni strani. Gre za tako imenovano ''one page'' vrsto spletnih strani in za dostop do podstrani ni potrebno klikanje, temveč samo vrtenje miškinega kolesca ali podrsavanje po mobilnem zaslonu. To omogoča tema Twenty Seventeen, katero smo tudi izbrali. Temo je ustvarila ekipa WordPress-a in je njihova uradna tema za leto 2017. Tema omogoča samodejno prilagajanje širini zaslonov, zato je stran pregledna tudi na mobilnih telefonih in tabličnih računalnikih. Urejanje nastavitev teme je prikazano na Sliki 1. Tema ponuja obilico nastavitev, kot je na primer prilagodljiva glava, v kateri lahko nastavimo različne slike, ki se nato izmenjujejo. Vstavimo lahko tudi videoposnetek, ki pa zaradi hitrosti odpiranja strani ni zaželen.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 13.

(18) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Slika 1: Urejanje nastavitev teme Twenty Seventeen Urejamo lahko meni družbenih omrežij, ki se nahaja na dnu strani in glavni meni, ki vsebuje povezave do podstrani. V glavi lahko dodamo tudi logotip, naslov in slogan strani ter izberemo ikono, ki se prikaže v vrstici zavihkov spletnega brskalnika. Določimo lahko barvno shemo ter postavitev spletne strani glede na število stolpcev. Izbrali smo dva stolpca, kar pomeni, da se naslov podstrani nahaja na levi strani, vsebina pa na desni. Dodatno urejanje je možno opraviti s prilagajanjem datoteke CSS, kjer lahko poleg barv uredimo tudi samo postavitev spletne strani. V datoteko CSS smo vpisali zgolj ukaz, ki skrije napis WordPress v nogi dokumenta.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 14.

(19) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. 5.3. USTVARJANJE IN UREJANJE STRANI Ne glede na to, da bo celotna spletna stran predstavljena na eni strani, je potrebno dodati strani, te pa se bodo zvrstile druga pod drugo. Slika 2 prikazuje okno za urejanje strani Ponudba. Dodamo lahko predstavnostne datoteke ter spremenimo trajno povezavo, to je naslov, na katerem se stran nahaja. Zavoljo enostranske spletne strani je pomembno, da dodamo primerno prikazno sliko, saj se bo ta prikazala na naši strani.. Slika 2: Dodajanje strani Ponudba Besedilo, ki se bo na strani prikazalo, lahko urejamo na več načinov, privzet način pa je grafični prikaz. Grafični prikaz ponuja urejanje besedila podobno, kot večina urejevalnikov, vsebina pa je prikazana točno tako, kakor bo prikazana na dejanski spletni strani. Podrobnejše urejanje ponuja besedilni prikaz, ki omogoča oblikovanje vsebine z značkami jezika HTML. V besedilo vsake strani smo dodali tudi kodo, ki določi identifikacijsko oznako strani. V primeru strani Ponudba je to id=''ponudba'', kot je razvidno iz Slike 2. Stran Domov je vstopna stran, dodali smo še strani Dogodki, Ponudba, Galerija slik, Kontakt in Trgovina. Zaradi preglednosti spletne strani je stran Trgovina ločena od ostalih, torej se ne prikaže na prvi strani. Do nje enostavno dostopamo s klikom na gumb ''Trgovina''.. 5.4. MENIJI Tema Twenty Seventeen omogoča dodajanje dveh menijev; glavni meni in meni družbenih omrežij. Na Sliki 3 je prikazano urejanje glavnega menija, v katerem so nanizane vse strani na spletni strani. Strani so definirane kot povezave po meri. V polje ''URL'' vnesemo prej določeno identifikacijsko oznako strani. Klik na stran v meniju nas premakne nižje na stran, ne da bi se odprla nova stran.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 15.

(20) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Slika 3: Urejanje glavnega menija Dodali smo tudi meni družbenih omrežij. Ta se nahaja v nogi spletne strani in vsebuje ikone s povezavami do družbenih omrežij Facebook in Instagram. V ta meni smo dodali tudi povezavo na TripAdvisor in ikono kuverte. Ko obiskovalec spletne strani klikne na kuverto, se zažene njegov privzeti poštni odjemalec, odpre okno za novo elektronsko pošto ter v polje naslovnika samodejno vnese naslov [email protected].. 5.5. OPTIMIZACIJA STRANI Ko je spletna stran dokončana, se lotimo še optimizacije. V nadzorni plošči sistema WordPress v zavihku ''Videz'' odpremo urejevalnik teme s predlogami, ki jih lahko spreminjamo. Spremenili smo datoteko header.php, ki prikazuje glavo teme. Za oznako <head> smo dodali dve meta oznaki. Prva, prikazana na Sliki 4, vsebuje kratek opis spletne strani, ki bo prikazan pod naslovom med zadetki spletnega iskanja.. Slika 4: HTML koda z opisom strani Takoj za njo smo dodali še drugo kodo. Ta vsebuje ključne besede, ki so povezane z našo spletno stranjo. Uporabili smo besede: pub, holidays pub, holidays pub ljubljana, zabava, party, ljubljana, pivo, union, guinness, kilkenny, heineken, ghost ship, toceno pivo, whiskey, whisky in kava. Izbor besed je temeljil na ponudbi gostinskega lokala, predvsem na ponudbi piv in viskijev. Imenovana piva so zelo iskana in jih ne ponuja veliko gostinskih lokalov, zato smo se odločili, da jih naštejemo. Ključne besede so prikazane na Sliki 5.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 16.

(21) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Slika 5: HTML koda s ključnimi besedami. 5.6. PRIKAZ SPLETNE STRANI Ko je urejanje spletne strani zaključeno, si stran lahko podrobneje ogledamo. Ker je tema odlično prilagojena tudi mobilnim napravam, se širina strani samodejno prilagodi širini zaslona. Prikaz strani je na mobilni napravi enak kakor na večjem, računalniškem zaslonu, razlika se pojavi le v glavnem meniju. Na Sliki 6 je v celoti prikazana izdelana spletna stran, kot jo prikaže spletni brskalnik Mozilla Firefox na računalniškem zaslonu, meni je postavljen na vrh strani ter nas spremlja med ogledom strani. Na mobilni napravi je meni v osnovi skrit, odpre se šele z dotikom na ''Meni'' (Slika 7).. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 17.

(22) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Slika 6: Posnetek zaslona celotne spletne strani Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 18.

(23) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Slika 7: Posnetek zaslona mobilne naprave Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 19.

(24) Univerza v Mariboru – Fakulteta za organizacijske vede. 6.. Diplomsko delo univerzitetnega študija. IZGRADNJA SPLETNE TRGOVINE. Po izgradnji spletne strani, se lotimo še izgradnje spletne trgovine. V nadaljevanju bomo predstavili namestitev trgovine, vnašanje artiklov in prilagoditev kode. Ponazorili bomo postopek nakupa v trgovini ter prikazali urejanje prejetih naročil.. 6.1. NAMESTITEV IN UREJANJE SPLETNE TRGOVINE Namestitev vtičnika Ecwid Ecommerce Shopping Cart v okolje WordPress je mogoča na dva načina. Prvi način je obisk uradne spletne strani vtičnika, ki jo najdemo na spletnem naslovu https://sl.wordpress.org/plugins/ecwid-shoppingcart/. Namestitvene datoteke nato shranimo ter naložimo v sistem WordPress. Drugi način, ki je precej bolj preprost, pa je prenos vtičnika znotraj nadzorne plošče WordPress, kjer v iskalnem polju poiščemo vtičnik in ga aktiviramo. (Slika 8).. Slika 8: Dodajanje vtičnika za spletno trgovino Ko je vtičnik nameščen, v nadzorni plošči ustvarimo novo stran, na kateri bo prikazana spletna trgovina. Ko je spletna trgovina prikazana na strani, se prične urejanje osnovnih nastavitev. Slika 9 prikazuje eno izmed desetih kategorij, ki ponujajo urejanje in oblikovanje trgovine znotraj nadzorne plošče. Na zavihku ''General'' najprej uredimo ime Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 20.

(25) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. trgovine, lokacijo strani, na kateri se nahaja, ter časovno območje. V nadaljevanju opredelimo elektronski naslov, na katerega prihajajo naročila, ter podatke o podjetju, kot so naziv podjetja, naslov in telefonska številka.. Slika 9: Urejanje osnovnih podatkov o trgovini Spletni trgovini nastavimo slovenski jezik in opredelimo vse možnosti prevzema naročil. Na voljo sta možnost prevzema v poslovalnici in dostava na dom (Slika 10).. Slika 10: Urejanje možnosti dostave V nadaljevanju določimo davčno stopnjo artiklov, ter dodamo načine plačila, vidne na Sliki 11. Na voljo je več načinov, med drugim tudi plačilo preko storitve Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 21.

(26) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Paypal. Na željo naročnika smo dodali le dve možnosti, to sta Plačilo po povzetju in Prevzem v Holidays' Pubu.. Slika 11: Urejanje možnosti plačila Na zavihku ''Design'' je omogočeno spreminjanje CSS kode, ki omogoča, da spremenimo barvo in pisavo besedila ter drugo vizualno urejanje same trgovine. Nadaljnje nastavitve omogočajo urejanje nastavitev obveščanja kupcev preko elektronske pošte ter spreminjanje oblike računa.. 6.2. VNOS IN UREJANJE ARTIKLOV Ko so osnovne nastavitve urejene, se lahko posvetimo dodajanju artiklov v trgovino. Ker uporabljamo brezplačno različico vtičnika Ecwid Ecommerce Shopping Cart, lahko v trgovino dodamo le 10 artiklov. Vnos poteka na način, ki je predstavljen na Sliki 12. V urejevalniku vnesemo artikel, ki mu lahko dodamo mnogo atributov, lahko pa ga tudi razvrstimo v kategorije. Vsak artikel mora vsebovati ime, opis in ceno, ostali podatki pa so zgolj priporočljivi. Omogočeno je tudi dodajanje daljšega opisa izdelka, ki bo prikazan na strani posameznega izdelka. Vtičnik omogoča dodajanje naslovne slike, ki se pojavi poleg artikla že na samem seznamu, hkrati pa lahko v galerijo dodamo tudi ostale, podrobnejše slike. Dodamo lahko spustni meni, v katerem mora obiskovalec spletne trgovine izbrati določeno vrednost. V našem primeru smo dodali spustni meni zgolj pri majicah, obiskovalec pa mora izbrati velikost majice. Omogočene so tudi dodatne nastavitve, kot so davčna stopnja, teža in dimenzije artikla, zaloga, sorodni artikli in podobno. Teh nastavitev ne spreminjamo, saj nam privzete nastavitve ustrezajo.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 22.

(27) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Slika 12: Dodajanje artikla v spletno trgovino Da bi povečali preglednost same spletne trgovine, artikle ločimo v dve kategoriji. Slika 13 prikazuje dodani kategoriji ''Majice'' in ''Kozarci'', v kateri je potrebno dodati vnesene artikle. Dodamo lahko tudi podkategorije, vendar le-te v našem primeru niso bile potrebne. V kolikor bomo v prihodnosti dodali več artiklov, bi bilo smiselno dodati še podkategoriji ''Moške majice'' in ''Ženske majice'', saj bi tako obiskovalcu olajšali iskanje.. Slika 13: Dodajanje kategorij artiklov. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 23.

(28) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. 6.3. PRIKAZ PROCESA NAKUPA IZDELKA Obiskovalec spletne strani do trgovine dostopa s klikom na gumb ''Trgovina'' v zgornjem meniju, lahko pa tudi neposredno preko povezave holidayspub.si/trgovina. Odpre se spletna stran, kot je prikazana na Sliki 14. Na začetni strani trgovine se lahko obiskovalec enostavno sprehodi čez vse artikle, ki so na voljo, uporabi iskalno polje, artikle razvrsti po imenu, ceni ali datumu dodajanja artikla v trgovino. Na Sliki 14 sta prikazani kategoriji, ki smo ju dodali. Ob kliku na eno izmed kategorij se artikli filtrirajo in prikažejo le tisti, ki so v posamezni kategoriji.. Slika 14: Osnovna stran spletne trgovine s kategorijami V primeru, da si obiskovalec želi določen artikel ogledati podrobneje, lahko to stori s klikom na sliko artikla. Ko se odloči za nakup artikla, le-tega doda v košarico s klikom na gumb ''Kupi zdaj''. V primeru, da se kupec odloči za kozarec, se ta doda v košarico takoj, v primeru odločitve za majico pa mora kupec pred tem določiti še njeno velikost. Sedaj lahko kupec nadaljuje s pregledom artiklov, s klikom na gumb ''Košarica'' pa se prestavi na naslednji korak, kjer lahko pregleda in uredi svoje naročilo. Tukaj lahko še zadnjič pred zaključkom nakupa artikel odstrani iz košarice, spremeni velikost in povečuje ali manjša količino. V naslednjem koraku kupec izbere način prevzema kupljenih artiklov. Odloči se lahko za prevzem v poslovalnici ali dostavo na dom (Slika 15). Privzeta nastavitev je dostava na dom, pri kateri se kupcu ni potrebno registrirati, saj želimo Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 24.

(29) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. postopek čim bolj poenostaviti. Kupec v vnosna polja vpiše ime, priimek, naslov, mesto in pripadajočo poštno številko ter telefonsko številko. V kolikor se odloči za prevzem v poslovalnici, mora vseeno vnesti podatke, a tokrat le ime, priimek in telefonsko številko. V tem primeru se pojavijo tudi informacije o prevzemni lokaciji ter možnem terminu prevzema.. Slika 15: Vnos podatkov za dostavo Ko kupec vnese vse podatke, klikne na gumb ''Naprej'' in odpre se nova stran s podrobnostmi o plačilu. V primeru prevzema v poslovalnici izberemo gumb ''Prevzem v Holidays' Pubu'', v primeru dostave na dom pa izberemo ''Plačilo po povzetju''. Sedaj se ponudi možnost vnosa podatkov o plačniku, v kolikor pa je naslov plačnika enak naslovu za dostavo, lahko kupec to enostavno obkljuka in podatki se sami prepišejo. S klikom na gumb ''Nadaljuj'' se kupec prestavi na zadnjo stran (Slika 16), na kateri lahko še zadnjič preveri vse vnesene podatke, torej način plačila, naslov za dostavo, naročene artikle in končni znesek.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 25.

(30) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Slika 16: Zaključek naročila Naročilo se zaključi, ko kupec pritisne gumb ''Oddaj naročilo''. Pojavi se sporočilo, ki pove, da je naročilo uspešno izvedeno. S tem je kupec proces nakupa zaključil in lahko trgovino zapre. Na vnesen elektronski naslov dobi potrdilo o prejetem naročilu in račun (Slika 17).. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 26.

(31) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Slika 17: Račun, ki ga kupec prejme po elektronski pošti Diagram na Sliki 18 prikazuje celoten postopek gibanja kupca po spletni trgovini, od odločitve za nakup do oddaje naročila.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 27.

(32) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Odločitev za nakup. Obisk trgovine na holidayspub.si/ trgovina. Pregled in izbor artiklov. Dodajanje artikla v košarico. Da, nadaljuj nakupovanje. Ali želimo še kakšen artikel?. Ne, naprej na plačilo. Pregled in urejanje košarice. Zaključek nakupa. Izbira načina dostave. Prevzem v poslovalnici. Dostava na dom. Vnos podatkov (zgolj kontakt). Vnos podatkov (naslov za dostavo). Preverjanje vnesenih podatkov. Oddaja naročila. Naročilo oddano. Slika 18: Diagram poteka nakupa v spletni trgovini Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 28.

(33) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. 6.4. PREJETA NAROČILA Upravljalec spletne trgovine podatke o zaključenem naročilu dobi na svoj elektronski naslov, hkrati pa se nakup zabeleži tudi v nadzorni plošči vtičnika v zavihku ''Orders'' (Slika 19).. Slika 19: Seznam prejetih naročil Na seznamu prejetih naročil so prodajalcu na voljo podatki, kot so številka naročila, elektronska pošta, ime kupca, naslov dostave, način plačila in način prevzema. V ostalih zavihkih lahko prodajalec poleg zaključenih naročil spremlja tudi naročila, ki niso bila izpeljana do konca, s tem pa lahko potencialnega kupca obvesti, da ima v košarici še izdelke, na katere je morda pozabil. S klikom na naročilo se odpre nova stran s podrobnejšimi podatki o naročilu. Sedaj lahko prodajalec izbere naročene artikle in jih pripravi za prevzem ali dostavo. Na tej strani nato prodajalec spremeni status naročila. Uredi lahko status plačila (Plačano, Preklicano, Čaka na plačilo, ipd.) ter status prevzema (Čaka na obdelavo, Poslano, Dostavljeno, ipd.). Ko ima prodajalec pripravljene artikle ter jih na primer preda dostavni službi, izbere ali bo pošiljka poslana s številko za sledenje paketa ali brez. S potrditvijo zaključi naročilo (slika 20), kupec pa je na vneseni elektronski naslov obveščen, da je pošiljka na poti.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 29.

(34) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Slika 20: Zaključevanje naročila v nadzorni plošči. 6.5. UREJANJE CSS Vtičnik Ecwid Ecommerce Shopping Cart omogoča urejanje datoteke CSS, ki je slogovna datoteka, v kateri lahko s kodiranjem spreminjamo barve ozadja, besedila, njegovo postavitev ali obliko, hkrati pa tudi postavitev in izgled ostalih elementov. Pri spreminjanju datoteke CSS je potrebno biti previden, saj lahko že najmanjša napaka podre izgled same spletne trgovine. V datoteko CSS smo zato dodali le manjši delček kode, prikazan na Sliki 21, ki nam je omogočil, da smo skrili dve veliki ikoni, ki sta se pojavili ob ustvarjanju kategorij. Odstranili smo ju zato, ker je bila stran nepregledna, hkrati pa so kategorije že navedene na vrhu strani.. Slika 21: CSS koda, ki skrije ikoni na vrhu strani. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 30.

(35) Univerza v Mariboru – Fakulteta za organizacijske vede. 7.. Diplomsko delo univerzitetnega študija. ZAKLJUČEK. V diplomskem delu smo prikazali izdelavo spletne strani s spletno trgovino za podjetje HAPECE d.o.o. Izdelavo spletne strani smo izvedli z orodjem WordPress, spletno trgovino pa smo dodali z vtičnikom Ecwid Ecommerce Shopping Cart. Vsebino spletne strani smo uredili in dopolnili v sodelovanju z direktorjem podjetja, z njegovim soglasjem pa smo jo tudi objavili na spletu. V nadaljevanju zaključka je prikazana SWOT analiza spletne strani in spletne trgovine, predstavljeni so pogoji za uvedbo ter možnosti nadaljnjega razvoja.. 7.1. SWOT ANALIZA SWOT (Strengths, Weaknesses, Opportunities and Threats) analiza oz. PSPN matrika (Prednosti, Slabosti, Priložnosti in Nevarnosti) je ena izmed najpogostejših analiz, katere namen je pomoč pri strateških odločitvah v podjetjih. Izjemno koristna je zato, ker jo lahko uporabimo na vseh ravneh poslovanja. Najprej razdelimo dejavnike na notranje in zunanje. Pri notranjih se nahajamo v območju lastnega vpliva, na zunanje pa sami neposredno ne moremo vplivati, lahko jih le izkoristimo v svoj prid (Kos, 2010). V Tabeli 2 smo prikazali prednosti na vizualnem področju, saj je spletna stran pregledna, modernega videza, pred konkurenco pa jo postavlja tudi možnost nakupa artiklov v spletni trgovini. S postavitvijo spletne strani so se pokazale tudi slabosti. Največja so stroški vzdrževanja, potrebno pa bo tudi usposabljanje zaposlenih. Veliko priložnost vidimo v prevodu spletne strani v tuje jezike, saj bo stran tako postala privlačnejša za tujce, katerim bi lahko pošiljali tudi artikle iz spletne trgovine. Poleg priložnosti se pojavljajo tudi nevarnosti, predvsem sesutje strežnikov ponudnika gostovanja in slabo vzdrževanje spletne strani.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 31.

(36) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. NOTRANJI DEJAVNIKI PREDNOSTI. SLABOSTI. - moderen izgled spletne strani - prilagojenost za mobilne naprave - preglednost spletne strani - povezave do družbenih omrežij - možnost iskanja po spletni trgovini. - usposabljanje zaposlenih za upravljanje s spletno stranjo - stroški vzdrževanja. ZUNANJI DEJAVNIKI PRILOŽNOSTI. NEVARNOSTI. - možnost dodajanja vsebine - prevod spletne strani v tuje jezike - pošiljanje izdelkov v tujino. - sesutje strežnikov ponudnika gostovanja - slabo vzdrževanje spletne strani - postavitev spletne trgovine s strani konkurence. Tabela 2: SWOT analiza. 7.2. OCENA UČINKOV Učinka postavitve spletne strani za zdaj še ni mogoče oceniti kvantitativno, saj smo stran komaj objavili na spletu. Ocenjujemo, da bo podjetje pridobilo na prepoznavnosti, posledično bo veliko gostov, ki prej gostinskega lokala ni poznalo, sedaj lahko predstavitev našlo zelo enostavno. Z vidika konkurenčnosti smo podjetju pridobili veliko prednost, saj je spletna stran zasnovana moderno, dodano vrednost pa prinaša spletna trgovina, ki je konkurenčna podjetja ne ponujajo. Dejanske učinke bomo najverjetneje zaznali šele čez nekaj mesecev.. 7.3. POGOJI ZA UVEDBO Za postavitev spletne strani smo potrebovali zgolj osebni računalnik s povezavo do interneta. Edina pogoja za postavitev spletne strani sta bila registracija domene in zakup gostovanja na spletnem strežniku. Za zakup smo se odločili pri ponudniku DHH.si d.o.o., saj so za prvo leto ponujali obsežen popust. Stroški za prvo leto so obsegali: - Registracija domene holidayspub.si: 8,59 € - Zakup gostovanja ''NEOMEJEN ZAČETEK'': 40,27 € Stroški za naslednja leta bodo obsegali: - Podaljšanje domene holidayspub.si: 17,28 €/leto - Podaljšanje gostovanja ''NEOMEJEN ZAČETEK'': 114,05 €/leto. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 32.

(37) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. Poleg rednih stroškov podaljševanja domene in gostovanja podjetje drugih stroškov ne bo imelo. Za nadaljnjo posodabljanje in urejanje strani bo skrbel direktor podjetja HAPECE d.o.o., katerega bomo ustrezno izobrazili in mu predstavili uporabniške strani sistema WordPress.. 7.4. MOŽNOSTI NADALJNJEGA RAZVOJA Nadaljnji razvoj spletnih strani je skoraj neskončen, vsaka stran pa ima vedno še nekaj prostora za izboljšavo in nadgradnjo. Ker je spletna stran postavljena na sistemu WordPress, nadaljnji razvoj ne bo zahteven. Podjetju priporočamo redno posodabljanje strani in dodajanje nove, kvalitetne vsebine. Največjo pridobitev vidimo v prevodu spletne strani v tuje jezike, kar omogoča kar nekaj vtičnikov, tudi brezplačnih, s čimer bi lahko pridobili goste iz tujine. V kolikor bi podjetje v prihodnosti želelo prodajati večjo količino različnih artiklov, bi bil smotrn nakup vtičnika Ecwid Ecommerce Shopping Cart, saj plačljiva različica omogoča ogromno dodatnih nastavitev in prilagoditev, hkrati pa ni omejena na količino vnesenih artiklov. Če bi se pojavilo zanimanje za nakup artiklov s strani tujih gostov, bi podjetje lahko omogočilo pošiljanje tudi v tujino.. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 33.

(38) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. LITERATURA IN VIRI Fröhlich, H. (2013). INTERNET : Tehnologija, ki spreminja svet. Ljubljana: Tehniška založba Slovenije Gradišar, M. (2012). Spletna trgovina – prednosti in slabosti. Pridobljeno 22.7.2017 na http://data.si/blog/2012/07/13/spletna-trgovina-prednosti-in-slabosti/ Klemen, S. in Štrancar, M. (2005). PHP in MySQL na spletnem strežniku Apache. Ljubljana: Pasadena Kos, B. (2010). SWOT analiza. http://www.blazkos.com/swot-analiza.php. Pridobljeno. 11.8.2017. na. Mozilla.org. (2017). Looking back. Looking ahead. Pridobljeno 12.8.2017 na https://www.mozilla.org/en-US/about/history/ Potočar, Z. in Razgoršek, J. (2009). Elektronsko poslovanje. Ljubljana: Zavod IRC Rouse, M. (2015). What is Photoshop?. Pridobljeno 12.8.2017 na http://whatis.techtarget.com/definition/Photoshop Sabin-Wilson, L. (2015). WordPress® For Dummies®, 7th Edition. Hoboken: John Wiley & Sons, Inc. SpletnikSEO Optimizacija strani. (2017). Slovar SEO pojmov. Pridobljeno 12.8.2017 na http://www.optimizacija-strani.com/slovar-seo-pojmov.html#Optimizacijastrani-in-SEO-storitve Sun. J. (2016). Meta Tags for SEO- A Complete Guide. Pridobljeno 30.7.2017 na https://netotraffic.com/meta-tag-seo/ Turban, E. (2002). Information Technology for Management: Transforming Organizations in the Digital Economy. New York: John Wiley & Sons, Inc. Wordpress.org. (2017a). Meta Tags in WordPress. Pridobljeno 12.8.2017 na https://codex.wordpress.org/Meta_Tags_in_WordPress Wordpress.org. (2017b). Requirements. https://wordpress.org/about/requirements/ WordPress.org. (2017c). Wordpress. https://codex.wordpress.org/WordPress. Pridobljeno Pridobljeno. 22.7.2017 22.7.2017. na na. Zupan. G. (7.11.2016). Spletna prodaja, Slovenija, 2015. Statistični urad Republike Slovenije. Pridobljeno 21.7.2017 na http://www.stat.si/StatWeb/News/Index/6326. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 34.

(39) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. KAZALO SLIK Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika Slika. 1: Urejanje nastavitev teme Twenty Seventeen.................................. 14 2: Dodajanje strani Ponudba ........................................................ 15 3: Urejanje glavnega menija ........................................................ 16 4: HTML koda z opisom strani ....................................................... 16 5: HTML koda s ključnimi besedami ................................................ 17 6: Posnetek zaslona celotne spletne strani ........................................ 18 7: Posnetek zaslona mobilne naprave .............................................. 19 8: Dodajanje vtičnika za spletno trgovino ......................................... 20 9: Urejanje osnovnih podatkov o trgovini ......................................... 21 10: Urejanje možnosti dostave ...................................................... 21 11: Urejanje možnosti plačila ....................................................... 22 12: Dodajanje artikla v spletno trgovino........................................... 23 13: Dodajanje kategorij artiklov .................................................... 23 14: Osnovna stran spletne trgovine s kategorijami ............................... 24 15: Vnos podatkov za dostavo ....................................................... 25 16: Zaključek naročila ................................................................ 26 17: Račun, ki ga kupec prejme po elektronski pošti ............................. 27 18: Diagram poteka nakupa v spletni trgovini..................................... 28 19: Seznam prejetih naročil ......................................................... 29 20: Zaključevanje naročila v nadzorni plošči...................................... 30 21: CSS koda, ki skrije ikoni na vrhu strani ........................................ 30. KAZALO TABEL Tabela 1: Tabela 2:. Primerjava konkurenčnih spletnih strani .................................. 8 SWOT analiza ................................................................. 32. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 35.

(40) Univerza v Mariboru – Fakulteta za organizacijske vede. Diplomsko delo univerzitetnega študija. KRATICE IN AKRONIMI ARPA: ARPANET: B2B: B2C: B2G: C2B: C2C: CMS: CSS: EU: FTP: G2C: G2G: HTTPS: IP: LAN: MIT: PHP: SEO: SQL: SRI: SWOT: TCP: TIP: UCLA: WAN: WWW:. Advanced Research Project Agency; agencija za napredne projekte Advanced Research Project Agency Network; omrežje agencije ARPA Business to business; e-poslovanje med podjetji Business to consumer; e-poslovanje med podjetji in potrošniki Business to government; e-poslovanje med podjetji in vladnimi organizacijami Consumer to business; e-poslovanje potrošnika s podjetjem Consumer to consumer; e-poslovanje med potrošniki Content Management System; sistem upravljanja vsebin Cascading Style Sheets; kaskadne stilske podloge European Union; Evropska unija File Transfer Protocol; protokol za prenos datotek Government to citizens; e-poslovanje med vladnimi organizacijami in državljani Government to government; e-poslovanje med vladnimi organizacijami HyperText Transfer Protocol Secure; protokol za varno komunikacijo preko omrežij Internet Protocol; internetni protokol Local Area Network; lokalno omrežje Massachusetts Institute of Technology; tehnološki inštitut Massachusettsa Hypertext Preprocessor; skriptni jezik za razvoj spletnih strani Search Engine Optimization; optimizacija spletnih strani Structured Query Language; strukturirani povpraševalni jezik Stanford Research Institute; raziskovalni inštitut Stanford Strenghts, Weaknesses, Opportunities, Threats; matrika PSPN Transmission Control Protocol; protokol za nadzor povezave Terminal Interface Processor; terminal za dostop do omrežja University of California, Los Angeles; Univerza Kalifornije, Los Angeles Wide Area Network; prostrano omrežje World Wide Web; globalno omrežje, svetovni splet. Nejc Bricelj: Izdelava spletne strani s spletno trgovino za gostinsko podjetje. stran 36.

(41)

No results found