Vytvorenie internetového obchodu krok za krokom

   E-shop, internetový obchod alebo ešte inak estore, webshop, to všetko sú ekvivalenty pre obchod na internete. Ten ponúka svoje produkty a služby vo virtuálnej podobe.Predajca by rád ponúkal svoje produkty alebo služby na internete. Na to však potrebuje špeciálnu aplikáciu – elektronický obchod – pomocou ktorej môže prezentovať produkty a služby ale aj prijímať a spracovávať objednávky.

Takáto aplikácia sa dá získať 3 spôsobmi:

1)      Naprogramuje si ju predajca sám alebo túto úlohu zadá špecializovanej firme. Nespornou výhodou je, že v takomto prípade máme tvorbu e-shopu plne pod kontrolou, konečná verzia bude obsahovať len také funkcie a aplikácie, ktoré naozaj potrebujem. Nevýhodou však je vysoká časová a finančná náročnosť.

2)      Využitie existujúcich riešení, čo znamená voľné siahnutie niektorého z open source e-shopou. Často sú to kvalitne dizajnovo aj funkčne riešené šablóny, ktoré si zručný predajca dokáže prispôsobiť svojim potrebám. Výhodou je finančná nenáročnosť tohto riešenia, nevýhodou potom nutnosť aspoň základných znalostí v oblasti webových aplikácií.

3)      Na internete tak isto existujú firmy, ktoré ponúkajú prenájom alebo predaj e-shopou. Majú k dispozícií svoje vlastné riešenia a cena sa odvíja od funkčnosti a náročnosti vypracovania. Je to z hľadiska  času najmenej náročné riešenie, ktoré ale zas na druhej strane niečo stojí. Pri prenájme sa väčšinou platia mesačné poplatky alebo sa zaplatí jednorazový ročný poplatok.

  1. 1.      Prvotná analýza trhovej konkurencie 

Prvým a nevyhnutným krokom pri tvorbe e-shopu je poznanie konkurencie a porovnanie vlastnej ponuky s inými e-shopmi s podobným alebo rovnakým produktovým portfóliom.

  1. Prejsť si a preštudovať e-shopy a weby, ktoré majú také isté alebo podobné produktové portfólio. Získame tak inšpiráciu.
  2. Analyzovať svoje konkurenčné výhody. Ak žiadne nemáme snažíme sa ich vytvoriť. Cieľom je ponúknuť zákazníkovi pridanú hodnotu a odlíšiť sa od konkurencie.
  3. Na tomto základe môžeme vytvoriť návrh produktovej ponuky, ktorá by mala byť pre zákazníka jedinečná a ľahko čitatelná.

Príklad:

V e-shop sa chceme zamerať na fotografickú techniku a fotografické príslušenstvo. Snažíme sa najprv poznať cieľovú skupinu zákazníkov. Zaujímajú nás aj informácie o konkurenčných

e-shopoch. Tie získame prostredníctvom vyhľadávačov (google.sk, zoznam.sk, a pod.) kam zadáme kľúčové slová pre vyhľadávanie (fotografická technika, fotografické príslušenstvo, fotoaparáty, a pod.). Tak získame prehľad o štruktúre a objeme konkurencie.

Výsledkom tohto postupu bude identifikovanie našich komparatívnych výhod, tie potom uverejníme na stránkach nášho e-shopu.

  1. 2.      Voľba kľúčových slov 

Znamená identifikovanie slov alebo slovných spojení, ktoré môžu potenciálny zákazníci zadať do vyhľadávačov (podobne ako sme to urobili my v predchádzajúcom kroku pri získavaní informácií o konkurencii) pri hľadaní našej ponuky.

Prvotný zoznam kľúčových slov si musíme vytvoriť samy a to prostredníctvom poznania aké potreby zákazníkov sa chystáme uspokojiť. Je to vlastne určenie najčastejšie používaných slov alebo slovných spojený súvisiacich s našou ponukou. Takýto zoznam nám pomôže pri ďalšom kroku, ktorým je vytvorenie názvu e-shopu. Tak isto bude prínosom pri opise produktov v ponuke. Je dôležité vedieť analyzovať a vybrať tie slová ktoré budú pre daný e-shop najprínosnejšie a najvýstižnejšie. Správne zvolené kľúčové slová totiž zabezpečia, že po ich zadaní do vyhľadávača sa náš e-shop objaví na prvých stránkach.

Príklad:

Náš fiktívny e-shop sa bude zaoberať fotografickou technikou a príslušenstvom. Vhodnými kľúčovými slovami tak môžu byť:

foták digitálny, zrkadlovky, fotoaparáty, fotografické doplnky, poprípade aj konkrétne názvy jednotlivých typov, ktoré máme v ponuke.

  1. 3.      Vytvorenie názvu e-shopu 

Vzhľadom na to, že názov e-shopu, bude prvou vecou, ktorú zákazníci uvidia je mimoriadne dôležité venovať tomuto kroku náležitú pozornosť. K tvorbe názvu môžeme pristupovať 2 rôznymi spôsobmi:

  1. Ak je naši cieľom primárne to aby sme sa dostali na prvé miesta pri výsledkoch vyhľadávania je vhodné použiť niektoré z vybraných kľúčových slov (pozri krok 2). Pokračovaním tohto procesu je zaregistrovanie internetovej adresy s menom našej spoločnosti a vytvoriť presmerovanie.

Príklad:

Ako názov e-shopu zvolíme www.fotaky.sk. Tak sa pri zadaní tohto slova do vyhľadávača dostaneme na prvé miesta vo výslednom výbere. Zároveň si ale zaregistrujeme doménu s názvom firmy, napr. www.fotoprofi.sk. Z tejto domény potom vytvoríme presmerovanie na www.fotaky.sk. Doménu www.fotoprofi.sk  môžeme uvádzať na prezentačných a oficiálnych materiáloch spoločnosti ako aj na vizitkách.

  1. Druhý prístup vychádza zo snahy budovať silnú obchodnú značku. V takom prípade použijeme názov značky ako meno. Treba si však uvedomiť, že v takom prípade bude oveľa ťažšie dostať sa, pri zadaní kľúčového slova do vyhľadávača, na prvé miesta vo výbere. Ak sa však značka stane rešpektovanou a silnou bude nám to túto nevýhodu kompenzovať.

Pri použití tohto spôsobu sa náš e-shop bude volať www.fotoprofi.sk .

4. Vytvorenie e-shopu (z technického hľadiska) 

E-shop je interaktívna aplikácia pri ktorej je potrebné dynamicky generovať stránky na základe potrieb klienta (napr. produkty zoradené do určitých kategórií) a aktuálneho nastavenia (napr. zvolený design e-shopu). Uspokojenie týchto požiadaviek však nie je možné prostredníctvom použitia bezstavového kódu HTML, je nutné využiť aj iné programovacie jazyky. Podstatné je tiež uchovávanie dát, ktoré sú nevyhnutné pre správnu funkčnosť obchodu.

Ako programovací jazyk, ktorý zaistí dynamiku nášho e-shopu môžeme použiť PHP. Ten je často využívaný práve pri tvorbe aplikácií. Na uloženie dát môžeme použiť relačný databázový systém MySQL. Na generovanie výsledných stránok použijeme program Apache. (príloha 1)

4.1

Jednou z možností ako vytvoriť prezentačnú stránku e-shopu je použitie šablónových systémov, ktoré sú na internete dostupné zadarmo. Medzi najpreferovanejšie patrí systém Smarty.

Príklad:

Zákazník chce zobraziť kategóriu určitých produktov. Vytvorí sa najprv trieda „Products“. Potom je zavolaná funkcia tejto triedy, ktorá okrem iného vytvorí na základe požiadaviek vyplývajúcich zo zvoleného radenia, stránkovania alebo filtrovania SQL odkaz, ktorý sa prevedie a jeho výsledok sa uloží. Nakoniec sa načíta súbor s HTML kódom stránky, ktorý tiež obsahuje cyklus vypisujúci jednotlivé produkty. V každom cykle je vždy volaní metóda triedy „Products“, ktorá vracia pole s potrebnými údajmi. Pomocou príkazu „echo“ sa tieto údaje vypíšu na príslušných miestach.

4.2

