Microsoft Word - UN_Simona_Siljanovska_2017

Transkripcija

1 UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO Simona Siljanovska IZDELAVA SPLETNE TRGOVINE V WORDPRESS Diplomsko delo Maribor, september 2017

2 UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO Simona Siljanovska IZDELAVA SPLETNE TRGOVINE V WORDPRESS Diplomsko delo Maribor, september 2017

3 IZDELAVA SPLETNE TRGOVINE V WORDPRESS Diplomsko delo Študentka: Simona Siljanovska Študijski program: Univerzitetni študijski program Računalništvo in informacijske tehnologije Smer: / Mentor: red. prof. dr. Peter Kokol Lektorica: Ana Žagar, mag. prof. slov. j. in knj. i

4 ii

5 ZAHVALA Zahvaljujem se mentorju dr. Petru Kokolu za pomoč in vodenje pri opravljanju diplomskega dela. Zahvaljujem se staršem in prijateljem, ki so me podpirali pri izdelavi diplomskega dela. iii

6 Izdelava spletne trgovine v WordPress Ključne besede: CMS, spletna trgovina, WordPress, WooCommerce, vtičnik UDK: :371.4(043.2) Povzetek Danes veliko ljudi vseh starosti obiskuje spletne trgovine v svojem prostem času in nakupujejo stvari, ki jih potrebujejo. Cilj diplomskega dela je predstaviti odprtokodni sistem za upravljanje vsebin WordPress in odprtokodni vtičnik WooCommerce ter izdelati spletno trgovino na njih. V diplomskem delu je opisano, kako na splošno delujejo sistemi za upravljanje vsebin, različnih vrst odprtokodnih sistemov za upravljanje vsebin, načini plačevanja v spletnih trgovinah, uporabljene spletne tehnologije in orodja za razvoj trgovine, razvoj in funkcionalnosti, ki jih ponuja trgovina. iv

7 Developing online store in WordPress Key words: CMS, online store, WordPress, WooCommerce, plugin UDK: :371.4(043.2) Abstract Today, many people of all ages visit online shops in their free time and buy things that they need. The goal of this thesis is to present the open-source content management system WordPress and the open-source plugin WooCommerce, and to create an online store on them. The thesis also describes how in general content management systems work, different types of open-source content management systems, payment methods in online stores, used web technologies and tools for the development of the store, as well as development and functionalities offered by the online store. v

8 KAZALO 1 UVOD ODPRTOKODNI SISTEM ZA UPRAVLJANJE VSEBIN PREDSTAVITEV WORDPRESS SISTEMA Prednosti in slabosti sistema WordPress Zgradba sistema WordPress NAMESTITEV NA STREŽNIK Namestitev WordPress sistema Namestitev WooCommerce vtičnika NAČINI PLAČEVANJA V SPLETNIH TRGOVINAH UPORABLJENE TEHNOLOGIJE IN ORODJA PRI RAZVOJU SPLETNE TRGOVINE RAZVOJ SPLETNE TRGOVINE Namestitev in aktivacija teme v WordPressa Razvoj spletne trgovine in prikaz rešitve SKLEP VIRI IN LITERATURA vi

9 KAZALO SLIK Slika 3.1: Struktura datotek WordPressa... 7 Slika 4.1: Namestitev WampServerja Slika 4.2: Nastavitev uporabniškega imena in gesla za prijavo Slika 4.3: Ustvarjanje nove zbirke podatkov v phpmyadminu Slika 4.4: Nastavitev povezave s podatkovno bazo Slika 4.5: Namestitev WordPressa Slika 4.6: Nadzorna plošča WordPressa Slika 4.7: Namestitev novega vtičnika Slika 4.8: Nastavitev strani v WooCommerceu Slika 4.9: Nastavitev lokacije trgovine, valute in enote izdelkov za dostavo Slika 4.10: Izbira načina plačila Slika 7.1: Namestitev teme preko nadzorne plošče WordPressa Slika 7.2: Aktivacija teme Slika 7.3: Nastavitev strani v WordPressu Slika 7.4: Osnovne prilagoditve strani Slika 7.5: Dodajanje novih kategorij in prikaz vseh kategorij Slika 7.6: Dodajanje in prikaz atributov Slika 7.7: Prikaz vseh dodanih produktov v spletni trgovini Slika 7.8: Dodajanje novega izdelka Slika 7.9: Prikaz vseh kategorij in izdelkov s popustom Slika 7.10: Ustvarjanje nove kontaktne forme Slika 7.12: Vrste dodatkov in območij za prikaz dodatkov vii

10 Slika 7.13: Funkcija za prikaz števila izdelkov na eno vrstico Slika 7.14: Funkcija za sortiranje izdelkov po imenu Slika 7.15: Funkcija za prikaz tekst gumba za nakup pri vsakem izdelku Slika 7.16: Funkcija za skrivanje stranske vrstice Slika 7.17: Prikaz košarice Slika 7.18: Funkcija za brisanje vseh dodanih izdelkov v košarici Slika 7.19: Prikaz posameznega produkta Slika 7.20: Dodajanje novega zavihka pri posameznem produktu Slika 7.21: CSS koda za spremembo videza gumba Slika 7.22: CSS koda za spremembo barve ozadja in pisave ter oblika gumba viii

11 UPORABLJENE KRATICE CMS sistem za upravljanje vsebin (ang. Content Management System) PHP odprtokodni programski jezik za strežniške uporabe (ang. PHP Hypertext Preprocessor) MySQL sistem za upravljanje s podatkovnimi bazami GPL licenca za prosto programje (ang. General Public Licence) URI niz znakov za identifikacijo vira (ang. Uniform Resource Identifier) SEO optimizacija spletnih strani (ang. Search Engine Optimization) HTML označevalni jezik za izdelavo spletnih strani (ang. Hypertext Markup Language) CSS podloge za prezentacijo spletnih strani (ang. Cascading Style Sheets) Javascript objektni skriptni jezik za ustvarjanje interaktivne spletne strani XML razširljivi označevalni jezik (ang. Extensible Markup Language) ix

