Svetlana Štrbac -Savić Aleksandar Simović Nada Staletić ... · Očigledno da je većina poslovnih sistema svesna činjenice da elektronsko poslovanje jeste neminovnost, većina

Priručnik za vežbe iz predmeta:

Elektronska trgovina

Svetlana Štrbac-Savić

Aleksandar Simović

Nada Staletić

Dušan Čoko

Beograd 2014.

Priručnik za vežbe iz predmeta: Elektronska trgovina

Svetlana Štrbac-Savić, Aleksandar Simović, Nada Staletić, Dušan Čoko

prvo izdanje

Recenzenti:

dr Miroslav Lutovac, profesor Univerziteta Singidunum

dr. Slobodanka Đenić, profesor Visoke škole elektrotehnike i računarstva

Izdavač:

Visoka škola elektrotehnike i računarstva strukovnih studija, Beograd

Za izdavača:

dr Dragoljub Martinović, direktor

Korice:

Aleksandar Simović

Tehnička obrada:

Dušan Čoko

Štampa:

Školski servis Gajić, Beograd

Tiraž: 80

ISBN: 978-86-7982-194-2

CIP - Каталогизација у публикацији

Народна библиотека Србије , Београд

004 . 738 . 5 : 339 ( 075 . 8 ) ( 076 )

PRIRUČNIK za vežbe iz predmeta

Elektronska trgovina / Svetlana Štrbac-Savić

... [et at . ] . - 1. izd. – Beograd : Visoka

škola elektrotehnike i računarstva strukovnih

studija, 2014 (Beograd : Školski servis

Gajić ). - 136 str. : graf. prikazi, tabele ;

30 cm

Tiraž 80. – Bibliografija: str. 136.

ISBN 978-86-7982-194-2

1. Штрбац-Савић, Светлана , 1972- [аутор]

a) Електронска трговина – Вежбе

COBISS.SR-ID 206050316

Ime i prezime studenta:

Broj indeksa:

Smer:

Vežba Datum Potpis

1

2

3

4

5

6

7

8

9

10

11

12

Datum Ocena Asistent

Sadržaj

Instalacija Apache WebServera 1

OsCommerce

Instalacija CMS Open Source softvera osCommerce 9

Izlog elektronske prodavnice 18

Pasusi na početnoj strani 24

Konfiguracija elektronske prodavnice 30

Online Catalog i Info boxovi 39

Registracija kupaca, kupovina, izveštavanje, STS i bezbednost 52

Magento

Magento instalacija i bezbednost 71

Upravljanje prodavnicom: Opšta podešavanja, kreiranje taksi i kategorija 79

Upravljanje prodavnicom: Kreiranje atributa, proizvoda, menadžment korisnika i Magento Connect

94

Kreiranje stranica, statičnih blokova i šablona za newsletter 114

Teme za Magento prodavnicu 126

Literatura 136

1

Broj preduzeća koja bi želela da koriste Internet je veliki. Međutim, kada se pogledaju sajtovi firmi, može se uočiti da imaju veoma oskudan sadržaj, ili sadržaj koji više odgovara klasičnom oglašavanju sa osnovnim podacima o preduzeću. Čak i oni poslovni sistemi koji se bave prodajom, često imaju drugačiju ponudu na Internetu od klasične, ili ako i privuku potrošače do prodajnih objekata, nemaju proizvode koje nude preko Interneta.

Očigledno da je većina poslovnih sistema svesna činjenice da elektronsko poslovanje jeste neminovnost, većina još uvek pokušava da odloži uvođenje elektronske trgovine. To posebno važi za mala i srednja preduzeća koja očigledno veruju da je za njih to preskupa investicija. I dok statična prezentacija može da se uradi za skroman iznos, i kao takva može da bude putokaz do osnovnih informacija o poslovnom sistemu, dinamička prezentacija sa elementima elektronske trgovine je za većinu još uvek daleka budućnost.

Elektronska trgovina i njena implementacija ne mora da bude preskupa investicija. Elektronska prodavnica korišćenjem Open Source softvera je jednostavan način realizacije elektronske trgovine. Naravno, elektronska prodavnica zahteva i angažovanje stručnjaka, školovanih za tu vrstu posla ili obukom zaposlenih čija uloga se sada značajno menja u poslovnom sistemu.

Veliki broj programera i računarskih korisnika podržava Open Source softver i zalažu se za neograničen pristup izvornom kodu nekog programa. Pristalice otvorenog softvera smatraju da je njihov program bolji od softvera zatvorenog tipa, jer rade zajedno i neograničeno.

Apache Web server je odigrao značajnu ulogu sredinom devedesetih godina 20. veka. Ovaj Web server pokreće preko 150 miliona Web lokacija širom sveta! U avgustu 2011., Apache opslužuje 64.32% svih svetskih sajtova i preko 77% najposećenijih sajtova na svetu. Apache je server modularne arhitekture, a različite programske platforme se s njim uvezuju preko specijalnih modula, na primer mod_php, mod_python, mod_mono, mod_aspdotnet.

1 Apache: Instalacija Apache web servera

2

PHP – programski jezik skript tipa posebno pogodan za razvoj Web aplikacija na strani servera za dinamičko generisanje Web stranica. Verzija 5 ovog programskog jezika takođe poseduje većinu objektno orijentisanih karakteristika svojstvenih objektno orijentisanim jezicima kao što su C++, Java, C# ili Python. Sintaksa PHP-a je slična sintaksi C-a i Perl-a. Podržava većinu popularnih baza podataka, uključujući MySQL, SQLite, MS SQL, Oracle itd., operativne sisteme Windows, Linux, Solaris, OS X i različite Web servere, kao što su Apache, MS IIS. PHP skraćeno od Hypertext Preprocessor je, na mnoge načine, reprezentativni Open Source projekat, koji je rastao od malog projekta koji je zadovoljavao potrebe male grupe pogramera koje ostali alati nisu mogli da zadovolje, da bi kasnijom rafinacijom uspevao da zadovolji potrebe sve veće baze programera. PHP je napisan kao skup CGI binarnih fajlova u C programskom jeziku od strane danskog/grenlandskog programera Rasmusa Lerdorfa 1994. godine kako bi zamenio mali skup Perl skripti koje je koristio za održavanje lične stranice. Lerdorf je inicijalno napravio PHP kako bi prikazao svoj rezime i kako bi prikupio određene podatke, poput onih o broju poseta na svojoj stranici.

Personal Home Page Tools se pojavio u javnosti 8. juna 1995. godine nakon što ga je Lerdorf kombinovao sa vlastitim Form Interpreter-om kako bi napravio PHP/FI (ovo izdanje se smatra drugom verzijom PHP-a). Kako je ovo izdanje postalo ekstremno popularno, mnogi programeri su se priključili Lerdorfu. U junu 1998. godine, sa verzijom 3.0, više od 50 000 korisnika je baziralo svoja Web rešenja na PHP-u, ali je do početka 1999. premašio i najsmelija očekivanja autora: milion aktivnih korisnika. Tada je postalo očigledno da korisnici žele da pišu aplikacije koje daleko premašuju namenu za koju je jezik u startu napravljen.

Dva programera PHP jezgra, Zeev Suraski i Andi Gutmans su preuzeli inicijativu da ponovo napišu samo jezgro i PHP parser, koje je rezultovalo novim jezgrom PHP-a – Zend Engine. Rezultat ovog rada bio je PHP4, izdat u maju 2000. godine. Samo par meseci pošto je zvanično izdat, PHP4 je bio instaliran na 3.6 miliona Web lokacija.

MySQL je Open Source sistem za upravljanje relacionim bazama podataka. Ima preko 7 miliona instalacija. U sprezi sa prethodno navedenim tehnologijama, a zahvaljujući svojoj skalabilnosti, koristi se u projektima kao što su: osCommerce, Joomla, Wordpress, Drupal, Geeklog, PHPNuke, phpWCMS, TYPO3, Xoops, phpBB, Wikipedia, Facebook, Google i mnogi drugi.

3

Mnogi Web programeri i dizajneri iz njihovog iskustva znaju da nije jednostavno instalirati i pokrenuti Apache Web server, a sve postaje još teže ako se želi dodati relaciona baza podataka MySQL, programski skript jezik PHP ili Perl. XAMPP je kolekcija programa koji omogućavaju uspešnu realizaciju infrastrukture za funkcionisanje Web aplikacija. Može se instalirati na sopstvenom računaru korisnika, u lokalnoj mreži kao i na serveru koji je namenjen za online upotrebu izvan lokalne mreže. XAMPP je jednostavan za instaliranje i neophodan je kao preduslov za funkcionisanje serverskih zahteva.

Softver XAMPP svojim karakteristikama daje izuzetnu podršku Web razvoju. Implementiranim modulima objedinjuje funkcionalnosti Web servera.

Modul: Apache – sa funkcijom Web servera obezbeđuje localhost-u, što u računarstvu i računarskim mrežama nosi značenje „ovaj računar tj. lokalna mašina“ sa IP adresom 127.0.0.1 da radi kao Apache Web server na istoj IP adresi lokalne mašine na HTTP portu 80.

Modul: MySQL – sa funkcijom upravljanja relacionom bazom podataka i mogućnošću korišćenja iste.

Modul: PHP – skript jezik sa funkcijom razvoja Web aplikacija na strani servera za dinamičko generisanje Web stranica; u ovom slučaju Apache Web servera koga pokreće XAMPP softver.

4

Uputstvo za rad

Instalirati aplikaciju koja se može naći na adresi: http://www.apachefriends.org/en/xampp.html.Po završetku instalacije čekirati module prikazane na slici 1.1 i kliknuti na start:

Slika 1.1.XAMPP instalacija

Kada smo označili(čekirali)Apache i MySql module XAMPP aplikacije, osposobili smo kompjuter da izvršava zahteve Web servera.

U navigacionom Toolbar-u Web Browser-a ili Address Bar-u računara, pokrenućemo instalirani XAMPP. Kucamo: http://localhost/ i dobijamo ekran prikazan na slici 1.2:

http://www.apachefriends.org/en/xampp.html

5

Slika 1.2. XAMPP for Windows

Sledeći korak je da u aplikaciji koju smo pozvali, u sekciji: tools/phpmyadmin kreiramo novu bazu podataka koju nazivamo po izboru ili projektu koji radimo.

Napomena: nazvati bazu podataka po broju indeksa studenta. U ovom primeru bazu ćemo nazvati e-trgovina. Prikazano na slici 1.3. MySQL je još jedan softver otvorenog tipa koji se koristi za formiranje i ažuriranje baze podataka. Baza podataka je potrebna da bi se u njoj vodila, na primer, evidencija o zalihama u magacinu, ili podaci o klijentima koji kupuju u elektronskoj prodavnici.

Slika 1.3. Kreiranje baze podataka

Pre nego što počnemo istraživati mogućnosti elektronske trgovine i online prodavnice putem CMS-a i OpenSource rešenja, potrebno je da uradimo sledeće: premestiti fajlove koji nose ime: Index.php i Index.htm.Ukoliko se ta dva fajla ne premeste, prilikom kucanja: localhost, odnosno 127.0.0.1 u navigacionom Toolbar-u Web Browser-a prikazaće se prozor prikazan na slici 1.2. To se događa zato što na strani klijenta koji preko Interneta pristupa sajtu koristi program koji se naziva browser, a koji se koristi da primljeni kôd prikaže na monitoru. U osnovi to je HTML skript fajl, ali u njega mogu biti i delovi kôda na drugim jezicima. Na strani servera postoji poseban program koji prima zahteve od klijenata, obrađuje ih i vraća klijentima odgovor koji Browser može da prikaže na monitoru klijenta.

Na strani Apache Web servera su fajlovi pisani na primer kao PHP skrip kôd koji Apache izvršava na klijentski zahtev.

Navedeni fajlovi koje treba premestiti se nalaze na sledećoj putanji: c:/xampp/htdocs/ u novonapravljeni direktorijum nazvan npr: indexxampp na sledeću lokaciju: c:/xampp/htdocs/indexxampp/.

6

Direktorijum htdocs predstavlja bitan direktorijum XAMPP-a jer se u njega smeštaju svi projekti. Kad smo ta dva indexa premestili, prilikom pokretanja Apache Web servera, kucanjem: http://localhost/ u navigacion Toolbar-u Web Browser-a ili Address Bar-u računara prikazaće se prozor prikazan na slici 1.4. (Index of:).

Ako želimo da napravimo novu bazu za neki novi projekat npr. Joomla, WordPress, Drupal i sl. da bi dobili prozor prikazan na slici 1.2, kucaćemo:

http://localhost/ indexxampp/ ili

http://localhost/ pa onda klikom na direktorijum indexxampp pozvati željeni fajl koji nosi ime:index.

Slika 1.4. Nakon premeštanja fajlova koji nose ime: index u c:/xampp/htdocs/indexxampp/

7

Samostalan rad studenta

Da li instalacija XAMPP-a može da se uradi sa USB porta, CD-a ili putem Interneta?

Koji je tip instalacionog fajla?

Šta treba označiti i zbog čega kada se instalira XAMPP (prikazano na slici 1.1)? Da li se potrebna polja mogu čekirati nakon instalacije?

Prilikom kreiranja nove baze podataka, kako ste nazvali bazu podataka?

Zašto je važno da se ime baze podataka zapamti?

U kom direktorijumu je smeštena baza podataka i gde se ona nalazi u računaru?

Zašto je važno da se iz direktorijuma (foldera) uklone fajlovi koji nose ime: index?

Gde je smeštena instalacija XAMPP-a na računaru?

1

9

Od Theodora Holm Nelsona, rođenog 1937. godine, Američkog sociologa i filozofa, pionira informacionih tehnologija i pronalazača koji je prvi upotrebio izraz hypertext i hypermedia 1963. i objavio članak na tu temu 1965. nazvan Project Xanadu, do Tim Berners-Lee-ja tvorca World Wide Web-a koji je na legendarnom NeXT računaru na institutu CERN 25. decembra 1990. uspešno izveo Microcosm komunikaciju između Web servera i HTTP klijenta. Tada, prva adresa, prve Web strane, je bila: http://info.cern.ch/hypertext/WWW/TheProject.html, a danas ih ima: (slika 2.1).

Slika 2.1.Odnos prisustva Web sajtova na Internetu

Web space se drastično menjao, velikom brzinom, od statičkih tekstualnih stranica do potpuno interaktivnih dinamičkih Web 2.0 aplikacija.

CMS (eng. Content Management System), odnosno sistem za upravljanje sadržajem predstavlja programsku aplikaciju za upravljenje sadržajem Web sajta i daje mogućnost administratoru i moderatoru sajta da samostalno održava sadržaj. Da menja postojeći tekst, dodaje novi, da ubacuje slike i flash objekte, dodaje nove strane i sl. bez poznavanja tehnologije izrade Web sajtova i bez programerskog znanja.

2 osCommerce: Instalacija CMS OpenSource softvera osCommerce

10

Pre pojavljivanja CMS-a, kreiranje i ažuriranje Web stranica bilo je zasnovano na poznavanju HTML-a. Svaki put kad je bilo neophodno izmeniti i ažurirati sadržaj, Web dizajneri i Webmasteri su koristili razne alate kao što je Adobe Dreamweaver ili Notepad2 da bi „ručno“ izvršavali postavljene zadatke. Kada se radilo o manjim Web sajtovima to i nije bilo toliko komplikovano, međutim danas čak i „male“ prezentacije imaju veliki broj strana, što bez sistema za upravljanje sadržajem stvara kompleksne poslovne poduhvate sa potrebom poznavanja tehnologija i programskih jezika.

CMS ima mnoge prednosti zbog svoje dinamičke strukture. Jednostavne izmene sadržaja bivaju vidljive u celoj prezentaciji bez obzira na veličinu. Sadržaj je smešten u bazu podataka, umesto u velikom broju statičkih HTML fajlova. To omogućava organizaciju, reorganizaciju i jednostavnu promenu kad god je to neophodno.

Content Management Systemimajako veliki broj funkcionalnosti koje omogućavaju laku manipulaciju sadržajem i olakšavaju objavljivanje novih podataka, upravljanje dokumentima i digitalnim sadržajem.

Dakle, suština je jasna: Web rešenje softvera za administriranje Web sajtova. Veoma jednostavan koncept. Sa jedne strane imamo tzv. Frontend što posetioci vide prilikom posećivanja Web prezentacije i sa druge strane imamo tzv. Backend što predstavlja pristup kontrolnom panelu administratoru sajta. Javnom delu, Frontend-usajta može pristupiti svako od posetilaca, dok administrativnom delu, koji ima svoj zaseban Backend, pristupa administrator kao i moderatori, odnosno registrovani članovi koji imaju posebno definisan nivo pristupa od strane administratora sajta. Npr. Backend-u pristupa novinar koji može napisati i objaviti novu vest na sajtu, međutim, njegov pristup je ograničen i on ne može da uređuje strane, jer dozvolu za to imaju samo administratori ili Webmasteri.

Sa tehničke strane, Content Management Systemse sastoji iz: baze podataka, programskog jezika išablona za prikaz (Template-a). Svako dinamičko CMS rešenje sadrži navedene delove sistema, a razlika je u programskom jeziku i odabranoj bazi podataka.

CMS Open Source sistemi za upravljanje sadržajem, podržani su zajednicom dizajnera i programera koji redovno rade na njihovom usavršavanju. Sva rešenja imaju dosta jaku online podršku u vidu dodatnih modula i komponenti, kao i foruma za podršku korisnicima.

11

Ako bi govorili o prednostima i nedostacima Open Source rešenja, onda bi kao mogući nedostatak mogli izdvojili sigurnost, upravo iz razloga otvorenog koda. Taj „nedostatak“ bi se sveo na minimum ako se sistem redovno ažurira novim verzijama i ako se redovno radiBackup. Dosta slučajeva kada su CMS sajtovi hakovani i obarani je neblagovremeno apdejtovanje i kašnjenje administratora saažuriranjem, gde su hakerima meta upravo nedostaci predhodnih verzija softvera (tzv. „rupe“).