Ďalším podstatným problémom je vytvorenie nákupného košíka. Existujú 2 riešenia:

  1. Vytvorenie tabuľky v databáze. Do tejto tabuľky sa ukladajú potenciálne nakúpené produkty všetkých zákazníkov. To vyžaduje aby sa v každom riadku tabuľky ukladal aj jednoznačný identifikátor nakupujúceho. Nevýhodou teda je, že v rámci nákupného košíka sa musí zaistiť jednoznačná identifikácia nakupujúceho a to po celú dobu jeho nákupu.
  2. Využitie session mechanizmu PHP jazyka. Takto je možné obísť bezstavovosť protokolu HTTP Je potrebné spustiť ho pomocou funkcie session_ start. Tým sa docieli pridelenie identifikátora a miesto na servery kam sa budú ukladať tzv. session_premenné. Môžeme si vybrať či chceme aby boli konkrétne premenné jeho súčasťou čo zaistí, že server si túto premennú bude pamätať aj pri prechode medzi stránkami. Aby sme sa dostali k hodnotám uloženým v sesion-e použijeme premennú $_SESSION. Po vypnutí prehliadača session automaticky zanikne, alebo ho môžeme vypnúť príkazom session_destroy.

5.   Design e-shopu 

Pri tvorbe grafickej stránky e-shopu nie je cieľom ohromiť návštevníka stránky farebnými animáciami. Cieľom je usporiadať a naformátovať e-shop tak, aby bol prehľadný a pochopiteľný pre návštevníka, podstatná je aj jednoduchá orientácia a inštinktívne ovládanie. Vzhľad a design sú kľúčovými nástrojmi prostredníctvom ktorých môžeme vyjadriť poslanie a účel e-shopu. Základom je logické usporiadanie informácií, ľahký pohyb a orientácia na stránke.

Pri tvorbe designu musíme najprv definovať štruktúru obsahu. Náčrt bude ukazovať rozloženie a rozmiestnenie jednotlivých prvkov. Práve správne rozmiestnenie prvkov podvedome určuje prioritu zdieraných informácií a týmto spôsobom môžeme naviesť návštevníka e-shopu na obsah, ktorý je pre nás dôležitý (jednotlivé produktové kategórie).

Prílišná inovácia sa nevypláca. Návštevník e-shopu totiž môže na základe svojich predchádzajúcich skúseností očakávať isté konvenčné rozloženie. Najpoužívanejšou koncepciou je rozložene obchodu do troch stĺpcov:

  1. Stĺpce po bokoch sú užšie a obsahujú zoznam kategórií, a rad rôznych panelov ( nákupný košík, zľavnené produkty, nový tovar, reklamné banery, počítadlo návštev, odkazy na partnerské e-shopy).
  2. Prostredný stĺpec je najširší a je v ňom umiestnení obsah jednotlivých kategórií. Hlavný banner a značka obchodu bývajú spolu s navigáciou a prepínačom mutácií do rôznych jazykov umiestnené zväčša v hornej časti.(príloha 2.)

5.1

Potom ako máme hotový náčrt rozloženia základného obsahu, môžeme pristúpiť k vytváraniu finálnej podoby designu. Môžeme na to použiť napr. Photoshop (alebo iný vhodný bitmapový grafický editor). Vymedzíme si pracovnú plochu pomocou rozlíšenia stránok. Do pracovnej plochy vkladáme jednotlivé prvky tak ako sme si to stanovili v náčrte. Nakoniec doplníme značku a začneme upravovať a štylizovať jednotlivé prvky a nadpisy až po štádia úplnej spokojnosti.

5.2

Nakoniec je potrebné vytvoriť podľa výsledného návrhu konkrétneho návrhu stránky obchodu. Najskôr vytvoríme základnú štruktúru v XHTML. Jednotlivým elementom stránky potom priradíme pomocou CSS štýlov  určité vlastnosti, ktoré definujú ich vzhľad tak, aby zodpovedali návrhu. Pri formátovania stránok pomocou kaskádových štýlov je ale problém, že jednotlivé prehliadače niektoré vlastnosti CSS štýlov interpretujú rôznim spôsobom, čo často spôsobuje veľké problémy. Preto sa musí výsledný dizajn skontrolovať a optimalizovať minimálne pre všetky najpoužívanejšie prehliadače. Tiež je potreba skontrolovať, či kód zodpovedá štandardu W3C pomocou XHTML a CSS validátora. Výsledkom by mal byť validný kód, ktorý je správne vykreslovaný vo všetkých majoritných prehliadacích.

Autor: Veronika Horňáková

Zoznam použitej literatúry:

  1. E-shop návod dostupné na http://e-shop.eshop12.cz/kategorie/1-e-shop-navod [citované 3.2.2012]
  2. Krčmář, J.: Adobe Photoshop – praktický webdesign, GRADA Publishing, 2006
  3. Lacko, L.: PHP a MYSQL Hotová ˇrešení, CP Books, a.s, Brno, 2005.

Prílohy:

Vydanie: Digital Science Magazine, Číslo 3, Ročník II.