12 1 UVOD Z razvojem sodobne tehnologije internet ljudem ponuja vse več novih možnosti. S pomočjo interneta lahko ljudje storijo veliko stvari, ne da bi šli ven, kot so plačevanje računov, študij na spletu in tako naprej. Med tistimi najbolj privlačnimi za ljudi je nakupovanje preko spleta. Nakupovanje preko spleta je postal eden izmed najnovejših fenomenov danes. Vsak dan ljudje vseh starosti obiskujejo spletne trgovine v svojem prostem času, kje nakupujejo stvari, ki jih potrebujejo, brez da bi šli v normalno trgovino. Spletno nakupovanje privlači ljudi, ker ima številne prednosti. Najpomembnejša prednost spletnega nakupovanja je, da lahko primerjamo cene različnih izdelkov kot tudi njihovih lastnostih na več različnih spletnih mest in na ta način izberemo najboljšo ponudbo. Ostale prednosti, ki jih spletno nakupovanje ponuja, so nakup izdelkov, ki jih ni mogoče kupiti npr. v Sloveniji, prihranitev ogromno časa za tiste, ki ga nimajo, nakupovanje ob katerikoli uri dneva itn. Vsi vemo, da obstajata dve strani vsega, kar pomeni, da ima spletno nakupovanje tudi številne pomanjkljivosti. Slabosti so v tem, da izdelka ne moremo videti v živo in tukaj pride problem, ko je npr. obleka, čevlji, da jih ne moremo preizkusiti, otipat, pomeriti, itn. Ena izmed številnih slabosti so prevare, ki nastanejo preko spletnega nakupovanja, možnost vdora v zasebnost in kraje osebnih podatkov, če podjetje teh podatkov ne zavaruje dovolj kot tudi neizplačljivost nakupa cenejših izdelkov zaradi visokih poštnin. Večina podjetij in trgovin se danes odločijo, da prodajo svoje izdelke tudi preko spleta. To je zaradi tega, ker primarni strošek, ki ga ima trgovec, je izdelava in vzdrževanje spletne trgovine, kot tudi plačilo za pridobitev domene in gostovanja. Danes je večina spletnih trgovin narejena na že obstoječih sistemih. Kateri sistem je najboljši za nas, se odločimo odvisno od tega, kaj imamo namen prodajati. Če želimo imeti večjo spletno trgovino in prodajati različne vrste izdelkov (npr. Amazon), so za nas primerni odprtokodni sistemi, kot so Magento, Shopify itn., ker niso omejeni in so zelo fleksibilni za razširjanje naše trgovine v prihodnosti. Drugače potrebujemo sisteme za manjše trgovine, kot so WooCommerce, OpenCar itn. Zaradi tega smo se v diplomskem 1

13 delu odločili, da bomo naredili spletno trgovino v WordPressu, s pomočjo vtičnika WooCommerce, ker je naša trgovina majhna in izdelki, ki jih prodajamo, so različni dodatki za mobilne naprave (zaščita zaslona, ovitke itn.). V diplomskem delu smo predstavili odprtokodni sistem za upravljanje vsebin WordPress in odprtokodni vtičnik WooCommerce, ter izdelali spletno trgovino na njih. Diplomsko delo smo razdelili na več sklopov, v katerih smo opisali, kako na splošno delajo sistemi za upravljanje vsebin, različnih vrst odprtokodnih sistemov za upravljanje vsebin, načini plačevanja v spletnih trgovinah, sistem WordPress in vtičnika WooCommerce, namestitev na strežnik, uporabljene spletne tehnologije in orodja za razvoj trgovine, kot tudi razvoj in funkcionalnosti, ki jih ponuja trgovina. Na koncu smo prikazali naš izdelek. 2

14 2 ODPRTOKODNI SISTEM ZA UPRAVLJANJE VSEBIN Sistem za upravljanje vsebin (CMS) je programska aplikacija oziroma sistem ali niz povezanih programov, ki se uporabljajo za ustvarjanje, urejanje in vzdrževanje vsebine spletnih strani. Večina CMSjev vključuje spletno objavljanje, urejanje, nadzor različic, indeksiranje, iskanje in nalaganje [2]. Danes lahko vsak uporabnik oziroma urednik spletne strani samostojno ureja spletno stran (doda novo besedilo, sliko, multimedijsko vsebino, stran itn.) brez dodatne pomoči s strani programerja oziroma podjetja, ki je stran izdelalo. Ko uporabnik ureja, spreminja, briše, doda novo vsebino v CMS sistemu, je to takoj vidno na spletni strani. Celotna vsebina je shranjena v podatkovnih bazah in se prikazuje s pomočjo naprej pripravljenih predlogah oziroma po angleško templates. V večini CMSjev je omogočeno tudi vključevanje različnih dodatkov oziroma vtičnikov (plugins), ki nam pomagajo pri razvoju spletne strani, trgovine itn. CMS se lahko uporablja za shranjevanje, nadzor, revizijo in objavo različne dokumentacije [2]. Večina CMSjev se lahko uporablja samostojno ali v povezavi z drugimi aplikacijami. Lahko jih namestimo neposredno v omrežju, na internetu ali lokalno na našem računalniku [9]. Danes poznamo več vrst CMS sistemov. Lahko so sistemi, ki so plačljivi ali brezplačni. Načeloma so CMS sistemi razdeljeni v dve skupini [9]: Lastniški oziroma unikatni sistemi (sistemi, ki jih zgradijo nekatera podjetja, in če jih želimo uporabljati, moramo dobiti dovoljenje ali licenco od njih). Odprtokodni sistemi (sistemi, ki jih kdorkoli uporablja za različne namene in od nas, ne zahtevajo, da kupimo licenco za uporabo). Večina spletnih strani in trgovin so izdelani na osnovi odprtokodnih sistemov. Danes poznamo različne odprtokodne sisteme, med katerimi sta najbolj razširjena WordPress in Joomla. Najbolj razširjeni CMSjev, ki se uporabljajo za izdelavo spletne trgovine, so Magento, WordPress, Joomla itn. 3