Open Source softver je softver koji je besplatan za preuzimanje, instalaciju, nadogradnju i korišćenje čiji je izvorni kod dostupan unutar Open Source licence svim korisnicima. Može se menjati, prepravljati i poboljšavati sadržaj. To znači da uz Open Sourcesoftvere dolazi i čitav izvorni kod u njegovom programskom jeziku, što nije slučaj sa plaćenim softverom.

Jedan od poznatih sistema za upravljanje sadržajem za izradu elektronskih prodavnica je osCommerce.

12

Uputstvo za rad

Kada smo kreirali bazu i osposobili mašinu za obavljanje specifičnih zahteva Web servera, možemo krenuti u instalaciju osCommerce-a koju možemo pronaći na adresi: http://www.oscommerce.com/.

Arhivu osCommerce raspakovati u: c:/xampp/htdocs/ u novokreirani direktorijum. Napomena: novokreirani direktorijum nazvati po broju indexa studenta u koji će se raspakovati arhiva osCommerce-a. U ovom primeru neka to bude direktorijum: oscommerce. Dakle, raspakovaćemo arhivu Open Source CMS softvera u c:/xampp/htdocs/oscommerce/, odnosno: c:/xampp/htdocs/ime_vaše_prodavnice/.

Instalaciju pokrećemo na sledeći način: U navigacionom Toolbar-u Web Browser-a ili Address Bar-u računara, kucamo: http://localhost/ime_vaše_prodavnice/catalog/, i dobijamo uvodni korak za start instalacije i prozor prikazan na slici 2.2. Instalacija se može pokrenuti i kucanjem komande: http://localhost/ u navigacionom baru Web browsera ili Address Bar-u računara, klikom na novokreirani direktorijum: ime_vaše_prodavnice, a potom klikom na catalog.

Slika 2.2. OsCommerce instalacija

13

Proći sledeća 4 koraka pri instalaciji!

U prvom koraku ispuniti polja kao što je prikazano na slici 2.3. Nalog administratora (root) je matični direktorijum administratora i ima neograničen pristup sistemu, jer se na sistem prijavljujete kao administrator da biste mogli obavljati poslove bez ograničenja.

Slika 2.3.Database Server

Drugi korak definiše WWW adresu online prodavnice i direktorijum gde je online prodavnica instalirana na serveru. Slika 2.4.

Slika 2.4.Web Server

Treći korak (slika 2.5) definiše ime online prodavnice, njenog vlasnika, e-mail vlasnika. I što je bitno zapamtiti, to je admin username & password, jer su ti podaci potrebni za logovanje, prijavljivanje na admin panel online prodavnice, tzv.: Backend online store.

14

Slika 2.5.Online Store Settings

Četvrti korak je završetak instalacije. Klikom na catalog, link vodi na onlinecatalog prodavnice, odnosno početnu stranu (tzv. Frontend), dok administration tool link vodi na admin panel. Slika 2.6.

Slika 2.6. Završetak instalacije

Web adresa online prodavnice je: http://localhost/ime_vaše_prodavnice/catalog/. Po prvom pokretanju, na početnoj strani online catalog-a pojaviće se dva upozorenja (slika 2.7). Prvo upozorenje se odnosi na postojanje instalacionog direktorijuma koga treba obrisati zbog bezbednosnih razloga.

Slika 2.7. Upozorenja po završetku instalacije osCommerce

15

Za pronalaženje instalacionog direktorijuma ispratiti sledeću putanju:

c:/xampp/htdocs/ime_vaše_prodavnice/catalog/install/.

Drugo upozorenje se odnosi na mogućnost upisivanja u fajl: configure.php što predstavlja potencijalni sigurnosni rizik. Potrebno ga je postaviti kao Read-only. U notepadu2, koji se može pronaći na sledećoj Web lokaciji:

http://sourceforge.net/projects/notepad2/files/notepad2/1.1.0.6/Notepad2v1006.zip/download.

Putanja do fajla: configure.php je:

c:/xampp/htdocs/ime_vaše_prodavnice/catalog/includes/configure.php/.

Login, odnosno prijavljivanje na admin panel (Backend online store) se izvršava sa sledeće Web adrese: u navigacionom Toolbar-u Web Browser-a ili Address Bar-u računara kucate: http://localhost/ime_vaše_prodavnice/catalog/admin/ i upisujete podatke zaokružene na slici 2.5.

http://sourceforge.net/projects/notepad2/files/notepad2/1.1.0.6/Notepad2v1006.zip/download

http://sourceforge.net/projects/notepad2/files/notepad2/1.1.0.6/Notepad2v1006.zip/download

16


U kom direktorijumu se instalira Open Source CMS softver osCommerce i gde se taj direktorijum nalazi u računaru?

Zašto se localhost upisuje u polje za Database Server i gde se nalazi na računaru?

Zašto je (korisničko ime) username: root (slika 2.3)?

Zašto se password (lozinka) ne upisuje?

Napišite ime baze koje ste uneli (slika 2.3):

Upišite WWW adresu elektronske prodavnice i direktrorijum gde je instalirana:

Upisano ime elektronske prodavnice je:

Upisani vlasnik prodavnice je:

Upisani e-mail vlasnika elektronske prodavnice je:

17

Korisničko ime administratora elektronske prodavnice je:

Lozinka administratora elektronske prodavnice je:

Koji direktorijum je potrebno obrisati po završetku instalacije osCommerce-a?

Koji fajl treba postaviti da bude Read-only?

Obrazložiti pitanje 12 i 13, zašto je to potrebno uraditi?

Koju WWW adresu treba upisati u navigacionom Toolbar-u Web Browser-a da bi se ulogovali kao administrator elektronske prodavnice?

18

Svrha e-prodavnice je da se kupac obavesti o proizvodu i dovede u situaciju da želi da kupi proizvod. Možda je najbolja ilustracija elektronske prodavnice da se ona tumači kao izlog u koji kupac pogleda, pronađe proizvod koji ga interesuje, a zatim i uđe u prodavnicu. Osnovni problem koji utiče na mnoge poslovne sisteme da ne uvode elektronsku prodaju jeste taj da postoje brojni problemi naplate preko Interneta, uključujući i strah od prevare i krađe, kako sa strane kupca tako i sa strane prodavca.

Izlog kao i svaki izlog mora biti atraktivan, a nikako prenatrpan uzorcima svih proizvoda koji se nalaze u prodavnici. Izlog elektronske prodavnice mora trenutno da se adaptira željama potencijalnog kupca, za razliku od klasičnog izloga koji se ne menja često. Pre bi se moglo reći da se u izlogu elektronske prodavnice nalazi promoter koji komunicira sa prolaznicima, pokušava da sazna šta žele i trenutno donosi odluku o tome šta je najbolja ponuda za posetioca, slično promoterima ispred restorana koji pozivaju goste da probaju proizvode restorana u nekom turističkom mestu.

A kako prepoznati želje onih koji šetaju po Internetu, ili traže nešto na Internetu, kako ih zainteresovati i predložiti nešto što ih privlači, to je cilj i svrha elektronske prodavnice. I što je broj prodavnica veći, i broj posetioca raznovrsniji, to je teže privući kupce i prodati im proizvod.

Jedan od ključnih elemenata uspešne elektronske prodavnice je izgradnja brenda. Zatim sledi izgradnja poverenja, uveravanje u sigurnost, garantovanje kvaliteta. Najgora stvar koja se može desiti jeste da se potencijalni kupci uplaše, osete prevarenim, pokaju zbog kupovine nekvalitetnog proizvoda, odustanu od kupovine jer nema željenog proizvoda ili se predugo čeka na uslugu.

To konkretno znači da promoter mora znati šta trenutno ima u magacinu, u kom roku i pod kojim uslovima može da isporuči proizvod i da li može da zadovolji zahteve kupca u pogledu roka isporuke.

3 osCommerce: Izlog elektronske prodavnice

19

Uputstvo za rad

Izmena Header-a:

Izabranu sliku za header (npr. logo) ubacimo u sledeći direktorijum:

c:/xampp/htdocs/ ime_vaše_prodavnice/catalog/images/

U notepadu2 otvorimo file: headep.php sa sledeće putanje:

c:/xampp/htdocs/ ime_vaše_prodavnice/catalog/includes/header.php

Na liniji kôda 57, kao što je prikazano na slici 3.1 linkujemo sliku po njenom imenu.

Slika 3.1. header.php

Izmena početne strane Online Catalog-a:

Sada ćemo izmeniti izgled početne strane online kataloga.

Krenimo od naslova na početnoj strani. Fajl koji ćemo menjati je: index.php, i nalazi se na sledećoj putanji:

c:/xampp/htdocs/ ime_vaše_prodavnice/catalog/includes/languages/english/index.php

U notepadu2 ga otvorimo i zamenimo liniju 38 kôda koji se odnosi na Heading Title na početnoj strani i liniju 20 kôda za strane kategorija. Rename ostalih Headin Title uradite jer pravite online shop na srpskom jeziku.

Prikazano na slici 3.2.

20

Slika 3.2. Izmena naslova

Ovako su definisani naslovi u CSS-u na liniji koda 170:

td.pageHeading, div.pageHeading {

color:#9A9A9A;

font-family:Verdana,Arial,sans-serif;

font-size:20px;

font-weight:bold; }

CSS se nalazi na sledećoj putanji:

c:/xampp/htdocs/ ime_vaše_prodavnice/catalog/stylesheet.css.

To je mesto gde možete menjati i definisati izgled izabrane klase, odnosno elementa kao što su boja, font i mnoge druge čarolije.

Promena slike:

Sada ćemo izmeniti sliku prikazanu u gornjem desnom uglu uokvirenu crnom bojom (slika 3.3). Izabranu sliku prebaciti u direktorijum:

c:/xampp/htdocs/ ime_vaše_prodavnice/catalog/images/

21

Slika 3.3. Frontend elektronske prodavnice

U notepadu2 otvorimo file: index.php sa sledeće putanje:

c:/xampp/htdocs/ime_vaše_prodavnice/catalog/index.php.

Na liniji koda 291 uraditi rename postojeće slike sa izabranom slikom. Linkujmo sliku po njenom imenu (slika 3.4).

Slika 3.4. Ime i link izabrane slike

Menjanje dimenzije slike koju smo izabrali, izvodi se na sledeći način:

U admin panelu u sekciji configuration/images definišemo veličine:

Heading Image Height & Heading Image Width. Prikazano na slici 3.5.

Slika 3.5. Definisanje dimenzija novoubačene slike iz admin panela

22

Uraditi fizički backup baze i elektronske prodavnice u posebnom direktorijumu C particije:

Baza podataka se nalazi na sledećoj lokaciji: C:\xampp\mysql\data\ime_vaše_baze

Elektronska prodavnica se nalazi na sledećoj lokaciji: C:\xampp\htdocs\ime_vaše_prodavnice

23


Kako se menjaju naslovi na početnoj strani?

U kom fajlu su definisani fontovi za naslovnu stranu?

U koji direktorijum se smeštaju slike za naslovnu stranu? (napisati celu putanju)

U kom fajlu na kojoj liniji kôda se linkuje izabrana slika?

U kojoj sekciji administratorskog panela se definišu veličine slika?

Koji fajl je potrebno otvoriti da bi linkovali novu logo sliku?

Fizički backup baze podataka i elektronske prodavnice je sačuvan na sledećoj lokaciji na C particiji:

24

Elektronska trgovina može imati za posledicu fundamentalne promene u smislu kako se posao obavlja, a takođe i otpor ka promenama od strane zaposlenih, prodavaca i klijenata. Edukacija i obuka tokom dužeg vremenskog perioda nude moguće rešenje ovog problema.

Integracija e-trgovine u poslovno okruženje uključuje planiranje, korporacijske resurse u odnosu na ostale projekte, objedinjavanje baze podataka, dostupnost iste svim zaposlenim uz definisanje nivoa pristupa, implementaciju ostalih softverskih aplikacija i infrastrukturu.

Nedostatak stručnog osoblja predstavlja problem. Malo ljudi je stručno za obavljanje poslova vezanih za elektronsku trgovinu. Postoje mnoga pitanja vezana za sprovođenje e-trgovine koja zahtevaju stručnost, npr. kada ponuditi specijalne promocije na Internetu? Kako definisati informacioni dizajn elektronske prodavnice? Koje funcionalnosti upotrebiti? I konačno, kako učiniti prodaju izvesnom i kako obezbediti skori povratak kupca na sajt?

Koliko puta ste otvorili neku Web stranu i pitali se šta ovaj sajt nudi? Pa čak ni posle otvaranja tri, četiri strane ne možete sa tačnošču ustanoviti čime se sajt bavi! Posmatrajući takve sajtove, uočićete da nisu dobro struktuirani i da su teški za brzo snalaženje. A čak i kada ste potencijalno zainteresovan posetilac, ti sajtovi Vam ne daju jasne smernice šta treba da uradite.

Sadržaj je informacija od interesa za posetioca. To je korisna informacija koja za posetioca predstavlja vrednost. Dobar sadržaj izgrađuje poverenje u Vaš komercijalni Web sajt i predstavlja Vas kao stručnjaka. Kvalitetan i bogat sadržaj čini da se Web sajt posetiocu dopadne i da poželi da ga ponovo pogleda.

Osnovni sadržaj je koncizan tekst koji predstavlja Vaš proizvod ili uslugu. Tekst treba da ubedljivo obrazlaže korist koju kupac ima od Vašeg proizvoda i prednosti u odnosu na odgovarajući proizvod konkurencije.

Kvalitetan Web sadržaj pretvara posetioca Vašeg sajta u kupca Vaše robe ili usluge.

4 osCommerce: Pasusi na početnoj strani

25

Uputstvo za rad

Ubacićemo pripremljene tekstove za naslovnu stranu online catalog-a i podelićemo ih na pasuse, odnosno paragrafe i svakom dati naslov. Svaki paragraf treba da istakne najznačajnije osobine i pogodnosti proizvoda ili usluge. Organizovaćemo naslovnu stranu radi lakšeg upravljanja sadržajem i ažuriranja istog.

Prvo, locirajmo gde je i koji je potreban fajl? Potreban fajl je index.php i putanja do

istog je sledeća:

c:/xampp/htdocs/ime_vaše_prodavnice/catalog/includes/languages/english/index.php

Otvorimo ga u Notepadu2. Prikazano na slici 4.1.

Slika 4.1. index.php

Sada ćemo da ga malo sredimo! Podelićemo pasuse na delove radi lakše preglednosti.

Kada izdvojimo delove maskiranog teksta (slika 4.2 i slika 4.3), ubacujemo pripremljene tekstove u odvojene pasuse: uvodni, prvi, drugi i treći (uokvireno crvenom na slici 4.2 i na slici 4.3). Nazivi pasusa su uokvireni plavim na slici 4.2 i na slici 4.3.

26

Slika 4.2. Podeljeni pasusi

Slika 4.3. Podeljeni pasusi

Na kraju trećeg pasusa zatvorite otvorene tagove sa jednim brejkom i u produžetku trećeg pasusa kucajte sledeći kod:

</td></tr></table><br>’);

Insert Banner-a:

Ubacimo izabranu sliku za novi banner u sledeći direktorijum:

c:/xampp/htdocs/oscommerce/catalog/images/.

Na admin panel (Backend)online prodavnice, koja se nalazi na sledećoj adresi:

http://localhost/oscommerce/catalog/admin/

prijavimo se kao administrator, u sekciji: Tools/Banner Manager, klikom na new banner dodajemo novi (slika 4.4).

27

Slika 4.4.Banner Manager

Popunimo obavezna polja (slika 4.5) označena crvenom zvezdicom, pronađemo putanju do izabrane slike, odaberemo je i klikom na insert izvršimo ubacivanje novog banner-a. Vreme koje će izabrani banner biti vidljiv na sajtu možemo definisati kao što je prikazano je uokvireno crvenom bojom na slici 4.5.

Status novoizabranog banner-a mora biti aktivan. Ostali, ako ih ima više sa definisanim vremenima pojavljivanja na sajtu, isključe se klikom na crveno dugme na status baru kao što je pokazano na slici 4.4. Ostala polja: Banner URL, Banner Group i HTML Text, nisu obavezna.

28

Slika 4.5. Banner Manager

29


Koji fajl je potrebno otvoriti da bi se editovali (izmenili) pasusi na početnoj strani?

Koji kôd upisujemo da bi zatvorili tagove?

Šta će se desiti ukoliko pogrešan kôd upišemo?

U koji direktorijum treba kopirati (ubaciti sliku) za novi banner?

U kojoj sekciji backend-a se definiše vreme trajanja novog banner-a?

Koja je default veličina banner-a? (banner group)

Ako definišemo novu veličinu banner-a iz admin panela, šta će se desiti sa postojećim banner-om?

Opisati kako treba da izgleda početna strana Vaše elektronske prodavnice. Kakve informacije se stavljaju u prva tri pasusa na početnoj strani? Kako ste koncipirali naslove i banner?

30

Konfiguracija elektronske prodavnice i potrebna podešavanja vrše se na administratorskom panelu – Backend.

U sekciji Configuration/My Store definišu se informacije kao što su: vlasnik, zemlja iz koje elektronska prodavnica posluje, adresa, broj telefona, izbor prikaza cene sa porezom ili bez i drugo (prikazano na slici 5.1);

Slika 5.1.Configuration/MyStore

U sekciji Configuration/Customer se biraju polja za unos koja želimo da budu prikazana prilikom registracije novog kupca (prikazano na slici 5.2);

Postavljanje vrednosti na True, znači aktivaciju te opcije;

Postavljanjem vrednosti na False – deaktiviramo tu opciju osCommerce-a.

5 osCommerce: Konfiguracija elektronske prodavnice

31

Slika 5.2.Configuration/Customer