15 3 PREDSTAVITEV WORDPRESS SISTEMA WordPress je brezplačen in odprtokodni sistem za upravljanje vsebin, ki temelji na programskem jeziku PHP in MySQL. WordPress ima sistem spletnih predlog, ki uporablja procesor različnih predlog. Njegova arhitektura predstavlja sprednji krmilnik, ki usmerja vse zahteve za ne-statične URIje v eno PHP datoteko, ki razčleni URIje in identificira ciljno stran [1]. Če želimo zagnati WordPress, je vse kar potrebujemo domena in spletno gostovanje. Nameščenega lahko imamo na lokalnem računalniku, če se želimo učiti in spreminjati. Ta sistem predstavlja enega izmed najpreprostejših načinov za prisotnost na spletu. WordPress danes omogoča poleg izdelave spletne strani, tudi spletne trgovine s pomočjo različnih vtičnikov, med katerimi je najpomembnejši WooCommerce. Na začetku je bil WordPress bolj platforma za blogiranje, vendar so razvijalci prišli do različnih vtičnikov, ki so nam kasneje omogočali izdelavo spletnih stran, trgovin itn. Pred objavo b2 je bil WordPress preprosta programska oprema, ki je temeljila na programskem jeziku PHP. Glavni razvijalec b2 je Michel Valdrighi. V začetku leta 2003 so uporabniki ugotovili, da za b2 ni več podpore. Veliko ljudi je bilo zaskrbljenih, da ni bila zagotovljena nobena dodatna podpora. Zaradi tega je Matt Mullenweg, eden izmed uporabnikov b2, prišel na idejo, da bi ustvaril novo platformo z integriranjem dodatnih stvari v b2, ker je bil b2 zgrajen pod GPL licenco, kar pomeni, da lahko izvorno kodo uporabi in jo izboljša. Idejo je objavil na svojem blogu in kmalu ugotovil, da je bilo veliko ljudi zainteresiranih glede tega, med njimi je bil tudi Mike Little [11]. 27. maja 2003 je bil WordPress razvit s strani ustanoviteljev, Matta Mullenweg in Mika Little [1]. Veliko vrhunskih blagovnih znamk danes uporablja WordPress za izdelavo svojih spletnih strani, med njimi so Google, Facebook, Time Magazine, Disney, LinkedIn, Sony, ebay itn. [12]. 4

16 3.1 Prednosti in slabosti sistema WordPress Vemo, da je WordPress postal eden izmed najbolj priljubljenih CMS-jev. Kljub njegovi popularnosti ima vsaka stvar dve strani, tako ima tudi WordPress številne prednosti in pomanjkljivosti. Prednosti sistema WordPress so: Brezplačen in odprtokoden sistem to pomeni, da ga lahko vsak uporabnik prenese in namesti na svojem računalniku, ki ga lahko kasneje uporablja in spreminja s pomočjo različnih predlog strani in vtičnikov, ki so na voljo. Ker je odprtokoden sistem, pomeni, da je izvorna koda programske opreme na voljo vsem, ki se želijo učiti in ga spreminjati. Vsak lahko prispeva k WordPressu s pisanjem, odgovarjanjem na vprašanja v zvezi s podporo, prevajanjem, ustvarjanjem novih predlog vtičniki itn [10][12][13]. Varen in zanesljiv sistem vedno posodobljen in ponuja boljšo stabilnost in varnostne funkcije, ki ščitijo poslovanje v spletni trgovini. Z različnimi varnostnimi funkcijami uporabniki zaščitijo svoje strani, trgovine pred hekerji in drugimi spletnimi napadi [10]. Zmogljiv in enostaven za uporabo sistem, ki ne zahteva poglobljenega tehničnega znanja. Ljudje, ki uporabljajo WordPress, niso niti dizajnerji niti programerji. Vsi uporabniki prilagodijo in urejajo vsebino svojega spletnega mesta s pomočjo različnih možnosti, kot so različne predloge strani, vtičnikov, dodatkov itn. Teme WordPressa so enostavne za urejanje in prilaganje, ki nam omogočajo spreminjanje barv, logotipa, ozadja itn. in vse to lahko naredimo brez dodatnih kod. WordPress nam omogoča posodobitev vtičnikov in tem preko nadzorne plošče, ob katerikoli uri dneva. Vedno nas obvesti, ko je na voljo nova različica WordPressa, da jo posodobimo [10][12][13]. 5

17 SEO sistem osnovni sistem WordPressa ni optimiziran za spletne iskalnike. Če želimo, da je naša spletna stran ali trgovina optimizirana, potem WordPress ponuja različne vtičnike za optimizacijo [12][13]. Slabosti sistema WordPress so: Ni primeren za velike spletne trgovine čeprav lahko z nekaj naprednih vtičnikov pretvorimo WordPress v spletno trgovino, ko pride obdelava velikega števila naročil, se poveča število skript, ki jih izvaja WordPress, kar pomeni, da lahko zavzamemo veliko prostora na strežniku, kar ni dobro. To vzame veliko časa in na koncu vsi uporabniki porabijo več časa za prilaganje in ločevanje podatkov [10]. Odprtokoden sistem izvorna koda programske opreme je na voljo vsem, ki si želijo učiti in spreminjati. To je prednost in hkrati slabost sistema WordPress, ker je lažje za hekerja, da najde varnostne luknje v sistemu [13]. Posodobitev vtičnika ko je sistem nadgrajen oziroma posodobljen, veliko vtičnikov ne delujejo kot treba. To pomeni, da morajo uporabniki narediti kopijo svojih spletnih strani ali trgovin, preden začnejo s spreminjanjem vtičnikov [10]. Spremembe v kodi zahtevajo poznavanje PHP-ja če želimo dodajati nove funkcionalnosti ali izbrisati spletno stran ali trgovino, WordPress zahteva nekaj razumevanja jezika PHP. Grafična sprememba zahteva poznavanje CSS in HTML WordPress ponuja veliko različnih že narejenih tem, ampak če želimo urejati in spreminjati že obstoječe teme, potem moramo imeti vsaj nekaj znanja jezikov CSS in HTML. 3.2 Zgradba sistema WordPress Struktura datotek WordPressa je sestavljena iz ene glavne mape, ki se imenuje public_html, v kateri se nahajajo tri ključne podmape WordPressa (Slika 3.1) in veliko pomembnih datotek, kot so wp-config.php in.htaccess. 6

18 .htaccess je okrajšava za hypertext access. Ta datoteka nam omogoča nadzor nad strukturo, vseh map in datotek in dostop do njih preko nameščenega WordPressa [7][14]. Druga pomembna datoteka je index.php, ki naloži vse naše WordPress datoteke, ko je stran zahtevana s strani uporabnika [7][14]. Ena izmed najpomembnejših datotek v WordPress mapi je tudi wp-config.php. Ta datoteka vsebuje informacije o podatkovni bazi, kot so ime baze, ime gostitelja in uporabniško ime in geslo [7][14]. Slika 3.1: Struktura datotek WordPressa wp-admin podmapa, v kateri so shranjena administrativna orodja WordPressa. Glavna datoteka v tej mapi je admin.php, ki nam omogoča različne funkcionalnosti, kot so preverjanje, ali je uporabnik dejansko administrator, povezava s podatkovno bazo, prikaz nadzorne plošče WordPressa itd [7][14]. wp-content podmapa, v kateri so shranjene datoteke, ki jih lahko spreminjamo pri izdelavi spletnih strani. V tej mapi so shranjene naše teme in vtičniki, ki smo jih naredili sami ali smo jih namestili preko nadzorne plošče [7][14]. 7

19 wp-includes podmapa, v kateri je shranjena večina ključnih datotek WordPressa, ki omogočajo, da se naša stran zažene [7][14]. Če želimo spremeniti vsebino ali kakšne funkcionalnosti spletne strani, to vedno naredimo v wp-content mapi, ker so samo v tej mapi priporočene spremembe. Če naredimo kakšno spremembo v wp-admin ali wp-includes podmapi, lahko našo spletno stran postane nestabilno in lahko izgubimo del vsebine ali kakšne funkcionalnosti. 8

20 4 NAMESTITEV NA STREŽNIK Za WordPress smo se odločili, da ga bomo namestili na operacijskem sistemu Windows. Za spletni strežnik je najboljša izbira Apache, ker ima podporo za PHP in MySQL, kar omogoča delovanje WordPressa. V diplomskem delu smo WordPress namestili na lokalnem strežniku s pomočjo WampServerju, ki predstavlja spletno razvojno okolje na Windowsu in nam omogoča razvoj spletnih aplikacij z Apache, PHP programskega jezika in MySQL podatkovno bazo. V prihodnosti lahko dobimo in plačamo domeno in spletno gostovanje in tam namestimo WordPress, da je potem naša stran ali trgovina vidna tudi na spletu. 4.1 Namestitev WordPress sistema Glede namestitev smo v prejšnjem odstavku napisali, da bomo WordPress namestili na lokalnem računalniku in da moramo zato namestiti tudi WampServerja. Prva stvar, ki smo jo naredili, je, da smo obiskali spletno stran WampServerja, prenesli najnovejšo različico na naš računalnik (odvisno od operacijskega sistema, smo izbrali 32 ali 64-bitni), zagnali namestitveni program in pazljivo sledili navodilom na zaslonu za namestitev (prikazuje Slika 4.1). 9

21 Slika 4.1: Namestitev WampServerja Ko smo namestili WampServerja, smo ga zagnali in odprli phpmyadmin, kjer smo morali ustvariti novo prazno MySQL podatkovno bazo, ki jo bo WordPress kasneje uporabljal. Potem se je v brskalniku odprl zaslon za prijavo v phpmyadmina (Slika 4.2), kjer lahko nastavimo uporabniško ime in geslo za prijavo. Slika 4.2: Nastavitev uporabniškega imena in gesla za prijavo 10

22 Ko smo se prijavili v phpmyadmin 1, smo izbrali zavihek Zbirke podatkov, kje smo ustvarili novo zbirko podatkov in nastavili ime zbirke (Slika 4.3). Slika 4.3: Ustvarjanje nove zbirke podatkov v phpmyadminu Potem smo obiskali spletno stran WordPress.org, prenesli kopijo WordPressa na računalnik, razširili datoteko.zip in kopirali mapo WordPressa v mapo, kjer smo namestili WampServerja. Mapo wordpress smo preimenovali v ime naše spletne trgovine, ker bo to povezava od našega lokalnega spletnega mesta. Ko smo kopirali mapo WordPressa, smo odprli spletni brskalnik in Na začetku namestitev smo izbrali jezik, v katerem želimo, da se WordPress namesti, in splošne informacije o nastavitvi naše podatkovne baze. Na naslednjem zaslonu (Slika 4.4) smo morali nastaviti podatke o povezavi s podatkovno bazo, kot so ime podatkovne zbirke, uporabniško ime in geslo za prijavo v phpmyadmin itn. Ko smo končali nastavitev o povezavi s podatkovno bazo, smo šli na naslednji zaslon, kjer je WordPress za nas ustvaril konfiguracijsko datoteko in nas obvestil, da smo se uspešno povezali z našo bazo in da lahko nadaljujemo z namestitvijo. 1 phpmyadmin brezplačno in odprtokodno orodje za upravljanje z MySQLa. 11

23 Slika 4.4: Nastavitev povezave s podatkovno bazo Na naslednjem zaslonu (Slika 4.5) smo morali izpolniti obrazec za namestitev WordPress, kjer smo morali navesti ime naše spletne trgovine, kot tudi uporabniško ime, geslo in elektronsko pošto za administratorja oziroma za našo prijavo v nadzorno ploščo WordPressa. Slika 4.5: Namestitev WordPressa 12

24 Ko se je namestitev končala, smo na naslednjem zaslonu dobili sporočilo, da je WordPress uspešno nameščen na našem lokalnem računalniku. Potem smo se prijavili v nadzorno ploščo WordPressa (Slika 4.6), kjer smo začeli z izdelavo spletne trgovine. Slika 4.6: Nadzorna plošča WordPressa 4.2 Namestitev WooCommerce vtičnika WooCommerce vtičnik je najboljši način, da spletno stran pretvorimo v spletno trgovino. WooCommerce mora biti nameščen in aktiviran kot katerikoli drugi vtičnik. Za uporabo WooCommercea ne potrebujemo licence, ker je brezplačen in odprtokoden podobno kot WordPress. Namestitev WooCommercea je hitra, ker ga lahko namestimo in konfiguriramo samo v enem dnevu [4]. Ta vtičnik je bil razvit 27. septembra 2011 in je primeren za različne velikosti spletnih trgovin. Deluje tudi z vsemi temami, ki jih trenutno uporabljamo v WordPressu [17]. Če želimo namestiti vtičnik, moramo najprej odpreti nadzorno ploščo WordPressa in izberemo zavihek Plugins. Potem s klikom na Add New zavihek, poiščemo vtičnik, ki ga 13