U sekciji Configuration/Product Listingdefinišemo šta želimo da bude vidljivo u Online Catalog-u – Frontendu (prikazano na slici 5.3). Potrebno je daDisplay Product Quantity, tj. količina proizvoda koja je na stanju bude vidljiva.

Slika 5.3.Configuration/Product Listing

U sekciji Locations/Taxes u odeljku Countries, uneti zemlju: Srbija klikom na new country (slika 5.4a), a sve ostale zemlje obrisati;

U istoj sekciji u odeljku Zones, klikom na new zone uneti ime zone: Beograd; kôd zone: 11000; a u trećem koraku pronaći zemlju koju smo u predhodnom unosu definisali i klikom na insert kreiramo zonu Beograd (slika 5.4b).

Ova dva koraka je potom potrebno ponoviti u sekciji Configuration/MyStore radi automatskog definisanja profakture/fakture za uplatu.

32

Zatim konfigurisati način za isporuku: Modules/Shipping Modules (slika 5.5a).

Po komadu npr. 255RSD ili

po težini paketa: do 1kg – 155RSD, do 5kg – 255RSD, preko 5kg – 600RSD.

Time omogućavamo da prilikom obavljanja registracije i kupovine, kad kupac unese svoju adresu, CMS sistem po automatizmu kreira cenu za isporuku.

(a) (b)

Slika 5.4. (a) Locations/Taxes/Countries (b) Locations/Taxes/Zones

(a) (b)

Slika 5.5. (a) Modules/Shipping Modules (b) Locations/Taxes/Tax Classes

Da bi automatsko kreiranje cene bilo potpuno funkcionalno, potrebno je definisati takse (PDV) po zonama, po klasama i iznose (cene) tih taksa. To radimo na sledeći način: u sekciji Locations/Taxes na admin panelu, klikom na Tax Classes unosimo novu taksu (slika 5.5b), a postojeći unos Taxable Goods obrisati;

Sledeći korak je postavljanje tax zone. U sekciji Locations/Taxes/Tax Zones klikom na insert, ubaciti novu zonu za porez: Srbija (slika 5.6a). Default tax zonu Florida, obrisati.

Potom, klikom na novokreiranu zonu, ubacimo (klikom na insert) – zemlja: Srbija – sve zone (slika 5.6b).

33

(a) (b)

Slika 5.6. (a) Locations/Taxes/Tax Zones (b) Locations/Taxes/Tax Zones/

U sekciji Locations/Taxes/Tax Rates/New Tax Rate insertujemo (ubacimo) novu zonu za porez (zonu za definisan porez: PDV) za kreiranu zemlju: Srbija, a potom ta dva koraka objedinimo sa definisanjem procenta PDV-a (slika 5.7). Ostale tax zone obrisati;

Slika 5.7. Locations/Taxes/Tax Rates/New Tax Rate

Sa završenim ovim unosom konfigurisali smo CMS Open Source osCommerce da automatski kreira PDV za unetu zemlju i grad našeg kupca prilikom njegovog naručivanja proizvoda.

Deo konfiguracije sistema za isporuku dovršavamo tako što u sekcij Configuration/ Shipping/Packaging (slika 5.8), u skladu sa izabranim proizvodima za prodaju putem elektronske prodavnice definišemo polja kao što su maksimalna težina za isporuku; Package Tare weight („Tare“ arapska reč za „odbaciti“); kao i za veće pakete – procenat uvećanja cene.

34

Slika 5.8. Configuration/Shipping/Packaging

U sekciji Modules/Payment Modules definišemo način plaćanja. Označiti i aktivirati plaćanje po profakturi i pouzećem (prikazano na slici 5.9);

Aktiviranje načina plaćanja putem opšte uplatnice je prikazano na slici 5.10.

Slika 5.9.Modules/Payment Modules

35

Slika 5.10. Način plaćanja: opšta uplatnica

Definisanje valute:

U sekciji Localization/Currencies klikom na New Currency ubacujemo novu valutu: Dinar (prikazano na slici 5.11a). Izbaciti Dolar, a za ubačenu valutu Dinar definisati njegovu vrednost u odnosu sa valutom Euro po današnjem srednjem kursu.

Ukoliko postavimo da dinar bude default valuta, onda je potrebno pravilno konfigurisati valutu euro (prikazano na slici 5.11b).

(a) (b)

Slika 5.11 (a) New Currency/Dinar (b) Edit Currency/Euro

36

Definisanje jezika za prikaz:

U sekciji Localization/Languages se biraju jezici u kojima želimo da naša elektronska prodavnica bude izrađena i koje želimo da prikazujemo u Frontend-u (prikazano na slici 5.12).

Slika 5.12.Localization/Languages

Backup baze:

Od velikog značaja je redovno raditi Backup baze podataka iz razloga ako neki unos ili konfiguraciju prodavnice pogrešimo, da pređašnje stanje možemo bez poteškoća vratiti klikom na restore (prikazano na slici 5.13 uokvireno crvenom bojom).

Backup baze se izvršava u sledećoj sekciji:

Tools/Database/Backup Manager, klikom na backup (slika 5.13).

Slika 5.13. Backup/Restore

37


U kojoj sekciji na administratorskom panelu se vrši izbor polja koja želimo, odnosno ne želimo da budu prikazana prilikom registracije novog kupca?

U kojoj sekciji u Backend-u se radi Backup? Zašto je to važno?

Prilikom registracije novog kupca, izbačena su sledeća polja:

U kojoj sekciji i pod kojim naslovom se definiše da količina proizvoda koja je na stanju i na raspolaganju za kupovinu bude vidljiva u Frontend-u?

Zemlja i adresa elektronske prodavnice iz koje posluje se nalazi u kojoj sekciji i pod kojim naslovom?

Elektronska prodavnica posluje na koliko jezika? To se definiše u sledećoj sekciji:

38

Koja je default valuta? Koji je odnos dinar-euro?

Koji načini plaćanja su aktivirani? U kojoj sekciji se to izvršava i na koji način? (opisati ceo postupak)

Kako se definiše PDV? (opisati ceo postupak)

Šta je Tax Ratei u konfiguraciji šta treba da sadrži?

Koji način isporuke je izabran?

Šta treba da stoji napisano u sekciji Configuration/My Store pod naslovom: Country & Zone? Zašto?

Šta znači postavljanje vrednosti na true; a šta znači postavljanje vrednosti na false?

39

Case Study: Intel korporacija

Problem: Korporacija Intel, najveći svetski proizvođač mikroprocesorskih čipova, prodaje svoje proizvode hiljadama proizvođača. Konkurencija na tržištu čipova je intenzivna. Intel stvara prilagođene kataloge i šalje ih svojim potencijalnim kupcima zajedno sa informacijama o dostupnosti proizvoda. Do 1997. godine to je činjeno na papiru. Štaviše, narudžbine od hiljada Intelovih kupaca, distributera, i poslovnih partnera širom sveta bili su dobijani putem faksa ili telefona, čime su proces distribucije činili sporim, skupim, a često nije bilo ni pravovremeno. Godine 1997. neka odeljenja su lansirala svoje sopstvene načine elektronskog naručivanja što je dovelo do nekompatibilnih i neefikasnih sistema.

Rešenje: Intel je 1998. godine osnovao elektronski poslovni program zasnovan na Webu. Taj program se usmerio na naručivaje online za široki opseg proizvoda. Narudžbina je predstavljala glavni deo programa a ne samo jedan njegov deo. Intelov sajt za naručivanje je takođe sadržao samouslužne narudžbenice i biblioteku sa dokumentacijom o proizvodima. Ova biblioteka Intelovih proizvoda zamenila je rad servisa za kupce koji su prethodno slali ove informacije kupcima ručno.

U svom e-poslovnom programu Intel se posebno usmerio ka malim i srednje velikim kupcima od kojih najveći broj radi izvan Sjedinjenih Američkih Država. Ove kompanije su prethodno komunicirale sa Intelom pre svega putem telefona i faksova dok su velike kompanije najčešće bile povezane sa Intelom putem EDI mreža.1

Jedanaest najvećih Intelovih kupaca su takođe bili povezani u proleće 1998. godine sa sistemom koji je nazvan „Upravljanje linijom za snabdevanje“, koji je dopuštao Intelu da se poveže putem Interneta sa fabrikama kupaca umesto da radi sa odeljenjima za nabavku.

Intel je 2001. godine počeo da koristi različite portale zasnovane na Webu da bi isporučivao personalizovane informacije svojim kupcima kao i zaposlenima. Nove primene uključuju obezbeđivanje materijala i servisa od dobavljača. Intel smatra da on u pogledu elektronskog poslovanja čini više nego bilo koja kompanija u svetu.

Rezultati: Inicijativa za e-poslovanje donela je Intelu kompetitivne prednosti, dajući njegovim kupcima bolje alatke za upravljanje transakcijama. Istovremeno, sistem je doneo znatne uštede u zavisnim troškovima. Npr. kompanija je bila u stanju da eliminiše 45 000 faksova samo u Tajvanu i to za svega 3 meseca.

1EDI – Electronic Data Interchange. Elektronska razmena podataka. Neposradna razmena podataka i standardnih poslovnih transakcija među poslovnim partnerima.

6 osCommerce: Online catalog i info boksovi

40

Elektronski katalog: Štampani katalozi se koriste kao medijum za reklame već dugo vremena. Elektronski katalozi na Internetu su mnogo moćniji. Cilj prodavca pri primeni online kataloga je da reklamira i promoviše proizvode i usluge korisnicima koji se služe katalogom kao izvorom informacija. Uz pomoć internih mašina za pretraživanje, korisnici mogu brzo i efikasno da pretražuju elektronske kataloge i da upoređuju proizvode veoma efikasno. Elektronski katalozi se sastoje od baze podataka sa proizvodima (opis, cena, proizvođač i dr.), spiska proizvoda, mogućnošću za pretraživanje i funkcijom pretraživanja.

U svojim početnim godinama elektronski katalozi su najčešće bili imitacija tekstova i slika štampanih kataloga. Danas, elektronski katalozi su dinamični, prilagođeni kupcu, i povezani sa procedurom prodaje i kupovine kao što su narudžbenice, načini plaćanja i načini za isporuku.[6]

Katalog proizvoda:

Podržava neograničen broj proizvoda, kategorija i podkategorija,

Kreiranje detaljnog opisa proizvoda sa slikama,

Pregled proizvoda po kategorijama,

Pregled proizvoda po proizvođačima,

Pretraživanje po ključnim rečima,

Napredno pretraživanje po ključnim rečima, kategorijama, proizvođačima, robnoj marki, ceni i datumu dostupnosti proizvoda,

Jednostavno naručivanje pomoću „korpe“ za kupovinu,

Jednostavno održavanje i izmena podataka u katalogu.

Praćenje narudžbina:

Registracija i prijavljivanje kupca,

Registrovani kupci imaju jednostavan pristup podacima na svom nalogu, izvršenim kupovinama i statusu svojih narudžbina,

Prodavac ima uvid u narudžine svih kupaca, kao i proizvoda koji je najviše puta pregledan i proizvoda koji je najviše puta kupljen,

Prodavac na osnovu tih podataka ima mogućnost kreiranja marketing kampanja i informisanja kupaca po osnovu njihovih interesovanja,

Prodavac ima mogućnost automatizacije poslovnih procesa korišćenjem sačuvanih podataka iz prodajnog modula, na osnovu kojih se kupci mogu grupisati prema interesovanjima, što omogućava organizovanje ciljanih marketinških kampanja i praćenje njihove realizacije, kao i njihove uspešnosti.

41

Naručivanje proizvoda, način plaćanja i isporuke:

Kupci se na sajtu registruju i naručuju proizvode koje žele da kupe,

Svaka narudžbenica sadrži podatke o kupcu, mestu isporuke, načinu plaćanja, načinu isporuke, naručenim proizvodima i cenu,

Na kupčev mail, kao i na admin panel prodavca u sekciji customers, dobija se

pregled aktuelnih narudžbenica, status isporuke i plaćanja sa pregledom prethodnih kupovina,

Kupac plaća preko računa, pouzećem ili karticom,

Podaci narudžbina se obrađuju u realnom vremenu,

Kupac preuzima robu po definisanom načinu isporuke,

Automatizovana statistika prodaje i izveštavanje. [5]

Info boksovi. Postoji mnogo mogućnosti za upotrebu info boksova. Kada se pogleda Frontend elektronske prodavnice to su opcione ekstenzije vezane za deo prezentacije koju vide korisnici i veoma su korisni. Obezbeđuju pristup sadržaju Web prezentacije, prikazujući ga u malim blokovima, koji se mogu podešavati. Koriste se u levoj ili/i desnoj koloni Web prezentacije ali se mogu definisati i postaviti gde god to poželi Webmaster sajta.

Npr. osCommerce sadrži podrazumevane (default) info boksove sa odgovarajućim funkcionalnostima: kategorije proizvoda, proizvođače, šta je novo na sajtu, brza i napredna pretraga sajta (interni Search Engine), informacije o korišćenju Web sajta, prikaz korpe za kupovinu (Shopping Cart), proizvode na popustu, komentare kupaca, izbor jezika, kao i izbor valute za plaćanje.

Može se reći da je većina potrebnih info boksova već implementirana u Default instalaciju osCommerce-a, ali ukoliko dobijete poslovnu ponudu da postavite baner u desnu ili levu stranu Vaše elektronske prodavnice, može biti korisno znati kako se to radi.

Banner sadrži kratak tekst ili grafičku poruku koja promoviše proizvod ili prodavca i omogućava posetiocu da se poveže na određeni Web sajt klikom na vezu ili sliku. Baneri mogu da sadrže video isečke i zvuk. Oglašavači zahtevaju od dizajna banera da privuče kupčevu pažnju. Dizajneri banera posvećuju pažnju njegovom sadržaju i veličini slike u njemu.

42

Uputstvo za rad

U sekciji Catalog/Categories/Products(slika 6.1) ubaciti 20 proizvoda podeljenih po kategorijama;

Slika 6.1.Catalog/Categories/Products

Uneti sledeće stavke: datum raspoloživosti proizvoda u prodaji, proizvođač (ukoliko ih ima više), opis, porez, količina, cena, model (šifra), slika, a po potrebi težina kao i Web adresa proizvođača (slika 6.2);

43

Slika 6.2. Ubacivanje novog proizvoda u određenoj kategoriji

Ostale proizvođače, proizvode, kategorije kao i atribute u sekciji Catalog/Products Attributes ukoliko su nepotrebni, obrisati (slika 6.3);

Slika 6.3.Catalog/Products Attributes

U sekciji Catalog/Specials ubaciti dva proizvoda po akcijskim cenama (prikazano na slici 6.4).

44

Slika 6.4.Catalog/Specials

Napraviti grafički banner i sliku smestiti u direktorijum Vaše elektronske prodavnice u catalog/images. U ovom primeru, ime slike je: viser.jpg.

U direktorijumu: catalog/includes/boxes, kreitati novi fajl: banner.php.

U sledećem koraku, u novokreirani fajl napisati kôd prikazan na slici 6.5. Napomena: link je potrebno da vodi na Web sajt oglašavača; i da alttag bude odgovarajući!

Slika 6.5.Kôd koji treba upisati u novokreirani fajl: banner.php

45

Izabrati mesto gde će biti Banner postavljen. Od Vas kao Webmastera i vlasnika sajta zavisi gde će biti mesto za oglas. Ukoliko želite da to bude leva kolona; onda je u fajl: catalog/includes/column_left.php Vaše elektronske prodavnice potrebno dopisati sledeću liniju kôda:

require(DIR_WS_BOXES . 'banner.php');

Ukoliko želimo da se info boks sa reklamom pojavljuje odmah ispod kategorija, onda ćemo gore navedenu liniju kôda dopisati na označenom mestu plavim na slici 6.6:

Slika 6.6. catalog/includes/column_left.php

Na slici 6.7 je prikazan izgled reklame u levoj koloni na sajtu po završenom poslu.

46

Slika 6.7. Izgled leve kolone sa novim Banner-om

Ukoliko želimo da uklonimo info boks sa reklamom, pišemo dve kose crte ispred dopisane linije kôda koje označavaju da ta linija kôda nije više aktivna, već postaje komentar (prikazano na slici 6.8). Jednostavnim brisanjem istih, info boks postaje ponovo vidljiv.

Slika 6.8. Uklanjanje info boksa sa reklamom

47

U sledećem koraku ćemo u desnoj koloni napraviti novi info boks sa linkovima Web sajtova koje najčešće posećujemo.

U sledećem direktorijumu Vaše elektronske prodavnice: catalog/includes/boxes, kreitati novi fajl: links.php.

U novokreirani fajl napisati kôd prikazan na slici 6.9.

Slika 6.9.Kôd koji treba upisati u novokreirani fajl: links.php

Potom je potrebno definisati zaglavlje novog info boksa. To se radi na sledeći način:

otvoriti sledeći fajl Vaše elektronske prodavnice: catalog/includes/languages/english.php

i na liniji 60 i 61 dopisati sledeći kôd (prikazano na slici 6.10):

// languages box text in includes/boxes/feed.php

define('BOX_HEADING_LINKS', 'Moj izbor sajtova');

Aktivirati info boks upisivanjem kôda: require(DIR_WS_BOXES .

'links.php');

u sledeći fajl na liniji 51: catalog/includes/column_right.php

(prikazano na slici 6.11)

48

Slika 6.10. Kôd koji treba dopisati

Slika 6.11. Kôd koji treba dopisati

Kao rezultat se dobija desna kolona sa novim info boksom (prikazano na slici 6.12).

49

Slika 6.12. Izgled desne kolone sa novim info boksom

50


Koliko kategorija je kreirano, i u kojoj sekciji se to izvršava?

Koliko proizvoda je ubačeno u elektronsku prodavnicu i na koliko jezika?

Kako se kupac izveštava po obavljenoj kupovini?

Čemu služe atributi proizvoda?

Da li ste koristili atribute i ako jeste, zašto?

Na koji način se kreiraju proizvodi koji se prodaju po akcijskim cenama?