25 potrebujemo, ga namestimo in aktiviramo (Slika 4.7). Vse nameščene vtičnike lahko najdemo pod Plugins/Installed Plugins. Slika 4.7: Namestitev novega vtičnika Po aktivaciji našega vtičnika se je na zaslonu prikazal čarovnik za namestitev WooCommercea. Prvi korak v WooCommerce čarovnika je ustvarjanje strani, ki so del naše spletne trgovine (Slika 4.8): Shop stran, kjer bodo naši izdelki prikazani. Cart stran, kjer kupci urejajo oziroma prilagodijo naročilo, preden nadaljujejo z nakupom. Checkout stran, kjer kupci izberejo način dostave in plačila. My Account profilna stran za registrirane uporabnike, kjer lahko pregledajo svoja pretekla naročila, osebne podatke itn. 14

26 Slika 4.8: Nastavitev strani v WooCommerceu Drugi korak je zelo pomemben za spletno trgovino. V tem koraku smo izbrali lokacijo oziroma Državo, kjer je naša trgovina, tip valute in način, kako bo valuta, prikazana v trgovini, enote, v katere bodo predstavljeni izdelki za dostavo (enote za težo in dimenzijo) itn. (Slika 4.9). 15

27 Slika 4.9: Nastavitev lokacije trgovine, valute in enote izdelkov za dostavo 16

28 V naslednjem koraku smo izbrali, kateri način plačila bomo imeli v trgovini. Na vrhu sta predstavljena dva izmed najbolj znanih plačilnih metod PayPal in Stripe (Slika 4.10). Na začetku smo izbrali samo PayPal kot plačilno metodo za našo trgovino. Kasneje lahko izberemo, ali dodamo nove plačilne metode v delu za nastavitve WooCommercea. Slika 4.10: Izbira načina plačila V zadnjem koraku nam je WooCommerce predlagal Storefront kot temo za našo spletno trgovino. Odločili smo se, da bomo namestili in aktivirali to temo in jo prilagodili po svojih željah, na ta način, da bomo videz spremenili in izbrisali nekatere že vnaprej narejene funkcionalnosti, oziroma dodali nove. 17

29 5 NAČINI PLAČEVANJA V SPLETNIH TRGOVINAH Danes obstajajo različni načini plačevanja v trgovinah, preko katerih stranke plačajo za izdelke, ki jih nakupujejo preko spleta. Na začetku je pomembno izbrati, katere načine plačevanja bomo imeli v trgovini, ker se lahko zgodi, da nekateri določijo tudi nakup dodatne opreme in naprave, kar pomeni večji strošek za nas. Druga stvar, ki jo moramo upoštevati pri izbiri načina plačevanja, je, da vključimo naslednje komponente [15]: Zasebnost npr. kreditne kartice beležijo transakcije in nekaterimi kupcem to ne ustreza, ker želijo plačevati z gotovino zaradi zasebnosti [15]. Stroški storitev kreditne kartice pogosto zaračunajo te stroške [15]. Stroški transakcije banka lahko zaračuna stroške za transakcijo [15]. Nevarnost načini plačevanja povečujejo tveganje za krajo osebnih podatkov in denarja, ker ne gre direktno na naš bančni račun [15]. Zanašanje na električno in telekomunikacijsko infrastrukturo nekatere plačilne metode uporabljajo električno energijo in dostop do telefonskega omrežja in te metode niso na volji, če sistemi ne funkcionirajo [15]. Danes poznamo več plačilnih metod za nakupovanje preko spleta, kot so kreditne kartice, debetne kartice, plačilne storitve kot PayPal, plačilo preko mobilnih naprav itn. Kreditna kartica pogosto dobra izbira za nakupovanje preko spleta, ker je s kreditno kartico zaščita pred goljufijami zelo močna. Kreditne kartice uporabljamo vsak dan za plačevanje stroškov. Te kartice so najboljše pri nakupovanju preko spleta, saj smo prepričani, da je nakupovanje varno, vendar se lahko zgodi, da je številka naše kartice ukradena, kar pomeni, da bomo morali na novo čakati nekaj časa. V teh primerih je najboljše, da imamo številko kreditne kartice za enkratno uporabo [5]. Debetne kartice te kartice vedno vlečejo sredstva, neposredno z našega računa. Čeprav to po zakonu ni potrebno, izdajatelji debetnih kartic ponujajo zaščito, ki je podobna zaščiti 18

30 kreditnih kartic. Slabost debetnih kartic je v tem, da je kartica neposredno povezana z našim bančnim računom. Če kartico izgubimo ali se številka naše kartice uporablja brez našega dovoljenja, pomeni, da lahko izgubimo denar, ki ga imamo na bančnem računu. Tudi pri debetni kartici lahko imamo zaščito pred goljufijami, ampak če izgubimo denar, bomo morali čakati približno dva tedna, da bo banka vrnila denar na naš račun [5]. Plačilne storitve ena izmed najbolj znanih plačilnih storitvah je PayPal. Te storitve zagotovijo dodatno varnostno plast, in sicer na način, da podatke o naši kreditni kartici ali bančnem računu hranijo na enem mestu. Prednost PayPala je, da zmanjšamo število spletnih mest, v katerih kupujemo in na ta način plačujemo ter imamo shranjene na enem mestu in s tem se zaščitimo pred hekerji. Slabost teh plačilnih metod je, če imamo spor s prodajalcem, lahko naši računi postanejo zamrznjeni in jih ne moremo uporabljati, medtem ko je spor v obdelavi. Če se spori ne končajo v našo korist, potem lahko zaprejo račun in dobimo prepoved za uporabo storitve [5]. Mobilna plačila nova alternativna plačilna metoda, ki namesto plačevanja z gotovino ali kreditnimi karticami omogoča, da uporabimo svoj mobilni telefon za plačilo storitev. Stroški nakupovanja se potem odštejejo od našega telefonskega računa [16]. 6 UPORABLJENE TEHNOLOGIJE IN ORODJA PRI RAZVOJU SPLETNE TRGOVINE 19