U kojoj sekciji administratorskog panela se kreiraju nove kategorije?

U kom direktorijumu elektronske prodavnice se kreira novi info boks?

Koja veličina slike za grafički Banner treba da bude?

51

Šta će se desiti sa izabranim šablonom za prikaz (Template-om) ukoliko nije ta dimenzija slike?

Koje su prednosti i mane prikazivanja Banner-a na Frontend-u elektronske prodavnice?

Na koju Web lokaciju vodi Banner?

Na koji način može da se izbriše info boks: Languages? Opisati postupak.

Koji su sajtovi napisani u info boksu: Links?

Kako se definiše zaglavlje-naslov info boksa?

52

Kao što smo govorili u prethodnim vežbama, CMS omogućava lako ažuriranje sadržaja jer postoji baza podataka u kojem se on čuva. Sa druge strane CMS obezbeđuje vrhunski servis za kupce gde oni grade svoje individualne strane na sajtu prodavca. Na primer, eBay će na tim individualnim stranama svojim klijentima prikazati istoriju učešća u aukcijama, a E*Trade će prikazati istoriju u trgovini akcijama.

Kupci mogu da prate stanje svojih narudžbenica, trenutnu poziciju pošilje (Track and Trace), mogu da menjaju podatke svog naloga, mogu da kreiraju više adresa za isporuku ukoliko kupuju poklon i sl. Neki Content Management sistemi nude mogućnost svojim kupcima da provere stanje svojih bankarskih i berzanskih aktivnosti.

Te sopstvene, individualne strane koje kupci po završenoj registraciji kreiraju na sajtu prodavca, omogućavaju kupcima sabiranje njihovih kupovina, informacije o garanciji i vremenu isteka, pretplate na Newsletters određenih, izabranih proizvoda i sl.

Dakle, ne samo da kupac može da uzme informacije koje su mu potrebne ili koje želi, već i prodavac može da uputi informacije kupcu (Newsletter). Kupčeve individualne strane koje se po automatizmu kreiraju po obavljenoj registraciji, registruje njegove kupovine, probleme i zahteve. Prodavac zatim može da koristi ove informacije da poboljša prodaju i olakša pružanje usluga kupcu. Informacije koje su se ranije dostavljale kupcu mesec ili kasnije pošto je transakcija okončana, sada se pružaju u realnom vremenu. Transakcija se može pratiti i analizirati da bi se odmah reagovalo. Informacije o transakciji se čuvaju u bazi podataka prodavca, zatim joj se može pristupiti i ona se može obrađivati i analizirati kako bi se podržao marketing i drugih proizvoda i sa njima uskladile korisne informacije o prodaji i ponašanju kupca. Primer ovakvog marketinga je prikazan na slici 7.1, gde se iznad podnožja prikazuju knjige koje su kupci kupili sa prikazanom knjigom.

7 osCommerce: Registracija kupaca, kupovina, izveštavanje, STS i bezbednost

53

Slika 7.1. Po automatizmu podržan marketing korišćenjem CMS-a www.prodavnicaknjiga.rs

http://www.prodavnicaknjiga.rs/

54

Uputstvo za rad

Registrovati minimum 5 kupaca klikom na Frontend-u na create an account (prikazano na slici 7.2),

Slika 7.2 Strana za registraciju novih kupaca (create an account)

Potrebno je da svaki kupac (nakon registrovanja i prijavljivanja na sajt) kupi po nekoliko proizvoda različitih količina sa Web strane za izbor proizvoda za kupovinu (prikazano na slici 7.3). Svaki proizvod mora biti prodat minimum jednom.

55

Izvršiti kupovinu (slika 7.3).

Slika 7.3. Web strana za izbor proizvoda za kupovinu

Slika 7.4. Kupovina proizvoda

56

Izveštaj o najprodavanijem proizvodu se nalazi u sekcij Reports/Products Purchased (slika 7.5); izveštaj o proizvodu koji je najviše puta pogledan od strane posetilaca sajta nalazi se u sekciji Reports/Products Viewed (slika 7.6); a izveštaj o najlojalnijem kupcu se nalazi u sekciji Reports/Customer Orders-Total.

Slika 7.5. Reports/Products Purchased

Slika 7.6. Reports/Products Viewed

Napisati Newsletter koji se nalazi u sekciji Tools/Newsletter Manager klikom na New Newsletter (slika 7.7) i svim pretplaćenim kupcima poslati na e-mail.

Proučiti status kupovine kupaca i izvršene porudžbine iz sekcije Customers/Orders klikom na porudžbinu (slika 7.8);

Iz iste sekcije Pojmove: Pending, Processing, Delivered, Invoice & Packing slip kratko opisati svojim rečima u Newsletter no.2.

Slika 7.9 prikazuje istoriju kupovine kupca sa sajta: www.e-trgovina.webasimo.com

http://www.e-trgovina.webasimo.com/


57

Slika 7.7. Tools/Newsletter Manage/New Newsletter

Slika 7.8. Customers/Orders

58

Slika 7.9. Istorija kupovine kupca sa sajta: www.e-trgovina.webasimo.com

Na sledećoj Web lokaciji se nalazi modul sa funkcijom izmene šablona (Template) za prikaz (osCommerce Simple Template System):

http://www.oscommerce.com/community/contributions,1524

Pre početka kopiranja potrebnih fajlova uraditi fizički Backup baze podataka i elektronske prodavnice, da u slučaju moguće greške rad bude sačuvan.

STS direktorijum raspakovati i Iz direktorijuma osCommerce Online Merchant RC2a kopirati sledeće fajlove u iste direktorijume elektronske prodavnice:

catalog\includes\classes\sts.php

catalog\includes\functions\sts.php

folder catalog\includes\languages\english\modules\sts (opciono: plus ostali jezici)

folder catalog\includes\modules\sts

folder catalog\includes\modules\sts_inc

folder catalog\includes\sts_templates

Kao i sledeće admin fajlove:

catalog\admin\modules.php


http://www.oscommerce.com/community/contributions,1524

59

catalog\admin\includes\boxes\modules.php

catalog\admin\includes\languages\english.php (opciono: plus ostali jezici)

catalog\admin\includes\languages\english\modules.php (opciono: plus ostali jezici)

catalog\includes\application_bottom.php

catalog\includes\application_top.php

catalog\includes\column_left.php

catalog\includes\column_right.php

catalog\includes\footer.php

catalog\includes\header.php

catalog\includes\classes\boxes.php

catalog\includes\functions\html_output.php

Iz “STS” direktorijuma kopirati sledeće fajlove u Online prodavnicu:

catalog\includes\classes\sts.php

catalog\includes\functions\sts.php

folder catalog\includes\languages\english\modules\sts (opciono: plus ostali jezici)

folder catalog\includes\modules\sts

folder catalog\includes\modules\sts_inc

folder catalog\includes\sts_templates

Pokretanje modula se vrši na administratorskom panelu u sekciji Modules/STS (prikazano na slici 7.10, i na slici 7.11). Po završenoj instalaciji klikom na edit vrši se odabir željenog šablona za prikaz (slika 7.12). Klikom na Edit pokrenuti Template System postavljanjem opcije na True, prikazano na slici 7.13, a izbor šablona se vrši iz Template Folder-a.

60

Slika 7.10. Pokretanje modula

Slika 7.11. Instalacija modula

Slika 7.12. Prikaz po završenoj instalaciji

61

Slika 7.13. Izbor željenog šablona za prikaz (Template-a) iz Template Folder-a

62

Kao rezultat se dobijaju šabloni prikazani na sledećim slikama:

Slika 7.14. Primer 1


63



64

Bezbedednost.

Sama pomisao na bezbednost plaši veliki broj korisnika. Da li želite da nešto više saznate o bezbednosnim aspektima sada ili kada neko obori Vašu elektronsku prodavnicu? Ukoliko ste Webmaster i Vaš klijent Vas plaća za održavanje Web prezentacije, Vaša je dužnost i obaveza da omogućite najviši mogući stepen zaštite i maksimalan nivo bezbednosti.

Nemoguće je napisati jednu vežbu, pa čak ni knjigu koja će sadržati sve načine na koje možete sprečiti hakera da napadne Vašu Web prezentaciju! Sigurni smo samo u slučaju kad je server isključen (Unplugged). Ukoliko je sever povezan na Internet, on je ranjiv.

Ukoliko je neko dovoljno vešt i želi da Vam obori Web sajt i da Vam tako naudi, može to i da učini.

Prilikom razmatranja određenih vrsta zloupotreba i načina na koji možete da povećate bezbednost svog servera, nećemo opisivati rešenja. To je tema drugih predmeta.

Redovno ažuriranje CMS Open Source sistema je od vitalnog značaja, jer kao što smo govorili na prethodnim vežbama, hakerima su tzv. rupe pređašnjih verzija najčešći napadi.

A šta bi se dogodilo da se da se pokvari server na kojem se nalazi Vaša Web prezentacija i da nema mogućnost oporavka? Da li ste uradili Backup svoje Web prezentacije?

Ukoliko uzmemo u obzir jednostavnost Backup-ovanja, to bi trebali redovno i često da činite. Nemojte da se oslanjate na svog provajdera da će on Backup-ovati Vašu Web prezentaciju.

U prvom koraku ćemo preimenovati administratorski direktorijum koji se nalazi na sledećoj putanji:

c:/xampp/htdocs/ime_vase_prodavnice/catalog/admin

Iako ni u jednom koraku instalacije to nije pomenuto, jedinstveno ime admin direktorijuma je odlična mera sprečavanja upada i obaranja Web sajta.

Kadastepreimenovaliadministratorskidirektorijum, potrebnojedauskladusanačinjenimizmenamapromenitesledećedvelinijekôdakojesenalazenasledećojputanji:

c:/xampp/htdocs/ime_vase_prodavnice/catalog/novo_ime_direktorijuma/includes/configure.php

linije kôda 7 i 8 koje treba modifikovati su (prikazano na slici 7.18):

define('DIR_WS_ADMIN', '/novo_ime/');

define('DIR_FS_ADMIN', '/Vaša/putanja/do/direktorijuma/novo_ime/');

65

Slika 7.18.linije kôda 7 i 8 koje treba modifikovati

Udrugomkorakujepotrebnoobrisatisledećifajl: admin/filemanager.php, odnosno: novo_ime_admin_direktorijuma/filemanager.php jer taj fajl predstavlja potencijalna mala vrata za upad hakera;

U trećem koraku je potrebno obrisati fajl: admin/define_language.php, odnosno: novo_ime_admin_direktorijuma/define_language.php

U četvrtom koraku je potrebno otvoriti fajl koji se nalazi na sledećoj putanji: admin/includes/boxes/tools.php, odnosno:

novo_ime_admin_direktorijumaincludes/boxes/tools.php,

i obrisati liniju 27 kôda (prikazano na slici 7.19):

Slika 7.19.novo_ime_admin_direktorijuma/includes/boxes/tools.php

U petom koraku je potrebno da u istom fajlu: admin/includes/boxes/tools.php, odnosno:

novo_ime_admin_direktorijumaincludes/boxes/tools.php

obrišemo liniju 28 kôda (prikazano na slici 7.20):

66

Slika 7.20.novo_ime_admin_direktorijuma/includes/boxes/tools.php

Napomena: ovi koraci predstavljaju osnovnu zaštitu Open Source softvera osCommerce.

67


U kojoj sekciji admin panela se piše Newsletter?

Objasniti pojmove: Pending, Processing, Delivered, Invoice & Packing slip.

Opisati status kupovine kupaca i izvršene porudžbine iz sekcije Customers/Orders, po svim elementima (slika 7.8).

Kako kupac pristupa svom nalogu na strani prodavčeve elektronske prodavnice?

Šta kupac na svom nalogu može da menja?

U koje sve informacije kupac ima uvid na svom nalogu?

Da li kupac po izvršenoj kupovini može tu porudžbenicu izbrisati?

Koja sve izveštavanja administrator prodavnice prati iz admin panela?

Opisati registraciju novog kupca.

68

Koja polja za unos su obavezna prilikom prijavljivanja starog kupca?

Opisati sve korake prilikom kupovine proizvoda.

Opisati na koji način se kupac izveštava o statusu njegove kupovine.

Opisti postupak menjanja šablona za prikaz (Template-a). Zašto je to važno sa aspekta prodavca, a zašto sa aspekta kupca?

Da li postoje negativni efekti čestog menjanja dizajna elektronske prodavnice? Objasniti.

Koja su sve znanja potrebna da bi se izradio unikatni šablon (Template) za CMS Open Source osCommerce?

Koliko puta ste do sada uradili „fizički“ Backup Vaše elektronske prodavnice?

69

Koliko Backup-ova imate u sekciji Tools/Database Backup Manager?

Koji fajlovi su rizični za upad hakera?

Šta smo obezbedili brisanjem linija koda 27 i 28 fajla: includes/boxes/tools.php

Koliko je redovno ažuriranje i Update-ovanje softvera bitno?

70

71

Magento je ponuđen u više verzija – community, enterprise i Go.

Community verzija je besplatna i predviđena je za samostalno održavanje prodavnice. Instalira se na vašem serveru i od vas se očekuje da preuzimate rizik za bilo kakvu vrstu third party plug-inova. Enterprise verzija nudi napredne usluge kao što su alati za razvijanje biznisa, SEO optimizacija kao i konsultantske usluge od strane eksperata iz Magento Tima. Go verzija je usluga koju veliki broj kompanija sada nudi. Magento Go vam omogućava da vašu prodavnicu držite na serverima koji su u posedu Magento grupe. U paket Go je takođe deo funkcija iz Enterprise ponude, i služi za korisnike koji ne žele da troše previše vremena vodeći brigu oko hosting rešenja i zaštite od nedozvoljenih pristupa serveru. Na vežbama ćemo raditi sa community verzijom.

Preuzimanje Magento instalacije Da biste preuzeli Magento Community potrebno je da odete na stranicu

www.magentocommerce.com i da kliknete na Community link u samom zaglavlju stranice.

Bićete dovedeni na stranicu koja vam nudi tri taba – Download, How to get started i Release archive (slika 8.1).

8 Magento: Instalacija prodavnice i bezbednost

72

Slika 8.1. Download stranica za Magento Community

Download stranica vam nudi poslednje stablino izdanje platforme, preview verziju za programere, ali takođe postoje i dodatni alati. Postoji Downloader koji će omogućiti instalaciju Magenta u par koraka.

Postoji Sample Data čija je funkcija da napuni vašu prodavnicu sa uzorcima proizvoda. Ovo je dobro za programere koji razvijaju šablone za Magento i nemaju vremena da se bave kreiranjem proizvoda. Takođe je dobro za početnike koji žele da eksperimentišu sa opcijama koje nudi magento ispitujući postojeće opcije koje nudi Sample Data paket.

Release archive sadrži instalacije i datume izlaska trenutne i prethodnih vezija.

How to get started je odlično dokumentovana stranica koja sadrži priručnike o instalaciji i radu na Magento prodavnici.

73

U Download tabu pod Full release sekcijom izaberite .zip format magenta (slika 1.1) i kliknite dugme download.

Pojaviće se stranica za Login (slika 8.2). Ako ste prvi put na ovom sajtu, potrebno je da se registrujete. Registracija je besplatna. Obavezno unesite validan e-mail kako biste mogli da dobijete link. Da biste se registrovali potrebno je da u pop-up prozoru kliknete „Creat account now“ i popunite osnovne podatke.

Slika 8.2 Login prozor za preuzimanje Magento community

Kada kliknete na "Create new account", potrebno je da popunite osnovne podatke, a u Company i role poljima stavite other.

U login information stavite željeno ime i lozinku, i kada kliknete na submit, biće vam poslat mail sa linkom za potvrdu registracije

Kada završite registracioni proces, i ulogujete se sa korisničkim imenom i lozinkom koje ste naveli pri registraciji, download Magento aplikacije će automatski početi.

Kada ste skinuli aplikaciju potrebno je da kopirate folder „magento“ iz zip fajla i da ga prekopirate u xampp/htdocs. Folder možete preimenovati. Za potrebe vežbi predmeta folder treba da nosi smer i vaš broj indeksa (npr. Epo0112).

Kada ste prekopirali i preimenovali folder, potrebno je (ako već niste) da pokrenete xampp, a zatim ukucate localhost/imefoldera (ime foldera je ime koje ste dali vašem magento folderu).

Time pokrećete stranicu za instalaciju i podešavanje vaše magento prodavnice (slika 8.3)

74

Slika 8.3 Početna strana Magento instalacije.

Potrebno je da se složite sa uslovima korišćenja a zatim kliknete Continue. Sledeći korak je podešavanje vremenske zone, vaše lokacije i vrste valute koju koristi vaša prodavnica.

U Locale izaberite Cрпски / Serbian, u Local time izaberite ili Western European Time (Berlin) a u Currency izaberite Serbian dinar.

U podacima za bazu podataka (slika 8.4) potrebno je da navedete tip baze podataka (database type) (ako koristite xampp tip baze podataka je mysql), ime hosta (host) (za lokalni server je localhost, može ali ne mora da ima i određeni port) i ime baze podataka (database name) u koju ćete čuvati informacije vaše prodavnice. Potrebno je da napravite praznu bazu koristeci phpmyadmin.

Takođe je potrebno da unesete i korisničko ime i lozinku sa kojom pristupate vašoj bazi.

75

Slika 8.4 Podešavanja parametara za bazu podataka

Radi bolje bezbednosti trebate izmeniti admin path. Admin path ce vam omoguciti da pristupite backendu aplikacije.

Dajte mu proizvoljan naziv. Obavezno zapamtite ime koje ste mu dali da bi ste mogli pristupiti. Potrebno je sačekati za sledeći korak dok Magento iskopira sve potrebne fajlove u bazu podataka.

Unesite osnovne podatke – ime i prezime, korisnicko ime za pristup magento prodavnici, kao i lozinku.

Encryption key je 32bitni niz karaktera koji Magento koristi da kriptuje vaše podatke i sprečava korisnike koji imaju pristup bazi da iskoriste informacije. Ključ možete napraviti sami ili putem generatora koji su dostupni na internetu, ali Magento nudi opciju da vam i sam generiše ključ. Ovo polje možete ostaviti prazno i pustiti Magento da generše ključ, pošto radimo u lokalnom serveru. Savetuje se da kada budete postavljali vašu prodavnicu online napravite sopstveni ključ.

Kada kliknete continue dobićete ključ. Poželjno je da ga sačuvate na sigurnom mestu, pogotovo ako radite svoju prodavnicu i želite da prebacite podatke sa lokalnog servera na web server, gde će magento aplikaciji koju budete instalirali online biti potrebno da zna kako da dekriptuje podatke.

76

Magento vam na kraju nudi da posetite frontend ili backend vaše prodavnice. Frontend i backend okruženjeme će biti temanaredne vežbe.

Magento Bezbednost

Bezbednost ima najveći prioritet kada su u pitanju ecommerce usluge. Vaš klijent i njegovi kupci vam poveravaju svoje podatke i očekuju da ti podaci budu zaštićeni od zloupotrebe. Ali veliki broj problema potiče i od neiskustva kako korisnika, tako i webmastera koji održavaju prodavnicu. Magento softver ima dobre sisteme zaštite, ali vi kao administrator prodavnice, možete da svojim klijentima obezbedite prodavnicu koristeći neke od saveta date u ovoj vežbi.

Admin URL & Passwords

Prva mera predrostrožnosti je da promenite link za vaš admin panel. Magento nema direktorijum već koristi virtuelni link ka kontroleru (više informacija o MVC arhitekturi potražite na internetu) koji kreira admin panel koji koristite za upravljanje. Podrazumevana lokacija je vašlink/imeprodavnice/admin ili vašlink/imeprodavnice/index.php/admin. Pošto link nije dostupan botovima i ne može se indeksirati, zaštite vaš panel tako što ćete naziv “admin” promeniti u “izakulisa” ili neki naziv koji neće biti očit nekome ko želi da pistupi login stranici.

Ako ste već instalirali kontrol panel pod linkom admin, postoji način da ga ručno izmenite tako što ćete u folderu vaše prodavnice na adresi folderprodavnice\app\etc\local.xml izmeniti sledeću stavku u prodavnici:

-<adminhtml>-<args>-<frontName>

<![CDATA[admin]]>

</frontName></args></adminhtml>

zameniti pojačano admin sa nazivom koji želite za link.

Drugi korak je adminstratorska lozinka. Nemojte koristiti kratke lozinke. Preporučljivo je da lozinka ima najmanje 8 slova, i da karaktere u lozinci birate kombinacijom velikih i malih slova, brojeva i specijalnih numerčkih znakova koji su pozicionari univerzalno na tastaturi. Lozinka na Magentu treba da bude jedinstvena i da je nigde drugde ne koristite. U tom slučaju ako ste žrtva napada na nekom drugom servisu, napadač neće moći da vam preotme i pristup prodavnici.

HTTPS/TSL/SSL

Drugi korak koji ne možemo raditi na u okviru ovih vežbi je registrovanje TSL/SSL sertifikata za zaštitu svih login stranica i stranice za plaćanje. TSL/SSL licenca se kupuje po određenoj proviziji i tesitranjem vašeg sajta se izdaje uverenje korisnicima da je vaš sajt bezbedan. Sama TLS/SSL podešavanja nisu vezana za Magento već za server na kome držite svoju prodavnicu.

77

Da biste podesili SSL na svim login stranicama potrebno je da ispratite sledeće korake: Idite na System zatim Configuration, zatim Web, zatim Secure, a u sekciji Secure u secure base url unesite https://www.vasdomen.com/ i čekirajte sledeće stavke: “Use Secure URLs in Frontend” i “Use Secure URLs in Admin”.

Održavajte Magento softver

Svaki put kada izađe novi update potrebno je da ažurirate svoj softver. Ali pre nego što to direktno uradite na vašem sajtu, napravite backup vašeg sajta i potom na lokalnom serveru testirajte da li kada izvršite update dolazi do nekih promena na vašem dizajnu ili da neki plug in koji koristite nije kompatibilan sa novom verzijom. Pluginovi su jako češta meta proboja jer ostavljaju vrata hakerima.

Obezbedite administratorski email

Magento ima dobru opciju da pomogne administratorima da pristupe sistemu slanjem emaila sa uputstvom za lozinku. Preporučljivo je da email adresa koju koristite za admin email nije javna i da je lozinka na njoj sigurna (videti admin url & passwords za detalje).

Nemojte čuvati lozinke na vašem računaru

Jako često browseri i sam računar vam nude da sačuvaju vašu lozinku da ne bi ste morali da je pamtite. Iako je ovo za mnoge korisnike dobra stvar, problem je što se te lozinke čuvaju u nezaštićenim plain tekst fajlovima koji se nalaze u privremenom skladištu (temporary storage) i ranjive su napadima virusa koji mogu da zloupotrebe ovakve informacije.

Zbog ovakvih vrsta napada najbolje je da radite na računaru koji ima redovno ažurirani antivirus.

Izaberite hosting koji odgovara vašim potrebama

Izaberite provajdera čije usluge odgovaraju najnovijim verzijama aplikacija. Ovo je primenjivo za shared hosting. Takođe možete zakupiti i sopstveni server (dedicated hosting) koji je dosta skup. Najnovije i najpovoljnije rešenje koje se pominje je cloud hosting. Cloud hosting vam omogućava da maniuplišete admin paketima za nadgledanje vašeg servera uz minimalan bezbednosni rizik.

Pratite Magento zajednicu

Magento forumi su odlično mesto za izvor informacija. Možete da postavljate pitanja ili pretragom da nađete odgovore na pitanja koja su već postavljana a vi ste mislili o njima. Ovde možete naći informacije ne samo o sigurnosnim informacijama već i informacijama koje se tiču dizajna, pluginova. Na forumu postuju i developeri koji objavljuju sigurnosne propuste ako se takvi nađu tako da možete da budete u toku sa obezbeđivanjem vaše aplikacije.

78

Samostalni rad studenta

Za šta se koristi Encryption key?

Kako glasi ime servera koji se koristi na lokalnom računaru?

3. Kakva je vrsta linka kojom pristupate Magento admin panelu i zbog čega se koristi?

Koja podešavanja je potrebno odabrati da bismo mogli da koristimo SSL protokol?

Zbog čega nije poželjno čuvati lozinke na ličnom računaru?

Zašto je potrebno redovno ažurirati softver prodavnice?

Zašto je dobro izabrati cloud za hosting sistem prodavnice?

79

9 Magento: Upravljanje prodavnicom: Opšta podešavanja, kreiranje taksi i kategorija

Frontend prodavnice

Kada instalirate vašu Magento prodavnicu, na početnoj stranici (slika 9.1), biće prikazan podrazumevani dizajn prodavnice. Ispod zaglavlja nalaze se tri kolone.Prva sleva služi za navigaciju i tagove, desna za posebne ponude, dok kolona u sredini pikazuje najnovije proizvode, reklamne oglase i druge dodatke o kojima ćemo govoriti u ovoj i narednim vežbama. Dizajn vaše prezentacije se može menjati iz admin dela.

Slika 9.1 Prikaz podrazumevanog dizajna magento prodavnice sa semplovanim proizvodima

Ukoliko ste instalirali sample data (u ovom kursu korisnici grade svoju prezentaciju od početka, ne koriste se semplovi proizvoda) biće vam prikazane demo kategorije i podkategorije proizvoda. U zaglavlju postoji polje za pretragu, pozdravna poruka,

80

alati korisnika za kupovinu (My Account, My Wishlist, Cart, Check Out) i stranica za prijavljivanje (logovanje). Na stranici za prijavljivanje korisnici se mogu registrovati ili prijaviti. Kod registracije Magetno traži minimalan broj podataka za kupca (slika 9.2). Zbog opcija kao što su lista želja(whish list), i mogućnost čuvanja sadržaja koji korisnik naruči, kompletni podaci korisnika se traže prilikom naručivanja i tada je korisniku ponuđeno da unese podatke vezane za metode plaćanja i isporuku proizvoda.

Slika 9.2 Kreiranje naloga za novog kupca.

Postojeći korisnici se prijavljuju na sistem korišćenjem mail adrese i lozinke koju su izabrali pre registraciji.

U podnožiju stranice (slika 9.3) korisnik ima mogućnost da pristupi statičkim stranicama vezanim za informacije, uslove korišćenja itd. Ove stranice ne moraju biti uključene u zaglavlju vaše prodavnice. U backendu prodavnice postoje alati za kreiranje statičkih stranica. Statičke stranice takođe mogu biti i u glavnom meniju. Promene na stranici se mogu načiniti na dva načina korišćenjem alata ili programerskim putem. U okviru ovog kursa oslanjaćemo se na korišćenje alata, ali za neke slučajeve primena programiranja će biti neophodna. Takvi postupci biće detaljno objašnjeni.

Slika 9.3Podnožije (footer) stranice podrazumevanog dizajna Magento prodavnice

81

Backend prodavnice

U vežbama koje se odnose na osCommerce rešenje već ste prošli kroz neke alate koji su dosta slični i u Magentu. Zbog toga posle pregleda Magento admin panel,a kroz ovu i narednu vežbu biće ukazane nove alatke koje nisu predstavljene ili ne postoje u osCommerce.

1. Koristeći pretraživač možete se prijaviti u Magento backend prodavnice tako što ćete na link koji vodi ka vašoj prodavnici dodati /admin ili drugi naziv koji ste definisali prilikom instalacije.

2. Unesite vaše podatke za pristup prodavnici u polje za login (slika 9.4)

Slika 9.4. Magento login stranica za backend

Dashboard

Dashboard je prva stvar koja vas čeka kada se ulogujete u Magento admin panel (slika 9.5).

Možete da izaberete specifičnu verziju prodavnice za koju želite da vidite Dashboard. Dashboard vam prikazuje statistiku prodaje, poslednje pretrage, popularne pretrage, kao i novoregistrovane kupce, a vaše transakcije prikazuje i u grafiku koji može da se podesi za određeni period.

82

Slika 9.5 Magento Dashboard

Osnovna podešavanja prodavnice

Osnovna i napredna podešavanja vezana za rad prodavnice mogu se izvršiti u System sekciji admin menija. Prvo je potrebno podesiti neka osnovna podešavanja vezana za našu prodavnicu, a vezana su za kupce i pretraživače.

Izaberite u System sekciji administratorskog menija stavku „Configuration“

U General sekciji sporednog menija izaberite stavku General.

U Countries options (slika 9.6), izaberite da je Default Country (podrazumevana država) Serbia.

U Locale options izaberite za

a) Timezone: Central European Time

b) Locale: Serbian (Serbia)

c) First day of the week: Monday

d) Weekends: Saturday, Sunday – da bi ste izršili višestruki izbor potrebno je da istovremeno kliknete levim tasterom miša i pritisnete dugme Ctrl

U Store information unesite podatke o prodavnici, kontakt telefonu, zemlji i kontakt adresi prodavnice

U gornjem desnom uglu, uz zaglavlje sekcije, kliknitena Save config da biste sačuvali izmene.

83

Slika 9.6 Izbor država iz kojih mušterije mogu da naručuju proizvode

U General sekciji se nalazi i stavka Web, koju nećemo podešavati za potrebe ovog kursa. Jedini deo koji možete da menjate je Default pages, gde podešavate koje želite stranice da se podrazumevano prikazuju na vašoj stranici.

Delovi Design sekcije će detaljnije biti razmatrani u narednim poglavljima. U okviru ove vežbe treba da uneste određene informacije za vašu prodavnicu u HTML bloku (slika 9.7).

Izaberite ikonicu za vašu prodavnicu. Ikonica će se nalaziti u zaglavlju pretraživača sa opisom vaše stranice.

Ikonice ne treba da budu veće od 48x48 pixela. Magento nudi opciju različitih formata za ikonice, ali .ico je preporučen format jer ne podržavaju svi pretraživači sve tipove ikona.

Dodajte Default title (podrazumevani naslov) vašoj prodavnici. Ukoliko u statičkim stranicama ili kategorijama nije zadat naslov, ovaj naslov će biti stavljen.

Title prefix i title sufix služe za tekst koji se dodaje pre ili posle naslova (default ili page) i češće se koristi kada imate više prodavnica na jednom Magento sistemu.

84

U default description (podrazumevani opis) unesite u najviše par rečenica, opis vaše prodavnice a default keywords (podrazumevane ključne reči) reči koje se odnose na ciljnu grupu vaše prodavnice.

Slika 9.7Deo HTML head bloka u Design sekciji

U Header sekcije, dodajte logo vaše prodavnice i naslov vaše prodavnice u slučaju da korisnici ne mogu da vide logo.

Logo treba da se stavi u sledeću lokaciju:

Imefoldera\\skin\frontend\default\default\images a zatim samo ime i format navedite u polju za sliku. Logo ćete premestiti iz ove teme kada budete radili sopstvenu temu.

U Footer tagu promenite copyright da odgovara brednu vaše prodavnice.

Pritisnite Save config dugme kada završite sa Design sekcijom.

U Currency setup, potrebno je da izaberete valutu kojom želite da platite. Za base, default display i allowed currencies izaberite srpski dinar (slika 9.8)

85

Slika 9.8Izbor valute u Currency options

U Store email addresses sekciji bitno je da za General contact / Sale representative postavite vašu e-mail adresu, kao i vaše ime i prezime za Sales name.

U contacts sekciji potrebno je da podesite da postoji Contact Us stranica koja koristi formu za kontakt i da podesite da mailovi koji se šalju idu na general contact address ili sales representative address u zavisnosti ko želite da je u nadležnosti za rad sa klijentima.

Kada završite podešavanja, kliknite na save config.

Podešavanje Kataloga prodavnice

Magento vam daje mogućnost da izaberete kako će se vaši proizvodi prikazivati. Da biste uticali globalno na prikazivanje vaših proizvoda, potrebno je da u System podešavanjima modifikujete kako će se vaši proizvodi prikazivati.

U admin glavnoj navigaciji u sekciji System izaberite Configuration a zatim pod sekcijom CATALOG levog menija kliknite na link Catalog. (slika 9.9). Za lokalne prikaze proizvoda, prikaz se podešava lokalno, unutar System sekcije vaša podešavanja utiču na celu prodavnicu.

86

Slika 9.9 Lista opcija vezanih za katalog prodavnice

Kliknite na frontend. Za vrstu prikaza liste proizvoda su date četiri vrste prikaza:

Grid Only: Proizvodi su prikazani samo u matričnoj strukturi.

List Only: Proizvodi su prikazani samo kao lista.

Grid (Default)/List: Proizvodi su prikazani kao matrica, ali ih kupci mogu prikazati kao listu.

List (Default)/Grid: Proizvodi su prikazani kao lista, ali ih kupci mogu videti kroz matrični prikaz.

Na vama je da izaberete kako želite proizvodi da se prikažu. Za sada nemojte menjati ovu opciju, ali kada budete dodali proizvode u katalog, možete da uzmete i da eksperimentišete sa podešavanjima.

U Products per Page (grid ili list) možete navesti željeni broj artikala. Možete uneti više vrednosti koje odvajate zarezom, tako da će kupac moći da bira broj artikala koji se prikazuju po stranici.

U Product Listing Sort by izaberite način na koji će se proizvodi prikazivati na stranici. Best Value proizvodi su oni proizvodi koje administrator prodavnice odluči da spadaju u kategoriju.

Ako odaberete "Yes" Flat Catalog Category / Product, Magento će u svojoj cache memoriji kreirati jedinstvenu tabelu koja bi trebalo da ubrza pregled

87

stranica sa proizvodima. Magento tim za Category predlaže da stavite Yes, dok za proizvode samo ako imate preko 1000 različitih proizvoda na lageru.

U Sitemap možete da izabere Yes za Use Tree Like Category Sitemap, ako želite da vam se kategorije i podkategorije proizvoda predstavljaju kao stablo - podkategorije će biti uvučeno u odnosu na roditeljsku kategoriju

U Minimum Lines per Page možete staviti minimalan broj linkova site mape po stranici. Site map može biti na više od jedne strane.

U product reviews možete uključiti da li korisnici mogu da ostavljaju utiske o proizvodima.

Kada završite sa podešavanjima, sačuvajte vaš rad.

Podešavanja metoda plaćanja

Magento nudi više metoda plaćanja (slika 9.10). Kako u vreme pisanja ovog priručnika PayPal sistem još nije dostupan, kao i zbog rada u lokalnom serveru i nemogućnosti testiranja plaćanja kreditnim karticama, ova dva sistema nećemo koristiti.

Slika 9.10 Lista metoda plaćanja za Magento

Vaša prodavnica bi trebalo da ima dva metoda za plaćanje – Cash on delivery (plaćanje pouzećem) i Bank Transfer Payment (uplata na bankovni račun).

Dva polja koja je potrebno da popunite su Enabled (izaberite Yes) i uputstvo u kome možete definisati korisniku korake prilikom vrste porudžbine.

Drugi korak je da sve ostale metode plaćanja stavite Enabled na vrednost No.

88

Kada unesete izmene sačuvajte promene.

Postavljanje taksi

Magento dozvoljava da kreirate različite opcije za definisanje taksi kojima se može pristupiti preko „Sales“ menija a zatim opcije Tax. Klase taksi služe za definisanje pravila taksi. Taksna pravila uzimaju u obzir kategoriju proizvoda, tip kupca, taksnu zonu i procenat.

Svakom tipu kupca se može dodati određena taksna klasa. O kreiranju kupaca više informacija možete naći u nastavku vežbe. Magento analizira sadržaj korpe i regije (definisane adresom na koju se paket šalje).

Da biste podesili osnovna podešavanja za takse:

U admin meniju pod sekcijom Sale idite na Tax a zatim na Product Type Class. Magento podržava mogućnost da se prave klase za proizvode i za kupce (Customer Type Class). Klase služe za grupisanje proizvoda ili grupa.