31 Wordpress temelji na programskem jeziku PHP. Glede grafičnega videza in ostalih funkcionalnosti uporablja jezike HTML, CSS in Javascript. To pomeni, da če želimo postati WordPress razvijalec, moramo poznati HTML, CSS in PHP, ki predstavljajo tri glavne jezike WordPressa. Če želimo dodajati nove funkcionalnosti pri razvijanju, upravljati podatkovne baze, prenašati in dobiti različne podatke med več omrežij, potem je potrebno, da poznamo jezike XML, MySQL in Javascript [6]. PHP nadzira vse funkcionalnosti znotraj WordPressa in je povezan s podatkovno bazo MySQL, preko katere pridobiva podatke z bazo in s pomočjo ostali jezikov, prikaže pridobljene podatke [6]. CSS je jezik, ki nam pomaga, da oblikujemo spletno stran ali trgovino, na način, da se razlikuje od ostalih strani na spletu. Ta jezik je zelo težko obvladovati na začetku in zahteva veliko učenja, ampak na koncu dobimo zelo lepo oblikovano stran [6]. HTML jezik predstavlja struktura, ki jo sestavljajo funkcije, narejene v PHP-ju in stil v CSSju. HTML je eden izmed najlažjih jezikov za učenje, ampak ga moramo dobro obvladovati, ker je izjemno pomemben za izdelavo dobro zgrajeno spletno stran [6]. Pri razvoju, urejanju in pisanju kode smo uporabili Notepad++ urejevalnika izvorne kode in različnih urejevalnikov kode znotraj nadzorne plošče WordPressa. 7 RAZVOJ SPLETNE TRGOVINE 20

32 Za razvoj spletne trgovine smo uporabili in namestili temo, od tiste, ki jih nam WordPress ponuja. Temo smo spremenili in uredili po svojih željah. Pri urejanju spletne trgovine smo uporabljali različne dodatne vtičnike. Dodali smo funkcionalnosti in videz z urejanjem posameznih datotek. Na začetku sem si zadala, katere vse funkcionalnosti bom razvila v spletni trgovini: prikaz vseh kategorij na naslovni strani, prikaz nove dodanih produktov, prikaz produktov, ki imajo popust, iskanje izdelkov, prikaz košarice v glavi naslovne strani, stran za kontakt, prikaz gumbov za povezavo s socialnimi omrežji v nogi, sortiranje izdelkov po ceni, imenu in datumu, nakupovanje izdelkov, dodajanje in brisanje izdelkov v košarici, prikaz vseh izdelkov, prikaz vseh izdelkov za eno kategorijo, izbira količine in barve izdelkov, prikaz opisa in specifikacije izdelkov. 7.1 Namestitev in aktivacija teme v WordPressa 21

33 Kot smo že prej napisali, pri namestitvi WooCommercea za temo naše spletne trgovine smo izbrali temo Storefront, ki nam jo je WooCommerce predlagal pri namestitvi in smo jo prilagodili po svojih željah. Temo v WordPressu lahko namestimo na dva načina: preko nadzorne plošče WordPressa, ročno. Odločili smo se, da bomo temo namestili preko nadzorne plošče. Če želimo pogledati vse nameščene teme ali poiskati, namestiti in aktivirati novo temo, potem moramo v meniju izbrati Appearance/Themes. Tu se nam prikažejo vse nameščene teme. Če želimo dodati novo temo, potem kliknemo na gumb Add New in se nam prikaže stran, kjer lahko poiščemo temo, ki jo želimo in napišemo ime teme v iskalniku (Slika 7.1). Ko najdemo temo, s klikom na gumb Install namestimo temo, ki jo potem aktiviramo s klikom na gumb Activate (Slika 7.2) [18]. Slika 7.1: Namestitev teme preko nadzorne plošče WordPressa 22

34 Slika 7.2: Aktivacija teme WordPress omogoča, da namestimo teme, ki jih nima na svoji spletni strani. To pomeni, da si lahko izberemo temo, jo potegnemo s spleta in s klikom na gumb Upload Theme, izberemo.zip datoteko teme, ki vsebuje mapo in datoteke teme, jo naložimo in namestimo. Naša tema je nameščena in se nahaja v mapi, v katero smo namestili WordPress oziroma v podmapi wp-content. V podmapi wp-content izberemo themes, ime naše teme (v našem primeru storefront) in najdemo vse datoteke, ki jih lahko urejamo in prilagodimo po želji. 7.2 Razvoj spletne trgovine in prikaz rešitve Pri razvoju, preden smo začeli dodajati nove produkte, kategorije itd. smo uredili izgled naše spletne trgovine. Najprej smo uredili, katere strani bo trgovina vsebovala. V zavihek Pages, strani, ki so bile vnaprej narejene in jih nismo potrebovali, smo izbrisali, naše smo 23

35 dodali s klikom na gumb Add New (Slika 7.3). Vidimo, da ima naša spletna trgovina 5 strani: Front Page, Shop, Contact, Cart in Checkout. Slika 7.3: Nastavitev strani v WordPressu Pod zavihek Appearance smo izbrali Customize in se nam je na levi strani odprla sekcija, v katero lahko urejamo nekatere splošne nastavitve (Slika 7.4), kot so ime spletne trgovine, barva ozadja, barva ozadja glave in noge, barva pisave in povezave, barva gumbe, lokacije menija, katere strani bomo prikazovali kot povezave v meni, razpored, kako bomo prikazali vse elemente v trgovini itn. 24

36 Slika 7.4: Osnovne prilagoditve strani Ko smo postavili trgovino in uredili splošne nastavitve, smo začeli z dodajanjem izdelkov, atributov izdelkov in kategorij. V zavihek Products/Categories dodajamo nove kategorije in tam so prikazane vse naše kategorije (Slika 7.5). Slika 7.5: Dodajanje novih kategorij in prikaz vseh kategorij 25