Primer klase je da li je kupac regularna mušterija ili partner? Ako definišete klasu partner u Customer Type class, možete da kada budete kreirali pravilo da kažete da za partnere ne važi određeni porez ili da postoji popust na robu. Tako možete da i kategorišete proizvode u klase i za svaku primenite drugu vrstu poreza.

Kreirajte klasu Proizvodi20PDV u Product Type Class tako što ćete kliknuti na Add New i uneti naziv.

U Manage Tax Zones & Rules koji se nalazi u Tax sekciji, dodaćete novi porez. Porez se unosi u procentima. Kliknite na Add Tax Rule dugme a zatim popunite obrazac kao što je dat na slici (slika 9.11).

Slika 9.11 Podešavanje Tax Rate za PDV od 20%

U Magentu postoji podrazumevana taksna klasa za korisnike „Retail Customer“. Možete da je koristite, kreirate novu kategoriju i preimenujete

89

postojeću. Korisničke grupe koriste već podrazumevanu grupu tako da nema potrebe da pravite izmene.

U sekciji Tax idite na Manage Tax Rules, a zatim možete da kliknite na New Tax Rule.

Možete da popunite informacije kao na slici (slika 9.12). Nije obavezno da kreirate taksna pravila, moguće je zasebno pri kreiranju proizvoda podesiti da svaki proizvod ili kategorija proizvoda bude unutar neke klase. Sa Tax Rules Magento će za sve kupce čija je poreska klasa Retail Customer obračunati porez za proizvode koji su klase PDV20% za zadati procenat (PDV20). Ukoliko ne želite da se to dogodi ne morate da kreirate pravilo porezovanja.

Slika 9.12 Dodavanje Таx Rule za Retail Korisnike

Kreiranje kategorija

Da biste kreirali kategorije vaših proizvoda potrebno je da kreirate root kategoriju. Jedna vaša prodavnica može imati samo jednu root kategoriju. Magento podržava da u okviru jednog CMS kreirate više prodavnica, zato postoji opcija za kreiranje više

90

root foldera. Sve kategorije koje želite prikazati na stranici vaše prodavnice stavljaju se u root kategoriju kao podkategorije – subcategories.

U okviru admin panel navigacionog menija idite na Catalog a zatim manage categories.

Podrazumevano otvoriće vam se stranica za kreiranje nove root kategoije (slika 9.13). Imenujte vašu glavnu kategoriju po imenu vaše prodavnice, a pod opcijom Is Active postavite na yes.

Slika 9.13 Kreiranje root kategorije u Magento CMS

U general information popunite informacije vezane za vašu root kategoriju kao što su naslov stranice, meta keywords, i naravno obavezno je uključite u main menu inače nećete moći da vidite podkategorije.

U display settings (slika 9.14) možete da podesite sledeća podešavanja:

Display Mode sastoji se od tri vrste kategorija:

a) Products only – prikaz samo proizvoda zadate kategorije

b) Static blocks only – prikaz samo statičkog bloka (o kreiranju i korišćenju statičkih blokova biće reči u sledećoj vežbi)

c) Static blocks and products – napraviće hibridnu stranicu koja može da prikazuje sadržaj statičkih blokova (ako želite da napravite banner sa reklamom i postavite ga za tu specifičnu kategoriju) kao i listu proizvoda kategorije.

91

d) CMS block, birate statički blok koji želite da postavite na stranicu ako ste podesili da vam se statički blok prikazuje u kategoriji.

e) Is Anchor je opcija da vam se kategorije vide u side meniju pored atributa proizvoda ako i njih namestite da budu vidljivi. Ako želite da korisnik vidi i kategorije u side meniju za svaku podkategoriju postavite Is Anchor na true.

Slika 9.14 Kreiranje root kategorije u Magento CMS

f) Default Product Listing Sort By – omogućava vam da podesite podrazumevani način prikaza proizvoda (podrazumevana vrednost je – najbolja cena (najbolja cena je cena koju vi kao administrator sajta možete da odaberete za određeni proizvod)), dok su kao podrazumevani atributi dati i ime ili cena.

g) Layered Navigation Price Step - omogućava da proizvode podelite u kategorije u zavisnosti od cene (0 – 1000 din, 1000 – 2000 din itd.) gde je step razmak koji deli kategorije.

Predlog autora je da ostavite podrazumevana podešavanja, pa posle dodavanja proizvoda u kategorije vratite se u ovu sekciju i zatim podesite podešavanja.

U custom design sekciji (slika 9.15) možete da podesite temu prodavnice koja će se odnositi samo na tu kategoriju. Ovo vam daje mogućnost stilizovanja različitih sekcija prodavnice pogotovo ako proizvodi koje nudite spadaju u različite kupovne oblasti.

U category products možete videti sve proizvode koji su vezani za određenu kategoriju

92

Kada završite sa podešavanjima kategorije kliknite na Save.

Slika 9.15 Postavljanje posebne teme za kategoriju

Da biste kreirali podkategorije odnosno kategorije vaših proizvoda, kliknite na root kategoriju sa strane u koju želite da smestite vašu podkategoriju a zatim kliknite na dugme Add Subcategory. Podešavanje podkategorija je isto kao i za podešavanje kategorija

Da bi vaša kategorija bila vidljiva na prodavnici, potrebno je da u admin glavnom panelu idete na System a zatim na Configuration. U levom uglu videćete Current configuration scope koji se koristi za upravljanje celim sistemom ili pojedinim prodavnicama, i korišćenjem podešavanja koja su prikazana slici 9.16 kliknite na Manage stores.

Slika 9.16. Podešavanje upravljanja opsegom prodavnica

Zatim kliknite na Main Website store (slika 9.17), izaberite vašu root kategoriju a zatim sačuvajte podešavanja.

Slika 9.17Manage store settings

93


Gde se nalaze generalna podešavanja sistema prodavnice?

Šta je customer tax class, a šta product type class i gde se koriste?

Koje su vrste prikazivanja proizvoda i koja je podrazumevana?

Šta je Current selection scope i čemu on služi?

U kom delu System sekcije se podešavaju valute koje koristi prodavnica?

Gde se podešavaju email adrese za kontakt prodavca, administratora i tehničke podrške?

Šta je layered navigation priced step?

94

10 Magento: Upravljanje prodavnicom: Kreiranje atributa, proizvoda, menadžment korisnika i Magento Connect

Kreiranje atributa za proizvode

Imate ideju čime se vaša prodavnica bavi, kreirali ste kategorije proizvoda i želite da dodate svoje proizvode. Proizvodi imaju cene i osobine, a neke od osobina želećete da napravite sami jer možda baš takva opcija ne postoji u ponudi atributa.

Te atribute bi bilo dobro da grupišete u generalnu grupu proizvoda na primer Televizori. Televizori imati različit tip ekrana TFT, LED, OLED... ali većina njih ima zajedničke atribute kao dijagonala ekrana, cena proizvoda.

Grupa televizori je Attribute Set. Svaki attribute set sadrži podrazumevane atribute koji su potrebni magentu za kreiranje proizvoda. To su atributi kao što su cena, naziv, SKU (stock keeping unit) itd. Ove atribute nije moguće ukloniti. Ostali atributi mogu biti uklanjani ili dodavani od strane korisnika. Attribute set se bazira na default šablonu koji magento ima za proizvode. Attribute set takođe može da se bazira na drugom attribute setu.

Attribute

U Admin meniju pod sekcijom Catalog, pod Attributes sekcijom izaberite Manage Attributes. Prikazaće vam se lista postojećih atributa (slika 10.1). Magento nudi razne modifikacije za atribute, od toga da li pripadaju specifičnoj prodavnici do toga da li se mogu porediti.

Slika 10.1Prikaz podrazumevanih atributa za Magento

Kada kliknete na „Add new attribute“ otvoriće vam se podešavanja za atribut (slika 10.2).

95

Attribute kod je jedinstveni indentifikator koji Magento koristi, neće biti vidljiv korisnicima.

Dostupna su vam sledeća polja:

Scope vam omogućava da postavite vidljivost vašeg atributa. Možete izabrati Global, da se vidi na svim radnjama, Store View da se vidi na podrazumevanoj prodavnici ili da birate specifičnu prodavnicu gde će proizvod biti vidljiv.

Slika 10.2Opšta podešavanja atributa

Catalog input type je vrsta unosa za vaš atribut. Ovo je vrednost koju ćete vi ili vlasnik prodavnice unositi prilikom dodavanja proizvoda. U ponudi je nekoliko opcija, od običnog polja za tekst do medijskog fajla.

Default value je podrazumevana vrednost koja će biti predstavljena za svaki kreirani proizvod.

Unique value definiše vrednost koja je dostupna samo za jednu vrstu proizvoda.

Values required - određuje ko unosi vrednost za polje vi ili vlasnik.

Input validation – testira da li je format unete vrednosti dobar.

Apply To – Magento nudi više vrsta proizvoda, ako želite da vrednost bude vezana za određeni tip (na primer Virtuelni) odaberite ga u listi.

96

Slika 10.3Podešavanje korišćenja atributa na frontendu

Frontend properties (slika 10.3) služi za podešavanje korišćenja atributa odnosno uključivanje proizvoda kao parametar za prikaz, pretragu i filtriranje.

Na vama je da izaberete koje od vrsta pretraga i filtera želite.

U zavisnosti od tipa unosa koji ste izabrali, kada kliknete na Manage Label / Options (slika 10.4) link, pojaviće vam se ime proizvoda za prikazivanje u vašoj prodavnici i/ili opcione vrednosti ako ste birali drop list, ili upload file ukoliko ste birali media.

U manage titles unosite ime atributa za određenu prodavnicu. Ukoliko želite da na svim prodavnicama bude isti naziv atributa unesite samo vrednost u polje za tekst ispod admin labele.

Slika 10.4Ime atributa za prikazivanje uz proizvod

Kada ste zadovoljni sa opcijama vašeg atributa, sačuvajte ga. Kreirajte potrebne atribute za vaše proizvode a zatim ih grupišite.

Attribute Set

Attribute set služi za grupisanje atributa proizvoda.

97

U Catalog sekciji admin panela u sekciji atributes kliknite na Manage Attribute Sets.

Otvoriće vam se stavka kao na slici 10.5. Ako vam je ovo prvi Attribute Set, u Based on će jedino biti ponuđen default. Kao što je rečeno u uvodu Attribute set mogu da se baziraju na drugim attribute setovima.

Slika 10.5Kreiranje attribute seta

Kada kliknete na Continue otvoriće vam se stranica sa slike 10.6. Možete da vidite da postoje kategorije – General i Prices kao i da tu postoje podrazumevani atributi. Atribute sa ikonicom na kojoj je crveni minus ne možete da uklonite jer su to su sistemski atributi koji su potrebni Magentu za rad.

Da bi ste dodali atribute potrebno je jednostavno da selektujete atribut iz Unassigned Attributes i da ga prevučete u željeni folder. Možete napraviti i svoj folder i grupisati atribute.

Da bi ste uklonili atribute, potrebno je da označite željeni iz grupe (koji nije sistemski) i prevučete ga u unassigned attributes.

Kada ste završili sa podešavanjem sačuvajte attribute set.

98

Slika 10.6Podešavanje attribute seta

Kreiranje proizvoda

Kreirali ste kategorije, kreirali ste atribute, sada je vreme da kreirate svoje proizvode.

Da biste kreirali svoje proizvode u admin navigaciji pod sekcijom Catalog kliknite na Manage products.

Na slici 10.7 možete da vidite da pored mogućnosti da odaberete Attribute set, možete da izabere i vrstu proizvoda

Slika 10.7Kreiranje novog proizvoda

Vrste proizvoda koje možete kreirati su:

99

Simple Product – Osnovna vrsta proizvoda. Može se iskoristiti za sve vrste fizičkih proizvoda.

Grouped Product – Ova opcija vam omogućava da kreirate više sličnih proizvoda na istoj strani. Na primer ako imate majce u različitim bojama, možete napraviti grupisani proizvod gde korisnici mogu da kupe više majci različitih boja. Pored svake majice mogu izabrati veličinu a zatim dodati proizvod u korpu.

Configurable Product – ovaj proizvod omogućava korisnicima da modifikuju proizvod. Primer je mogućnost biranja majica po veličini i boji. Trebali biste da napravite različite varijante proizvoda (svaka sa zasebnim SKU) a zatim dodate ove proizvode Configurable proizvodu.

Virtual product – proizvodi koji ne zahtevaju slanje ili prostor. Uglavnom su to garancije ili platne usluge.

Downloadable product – Proizvod koji se koriste za prodaju jednog ili više fajlova. Možete koristiti semplove za proizvode, a za prodaju fajlovi se mogu nalaziti na vašem ili spoljnjem serveru.

Bundle – proizvod koji je sačinjen od različitih komponenti. Najbolji primer za ovakvu vrstu je konfiguracija sopstvenog računara. Svaki segment možete kontrolisati a zatim na osnovu detalja formira se cena proizvoda.

Izaberite vaš Attribute Set i tip proizvoda, zatim kliknite na dugme Continue.

Otvoriće vam se General sekcija (slika 10.8) sa sledećim podešavanjima:

Name – ime proizvoda koje će biti prikazano u frontendu

SKU – Magento koristi SKU kao jedinstveni indentifikator. SKU je globalna promenljiva i svaki SKU koji definišete u jednoj prodavnici neće biti upotrebljiv u drugim prodavnicama.

Weight – težina proizvoda

Status – da li je porizvod vidljiv ili nije

Visibility – određuje vidljivost proizvoda.

Not visible individually – može da se vidi samo u sklopu proizvoda koji spadaju u configurable, grouped ili bundle tip.

Catalog – vidljiv u frontend katalog, nije vidljiv za rezultate pretrage

Search – nije vidljiv kroz katalog, može se naći samo korišćenjem pretrage

Catalog, search – vidljiv za katalog i pretragu.

100

U Meta information tabu definišite Meta podatke za vaš proizvod radi boljeg indeksiranja kod pretraživača.

Slika 10.8Podešavanje opštih podataka vezanih za proizvod

U Prices tabu (slika 10.9) podesite cenu vašeg proizvoda. Pored cene proizvoda možete podesiti i sledeće parametre: special price koja se koristi kod popusta ili promocija i (ukoliko niste uklonili polje) Cost koje jedino služi u backendu za generisanje izveštaja o profitu.

101

Slika 10.9Podešavanje cene proizvoda

Ako vaš proizvod ima slike možete ih dodati u images sekciji (slika 10.10). Base image stavka omogućava vam da odaberete koja slika će biti vidljiva u katalogu.

Slika 10.10Dodavanje slika za proizvod

U inventory sekciji podešavate broj vaših artikala u prodavnici (slika 10.11). Možete da podesite i minimalni prag kada će se korisnicima prikazati da artikal nije dostupan, minimalan i maksimalan broj artikala u korpi, kao i da budete obavešteni kada broj artikala proizvoda dođe do minimuma. Obavezno u Stock Availablity stavite da ako je artikal na lageru da je In Stock inače vaše mušterije neće moći da naručuju proizvod.

102

Slika 10.11Upravljanjem dostupnih jedinica proizvoda na lageru

U product categories (slika 10.12) možete da izaberete jednu ili više kategorija za vaš proizvod. Ukoliko ne odaberete kategoriju vaš proizvod neće biti vidljiv. Ne preporučuje se označavanje root kategorije kao kategorije proizvoda.

Slika 10.12Lista kategorija za grupisanje proizvoda

Osim atributa koje ste vi naveli za proizvod, vaše proizvode ćete kreirati koristeći prethodne korake. Dodatna sekcija postoji za Downloadable products (slika 10.13) gde možete da dodate pregled vašeg proizvoda kao i fajlove koje korisnici dobijaju kada kupe vaš proizvod. Možete da umesto postavljnja fajla uzmete link sa drugog servera.

103

Slika 10.13Sekcija Downloadable information – dodavanje semplova i digitalnih proizvoda

Kreiranje i menadžment korisnika

Kreiranje i upravljanje korisničkim nalozima u Magentu može izvršiti u Customer sekciji Admin panela. Možete da kreirate korisnike ili grupe korisnika.

Da biste kreirali korisnika, u Customer sekciji izaberite Manage customers, a zatim kliknite na dugme Add New Customer.

104

Slika 10.14Opšte informacije o korisniku koji se kreira

U Associate to website može biti proizvoljan broj opcija u zavisnosti od broja prodavnica. Postavite opciju na main website, a za grupu stavite General (slika 10.14).

Popunite informacije vezane za korisnika. Možete da podesite da se korisniku pošalje welcome email kao i autogenerisana lozinka (što se preporučuje)

U Addresses (slika 10.15) sekciji kliknite na Add adress a zatim štiklirajte oba polja da je adresa i za slanje i naplatu. Potom unesite podatke za adresu i sačuvajte korisnika.

105

Slika 10.15Podešavanje adresa za slanje i naplatu

Magento Connect

Magento Connect je online prodavnica Magento pluginova, tema i drugih dodataka podeljena u različite kategorije. Postoje besplatni i komercijalni pluginovi. Da bi ste pristupili Magento connect-u potrebno je da odete na sledeću stranicu.

http://www.magentocommerce.com/magento-connect/

Na ovoj vežbi biće prikazan primer preuzimanja i instalacije NextBits-ovog Banner Next plugina (slika 10.16) koji vam omogućava da kreirate proizvoljan broj bannera i da ih postavljate na vašim stranicama.

106

Slika 10.16 Prikaz Banner Next stranice sa linkom za instalacioni ključ

Na magento connect stranici u polju za pretragu unesite Banner Next by Certified Developer i trebalo bi da dobijete rezultat. Plugin takođe možete naći u plugin sekciji Customer Experience kada filtrirate sadržaj za Free plugins.

Kada kliknete na Install Now, ako niste prijavljeni dobićete login prozor, a zatim kada se prijavite dobićete Magento Connect key koji je potrebno da izaberete i kopirate.

U backendu vaše prodavnice u admin panelu potrebno je da idete na u System sekciju, zatim u sekciju Magento Connect, a zatim u Magento connect manager.

Trebalo bi da vam se pojavi login kao na slici 10.17.

107

Slika 10.17Magento connect manager – prozor za prijavljivanje

Da biste pristupili Manageru, potrebno je da unesete iste podatke koje unosite kada pristupate vašem admin panelu.

Kada pristupite Manager panelu (slika 10.18) možete da izvršite nekoliko operacija:

Da kreirate backup baze podataka vaše prodavnice

Da instalirate Magento ekstenzije korišćenjem ključa ili kačenjem zip fajla ručno.

Da instalirate i brišete postojeće ekstenzije

Da ažurirate postojeće ekstenzije i proverite njihovu kompatibilnost sa vašom verzijom prodavnice

Da biste instalirali Banner Next, potrebno je da ključ prekopirate u polje pored Paste extension key to install a zatim kliknete na install.

Kada se instalacija završi kliknite na link Return to Admin.

108

Slika 10.18Magento connect manager – prozor za upravljanje ekstenzijama i backupom baze podataka

U zavisnosti koju vrstu ekstenzije instalirate, njena podešavanja se mogu naći na različitim lokacijama. Za banner next trebalo bi da vidite novu sekciju u vašem admin panelu (slika 10.19)

Slika 10.19Magento login manager – prozor za prijavljivanje

Na slici 10.19 takođe možete da vidite i Facebook Store kao takođe jednu od ekstenzija koja je dostupna za instalaciju. Za sve ekstenzije obavezno pročitajte opis i instalacionu dokumentaciju pre nego što ih implementirate u vašu prodavnicu.

Podešavanje Banner Next plugina

Često vaši klijenti će želeti da postoji neka vrsta banera na njihovoj prodavnici koji će moći da linkuje ka proizvodu ili kategoriji gde postoje popusti. Za ovakve pluginove

109

static blokovi su odlično rešenje, a više reči i o samim blokovima možete naći u vežbi koja je posvećena njihovom pravljenju. U ovom poglavlju ćemo proći kako da postavite next gen banner na početnu stranicu, a kada pročitate i poglavlje o static blokovima moćićete da postavite banere gde želite. Next Banner vam omogućava da pravite slajdere sa slikama koje mogu imati tekstualni opis i link ka kategoriji.

Da bi ste kreirali baner potrebno je da u Next Banner sekciji admin panela kliknete na Add banner.

Da biste kreirali vaš banner, potrebno je da mu podesite naslov, poziciju (autori preporučuju opciju Anywhere by CMS Widget)

Podesite veličinu vašeg banera, postavite Is Active na yes, a advanced setting možete podesiti podešavanja vezana za banner kao izgled banera, da li želite da imaju kružići na koje korisnik klikne da se kreće kroz baner ili želite možda strelice za navigaciju kao i brzina smenjivanja slajdova.

Podešavanja koja su korišćenja za primer (slika 10.20) su:

{ theme: 'minimalist', dots: true, numbers_align: 'center', interval: 4000, animateNumberActive: {backgroundColor:'#086865', color:'#fff'}, navigation: false, numbers_align: 'right' }

Za dodatna podešavanja posetite sledeću adresu:

http://extensions.nextbits.eu/banner-next?___store=responsive

110

Slika 10.20Banner Next – generalna podešavanja banera

U Banner Images (slika 10.21) možete postaviti slike za vaš baner (poželjno ih modifikovati da bi odgovarale dimenzijama banera).

Slika 10.21Banner Next – dodavanje slika

Pored dimenzija slika možete da dodate labelu koja opisuje link ako postoji, i HTML (ovde se misli na bazične stilove za italic, underline, bold, i za linkove, većina tagova će biti ignorisana), kao i redosled prikazivanja slika.

111

Display on pages i display on categories nije poželjno direktno dodavati, testiranjem autora priručnika, otkriveno je da može doći do fatalnih greški pri ovakvoj vrsti dodavanja u zavisnosti od vrste layouta, tako da ako želite da dodate na stranice ili kategorije koristite widgete o kojima smo pisali u vežbi posvećenoj statičkim blokovima.

Kada završite sa banerom sačuvajte promene. Narednih par redova biće posvećeno dodavanju banera na home stranicu. Ukoliko želite da dodate baner na neku od drugih stranica pročitajte vežbe vezane za statičke blokove.

U CMS sekciji Admin panela kliknite na pages, a zatim nađite i kliknite na link Home page.

Kliknite na content u levom meniju, a zatim na Show / Hide editor.

Kliknite na Insert Widget, izaberite Next Banner iz liste, a zatim baner koji treba da ubacite. Trebalo bi da postavite banner kao što je na slici 10.22.

Slika 10.22Banner Next – dodavanje slika

Kod će izgledati slično u zavisnosti kako vaša stranica izgleda:

<div class="page-title">

<h2>Home Page</h2>

</div>

<p>{{widget type="bannernext/widget" banner_id="2" template="bannernext/banner.phtml"}}</p>

Sačuvajte vašu stranicu, a zatim idite na frontend stranicu vaše prodavnice. Vaš baner bi trebalo da sada bude vidljiv.

112


Pri kreiranju korisnika da li je potreban unos lozinke za korisnika i zašto?

Koje sve funkcionalnosti ima Magento connect manager?

Šta je magento connect key?

Koji su načini instaliranja ekstenzija (pluginova) za Magento?

Navedite 3 ekstenzije sa Magento Connect sajta koje mislite da će poboljšati funkcionalnost vaše prodavnice

113

Koje tri sekcije ima Customers sekcija?

Navedite 5 predefinisanih atributa u Magento attribute categories?

Da li se predefinisani atributi obrisati?

Koje vrste proizvoda postoje u Magentu? Koje vrste proizvoda prodaje vaša prodavnica?

114

11 Magento: Kreiranje stranica, statičnih blokova i šablona za newsletter

Kreiranje i izmena stranica

Magento omogućava korisnicima da kreiraju i da menjaju postojeće stranice. Statičke stranice koje sam Magento kreira su About us, Contact Us, 404 page, Terms of Use, Customer Service.

Da bi ste kreirali statičku stranicu u backendu, potrebno je da u glavnom meniju kliknete na CMS, a zatim na pages.

U gornjem desnom uglu postoji dugme Add page. Pre nego što kliknete na dodavanje stranice, pogledajte tabelu postojećih stranica (slika 11.1).

Postojeće stranice imaju dodatne stavke.

Slika 11.1Lista podrazumevanih statičkih stranica u Magentu.

Osim naslova (title) postoji url key koji vam omogućava da napravite sopstveni link ka stranici. Postoji polje layout, koji vam daje izbor kolona za vašu stranicu. Status polje prikazuje vidljivost stranice. Date created i date modified, vam daju uvid u datume kreiranja stranice i njene zadnje izmene. I na kraju u okviru dugmeta Action postoji preview da vidite izgled vaše stranice bez odlaska unošenjem linka.

Kreiranje stranice

Da bi ste kreirali svoju stranicu potrebno je da kliknete na Add Page.

Prva stavka je Page information gde zadajete ime i link vaše stranice, zatim birate Store View koja, po želji, može omogućiti da se ova stranica vidi u svakoj temi koju imamo.

115

All store views će nam omogućiti da se vidi na svim verzijama prodavnice. Za stranice koje su specifične za određeni dizajn ili jezik, treba izabrati odgovarajuće stavke.

U page title unesite željeni naziv stranice (slika 11.2), a url key stavljate jedinstveno ime po kome pristupate stranici. Url key treba da se sastoji od jedne ili više pojenih reči, a mogu mu se dodati brojevni znaci kao i znakovi – ili _. Neki od primera su: informacije, o-nama,kontaktstrana itd.

Slika 11.2 Prikaz page information

Kliknite na Content stavku u levom meniju, otvoriće vam se WYSIWYG (what you see is what you get) editor sa sadržajem vaše stranice (slika 11.3).

Unesite sadržaj u zavisnosti kakvu stranicu želite kreirati. U Content Header možete staviti naslov koji želite da pojavi na stranici.

116

Slika 11.3Prikaz content editora sa HTML generisanim sadržajem

Sadržaj stranice se unosi ovde. Ako kliknete na Show/Hide Editor dugme, umesto WYSIWYG editora dobićete HTML kȏd vaše stranice. Takođe u paleti sa alatakama editora postoji dugme HTML ako želite da modifikujte vašu stranicu koristeći HTML i inline CSS kȏd. Klikom na Insert Widget dugmetom možete da ubacite svoje widgete na stranicu (npr. 10 najčešće pregledanih proizvoda). O kreiranju samih widgeta biće reči u nastavku vežbe.

U design sekciji izaberite željeni broj kolona za stanicu.

Design sekcija nudi vam da izaberete broj kolona za stranicu (1 column je podrazumevana vrednost), takođe i nudi da izaberete zasebnu temu, kao i da unesete svoj XML kȏd za definisanje šablona stranice. Custom design je posebna podsekcija, koja nudi da kreirate dizajn za stranicu u određenom periodu.

U meta data sekciji možete uneti ključne reči vezane za stranicu, kao i opis stranice.

Kada završite sa izmenama potrebno je da sačuvate stranicu.

117

U Meta Data sekciji unesite opis stranice i ključne reči vezane za stranicu a zatim sačuvajte promene.

Static blocks i Widgets

Dva korisna alata u Magentu su alati za pravljenje blokova i alati za widgete. Static block je jedna od opcija koju widget može da prikazuje. Static block prikazuje sadržaj, multimedijalni ili jednostavan tekst. Jedan static block koji Magento napravi pri instalaciji jesu linkovi u podnožiju.

U backendu prodavnice potrebno je da u sekciji CMS admin glavnog menija kliknete na stavku Static Block.

Kreirajte static block tako što ćete kliknuti na dugme Add new Block u gornjem desnom uglu.

Za title stavite naslov vezan za vaš blok (slika 11.4), a identifier je jedinstveni naziv preko kojeg pozivate kasnije taj blok. Status određuje da li je blok dostupan ili nije za korišćenje.

U content WYSIWYG editoru unesite sadržaj vašeg bloka. Za one koji su upoznati sa client side programiranjem, koristešćenjem javascript ili flash skripti, moguće je prikazivati i dinamički sadržaj u blokovima.

Slika 11.4 Prikaz prozora za kreiranje static blocka

Primer za kreiranje sata u Static Block-u:

<script type="text/javascript">

function updateClock ()

{

var currentTime = new Date ();

var currentHours = currentTime.getHours ();

var currentMinutes = currentTime.getMinutes ();

var currentSeconds = currentTime.getSeconds ();

118

currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " ";

document.getElementById("clock").firstChild.nodeValue = currentTimeString;

}

window.onload=function() {

updateClock();

setInterval('updateClock()', 1000 );

}

<script>

<h2 id="clock"> </h2>

Dati kȏd možete staviti unutar HTML editora vašeg statičkog bloka. Prilikom pokretanja aplikacije u zavisnosti od toga gde se nalazi widget sa satom možete podešavati vreme prikazivanja.

Kada kreirate blok, on još uvek neće biti vidljiv na vašoj prodavnici. Potrebno ga je dodati kao widget, a postupak dodavanja bloka u widget je objašnjen u nastavku.

Widgeti su dodaci za vaš sajt koji mogu biti ili statički blokovi, ili ankete za korisnike ili RSS feeds ili bilo kakav drugi dodatak koji ste izabrali koristeći eksterne pluginove ili isprogramirali sami.

U backendu vaše aplikacije pod sekcijom CMS glavnog menija izaberite Widgets Kliknite na dugme Add new Widget u gornjem desnom uglu pored zaglavlja

sekcije U settings sekciji (slika 11.5) izaberite CMS static block, pod temom izaberite

temu koju koristite za prodavnice a zatim kliknite dugme countinue.

Studentima se preporučuje da uzmu i da sami testiraju ostale blokove. U design package / theme jako je važno izabrati temu (default/default ukoliko niste još uvek menjali temu sajta) vašeg sajta ali takođe imati u vidu koje sekcije tema ima. Ako

119

izaberete nepostojeće mesto za widget kasnije u podešavanjima on neće biti vidljiv korisnicima vašeg sajta.

Slika 11.5 Izbor tipa widgeta i teme na kojoj će biti postavljen

U widget instance name navedite jedinstveno ime za widget (indentifikator) koje koristite da bi ste mogli da komunicirate sa njim.

U sort order unesite broj 1 za prioritet.

Sort order je prioritet widgeta. Što je manji broj, veći je prioritet.

Kliknite na add layout update (slika 11.6). U zavisnosti od toga šta ste stavili u static block, izaberite sekciju gde želite da vam se prikaže. Za demonstacioni primer, korišćen je primer javascript sata, i izabrana layout podešavanja – Display on: All pages i right column.

Sa Add Layout update možete da izaberete stranice na kojima će se vaš widget pojavljivati. Možete da izaberete proizvoljan broj layouta, i da podesite tačno u kom segmentu vaše prezentacije želite da se widget nađe (npr. leva kolona sekcije o TV aparatima).

Slika11.6 Primer dva layouta za statički blok

Kliknite na Widget options u levom meniju, a zatim na dugme Select Block i izaberite vaš block. Zatim sačuvajte podešavanja.

Osvežite vašu stranicu i sa desne strane vaše prodavnice trebao bi da bude prikazan vaš statički blok.

Može se desite da se vaš blok ne prikaže, budite pažljivi prilikom izbora teme ili prilikom izbora mesta prikaza vašeg bloka jer određena tema ne mora podržavati tu lokaciju za prikaz.

120

Static blocks u glavnom meniju prodavnice

Magento nije rešio problem prikazivanja stranica u glavnom meniju, što su najavili kao ispravku u verziji 2.0 prodavnice. Zato trenutno postoji rešenje, a to je korišćenje statičnog bloka umesto stranice. Static block i stranica se isto podešavaju tako da ovaj nedostatak nije veliki. Da bi ste napravili stranicu, potrebno je da kreirate vašu stranicu u statičkom bloku. Nije potrebno da kreirate widget za prikaz ove stranice, već u Catalog, zatim u Manage Categories, i u vašoj root kategoriji kreirate podkategoriju. U podkategoriji (slika 11.7) trebate u Design settings da podesite da se prikazuje samo static block i da izaberete static block vaše kategorije.

U General information popunite informacije koje su vezane za stranicu jer sva podešavanja koja su uneta na njoj se prikazuju za taj statički blok.

Slika 11.7Primer dodavanja statičkog bloka kao stranice

Kreiranje responsive newsletter template-a

Magento omogućava da napravite svoj newsletter template i da šaljete poruke korisnicima. Jako je važno da vaš newsletter izgleda stilski kao vaša prodavnica tj. da sadrži logo i boje koje odgovaraju vašoj prodavnici. Takođe mobilne tehnologije su sve zastupljenije na tržištu pa bi bilo pametno da vaš mail može da se pročita i na mobilnom uređaju.

Različiti mail servisi različito tumače HTML mailove i zato postoji problem da ako ne želite da iscrpno testirate različite servise, uzmete neko gotovo rešenje. Za ovu vežbu ćete to i uraditi. Zurb foundation o kojima će biti reči i u sekciji za dizajn teme prodavnice nude gotova responsive rešenja čiji kȏd samo treba modifikovati za vašu

121

prodavnicu. Primer koji će vam biti prezentovan je za imaginarnu firmu, od vas se očekuje da modifikujte newsletter koristeći vaše boje i logo vaše prodavnice.

Da biste preuzeli neki od šablona za vaš template trebate posetiti sledeću stranicu: http://zurb.com/playground/responsive-email-templates

U ponudi vam je nekoliko email template-a, izaberite koji vam se najviše sviđa a zatim kliknite na download i sačuvajte zip gde želite. HTML struktura i CSS biće korišćenja kreiranje template-a u Magentu. Za primer newslettera biće demonstriran template „Newsletter“ (slika 11.8).

Slika 11.8Newsletter šablon sa Zurg Templates sajta

Pre nego što iskoristite kȏd za Magento template, lakše je sva podešavanja u vezi stilova i html kȏda podesite kroz kȏd editor.

Raspakujte zip fajl, a zatim u vašem kȏd editoru otvorite newsletter.html i email.css

Sam html kȏd newsletter.html fajla je jako dobro iskomentarisan i ne biste trebali da imate problema sa snalaženjem.

122

Za Magento template sadržaj našeg kȏda što se tiče tekstualnog sadržaja nije bitan. Sve izmene samog sadržaja radite kada pravite newsletter koji šaljete. Za šablon su nam bitne stavke koje se retko menjaju, kao što su logo, linkovi ka socijalnim mrežama, kontakt telefon i mail i drugo.

Ostavićemo lorem ipsum tekst (tekst koji popunjava sadržaj paragrafima da ne biste smišljali konkretan tekst) u kȏd editoru, a dodaćemo stvari kao što su logo i ako želite neke konkretne slike koje će se pojaviti, i naravno izmenićemo boje da odgovaraju logou naše prodavnice.

Ukoliko se ne snalazite najbolje sa HTML i CSS sadržajem, u priručniku postoji dodatno poglavlje koje daje osnovna objašnjenja koja su potrebna za izvođenje ovog dela vežbe. Pročitajte poglavlje a zatim se vratite na ovaj deo stranice.

Template koristi tabelarni dizajn zato što ga podržava najveći broj email klijenata, i najveća je šansa da će vaši korisnici moći da vide sadržaj.

U admin panelu kliknite na Newsletter a zatim na newsletter template i kliknite na Add new newsletter template. Dobićete prazan HTML template i prazan prostor za CSS template

Template Name je ime vašeg šablona. Template Subject, Sender Name, Sender Email su takođe šabloni za naslov poruke, ime osobe koja je šalje i njen mail, i oni se mogu podešavati kada budete dodavali konkretne informacije.