37 Ko smo dodali kategorije, smo dodali atribute za naše izdelke. Odločili smo se, da bomo pri vsakem izdelku imeli na voljo tudi izbiro različnih barv. Dodajanje atributov v WordPressu lahko naredimo v Products/Attributes (Slika 7.6). Tukaj so prikazani naši atributi. Dodamo lahko nov atribut, ki je lahko barva, tekst ali slika. Slika 7.6: Dodajanje in prikaz atributov Ko smo nastavili kategorije in atribute izdelkov, smo nadaljevali z dodajanjem izdelkov. Izdelke lahko dodajamo preko Products/Add New. Pri dodajanju izdelkov moramo izpolniti nekaj podatkov (Slika 7.7), kot so: ime produkta, podroben opis produkta, oddelek, kjer nastavimo glavne podatke za izdelek tukaj lahko nastavimo vrsto izdelka (imamo 4 vrste izdelka: simple, variable, grouped, external) [19], cena, davek, število izdelkov na zalogi, atribute izdelkov (npr. če prodajamo obleko ali čevlje, potem lahko pri posameznem izdelku izbiramo barvo, velikost itn.), težo, dimenzije in stroške dostave itn. kratek opis, ki se pojavi pod imenu izdelka, 26

38 kategorije izdelkov, oznake izdelka, slika izdelka, galerijo izdelka, kjer se prikažejo dodatne slike. S klikom na gumb Publish objavimo naš produkt. Če želimo videti vse naše izdelke, to naredimo preko Products/All Products (Slika 7.8). Slika 7.7: Prikaz vseh dodanih produktov v spletni trgovini 27

39 Slika 7.8: Dodajanje novega izdelka 28

40 Pri namestitvi WooCommercea, smo kot plačilno metodo izbrali samo PayPal. Preden smo začeli z urejanjem spletne trgovine, smo v WooCommerce/Settings kot plačilno metodo dodali še kreditni kartici. Vsak uporabnik bo imel možnost, da plača svoje naročilo z MasterCarda in Visa. Ko smo dodali vse produkte, smo začeli z urejanjem spletne trgovine. Kot že vemo, je naša tema nameščena v podmapi wp-content in lahko samo v tej mapi urejamo, brišemo in dodajamo. V wp-content/themes/storefront najdemo vse datoteke, kjer bomo urejali, spreminjali, dodajali nove izglede, funkcionalnosti itd., da lahko naredimo spletno trgovino po želji. Obstajata dve datoteki, ki smo ju največ spreminjali in urejali med izdelavo trgovine: functions.php (datoteka za urejanje funkcionalnosti spletne trgovine), style.css (datoteka za vizualno urejanje spletne trgovine). Na začetni strani naše trgovine prikažemo menije do glavne nakupovalne strani in strani za kontakt, kjer nam lahko pošiljajo sporočila in nas kontaktirajo, iskalnik, kjer lahko iščemo izdelke, vse kategorije, kot tudi nove dodane izdelke in izdelke, ki imajo popust (Slika 7.9). 29

41 Slika 7.9: Prikaz vseh kategorij in izdelkov s popustom Za izdelavo kontaktne forme smo namestili in uporabili vtičnika Contact Form 7. Kontaktno formo smo naredili tako, da smo v nadzorni plošči izbrali Contact/Add New in s pomočjo pisanjem kratke kode dodali elemente v formi (Slika 7.10), kot so ime, priimek, elektronski naslov, sporočilo in gumb za pošiljanje našega sporočila. Glavno kratko kodo [contact-form-7 id="280" title="contact_form"] smo kopirali in jo dodali pod stran za kontakt, kjer se bo prikazala. 30

42 Slika 7.10: Ustvarjanje nove kontaktne forme Na glavni nakupovalni strani imamo več možnosti (Slika 7.11), kot so: sortiranje in prikaz izdelkov po datumu, ceni in imenu, prikaz mini košarice, filtriranje in prikaz izdelkov po kategorijah in ceni, prikaz izdelkov, ki so si jih v zadnjem času ogledali ljudje. 31

43 Slika 7.11: Nakupovalna stran Elementi, kot so mini košarica, filtriranje izdelkov po kategorijah in ceni ter izdelki, ki so si jih v zadnjem času ogledali ljudje, predstavljajo dodatki oziroma po angleško widgets 2, ki dodajajo različne funkcionalnosti spletne trgovine. Seznam razpoložljivih dodatkov in območij, kjer prikažemo te dodatke, najdemo pod Appearance/Widgets v nadzorni plošči WordPressea. Te dodatke lahko dodamo v glavi ali nogi spletne strani kot tudi v stranski vrstici, ki je na levi ali desni strani (Slika 7.12). V nogi smo dodali tudi widgeta za povezavo s socialnimi omrežji. 2 Widget je majhen blok kode, ki izvaja določeno funkcijo. 32

44 Slika 7.12: Vrste dodatkov in območij za prikaz dodatkov Nakupovalno stran smo naredili tako, da se prikazujejo trije izdelki na vrstico, zato smo napisali in dodali funkcijo v datoteki functions.php (Slika 7.13): Slika 7.13: Funkcija za prikaz števila izdelkov na eno vrstico Sortiranje izdelkov po ceni in datumu je že bilo v sklopu teme, ki smo jo namestili. Mi smo dodali še eno opcijo, da lahko izdelke sortiramo tudi po imenu. Zato smo napisali in dodali funkcijo v functions.php (Slika 7.14): 33

45 Slika 7.14: Funkcija za sortiranje izdelkov po imenu Vidimo, da imamo pri vsakem produktu na voljo gumb, ki nam omogoča, da ga direktno dodamo v košarico za nakupovanje (Add to cart) ali da pogledamo opcije, ki jih ima izdelek (View options), potem se odločimo, ali ga bomo dodali v košarico za nakup ali ne. Za to smo napisali in dodali funkcijo v functions.php, če izdelek nima opcije za izbiranje, prikaže Add to cart, če ima, pa prikaže View options (Slika 7.15): Slika 7.15: Funkcija za prikaz tekst gumba za nakup pri vsakem izdelku 34

46 Potem smo dodali še eno funkcijo, ki preveri, ali smo na strani, kjer je naša košarica ali na strani za plačilo, potem mora skriti stransko vrstico, kjer so prikazani vsi naši dodatki oziroma widgeti (Slika 7.16): Slika 7.16: Funkcija za skrivanje stranske vrstice Na strani, kjer se nahaja košarica, imamo možnost pogledati podatke o naročilu, posodabljati število izdelkov, izbrisati dodan izdelek in nadaljevati na strani za plačilo (Slika 7.17). Slika 7.17: Prikaz košarice 35