Popunite potrebne podatke a zatim kopirajte kȏd iz vašeg editora prateći uputstva data ispod.

Kliknite na Show / Hide editor tako da vam se pojavi trenutni HTML kȏd. Sačuvajte kȏd od unsuscribe dugmeta, a ukoliko ga greškom obrišete, možete dobiti ponovo kȏd koristeći Insert Variable a zatim odabrati Unsuscribe.

Iz vašeg HTML template prekopirajte sav kȏd u Template content koji počinje od  sve do  dela kȏda.

Iz CSS kȏda prekopirajte sav kȏd u Template styles. Umesto slika koje ste koristili u HTML kȏdu, sada obrišite njihov kȏd, i dok ste u kȏd editoru smestite kursor gde želite da ubacite sliku a zatim kliknite na Insert image, izaberite sliku i Magento će automatski generisati kȏd.

U Newsletter template nije potrebno menjati sadržaj. Sadržaj se menja u Newsletter Queue.

Da biste videli izmene na sadržaju prvo sačuvajte template a zatim kliknite preview.

Primer jednog izgleda šablona dat je na slici 11.9.

123

Slika 11.9.Primer gotovog Magento šablona

Ako ste zadovoljni promenama, možete kreirati vaš prvi newsletter tako što ćete u sekciji Newsletter templates pod stavkom Acton u drop down meniju izabrati Queue newsletter.

Pored podataka koje ste popunjavali u template, postoji polje Queue date u kojem birate kada će vaš mail biti poslat.

Sada možete stavljati konkretne podatke umesto lorem ipsum teksta. Ove izmene ne utiču na template. Sve što izmenite važiće za taj newsletter dok šablon će ostati sačuvan za dalje korišćenje.

Preporučuje da sve izmene radite kroz kȏd editor umesto WYSIWYG editora jer postoji šansa da se obriše i html tag koji je važan za izgled vaše stranice.

Kada završite vaš newsletter možete pogledati njegov izgled. Takođe možete da vidite status vašeg newslettera i da li je njihovo slanje bilo uspešno.

124

Slika 11.11Primer gotovog newslettera

125


Šta su statički blokovi i koja je razlika između bloka i stranice?

Kako u Magentu kreiramo stranice koje se dodaju u navigaciju?

Koji je razlog zbog kog ne možemo videti widgete iako smo ih kreirali?

Koja je razlika između sadržaja u Newsletter Template i Newsletter Queue?

126

12 Magento: Teme za Magento prodavnicu

Responsive design

Danas, gotovo svaki klient želi mobilnu verziju svog sajta. Ovo uključuje i ecommerce aplikacije. Problem kod pisanja mobilnih native aplikacija je što su suviše zavisne od hardvera. Vama za online prodavnicu ne trebaju nikakve hardverske specifikacije, osim ako želite da na osnovu gps lokacije saznamo lokaciju korisnika, ali sada sa HTML5 Geolocation, više niste direktno zavisni od hardvera. Svaki prenosni uređaj ovih dana je različite rezolucije i rešenje gde se aplikacija pravi za određenu veličinu nije moguća. Rešenje koje je prihvaćeno u dizajnerskim krugovima je responsive design.

Responsive design je pristup koji predlaže da se dizajn i razvoj aplikacije trebaju usaglasiti sa korisničkim potrebama i tehničkim mogućnostima kao što su veličina ekrana, platforma i orijentacija ekrana. Ovaj pristup se sastoji od kombinovanja fleksibilnih mreža i šablona koji se mogu modifikovati u zavisnosti od načina pristupanja korisnika. Iako popularno rešenje, responsive design nije najbolje rešenje, nekad je bolje praviti zasebne sajtove za platforme ili aplikaciju za prenosne uređaje umesto responsive verzije originalnog sajta.

Korisnici koji pristupaju vašoj prodavnici sa mobilnih telefona, ne žele da pri dolasku na stranicu budu zatrpani informacijama. Pristup stranici mora da bude brz i da omogućava korisniku da brzo dolazi do željenih rezultata putem navigacije ili pretrage.

Korišćenjem CSS media query (upita) možete da podesite vašu prodavnicu da odgovori na zahteve korisnika, a možete i iskoristiti gotova CSS frontend framework rešenja za kreiranje vaše stranice. U okviru ovog kursa koristićemo gotovo CSS framework rešenje.

CSS Frameworks / Grid layouts

Šta je framework? Framework je standardizovana biblioteka koncepata, prakse i kriterijuma za rešavanje učestalih problema. Ljudi koji se godinama bave dizajnom ili programiranjem aplikacija, često se sreću sa istim problemima. Posle nekog vremena se razvije šablon koji se ponavlja kroz pisanje kȏda, i više takvih šablona se kombinuje i sačinjava framework. CSS framework najčešće čine rešenja korisnika za problem univerzalnosti njihove aplikacije. Ako otvorite CSS stylesheet videćete uređenu i dokumentovanu biblioteku sa stilovima koje možete implementirati u vašu stranicu. Ovo ne važi ako u nazivu dokumenta .min. .min označava da se radi o kompresovanoj biblioteci, i takvi fajlovi se koriste kada je aplikacija spremna za

127

puštanje u javnost. .min fajlovi su korisni za prenosne uređaje zato što korisnici koji pristupaju sa njih često ne moraju da pristupaju sa mesta gde je brz internet ili da imaju neograničen protok podataka.

Grid layouts je koncept baziran na izradi tabele koja može da ima određen broj kolona (Slika 12.1) i svaka od kolona može da se skalira u zavisnosti od veličine ekrana. Grid layout mogu biti fluid (cela tabela zauzima 100% stranice) i dve vrste koje se baziraju na najpopularnijim dužinama za kontejnere sadržaja - 960 grid i 1200 grid.

Slika 12.1Skeletor Grid primer kolona

Predefinisane teme za prodavnicu

Magento sadrži predefinisane teme koje možete iskoristiti za vašu prodavnicu. Nije poželjno koristiti ponuđene teme za prodavnicu. U zavisnosti od grafičke knjige klijenta, potrebno je koristeći palete boja napraviti svoju temu. Najjednostavniji način za izradu tema je kreiranje tema korišćenjem metode child theme, gde na osnovu postojeće teme (uobičajeno default/blank) se modifikacijom CSS datoteka, kreira novi dizajn koji odgovara vizuelnom indentitetu vašeg klienta.

Teme koje postoje u magentu su:

- blank - tema koja predstavlja minimalni dizajn. Dobra osnova za kreiranje child teme.

- default - podrazumevana tema kada instalirate magento

- iphone - tema optimizovana za mobilne uređaje. Izgrađena na Bootstrap frameworku, palete teže ka narandžastoj boji.

128

- modern - Magento tema sa modernijim bojama, zastpuljeni gradient sivi efekti kod elemenata stranice.

Magento mobile

Magento nudi i opciju izrade aplikacija za mobilne telefone. Usluga se plaća, a korisnik svoju aplikaciju može napraviti koristeći jednostavan editor (slika 12.2) koji se nalazi u Mobile sekciji Admin panela.

Slika 12.2Dizajn prozor za Magento mobile aplikaciju

Prvi korak u kreiranju mobilne aplikacije je da dodate novu aplikaciju na Add App dugme. Zatim izaberete platformu. Možete napraviti aplikaciju za tri platforme, bazirane na Adroid OS i iOS za mobilne uređaje i tablete. Kad izaberete platformu i kliknete continue dobićete opcije za imenovanje aplikacije, i da izaberete da li je aplikacija kataloškog tipa ili želite da korisnici mogu da obavljaju kupovinu putem svojih prenosnih uređaja. U Designu imate predefinisane teme, a raznolikim izborom palete boja možete da modifikujete izgled aplikacije. Takođe možete da dodate ikonicu za homepage (poželjno png ili gif slika sa transparentnom pozadinom) kao i baner za naslovnu stranu (poželjno je da slika ne prelazi 50kb). U content sekciji možete dodati stranice koje ne spadaju u vaš katalog (About us, Contact us...). U payment sekciji možete da izaberete da li želite da vaše metode plaćanja koje se koriste u web verziji prodavnice budu na raspolaganju kupcima i u mobilnoj verziji. Cache management sekcija vam omogaćava da izaberete brzinu keširanja podataka

129

aplikacije. Ako niste upoznati sa caching sistemom, najbolje je ostaviti ponuđenu opciju. Social Networking omogućava da integrišete elemente socijalnih mreža u vašu aplikaciju. Push notifications, koji je ima eksternu podršku omogućava da za dodatni trošak šaljete neograničen broj ponuda korisnicima koji imaju instaliranu aplikaciju.

Kada završite sa uređivanjem vaše aplikacije i sačuvate je, sa sledećim pristupom template-u pojaviće se u desnom uglu dugme Save and Submit. Kada kliknete na dugme, pojaviće se opcije za završna podešavanje vaše aplikacije kao i polje za kod koji potvrđuje da ste platili Magentu licencu za aplikaciju. Cene licenciranja mobilnih aplikacija prikazane su na Magento sajtu u sekciji Resources / Mobile.

Child Theme metod

Da biste napravili temu za vašu prodavnicu od samog početka, potrebno je razumevanje template engina, princip po kome funkcioniše magento struktura (kada se upoznate sa konceptom kako izgledaju mvc aplikacije, ovo više nije prepreka) i naravno trail i error pristup izradi teme. Programeri iako često znaju za ovaj problem, često koriste „child theme“ kao metod za izradu dizajna. Ovaj metod zahteva da kopirate celu temu a zatim da na novoj temi izvršite izmene.

Pisanje i objašnjenje izrade cele teme izlazi iz opsega ovog kursa tako da u ovoj vežbi će vam biti demonstrirane metode child theming-a na blank i iphone temi, a zatim kako da podesite da Magento promeni temu u zavisnosti od uređaja sa kog korisnik pristupa.

Da biste kreirali child theme potrebno je da iskopirate sledeće foldere:

U folder prodavnice\app\design\frontend kopirajte default folder, a zatim preimenujte kopiju u ime paketa (za demonstracioni primer – dusan1) a zatim unutar njega obrišite sve osim blank i iphone.

U magento\skin\frontend ponovite prethodni korak.

Design folder u App folderu sadrži strukturu Magento CMS-a dok Design folder u Skin folderu sadrži slike, css i javascript biblioteke. Za ovu vežbu radićete samo u Design folderu u skin folderu.

Pre nego što krenete sa modifikacijom vaše prodavnice potrebno je da je postavite za podrazumevanu temu, tako da sve promene možete videti odmah po izmeni koda.

Da bi ste ovo napravili, potrebno je da odete u System sekciju admin navigacije, a zatim u Configuration sekciji, u Design sekciji levog menija podesite sledeće parametre (Slika 12.3):

130

Package

Current Package Name: ime vašeg paketa

Themes

Templates: blank (ako niste menjali ime tema u folderu)

Skin (Images / CSS): blank

Slika 12.3Podešavanja demonstracione teme za Magento

Kada ste postavili vašu temu sada je potrebno da je modifikujete. Na slici 12.4 prikazani su koraci za modifikovanje određenog elementa. Koliko daleko želite da idete sa modifikacijama zavisi od vas, ali svaka modifikacija koja je dalja od kozmetike radi se izmenom ili kreiranjem phtml fajlova koji se nalaze u app / design sekciji. Sve izmene koje se tiču css-a rade se u skin/design/vaš paket/vaša tema/styles.css fajlu.

Napomena: Koraci sa slike 12.4 rađeni su koristeći Google Chrome i Notepad++. Možete koristiti druge pretraživače i kȏd editore, većina modernih pretraživača ima alternativu „Inspect element“ naredbe koju ima Google Chrome. Za nalaženje i modifikaciju kȏda možete koristiti i običan Notepad, bitno je samo da imate opciju find. Korišćenje kod editora olakšaće vam snalaženje kroz CSS kȏd.

U Google Chrome kliknite element čiji stil želite da izmenite. Primer za demonstraciju biće izmena boje pozadine i boje fonta. Od vas se očekuje da sami modifikujete elemente koje želite da prilagodite temi vaše prodavnice koristeći ovaj šablon za izmene kȏda.

131

Mišem pređite preko elementa a zatim kliknite desni taster miša i u pomoćnom meniju izaberite „Inspect Element“. Na vašem prozoru otvoriće se okruženje za ispitivanje elemenata. Vaš element će biti selektovan i biće vam prikazan selektor i dimenzije (slika 12.4 - A), kao i HTML kod za element (slika 12.4 - B). Vas zanima naziv koji stoji u klasnom selektoru. U desnom meniju (slika 12.4 - C) možete da vidite koji su CSS stilovi prikazani za objekat i na kojoj liniji koda se nalaze.

Slika 12.4Koraci za modifikaciju Magento teme

Sledeći korak je da otvorite vaš css fajl koji se nalazi u vašem magento folderu u xampp htdocs folderu na adresi skin/design/vaš paket/vaša tema/styles.css fajlu.

Otvorite fajl a zatim idite na liniju koda koja vam piše u Inspect Elementu, a možete i da koristite Find funkciju editora (slika 12.4 - D).

Za demonstracioni primer kod:

.block .block-title { border-bottom:1px solid #ddd; padding:3px 10px; }

zamenjen je sa:

132

.block .block-title { background: #D0D0D0; color: #202020; border-bottom:1px solid #ddd; padding:3px 10px; }

Rezultat izmene prikazan je na slici 12.5. Ponavljajte korake sve dok ne dobijete željeni izgled teme vaš prodavnice.

Slika 12.5Zaglavlja blokova u Magento prodavnici – pre i posle izmene CSS-a

Promena logoa prodavnice

Da bi ste dodali logo vaše prodavnice za vašu novu temu, potrebno je da kopirate vaš logo u images folder teme koju koristite za prodavnicu. Images folders se nalazi u folderu čija je putanja vašaprodavnica/skin/design/vaš paket/vaša tema/images.

U system sekciji admin panela kliknite na Configuration.

U levom meniju configuration sekcije kliknite na design.

U header tabu (slika 12.6) unesite putanju images/vaš logo.ekstenzija a zatim sačuvajte podešavanja. Možete promeniti i zaglavlje kao i fav icon u istoj sekciji.

133

Slika 12.6Podešavanja zaglavlja i podnožija Magento prodavnice

Podešavanje detektovanja teme za mobilni telefon

Ukoliko želite da imate i temu za mobilni telefon, možete modifikovati temu iphone koju ste ostavili u folderu vašeg paketa. Sve što treba da uradite posle modifikacije je da dodate Matched Expression koji će reći Magentu na koje uređaje da pazi.

Da biste podesili detekciju u design modu gde ste podesili vaš paket kliknite na Add Exception ispod polja slici 12.7 a zatim treba da dodate Matched Expression i temu koju želite da se pokrene za određeni uređaj.

134

Slika 12.7Dodavanje Matched Expression i teme za mobilni pregled vaše prodavnice

Na internetu možete naći Matched Expression za uređaje, u demonstracionom primeru je korišten sledeći koji odgovara zastupljenim mobilnim uređajima na tržišu:

iPhone|iPod|BlackBerry|Pre|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Safari Mobile

Kao zaključak treba napomenuti da je ovo sama osnova dizajniranja Magento tema. Sam proces child theme metode ubrzaće se kada se upoznate sa izmenama CSS-a. Na internetu možete naći resurse koji objašnjavaju kako se menja HTML struktura, čiji rad prelazi materijal predviđen ovim kursem.

Na magento connect postoje besplatne i komercijalne teme koje su dostupne za upotrebu. Posetite Connect portal i pogledajte da li postoji neka tema koja vam odgovara. Pored toga dostupan je veliki broj ekstenzija koje možete instalirati i doprineti boljoj funkcionalnosti vaše prodavnice.

135


Šta je responsive design?

Šta je framework?

Koja je putanja foldera za CSS izmenu?

Čemu služi Design folder u App folderu a čemu Design folder u Skin folderu?

Šta predstavlja Method Expression?

Kojim alatom možemo da vidimo klasne selektore elemenata Magento prodavnice? Koji ste pretraživač a koji kod editor koristili za modifikacije na vašoj prodavnici?

136

Literatura [1] Lutovac M. i Tošid D., Biznis plan za elektronsko poslovanje, VETS, Beograd, 2006.

[2] Lutovac M., Ugljanin E., Crnišanin A., i dr., “Softverski sistemi za podršku poslovanja malih i srednjih preduzeda”, Održivi razvoj nerazvijenih područja, Novi Pazar, 2009.

[3] Severdia R. i Krouder K., Joomla, O’Reilly, Beograd 2010.

[4] Tošid D., Pocajt V. i Lutovac M., Osnovi elektronskog poslovanja, VETS, Beograd, 2007.

[5] Turban, McLean, Wetherbe, Informaciona tehnologija za menadžment – Transormisanje poslovanja u digitalnu ekonomiju, Zavod za udžbenike i nastavna sredstva, Beograd, 2003.

[6] Ugljanin E., Lutovac M., “Elektronska trgovina kao nosilac razvoja malih i srednjih preduzeda”, Održivi razvoj nerazvijenih područja, Novi Pazar, 2009.

[7] Vaskovid V. i Lutovac M., Elektronsko poslovanje, Državni univerzitet u Novom Pazaru, 2009.

[8] www.elektronskoposlovanje.rs

[9] www.imi.pmf.kg.ac.rs

[10] www.lab.webasimo.com

[11] www.prodavnicaknjiga.rs

[12] www.zakon.org/robert/internet/timeline

[13] Magento User Guide - Expert Instruction for Launching Your Online Store

[14] Designer's Guide To Magento - Expand Your Knowledge and Creativity

[15] Robbert Ravensbergen, Sander Schoneville - Magento: Beginner's Guide, 2nd Edition

[16] Bret Williams - Mastering Magento

[17] www.magentocommerce.com

Documents

Svetlana Štrbac -Savić Aleksandar Simović Nada Staletić ... · Očigledno da je većina poslovnih sistema svesna činjenice da elektronsko poslovanje jeste neminovnost, većina