47 Dodali smo še možnost oziroma funkcijo v functions.php, da lahko s klikom na en gumb izbrišemo vse dodane izdelke v košarici (Slika 7.18): Slika 7.18: Funkcija za brisanje vseh dodanih izdelkov v košarici Pri posameznem produktu lahko pogledamo ceno izdelka, število primerov, ki jih želimo od tega produkta, izbira barv (če je produkt na voljo v več barvah), opis in specifikacije izdelka ter slike (Slika 7.19). 36

48 Slika 7.19: Prikaz posameznega produkta Specifikacije izdelka smo dodali s pomočjo vtičnika Custom Product Tabs for WooCommerce. Ta vtičnik nam omogoča dodajanja novega zavihka pri dodajanju novega produkta, kjer ustvarimo nov zavihek, vnesemo ime zavihka in s pomočjo HTML in CSS kode ustvarimo listo, ki se prikaže kot specifikacija produkta (Slika 7.20). 37

49 Slika 7.20: Dodajanje novega zavihka pri posameznem produktu Pri izdelavi smo naredili veliko grafičnih sprememb. Grafične spremembe smo dodajali in urejali v datoteki style.css. Pri vsakem izdelku se prikaže dodatni gumb, ki nam prikaže, če ima izdelek popust. Videz gumba smo spremenili s pomočjo CSSja v datoteki style.css (Slika 7.21), tako da smo spremenili barvo ozadja, pisave, obrobe itd. Slika 7.21: CSS koda za spremembo videza gumba Na vseh gumbih smo spremenili barvo ozadja kot tudi obliko gumba in barvo pisave z naslednjo CSS kodo (Slika 7.22): 38

50 Slika 7.22: CSS koda za spremembo barve ozadja in pisave ter oblika gumba 39

51 8 SKLEP V diplomskem delu na začetku smo predstavili, kaj predstavlja sistem za upravljanje vsebin in katere so njegove funkcionalnosti, kot tudi, da poznamo več vrst takšnih sistemov. Potem smo predstavili sistema WordPress. Najprej smo predstavili zgodovino WordPressa, idejo, kako je bil razvit in da temelji na programskem jeziku PHP. Potem smo opisali, katere so prednosti in slabosti tega sistema. V nadaljevanju smo opisali zgradbo sistema WordPress. Ugotovili smo, da je WordPress sistem, ki je primeren za majhne in tudi velike spletne trgovine. Ugotovili smo, da v WordPressu naredimo spletno trgovino s pomočjo vtičnika WooCommerce. V praktičnem delu smo najprej namestili WordPress na lokalnem računalniku in opisali celotni postopek nastavitve. V nadaljevanju smo namestili WordPress, se prijavili v njegovo nadzorno ploščo in namestili WooCommerce vtičnik za izdelavo spletne trgovine. Opisali smo celotni postopek nastavitve in konfiguracije vtičnika. Po namestitvi WordPressa in WooCommercea, smo opisali, katere vrste plačilnih metod imamo pri spletnih trgovinah. V tem poglavju smo opisali, kaj moramo upoštevati pri izbiri način plačevanja, če ne želimo imeti dodatnih stroškov, ker nekateri načini plačila potrebujejo dodatno opremo in naprave za delovanje. V nadaljevanju smo opisali, katere tehnologije in orodja smo uporabili za razvoj spletne trgovine. Pri razvoju diplomskega dela smo opisali namestitev teme za trgovino, postopek dodajanja produktov in kategorij, urejanje ali brisanje nekaterih privzetih funkcionalnosti, dodajanje novih. Na koncu smo predstavili našo rešitev. Cilj diplomskega dela je bila izdelava spletne trgovine, ki bo temeljila na odprtokodnem sistemu za upravljanje vsebin WordPress in odprtokodnem vtičniku WooCommerce. V prihodnje lahko izboljšamo spletno trgovino na ta način, da jo lahko razširimo in imamo več kategorij. Z nekaj dodatnega dela jo lahko dejansko uporabimo za prodajo izdelkov na spletu. To pomeni, da bomo morali plačati za domeno in gostovanje, ker trenutno imamo WordPress nameščen na lokalnem računalniku. 40

52 Na koncu lahko povem, da sem se veliko naučila o spletnih trgovinah, o različnih vrstah sistemov za upravljanje vsebin, načinih plačevanja v spletnih trgovinah, funkcionalnosti, ki jih WordPress in WooCommerce ponujata itn. Znanje, ki sem ga pridobila, sem ga uporabila za izdelavo spletno trgovino, ki bi nam lahko koristila v prihodnje za prodajo izdelkov na spletu. 41

53 9 VIRI IN LITERATURA [1] WordPress. Dostopno na: [ ] [2] Content management system. Dostopno na: Content_management_system [ ] [3] WordPress. Dostopno na: [ ] [4] How to Start an Online Store. Dostopno na: [ ] [5] Safe Online Payment Methods. Dostopno na: [ ] [6] Getting Started With WordPress Development. Dostopno na: [ ] [7] Beginner s Guide to WordPress File and Directory Structure. Dostopno na: [ ] [8] What is: Content Management System. Dostopno na: [ ] [9] Get an Overview of Types of Content Management Systems. Dostopno na: [ ] [10] Pros and Cons of Using WordPress Ecommerce Website Development. Dostopno na: [ ] 42

54 [11] A SHORT HISTORY LESSON ON WORDPRESS IN 600 WORDS. Dostopno na: [ ] [12] What is WordPress? How does it work?. Dostopno na: [ ] [13] What are the pros and cons of making a WordPress website. Dostopno na: [ ] [14] WordPress Files and Directory Structure. Dostopno na: [ ] [15] Choosing payment methods. Dostopno na: [ ] [16] Alternative payments. Dostopno na: [ ] [17] WooCommerce. Dostopno na: [ ] [18] WooCommerce How to Install and Configure Storefront Theme. Dostopno na: [ ] [19] WooCommerce Different Product Types. Dostopno na: [ ] [20] W3Schools Online Web Tutorials. Dostopno na: [ ] 43

55 44

56 45

57 46

58 47