VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra elektrotechniky a informatiky Obor Počítačové systémy
A c t i v i t y A d m i n p ro f i r m u A c t i v i t y D e s i g n bakalářská práce
Autor: David Štrba Vedoucí práce: PaedDr. František Smrčka, Ph.D. Jihlava 2015
Abstrakt Cílem mé práce bylo seznámit se s principem e-shopů z pohledu zákazníka, tj procházení katalogu, filtrování, vyhledávání produktů a proces objednávky, a pohledu administrátora, což je přidávání a úprava kategorií produktů, správa zboží jako je úprava množství skladem a přidávání kategorií, subkategorií a galerií, a nejdůležitejší příjem a odeslání objednávek. Dále bylo mým úkolem analyzovat použité technologie, strukturu existujících e-shopů (zejména PrestaShopu), časové sbírání dat pro analytické účely a navrhnout vlastní řešení založené na Nette PHP frameworku využívající MVC architekturu a Bootstrap CSS frameworku.
Klíčová slova Internetový obchod, e-shop, HTML, CSS, PHP, JS, MySQL, Nette, Bootstrap, MVC
Abstract Main goal of my work was to get acquainted whith the principle of e-shops from a customers perspective ie, catalog browsing, filtering, searching products and proccess of order and
administrators perspective, which is adding and editing products
categories, management of goods like the adjustement of the amount stock and adding categories, sub-categories and galeries and the most important sending and recrieving orders. Furthermore my job was to analyze usable technology, analyze structure of existing e-shops (especially PrestaShop), collecting information varying in time for analytical purpose and design my own solution of the system based on Nette PHP framework using MVC architecture and Bootstrap CSS framework.
Key words e-shop, HTML, CSS, PHP, JS, MySQL, Nette, Bootstrap, MVC
Prohlašuji, že předložená bakalářská práce je původní a zpracoval/a jsem ji samostatně. Prohlašuji, že citace použitých pramenů je úplná, že jsem v práci neporušil/a autorská práva (ve smyslu zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů, v platném znění, dále též „AZ“). Souhlasím s umístěním bakalářské práce v knihovně VŠPJ a s jejím užitím k výuce nebo k vlastní vnitřní potřebě VŠPJ. Byl/a jsem seznámen s tím, že na mou bakalářskou práci se plně vztahuje AZ, zejména § 60 (školní dílo). Beru na vědomí, že VŠPJ má právo na uz\avření licenční smlouvy o užití mé bakalářské práce a prohlašuji, že souhlasím s případným užitím mé bakalářské práce (prodej, zapůjčení apod.). Jsem si vědom/a toho, že užít své bakalářské práce či poskytnout licenci k jejímu využití mohu jen se souhlasem VŠPJ, která má právo ode mne požadovat přiměřený příspěvek na úhradu nákladů, vynaložených vysokou školou na vytvoření díla (až do jejich skutečné výše), z výdělku dosaženého v souvislosti s užitím díla či poskytnutí licence.
V Jihlavě dne 25.5. 2015
David Štrba Podpis
Poděkování Na tomto místě bych rád poděkoval svému vedoucímu práce PaedDr. Františku Smrčkovi, Ph.D. za vedení této práce a firmě Activity Design za poskytnutí tohoto zajmavého tématu.
Obsah 1. Úvod.............................................................................................................................8 2. Analyzované systémy...................................................................................................9 2.1 Pohled zákazníka......................................................................................................10 2.1.1 Domovská stránka.................................................................................................10 2.1.2 Katalog a detail produktu.......................................................................................11 2.2 Pohled správce/administrátora..................................................................................17 2.2.1 Správa kategorií.....................................................................................................17 2.2.2 Správa produktů.....................................................................................................17 2.2.3 Přijímání a vyřizování objednávek........................................................................17 3. Dostupné technologie.................................................................................................18 3.1.1 HTML....................................................................................................................18 3.1.2 CSS........................................................................................................................19 3.1.3 JS............................................................................................................................23 3.1.4 XML......................................................................................................................24 3.2 Technologie pro serverovou část..............................................................................25 3.2.1 MVC......................................................................................................................25 3.2.2 PHP........................................................................................................................26 3.2.3 Ruby.......................................................................................................................29 3.2.5 ASP .NET...............................................................................................................32 3.3 Technologie pro databáze.........................................................................................34 4. Implementace..............................................................................................................37 4.1 Požadavky na systém................................................................................................38 4.2 Databáze...................................................................................................................40 4.3.2 Produkty.................................................................................................................45 4.3.3 Objednávky............................................................................................................47
4.4 Uživatelská část........................................................................................................49 4.5 Analytické funkce.....................................................................................................53 4.6 Chytré telefony a tablety...........................................................................................53 5. Instalace systému........................................................................................................54 6. Závěr...........................................................................................................................55 7. Seznam použité literatury...........................................................................................56 8. Seznam obrázků..........................................................................................................57 9. Přílohy – Obsah přiloženého CD................................................................................59
1. Úvod V dnešní době počítačových technologií je internetový obchod již samozdřejmostí. Podle statistik Internet využívá více než 38% světové populace, 70% populace Evropské unie a taktéž 78% populace české republiky [1], což je obrovský počet potenciálních zákazníků. E-shopy existují jako B2B (business to business) – prodej obchodním partnerům a B2C (business to customer) – prodej koncovým spotřebitelům. Elekronické obchody představují obrovské výhody jak pro prodávající tak pro zákazníky. Prodávající nemusejí investovat do kamenné prodejny, mohou nabízet zboží které nemají skladem, jsou schopni obsloužit velké množství zákazníků s minimálním množstvím zaměstnanců. Prodávající mají možnost využít cloudové eshopy (prestashop, shoptet) u kterých jsou pořizovací nároky nejnižší, nestarají se o infrastrukturu a pouze platí nízké měsíční poplatky. Další možnost je využití existující implementace (tuto možnost podporuje opět prestashop), kde jsou pořizovací nároky vyšší kvůli potřebě vlastnit hosting. Poslední je možnost vlastní implementace systému nebo systém na míru. Tato možnost je ze všech nejnákladnejší ale výsledný systém nejlépe potřeby prodávajícího. Pro zákazníky elektronické obchody také představují spoustu výhod. Zákazníci mohou vyhledávat, řadit, filtrovat a porovnávat velké množství produktů z pohodlí svého domova s využitím počítače, notebooku, chytrého telefonu nebo tabletu. Rozdíl oproti kamenným obchodům je také v uhrazení poplatku, kdy zákazník může zboží uhradit elektronickou platbou opět z pohodlí domova. Další velkou výhodou jsou někdy znatelně nižší ceny než-li v kamenných obchodech. Internetové obchody přinášejí výhody jak pro zákazníka tak pro kupujícího a staly se nenahraditelnou součástí Internetu i našich životů. V následující kapitole se zabývám analyzováním e-shopu z pohledu uživatele tj. Procházení, vyhledávání, přidávání zboží do košiku a jeho následné objednání, registrace a sledování stavu objednávek a z pohledu adminstrátora, který obnáší správu kategorií, produktů a vyřizování objednávek. Předposlední kapitola se zabývá použitelnými a použitými technologiemi pro samotný e-shop a na závěr se zabývám jeho následnou implementací.
7
2. Analyzované systémy V této kapitole popisuji vybrané iternetové obchody, které jsou známé mezi lidmi a jsou mnohem propracovanejší než mnou navržený e-shop. Jedná se o tyto 3: Alza.cz což je český obchod s počítači a spotřební elektronikou, lídr a inovátor v oblasti internetového obchodu v České republice a na Slovensku. Společnost je založena roku 1994 a provozuje obrovskou obchodní síť kamenných obchodů po České a Slovenské republice. Sportisimo je maloobchodní prodejce sportovního vybavení, obleční a obuvi. Patří k nejvýznamnějším sportovním řetězcům v České a Slovenské republice. Společnost byla založena roku 1999 a vlastní 112 prodejen v Českých a Slovenských městech. Poslední z obchodů je poněkud odlišný od prvních dvou. Je jím PrestaShop což je opensource řešení pro internetový obchod. Byl uvolněn roku 2007 v Paříži s druhou kanceláří v Miami (od roku 2011). Toto řešení e-shopu je aktivně vyvíjeno komunitou s více než 500 000 členy, díky tomu je systém přeložen do 56 světových jazyků (do čekého pouze částečně) a obsahuje 275 dostupných funkcí v základním balíčku a mnoho dalších rozšíření. Tyto systémy jsem analyzoval ze dvou pohledů: z pohledu zákazníka a z pohledu administrátora a následně jsem sestavil ERD (entity-realitionship diagram).
8
2.1 Pohled zákazníka Většina e-shopů má stejnou strukturu webové aplikace skládajíci se z několika částí: •
hlavní (domovské) stránky
•
katalogu produků
•
nákupního košíku a průvodce objednávkou
•
možností registrace, úpravou uživatelových údajů a sledováním objednávek
Obrázek 1: diagram chodu eshopu
Na tyto části webu se nyní podívám detailněji.
2.1.1 Domovská stránka Tuto stránku noví uživatelé uvidějí jako první. Zde užitavelé vidí jaké produkty/služby internetový obchod nabízí. Dále zde mají možnost vidět právě probíhající akce například různé slevy, dárky a limitované edice zboží/služeb. Alza.cz na domovské stránce nabízí limitovanou sběratelskou edici her (35 posledních kusů), dárky při nákupu nad určitou sumu, některé slevněné zboží. Dále nabízí odběr novinek prostřednictvím emailové adresy, nejoblíbenější zboží, doporučené zboží a recenze nových vybraných produktů, vybrané kategorie zboží a videa s recenzemi některých produktů. Sportisimo na své domovské stránce nabízí svůj pravidelný leták se slevami, nabízí sportovní události (půlmaratón Karlovy Vary), vybrané slevněné produkty, seznam
9
partnerských webů, nejnovější aktuality a odebírání novinek prostřednictvím emailové adresy jako portál alza.cz. Základní balíček PrestaShopu na domovské stránce nabízí dočasně slevněné zboží, novinky a nejoblíbenější zboží, recenze některých produktů a odkaz na sociální síť (Facebook).
2.1.2 Katalog a detail produktu V katalogu produktů jsou detailně vypsány veškeré produkty určité nadřazené (např Počítače) nebo podřazené (např Počítače > Notebooky) kategorie včetně jejich variant přehledně do tabulky s hlavním obrázkem, názvem, cenou a případně slevou. K dispozici jsou různé filtry například podle ceny, abecedy a podle parametrů vyhledávání podle názvu. Kliknutí na produkt vede na stránku detailu kde je zobrazená celá obrázková galerie, celý popis a tlačítko pro přidání do košíku. Alza.cz v katalogu nabízí seznam podřazených kategorií, dále nejprodávanější produkty vybrané kategorie, komplexní filtr kde se zboží filtruje. V případě notebooků jsou filtry podle značky, velikosti a rozlišení, grafické karty, barvy, výkonu, procesoru, rozsahu cen a ostatních. Jiná kategorie má jiné parametry (například disky mají kapacitu, typ, rozhraní atd.). Zboží je následně vypsáno do přehledné tabulky která může být řazena dle ceny, oblábenosti a obsahující krátký popis produktu, případou slevu, parametry týkající se samotného produktu (novinka, doprava zdarma, dárek, obsahuje windows atd.), seznam dárků, hodnocení produktu, počet produktů skladem, cenu s dph a bez dph, odkaz pro detail produktu a tlačítko koupit produkt které uživatele přesměruje do košíku. Po kliknutí na detail produktu se nám zobrazí celá obrázková galerie produktu, hodnocení cena a krátký popis. Dále je zde tlačítko pro přidání do košíku informace zda je produkt skladem, komplexní hodnocení s počtem hodnotících zákazníků, dlouhá recenze produktu, všechny detailní parametry produktu, dostupné příslušenství a informace od uživatelů jako jsou videa, fotky a recenze. Sportisimo nabízí seznam podžazených kategorií stejně jako alza.cz, dále nabízí zákaznickou podporu, filtry kde lze vybrat produkty podle statusu (akce a novinky), dostupnosti, značky, označení, barvy, výrobce a kolekce. Dále zde můžeme nastavit rozsah ceny, řazení dle ceny a názvu a velikosti náhledu hlavního obrázku produktu. 10
Produkty jsou opět vypsány do tabulky kde je zobrazen krátký popis, jsou zde zobrazeny možné barevné varianty produktu, samozdřejmě cena a paramety jako je výrobce, sleva novinka a skladem. V detailu produktu můžeme vybírat z růzých velikostí a následném přidání produktu do košíku. Dále je zde obrázková galerie, detailní popis produktu, specifikace produktu, velikostní tabulka a uživatelská diskuze a hodnocení. PrestaShop nabízí stejné možnosti jako Sportisimo s několika rozdíly. Ty jsou: nelze nastavit velikost náhledu hlavního obrázku, vypsané produkty nemají vypsaný popis a detail produktu obsahuje napojení na sociální sítě (Facebook a google+) a možnost tisku detailu produktu.
2.1.3 Nákupní košík a proces objednávky Košík je druhé nejdůležitější místo internetového obchodu (ihned po katalogu) kde uživatel vidí přehled objednávaného zboží s možností úprav počtu kusů, odebrání z košíka a uplatnění slevových poúkazů. Dále je zde vyplnění doručovacích údajů (v případě registrovaného uživatele jsou údaje již vyplněny), výběr platby, dopravy, souhlasu s obchodními podmínkami internetového obchodu a odeslání nové objednávky. Možosti platby jsou následující: •
Platební kartou
•
Elektronickou peněženkou
•
Bankovním převodem
•
Na dobírku
Nejrozšířenejší metodou je platba kreditní kartou které jsou vydávané společnostni Diners Club, Visa, MasterCard, American Express ad. Proces platby probíhá zadáním 3 údajů z platební karty které jsou: •
číslo karty – 16 místné cíšlo na přední straně karty
•
platnost karty – datum do kdy je karta platná na přední straně karty
•
CVV2/CVC2 kód – 3 místné číslo na zadní straně karty vedle popisového proužku 11
Banka po zpracování platby informuje zákaníka a obchodníka o výsledku transakce a obchodník následně odešle/poskytne objednané zboží/službu. Bankovní aplikace je chráněna šifrovaným protokolem HTTPS. Je bezpečné kreditní kartou nakupovat pouze u autorizovaných prodejců, kteří mají na svých stránkách logo „Verified by Visa“ nebo „MasterCart SecureCode“, u kterých je potřeba transakci potvrdit jednorázovým kódem přijatým skrz SMS. Placení elektronickými penězi je v této době velice populární, zejména na poli elektronických obchodů. Toto placení zahrnuje spoustu výhod: vyšší bezpečnost než při použití platebních karet, integrovaný platební systém rovnou v e-shopu pro vyšší pohodlí a hlavní výhoda je obdržení peněz okamžitě bez čekání. Nejčastěji se používají 2 portály. První je český PaySec založený společnostmi ČSOB a Poštovní spořitelny. Uživatel si na portálu PaySec.cz založí konto vyplněním online formulářem a následně si přepošle finance z kreditní karty nebo běžným bankovním převodem. Konto je spárováno s telefoním číslem a emailem. K zaplacení je nutné se pouze autorizovat, zadat příslušnou částku a zadat sms kód. Druhá možnost je mezinárodní platební systém PayPal. Nabízí stejné možnosti jako PaySec (PaySec je silně inspirován PayPalem) avšak na rozdíl od PaySec lze peněženku nabíjet ze zahraničních účtů. Po transakci se peníze odešlou obchodníkovi na jeho PaySec nebo PayPal účet který je spárován s běžným bankonvím účtem. Třetí možnost je platba bankovním převodem. Tato transakce je uskutečnena rozhraním internetového bankovnictví poskytovaném vybranou bankou. Při převodu financí je zde potřeba zadat číslo účtu prodávajícího, kód jeho banky, variabilní symbol (vygenerovaný kód který identifikuje objednávku) a celkovou sumu za zboží/službu. Tyto informace jsou generovány po dokončení objednávky, jsou odeslány prostřednictvím emailu a zobrazeny na webu po procesu objednávky. Částka se obchodníkovi připíše do třech pracovních dnů. Poslední možnost je platba na dobírku. Při této platbě se platí až po přijetí zboží. Tato služba je poskytnuta například Českou poštou a PPL, kteří dané zboží doručí až k odběrateli domů, není-li odběratel doma, dostane do schránky výzvu k vyzvednutí
12
zásilky a zásilku najde na pobočce České pošty. V případě PPL daný kurýr volá předem a domluví čas předání zásilky.
13
Alza.cz po přidání do košíku hned nabízí doporučené doplňky ke zboží (např brašnu k notebooku atd.) a prodloužené záruky zboží. Proces objednávky probíhá standartně ve 4 krocích: 1.
Košík – sourn objednávaného zboží z možností změnit množství, zadání slevových kupónů a přehled celkové ceny
2.
Platba a doprava – výber typu platby (bankou, na dobírku, na splátky, PayPal a Paysec atd.) a typ dopravy (osobní odběr, Česká pošta, PPL a další)
3.
Dodací údaje – zde se vyplňují standartní doručovací údaje jako je kontakt adresa a ostatní, registrovaní uživatelé mají tento krok již vyplněny
4.
Sourn – zde je rekapitulace celé objednávky, zboží a doručovací údaje a poslední souhlas s obchodními podmínkami a závěrečné potvrzení objednávky
Sportisimo na rozdíl od Alzy.cz nenabízí žádné doplňky. Proces objednávky začíná přihlášením uživatele, novou registrací nebo výběrem objednávky bez registrace. Druhý krok je vyplnění všech potřebných informací pro objednávku (v případě registrace nejříve proběhne registrování nového uživatele a pokračuje se stejně jako v případě exitujícího uživatele kdy jsou tyto informace již vyplněny) které jsou dodací adresa, kontakt, platba a doprava, vložení slevového kupónu, souhlas s obchodními podmínkami a následném odeslání objednávky. PrestaShop využívá stejný typ košíku a proces objednávky jako Alza.cz s rozdílem že za první krok (košík) je vložen krok s povinnou registrací nebo přihlášením. Po potvrzení objednávky na všech zmíněných eshopech systém vygeneruje a odešle potvrzovací email.
14
2.1.4 Registrace a uživatelská sekce Registrovaní uživatelé vždy mají nějaké výhody. Mají předem vyplněné údaje k objednávce, dostávají slevy za věrnost nebo pouze za registraci a dostávají akční klubové nabídky. Registrace nemusí být pouze formou formuláře ale i skrz sociální sítě kde jíž zákazníkovy osobní informace jako je jméno, příjmení, email, adresa a ostaní jsou vyplněny. K této možnosti je potřeba aby internetový obchod měl vytvořenou aplikaci na oné sociální síti (pro Facebook na developers.facebook.com a pro Google developers.google.com) prostřednictvím
a
následné
spárování
s
internetovým
obchodem
OAuth protokolu (Facebook api a Google api). Registrace (i
přihlášení) tedy probíhá jedním kliknutím na registrační/login tlačítko a následným povolením aplikace sociální sítě přístup k uživatovým informacím. Povolit aplikaci přístup stačí pouze napoprvé. V uživatelské sekci pak uživatel má možnost změnit své kontaktní informace a sledovat stav objednávek popřípadě storna. Alza.cz nabízí výše zmíněnou pohodlnou registraci a login skrze sociální sítě ale pro registrované uživatele nabízí jiné výhody. V uživatelsé sekci je přehled objednávek, hodnocení zboží, knihovna se zakoupenými knihami, hudbou filmy atd., slevové body, změna osobních informací a zjednodušené reklamování zboží. Sportisimo nenabízí registraci a login skrze sociální sítě, nabízí pouze klasickou registraci vyplněním všem známého formuláře. Uživatelská sekce má podobou strukturu jako v případě Alza.cz tj. možnost úpravy osobních údajů, sledování uživatelových objednávek a přehled výhod a slev aktivních pro daného uživatele. PrestaShop nabízí to samé co Sportisimo což není možnost registrace skrze sociální sítě, a stejnými funkcemi uživatelské sekce.
15
2.2 Pohled správce/administrátora Vzhledem k uzavřenosti systémů Alza.cz a Sportisimo budu analyzovat pouze PrestaShop.
2.2.1 Správa kategorií V této sekci se nastavují veškeré kategorie do kterých je rozděleno zboží. Při vytváření nové kategorie se zadá název nové kategorie, popis kategorie, nadřazená kategorie (je možné mít 4 úrovně kategorií např. všechny > ženy > vršky > trička) a nakonec se nastaví které skupiny uživatelů mají přístup do této kategorie. V přehledu existujících kategorií lze nastavit viditelnost kategorie a funkcí drag&drop nastavit pořadí kategorií.
2.2.2 Správa produktů V této sekci se spravují produkty, vytvářejí, editují aktivují/deaktivují, duplikují a mažou. Při vytváření nového produktu se nejdříve vyplní základní údaje produktu jako je cena, název, krátký a dlouhý popis, EAN kód, asociace s kategoriemi (jeden produkt může být v libovolných kategoriích) a až po vytvoření se doplní ostatní údaje jako jsou varianty a subvarianty, množství těchto variant na skladě, obrázkové galerie, přílohy a různé parametry jako je materiál, rozměry atd.
2.2.3 Přijímání a vyřizování objednávek Tato sekce administrace se stará o spracování objednávek. Na úvodní stránce jsou objednávky vypsány do tabulky s jejich základními informacemi: kód, země dodání, jméno zákazníka, cena celkem, typ platby a datum objednávky. Objednávky jsou řazeny sestupně od nejnovější a je zde možnost filtrace podle výše uvedených informací. Po rozkliknutí do detailu objednávky vidíme detaily uživatele, možnost vytisknutí faktury, aktuální stav, změnu stavu objednávky, doručovací a fakturační adresu přiřazené platby, a objednané produkty. Všechny tyto informace lze kdykoliv změnit, při změně stavu se odešle přiřazený email.
16
3. Dostupné technologie V této kapitole se zabývám existujícími technoligiemi použitelnými pro implementaci klientké částí (webová aplikace kterou vidí uživatel), serverové části (scripty na serveru pro zpracování dat) a databázové části (ukládání dat).
3.1 Technologie pro klientskou část 3.1.1 HTML Jako první a nejdůležitější technologie je HyperText Markup Language. HTML je hlavní jazyk pro publikaci dokumentů na Internetu. Je vyvíjen od roku 1990 mezinárnodním koncorciem (jedná se o sdružení podnikatelů bez právní subjektivity kvůli dosažení určitého cíle) W3C. Jazyk HTML je charakterizován množinou značek (tagů). Mezi tyto značky se uzavírají části dokumentu a tím se určuje jejich význam. Značky mohou obsahovat vlastnosti, které nesou určitou důležitou informaci například odkaz. Některé značky jsou nepárové a neobsahují žádný text například vodorovná čára nebo ukončení řádku. Nejnovější verze HTML5 [2] přináší přímou podporu pro přehrávání multimédií, pro offline aplikace a definuje nové typy značek pro strukturu stránek a nové typy atributů textových vstupů. Na následujícím obrázku je patrná HTML5 struktura s ukázkou několika tagů. Dokument se skládá ze dvou částí: head kde jsou informace o stránce jako je kódování ad. a body které je tělo samotné stránky. Body se dále dělí na header což je hlavní nadpis, nav což je navigace stránky (menu), article neboli článek který obsahuje section (sekci), sekce obsahuje hlavní obsah stránky, aside což je sloupec například pro reklamy atd. a poslední footer což je patička stránky. Jako obsah této stránky je ukázka někteých tagů: •
h1, párový, bez atributů, je hlavní nadpis
•
a, párový, s atributem href – adresa odkazu, je tag pro odkaz
•
p, párový, bez atributů, je oddělení odstavce
•
br, nepárový, je ukončení řádku
•
hr, nepárový, je ukončení řádku horizontální čarou 17
Obrázek 2: HTML5 dokument
3.1.2 CSS Jazyk CSS, Cascading Style Sheets, vytvořený organizací W3C je jazyk pro způsob zobrazení elementů na stránkách napsaných v jazyce HTML. Hlavním smyslem jazyka je oddělit vzhled dokumentu od jeho obsahu. Umožňují: ● vlastnosti písma ● barvy textu a pozadí ● vlastnosti textu a blokových elementů ● způsoby zobrazení prvků ● řízení pozice Poslední verze CSS3, která se pojí se standardem HTML5 navíc přidává: ● animace ● stíny, kulaté rohy ● přetékání obsahu elementů ● průhlednost elementů ● dodatečné vlastnosti písma jako jsou externí zdroje písma, zužování, rozšiřování 18
● 2D a 3D transformace ● různé styly pro různá zařízení Jazyk má i nějaké nevýhody například kvůli různé implementaci v různých prohlížečích se stejný dokument zobrazí jinak, každý prohlížeč obsahuje různé chyby v implementaci CSS. Jazyk nepodporuje proměnné nebo konstanty, například barva = red;, a poté psaní jen hodnotu barva a dále nepodporuje výpočty velikostí. Tyto 2 nevýhody se dají odstranit použitím CSS preprocesorů (např SASS, LESS, Stylus ad.) které zdrojový kód před použitím “zkompilují” na běžné CSS.
Obrázek 3: styl pro element body
Na obrázku 3 můžeme vidět ukázku pravidla pro element body (celá stránka): nastaví bílé pozadí, černý text a vnitřní okraj 10px, !important znamená že tuto hodnotu nelze později změnit. Zápis stylů má 2 části: 1. Selector: v tomto případě “body” což je název značky, může se kombinovat z těchto možností: název elementu, název třídy, id elementu a pseudotřídy např :hover -- selector je aktiví pokud nad elekentem je kurzor myši :visited -- selector pro navštívený link 2. Množina měněných atributů uzavřených ve složených závorkách, v tomto případě atribut background-color, color (barva písma) a padding (vnitřní okraj) Je možné využít zápis stylu přímo do elementu pomocí atributu style, avšak tento způsob zápisu není doporučen kvůli narušení oddělenosti vzhledu a obsahu. Využívá se nejčastěji při změně vzhledu způsobené JavaScriptem.
Obrázek 4: styl vepsaný přímo do elementu; červené písmo a podtrřený text
19
Obrázek 5: kombinace id a tříd atributů
Obrázek 6: kombinované CSS selektory
20
Za zmínku taky stojí nejznámější CSS framework: Twitter Bootstrap. Jedná se o definované css třídy obsahující tabulky, tlačítka, ikony, sloupce nadpisy a mnoho dalšího. [3]
Obrázek 7: kousek stránky s využitím Boostrapu
Na obrázku 7 je ukázka stránky stylované Boostrapem. Horní navigace má pouze třídu .nav, tlačítko dvě třídy .btn .btn-success a dva sloupce jsou formátované pouze třídou .span4.
21
3.1.3 JS JavaScript, zkráceně JS, je miltiplatformní objektově orientovaný skriptovací jazyk vyvíjený společností Netscape a Mozilla Foundation. Syntaxe je podobná C/C++/Java avšak s jazykem Java nemá nic společného, pouze název z marketingových účelů. Používá se v HTML stránkách pro ovládání interaktivních prvků GUI (graphical user interface) jako jsou tlačítka, textová políčka a pro tvorbu animací, avšak po příchodu CSS3 lze animace psát rovnou v CSS. JavaSript je možné spustit na straně serveru, například systém Node.js popsaný v kapitole 3.2.3. Kromě webových aplikací je JS použit např.: rozšíření prohlížečů, některé textové editory (např Atom) jsou napsány pomocí JS, rozšíření pro Adobe Acrobat ad. [4] U webových aplikací se nejčastěji používá v kombinací s knihovnou jQuery která je dělaná jako usnadnění vytváření animací, označení elementů CSS selektory a vývoj AJAX aplikací. Na vysvětlení nejlépe poslouží příklad na následujícím obrázku 8:
Obrázek 8: řetězový zápis jQuery
Znak $ je zkratka pro volání funkce jQuery(), která v tomto případě vrátí pole všech elementů div se třídou text, na této množině elementů se zavolá funkce add, která rozšíří množinu o množinu elementů p se třídou quote, všem těmto označeným elementům přidá třídu blue, a všechny tyto elementy animuje animací slideDown s rychlostí slow, průběh slideDown je vidět s připojením události click která se provede po kliknutí na element na následujícím obrázku:
22
Obrázek 9: událost click a animace slideDown
3.1.4 XML Extensible Markup Language, vyvinut konsorciem W3C, je obecný značkovací jazyk určený pro snadný přenos dat mezi aplikacemi. Vzhled dokumentu může být definován pomocí kaskádových stylů (CSS). Další možností zpracování je transformace do jiného typu dokumentu. XML je vyvinut jako jednoduchý, všem přístupný formát dat, pro který není třeba vlastnit další software.
Obrázek 10: jednoduchý recept v XML
23
3.2 Technologie pro serverovou část Pro vytvoření dynamické webové stránky je potřeba výsledný dokument generovat (z databáze atd.) pomocí aplikací/scriptů běžících na straně serveru. Po dotazu na stránku ona aplikace/script vygeneruje stránku a až výsledek jejich činností je poslán uživateli. Samotná webová aplikace se dále dělí na menší části, jako dokument má oddělený vzhled, na model, view – pohled a controller – řadič popsané v další kapitole.
3.2.1 MVC MVC je architektura která odděluje datový model aplikace, uživatelské rozhraní a řídící logiku do tří na sobě nezávislých komponent. MVC obsahuje tři komponenty: ● Model – reprezentace informací se kterými aplikace pracuje ● View (pohled) – převádí data reprezentovaná modelem do podoby vhodné k prezentaci uživateli ● Controller (řadič) – reaguje na události a zajišťuje změny v modelu nebo v pohledu
Obrázek 11: diagram funkce MVC
Obecný princip MVC: 1. Uživatel provede akci např stikne tlačítko 24
2. Řadič obdrží oznámení o této akci 3. Řadič přistoupí k modelu a v případě potřeby ho aktualizuje (např změna stavu nákupního košíku uživatele) 4. Model zpracuje případně změněná data 5. Pohled použije aktualizovaný model a zobrazí aktuální data 6. Aplikace čeká na další akci uživatele Příklady implementace MVC jsou popsány v dalších kapitolách.
3.2.2 PHP PHP: Hypertext Preprocesor je skriptovací objektově orientovaný jazyk. Používá se k tvorbě dynamických internetových stránek ale i k tvorbě konzolových a desktopových aplikací (existuje jeho kompilovaná forma). Jazyk je nezávislý na platformě takže scripty lze přenášet mezi platformami bez jakýchkoli úprav. PHP podporuje širokou škálu služeb od zpracování textu, grafiky, práci se soubory, databázových systémů (MySQL, Oracle, PostgreSQL, MSSQL) po internetové služby jako je HTTP, SMTP, FTP, IMAP, POP3, LDAP atd. V současné době je nejpopulárnější scriptovací jazyk pro web s podílem více než 80%, pro kombinaci se systémem Linux, databázovým systémem MySQL, a webovým serverem Apache vznikla zkratka LAMP. [5] Vlastnosti PHP: ● je dynamicky typovaný, datový typ proměnné je proměnný, vázaný na hodnotu ● pole jsou asociativní ● specializace na webové aplikace ● rozsáhlý soubor funkcí v základu ● nativní podpora mnoha databázových systémů ● multiplatformnost ● rychlé učení ● obrovská podpora z hlediska hostingu ● svobodná licence Nevýhody PHP: ● nekonzistentní pojmenování funckí např.: mysql_XXX, imap_XXX proti imageXXX, bcXXX ad. 25
● nejednotné pořadí parametrů ● v základní distribuci neobsahuje ladící nástroj ● po zpracování požadavku neudržuje kontext aplikace, vyřváří ho pokaždé znovu což oslabuje výkon
Obrázek 12: hello word v jazyce PHP
Výše uvedený kód na obrázku 12 je při požadavku nejdříve interpretován a vyhodnocen, k uživateli se dostane čistý HTML text ve tvaru pouze
Hello World
namísto .
V PHP je implementovaný i český MVC framework Nette který je zaměřený na rychlost a bezpečnost. Nette je aktivně vyvíjeno českou organizací Nette Foundation, a je uvolněno pod GNU GPL licencí. [6] Vlastnosti Nette: •
Obsahuje ladící nástroje které nejsou součástí PHP
•
Aktivní česká komunita
•
Obsahuje velmi silný validační jazyk
•
Generuje validační JS
•
Podpora automatického překladu webové aplikace
•
Ošetření proti útokům: XSS, Cross-Site Request Forgery
•
Ochrana proti SQL injection
•
Možnost nastavit tvar URL tzv. pěkné URL
26
Nevýhody Nette: •
nezachování zpětné kompatibility
•
nekonzistence celého interface
Nette místo HTML formátu stránek používá svoje šablony s názvem Latte. Nejlepší na vysvětlení je ukázka na příkladu:
Obrázek 13: PHP zápis vs Latte zápis; oba zápisy jsou ekvivalentní
Na výše uvedeném příkladu je výše běžný PHP kód. Pod ním je stejný kód napsaný v Latte šabloně. Latte využívá dva druhy speciálních značek 1. makra ve složených závorkách např {foreach …} 2. n:makra jako atribut elementu napříkad n:if=“...“
Makra navíc ještě obsahují tzv filtry, v tomto příkladu {$item|capitalize} je použit filter, který převede každé první písmeno slova na velké. Latte automaticky proměnné escapuje. Tímto se předchází před XSS (Cross Site Scripting) což je závažná bezpečnostní díra způsobená neošetřenými vstupy. Útočník v XSS útoku podstrčí stránce svůj vlastní kód a může ze serveru dostat citlivé informace.
27
Obrázek 14: vytvoření formuláře v controlleru
Obrázek 15: vykreslení formuláře v Latte
3.2.3 Ruby Ruby je interpretovaný skriptovací jazyk s jednoduchou syntaxí přesto dostatečně výkonný a plně objedtově orientovaný – vše je objekt. Tvůrcem je jeden člověk, Yukihiro Matsumoto který vydal první verzi v roce 1995. Používá se k psaní GUI aplikací, CGI scriptů (Common Gateway Interface, připojení externích aplikací s webovým serverem) nebo přímo webový framework Ruby on Rails. [7]
28
Obrázek 16: ukázka tříd v Ruby s výstupem programu
Ruby on Rails je framework webových aplikací připojených k databázi využívající MVC architekturu. Mezi základní pripcipy Ruby on Rails patří konvence má přednost před konfigurováním což znamený že programátor konfigururuje jen ty části aplikace, které se liší od výchozího nastavení. Například po vytvoření modelu Users bude aplilace data automaticky hledat v tabulce Users.
Základní vlastnosti Ruby on Rails: •
Automaticky mapuje URL na vnitřní řídící prvky aplikace
•
Zajištuje předávání dat mezi controllerem, modelem a view
•
MIT licence
•
obsahuje rozsáhlé knihovny pro generování HTML kódu
•
multiplatformnost
29
Obrázek 17: webová aplikace v Ruby on Rails
3.2.4 Node.js Node.js je systém navržený pro psaní vysoce škálovatelných internetových aplikací, především webových serverů. Aplikace jsou psané v jazyce JavaScript. Skládá se z V8 JavaScript engine od Google. Node.js je platforma, není tedy potřeba zlváštního webového serveru (například Apache ale doporučuje se ho použít). Nicméně v produkčním nasazení je lepší Node.js používat s jiným webovým serverem pro vyřizování požadavků na statické soubory které by neměly být zpracovány přes Node.js. Často se používá na tyto účely ngix (webový server který se zaměřuje na vysoký výkon a nízké nároky na paměť). [8]
Obrázek 18: hello world platformy Node.js bez použití ngix
30
Node.js na rozdíl od PHP a ostatních používá událostmi řízený neblokující I/O model. V PHP dokud není dokončen první příkaz tak není vykonán druhý. V Node.js jsou všechny I/O operace napsány tak, aby neblokovaly server např čtení dat z disku:
Obrázek 19: čtení dat z disku v Node.js
Ve výše uvedeném případě se nejdříve vypíše „B“ a potom „A“ protože čtení z disku probíhá na pozadí. Stejným principem fungují dotazy. Pokud dotaz trvá napřiklad 2 vteřiny, server není na 2 vteřiny zablokován ale vše pokračuje dále.
3.2.5 ASP .NET ASP .NET je součást .NET frameworku pro tvorbu webových aplikací vyvíjený korporací Microsoft. Technologie je založená na CLR (Common Language Runtime), který je sdílena napříč všemi .NET aplikacemi. Koncept ASP .NET WebForms obsahuje sadu komponent, které jsou protějškem ovládacích prvků Windows. Jde o tlačítka (Button), nápis (Label) a další. Tyto komponenty automaticky generují patřičný HTML kód. Výhody ASP .NET •
kód je kompilovaný, aplikace je rychlejší
•
ovládací prvky lze použít jako šablony
•
velmi bohatý výběr ovládacích prvků a velké množství knihoven
•
lze provozovat na různých webových serverech (např Apache)
Na ASP .NET je postavený opensource MVC framework který funguje jako výše zmíněné MVC frameworky. [9]
31
Obrázek 20: ukázka ASP .NET tlačítka, které mění svůj text po kliknutí
32
3.3 Technologie pro databáze Jako poslední a neoddělitelnou částí webových aplikací je ukládání dat. Každý z nás se s databází určitě setkal, ať už digitální nebo papírovou (kartotéka u lékařů). V této kapitldřejmě popsány elektronické, které mají dva různé typy: relační a nerelační. Začnu nejdřív nerelační, nebo-li NoSQL. Tento databázový koncept nemá pevnou strukturu jako druhý typ relační, ale struktura je libovolná. Data se ukládají do tzv. dokumentů, dokument je pouze libovolně složitý objekt zápisu JSON. JSON (JavaScript Object Notation) je způsob dat, nezávislý na platformě, určený pro snadný přenos dat. Výhody jsou jednoduché rozšíření dat, jednoduché získání dat ale naopak nevýhodou je komplikovaná úprava dat a nejednotný datový typ dat, jednotlivé části dokumentu mohou obsahovat různé datové typy libovolně složité. Druhý typ databází, relační, který vychází z relační algebry což je matematická sémantika pro modelování dat uložených v databázích a definuje dotazy nad těmito daty. SQL (Structured Query Language) je dotazovací jazyk, který se používá pro práci s daty v relačních databázích. Příkazy SQL se dělí na 4 skupiny: •
manipulace dat – SELECT, INSERT, UPDATE, DELETE…
•
definice dat – CREATE, ALTER, DROP…
•
řízení přístupových práv – GRANT, REVOKE
•
řízení transakcí – START TRANSACTION, COMMIT, ROLLBACK
Na následujícím obrázku 20 je znázorněn SQL dotaz vykonaný nad MySQL databází, kde je patrné spojování tabulek. Jsou vypsány kategorie s jejich nadřízenými kategoriemi 33
Obrázek 21: ukázka SQL dotazu s výsledkem
3.3.1 CouchDB CouchDB je opensource databáze, NoSQL, která používá JSON zápis dat a JavaScript jako dotazovací jazyk. Je projektem Apache od roku 2008.
Obrázek 22: ukázka HTTP dotazu a odpovědi
34
3.3.2 MySQL MySQL je opensource SQL databáze, jak vyplývá z názvu, vlastněná Oracle corporací. Existuje komunitou vyvýjený fork MariaDB, fork vzninul kvůli obavám o osud MySQL po odkoupení Oraclem. MySQL je používáno společnostmi Google, Facebook, Twitter, YouTube ad. [11]
3.2.3 Oracle Database Je proprietální databáze od společnosti Oracle. Tato databáze podporuje SQL dotazovací jazyk ale i proprietální rozšíření Oracle pro hierarchické dotazy a podporuje XML ukládání dat.
3.2.4 Microsoft SQL Je proprietální databáze korporace Microsoft. Je využita ostatními aplikacemi na lokálním ale i vzdáleném počítači. Exustuje mnoho různých edicí určené pro malé jednostrojové aplikace nebo pro velké víceuživatelské systémy.
35
4. Implementace Samotná implementace probíhala následovně: po prohlídnutí požadavků na celý systém jsem nejdříve analyzoval konkurenční řešení pro případné shody a další nápady pro rozšíření požadavků. Dále jsem podle zadaných požadavků navrhnul tabulky a vazby mezi nimi, tedy ER diagram. Následně jsem implementoval celou administrátorskou část aplikace, takže bylo možné data vytvářet i měnit. Další krok byla implementace uživatelské části, která zezačátku mohla simulovat běh celého systému. Pokračoval jsem plněním úkolů až když jsem splnil všechny, tak jsem se věnoval refactoringu kódu tj. přejmenovávání funcí, proměnných a mazáním nepotřebného kódu, aby kód byl srozumitelnější. Po úpravě kódu začalo testování aplikace. Několik lidí bylo puštěno na testovací verzi systému a měli za úkol přidávat položky do databáze, procházet celou uživatelskou sekci jako při reálném provozu. Při této činnosti došlo k objevení několika chyb a nedostatků, které jsem následně odstranil. Po fázi testování jsem vložil do systému analytické funkce pro sledování pohybu uživatelů po aplikaci. Následně byla aplikace přesunuta na doménu a byl spuštěn ostrý provoz.
36
4.1 Požadavky na systém Implementace začíná určitou vizí systému a následném sepsání product backlogu (sourn požadového chování a požadovaných vlastností aplikace), tyto 2 kroky udělala firma a já pouze obdržel samotný product backlog. Tyto požadavky byly opět rozděleny na tyto části: požadavky pro administrátorskou sekci, požadavky pro uživatelskou sekci a požadavky na aplikaci. Téma tohoto produktu je eshop MonkeyPit zaměřený na prodej oblečení, tedy módy.
4.1.1 Požadavky na administrátorskou sekci: •
půjde vytvářet a upravovat kategorie
•
bude možné měnit pořadí kategorií a jejich nadřazené kategorie
•
kategorie budou mít pouze 2 úrovně (nadřazená a podřazená)
•
produkty půjdou vytvářet a upravovat
•
produkt bude obsahovat popis a parametry v HTML tvaru, budou mít standartní parametry jako je cena, jméno, kód, hlavní obrázek atd. a navíc budou obsahovat informaci zda se jedná o akční produkt nebo ne (akční produkty budou vysvětleny později v uživatelské sekci 4.5)
•
produkt bude obsahovat varianty (barvy) a subvarianty (velikosti); každá varianta bude mít různé subvarianty a každá varianta bude mít svou obrázkovou galerii
•
bude možné přidávat a upravovat uživatele; uživatelé budou rozděleni do dvou skupin: uživatelé a administrátoři; každý uživatel bude mít nepovinné kontaktní údaje a adresu
•
bude možné přidávat a upravovat možnosti plateb a dopravy a jejich případnou cenu
•
bude možné přidávat slevové poúkazy
•
půjde přiřadit, vytvořit a upravit email k akcím (vytvoření objednávky, odeslání objednávky, zrušení objednávky, email pro registraci uživatele a email se slevovým kupónem) 37
4.1.2 Požadavky na uživatelskou sekci: •
na domovské stránce bude zobrazena právě probíhající akce
•
uživatelská sekce bude obsahovat tyto stránky: domovská, katalog, detail produktu, kontakt a stránka s obchodními podmínkami a reklamačním řádem
•
registrační formulář, košík a uživatelská sekce budou ve formě modal dialogu (vyskakovací okno)
•
katalog bude obsahovat filtrování produktů podle ceny, barvy a velikosti
•
v detailu produktu budou zobrazeny veškeré informace o produktu, bude možné vybrat variantu, subvariantu a počet kusů a následně produkt umístit do košíku; po této akci se zobrazí modal dialog s rozcestím který bude obsahovat aktuálně vložený produkt a odkaz na pokračování v nákupu a odkaz do košíku
•
registrace bude možná běžným způsobem nebo Facebookem; po registraci nový uživatel obdrží slevový kupón na 200kč
•
v uživatelské sekci bude přehled objednávek a změna osbobních a doručovacích informací
•
košík bude mít 4 kroky: košík – přehled zboží s možností úpravy počtu kusů a odebrání produktů z košíku a možnost přidat slevový poúkaz; platba+doprava – v tomto kroku uživatel vybere platbu, dopravy a případně napíše poznámku; adresa – v tomto kroku uživatel vyplní osobní a doručovací údaje (v případe přihlášeného uživatele tento krok bude již vyplněn); zhrnutí – v tomto kroku uživatel uvidí rekapitulaci celé objednávky, souhlas s obchodními podmínkami a potvrzení objednávky; po objednávce se vygeneruje faktura ve formátu pdf
4.1.3 Požadavky na systém: •
aplikace bude napsaná v PHP frameworku Nette v MVC architektuře
•
bude použit CSS framework Bootstrap
•
aplikace bude optimalizovaná pro LAMP – tento požadavek je automaticky splněn vybráním PHP frameworku
38
4.2 Databáze 4.2.1 Category První tabulka je tabulka kategorií. Tato tabulka obsahuje název kategorie a cizí klíč směřující na sama sebe. Pokud tento klíč je null (prázdný), pak se jedná o kategorii nadřazenou například muži, ženy. V opačném případě se jedná o podřazenou kategorii (např. muži > mikiny). Je možné udělat jakýkoliv počet úrovní kategorií, ale podle zadání jsou potřebné pouze dvě. Jako další sloupec je order (pořadí), jak už název napovídá určuje pořadí zobrazení kategorie.
4.2.2 Email Další tabulka je tabulka šablon emailů. V této tabulce jsou uloženy šablony pro emaily které odesílá aplikace uživatelům např. po dokončení objednávky. Obsahuje pouze pole text.
4.2.2 Products Produkty jsou uloženy celkem v 5 tabulkách. Základní tabulka Products obsahuje běžné parametry produktů (cena, sleva, popis, parametry, obrázek), označení zda se jedná o akční produkt, cizí klíč směřující na tabulku Category který může být prázdný, to značí nezařazený produkt. Další tabulka Products_varianty obsahují cizí klíč Products a pouze název varianty. Obdobně tabulka Products_subvarianty, která narozdíl od variant obsahuje cizí klíč Products_varianty, a název. Každá varianta má pouze svoje subvarianty. Další tabulka je Products_gallery, která nese data o galeriích variant, obsahuje pouze políčka: cizí klíč Products_varianty a název obrázku. Tento název obrázku je unikátní, tudíž má stejnou hodnotu jako id stejného řádku. Poslední tabulka je Products_zobrazeno. Tato tabulka slouží k analytickému sbírání dat. Obsahuje cizí klíče Products a Products_varianty, aktuální datum a čas a ip adresu. Díky těmto informacím lze vyčíst kolik unikátních lidí denně prohlíží určité produkty a které produkty a jejich varianty jsou nejsledovanější.
39
4.2.3 Payment a Transport Jak je z názvu již patrné jedná se o tabulky ukládající informace o platbě a dopravě. Obě tabulky mají stejnou strukturu, obsahují pouze název platby/dopravy a její cenu.
4.2.4 Order Další na řadě jsou tabulky pro objednávky. Jsou pouze 2. Pvní je Order (neplést si to s order sloupcem u Category) což jsou informace o objednávce. Obsahuje kontaktní, fakturační a doručovací údaje, fakturační a doručovací zvlášť v případě, že někdo má jinou adresu doručení než svou, obsahuje celkovou slevu, slevu v procentech, samozdřejmě datum objednávky a fakturu pro název uložené pdf faktury. Dále obsahuje vybraný typ platby a dopravy. Tyto 2 informace ale nejsou formou cizího klíče ale jsou to textová/číselná políčka pro případ změny plateb/doprav nebo jejich cen. Pro danou objednávku platí hodnota která je aktuální v době vytvoření objednávky, v případě změny (např. akce doprava zadarmo) zůstane pro starší objednávky údaj jako byl v době vytvoření objednávky. Druhá tabulka je Order_item která nese údaje o nakoupených prouktech. Obsahuje cizí klíče Order a Products které slouží k připojení objednaného produktu k objednávce a k identifikaci objednaného produktu. Dále obsahuje počet kusů, vybranou variantu a subvariantu a cenu jednoho kusu produktu. Varianta, subvarianta a cena jsou textové/číselné políčka nikoliv cizí klíč ze stejného důvodu jako platba a doprava.
40
4.2.5 Slevy V této tabulce jak je zřejmé z názvu jsou uloženy slevové poúkazy. Obsahují políčka kód, hodnota, nevyčerpatelný, typ, status a počet. Kód je unikátní označení slevy, zadáním tohoto kódu se sleva vloží do košíku. Typ je typ slevy. Používám pouze dva a ty jsou procentuální sleva a hodnotová sleva. Hodnota je velikost slevy v jednotkách závislých na typu. Nevyčerpatelný znamená zda se sleva deaktivuje po prvním použití. Tento atribut je využit u slevy 200 Kč pro nově registrovaného zákazníka. Po využití jeho slevy se sleva deaktivuje a nebude možno ji znovu použít (pokud se neaktivuje znovu). Předposlední atribut je status, který značí zda slevu lze použít nebo nelze (je neaktivní nebo vyplejtvaná). Poslední je počet, který udává kolikrát se sleva použila.
4.2.6 Users Poslední tabulkou je tabulka uživatelů. Tato tabulka obsahuje standartní uživatelské informace – osobní informace, kontaktní informace, adresu, přihlašovací jméno, heslo a skupinu. Povinné informace jsou pouze emailová adresa. V běžném případě by bylo povinné i přihlašovací jméno a heslo jenže z důvodu přihlášení Facebookem není potřeba tyto informace evidovat. Skupina označuje zda se jedná o běžného uživatele, u, nebo admina a.
41
4.3 Administrátorská část V této kapitole je popsáno ovládání administrační rozhraní. Celá administrátorská sekce je chráněna administrátorským jménem a heslem.
4.3.1 Kategorie produktů V této části administrace je možné vytvářet nové kategorie produktů, upravovat stávající, nastavit kategorie jako nekativní (nezobrazí se v uživatelské sekci) nebo je mazat. Při smazání kategorie se všechny produkty mazané kategorie nastaví jako “nezařazené” tj. nemají kategorii tudíž se nezobrazí v uživatelské sekci. V následujícím obrázku je vidět, že kateogorie ŽENY a ŽENY > mikiny jsou skryté.
Obrázek 23: přehled kategorií
42
Obrázek 24: úprava a přídávání kategorií
Obrázek 25: upravení pořadí a nadřazenosti kategorie se chytne myší a umístí na požadovanou pozici (košile je v tomto obrázku nadřazená kategorie)
43
4.3.2 Produkty V této sekci administrace je možnost přídávání, úpravy, prohlížení, filtrace, úprava variant, subvariant a galerií produktů. Přidávání a úprava produktu probíhá standartně ve formuláři. U produktu se píše popis a vlastnosti v zabudovaném WYSIWYG editoru znázorněném na dalším obrázku:
Obrázek 26: WYSIWYG editor
44
Významnou částí administrace produktů je úprava variant. Zde se upravují klíčové informace o produktech. Přidávají a upravují se zde varianty a subvarianty (opět modal dialogem) a spravuje galerie obrázků. Je možné smazat celou galerii najednou nebo dokonce celou variantu se všemi subvariantami a patřičnou galerií.
Obrázek 27: přehled variant, subvariant a galerií produktu
45
4.3.3 Objednávky Tato sekce administrace je nastavena jako výchozí hned po příchodu do administrace. V přehledu jsou rovnou vypsány všechny detaily objednávky jako je doručovací adresa a seznam zboží. Rovněž je možné přímo z přehledu měnit stav objednávky (nové, odeslané, zrušené ad.). Po zobrazení detailu objednávky je možné měnit veškeré informace týkající se vybrané objednávky. Defaultně jsou zobrazeny pouze neodeslané a nezrušené objednávky. Po změně stavu se automaticky odešle patřičný email. Ostatní lze zobrazit po nastavení filtru.
Obrázek 28: přehled objednávek
46
4.3.4 Uživatelé V této sekci se spravují uživatelé. Přidávání a úprava probíhá opět ve stantartním formuláři. Změnit lze kterékoliv údaje. Administrátoři nedokáží číst uživatelská hesla, hesla jsou uloženy bezpečně zahashovaná v databázi. Na následujícím obrázku lze vidět přehled uživatelů. Uživatel který má u loginu zobrazeno tučné f je uživatel registrovaný zkrze Facebook.
Obrázek 29: přehled uživatelů
Přehled uživatelů
47
4.4 Uživatelská část 4.4.1 Katalog Tato část uživatelské části se stará o vykreslení produktů dané kategorie do tabulky. Je možné tyto produkty filtrovat podle rozsahu ceny, nebo podle varianty a subvarianty. Produkty mají vypsané varianty zvlášť tzn jeden produkt je tam víckekrát, tolikrát, kolik má variant. Každý produkt má fotku ze své varianty, takže více stejných produktů různých variant mají různé fotky. Produkty u kterých probíhá akce (jsou dočasně slevněny) jde vidět ikonka “Akce!”.
Obrázek 30: katalog s filtrem, akční produkt a označený produkt
48
4.4.2 Detail produktu Po vybrání určitého produktu z katalogu a kliknutí na něj se uživatel dostane k detailu produktu. Zde vidí jeho detailní informace jako je název produktu, unikátní kód produktu, sleva a cena včetně DPH, výběr barev a velikostí s možností přidání produktu do košíku. Při vybrání některé z nabízených barev se aktuální velký obrázek změní na nový obrázek z vybrané varianty. Po vybrání subvarianty (velikosti) se zobrazí pod názvem produktu informace zda je produkt dostupný – na skladě. Po přidání do košíku se zobrazí klasické rozcestí s možností pokračovat v nákupu nebo s možností jít do košíku.
Obrázek 31: detail produktu
49
4.4.3 Nákupní košík Další část uživatelsého rozhraní je modal dialog košík. Nákup probíhá standartně ve 4 krocích – nákupní košík, typ platby a dopravy,
vyplnění adresy a zhrnutí. Tato
registrace nenabízí možnost registrace během objednávky. V prvním kroku lze zadat slevové poúkazy získané z akcí nebo při nové registraci uživatele, každý nový uživatel dostane slevu 200 Kč na jeden nákup. Slevy je možné kombinovat ale nelze je uplatnit na akční zboží. Akční zboží má časově omezenou slevu v základu. Po dokončení objednávky uživatel obdrží informaci za jak dlouho mu dojde zboží. V případě že všechno zboží co si objednal je na skladě do 2 pracovních dní, v opačném případě do 10. Následně obdrží email s vygenerovanou pdf fakturou jako příloha.
Obrázek 32: nákupní košík se slevami
50
4.4.4 Registrace a uživatelská sekce Mnou řešený systém podporuje dvě různé metody registrace. První je klasická vyplněním formuláře a druhá je přes Facebook. Registrace přes Facebook probíhá jedním kliknutím na ono tlačítko. Běžný typ registrace probíhá nejdříve zadáním emailové adresy. Systém nejdříve zkontroluje zda tuto emailovou adresu už nějaký uživatel nemá. V případě že má uživateli napíše chybovou hlášku. V opačném případě mu na tutu emailovou adresu odešle registrační link. Touto metodou je zaručeno, že zadaná emailová adresa je validní a existující. Po kliknutí na link se uživatel dostane na běžný registrační formulář. Před vstupem na něj se systém podívá do objednávek, zda někdo už něco neobjednával s touto emailovou adresou. V případě že se najde shoda, pak se uživateli rovnou vyplní všechna políčka formuláře kromě hesla. Mohlo by se zdát že zde dochází k úniku citlivých informací pouhým zadáním emailu ale není to tak. Pouze majtel této adresy se dostane až k formuláři, navíc se na tento formulář lze dostat pouze pomocí linku poslaným na emailovou adresu. Jinak se na toto místo dostat nelze. Po registraci má uživatel přístup do uživatelské sekce která má 2 části: sledování stavu objednávek a úpravu uživatelských informací.
Obrázek 33: uživatelská sekce
51
4.5 Analytické funkce Analytické funkce slouží k sledování návštěvnosti stránek. V tomto projektu jsem použil pouze dvě funkce: První je tabulka zobrazených produktů. Toto měření nám udává kolik lidí sleduje které produtky ale nevíme o uživatelých nic. Proto používám i další metodu měření a tou je Google Analytics. Google Analytics je javascript běžící na všech stránkách, který posílá komplexní informace o uživatelých na hlavní server ze kterého se pak dá získat podstatně více informací. Mezi tyto informace patří: místo, země, město, prohlížeč, operační systém, rozlišení obrazovky a další. Například z tohoto měření vyplývá, že stránky navštěvuje 37% lidí na chytrých telefonech nebo tabletech.
4.6 Chytré telefony a tablety Jak z minulé kapitoly vyplývá, více než třetina uživatelů prohlíží internet na mobilních zařízeních. Pro mobilní zařízení je také třeba mít upravené stránky. Některé portály mají 2 verze svých stránek: pro desktopy a pro mobilní zařízení. Napříkla Facebook pro desktopy je dostupný na facebook.com naopak pro mobilní zařízení je na m.facebook.com. Při pokusu z mobilního zařízení navštívit plnohodnotné desktopové stránky nás scripty přesměrují zpátky na mobilní verzi. Jiné portály nabízí obě verze dostupné pro mobilní zařízení avšak mobilní verze bývá jako výchozí. Celý systém jsem designoval v CSS frameworku Bootstrap, který je plně responzivní. To znamená že v případě mobilních zařízení pozná podle rozlišení že se jedná o malou obrazovku a celá stránka změní strukturu do typické sloupcové stránky. Tablety jsou dostatečně velké na zobrazení webu plnohodnotně avšak pro ně je třeba uzpůsobit ovládání dotykové obrazovce. To řeší JavaScriptové pluginy defaultně (jsou napsány responzivně). Stránky jsou přístupné z mobilních zařízení bez problémů.
52
5. Instalace systému Tento projekt je určen primárně pro potřeby firmy Activity Design ale může být v budocnu použit i pro jiné podnikatelské subjekty. Změna provozovatele je podmíněna pouze změnou něktrých částí kódu jako jsou obchodní podmínky, reklamační řád, hlavičky emailu a parametry facebookové aplikace.
5.1 Požadavky systému Vzhledem k tomu, že systém je napsán v PHP frameworku, tak je potřeba několik softwaru: •
PHP 5.5 a vyšší, PHP gd modul pro manipulaci s obrázky
•
Apache + mod_rewrite
•
MySQL server nebo MariaDB server s podporou InnoDB storage engine
5.2 Instalace systému 1. Vytvoření libovolně pojmenované databáze 2. importování databázového souboru (na CD soubor databaze.sql) například příkazem “mysql -u user databasename < databaze.sql” kde user je uživatel MySQL a databasename je jméno databáze 3. nastavení
databáze,
uživatele
a
jeho
hesla
v
souboru
app/config/config.local.neon !pozor na mezery a tabulátory, tento config je na ně citlivý! 4. Pro funkční facebook login nastavit Facebook appId a secret v souboru app/config/config.neon !opatrně s mererami a tabulátory! 5. Nastavení přístupových práv pro Apache do složek log a temp 6. přesunutí celé aplikace do www složky Apache 7. spuštění přes spouštěcí soubor www/index.php v prohlížeči 8. v databázi je jeden účet: “admin” s heslem “admin”
53
6. Závěr Cílem bylo zrealizovat funkční malý internetový obchod, který by umožnil zákazníkovy příjemné nakupování a firmě bezchybnou a snadnou administraci a vyřizování objednávek. Popsal sem princim uživatelské sekce a administrátorske sekce. Internetový obchod již nějakou dobu běží na internetové adrese www.monkeypit.cz a už ho navštívilo několik tisíc unikátních návštěvníků. Celý eshop je plně responsivní, tak je možné ho procházet z jakéhokoliv zařízení bez větších problémů. Jediná část, která není ideálně řešená je správa odesílaných emailů. Nejsou plně konfigurovatelné, tak je obtížné je měnit po celé aplikaci. Do budoucna bude možné projekt dále rozšířit například o parametry jednotlivých produktů, v přípdě oblečení o materiál atd. pomocí kterých půjde produkty lépe vyhledávat. Dále předpokládám že se projekt rozroste do více sociálních sítí (cílem je Twitter a Google+). Systém jsem navrhoval tak, aby bylo možné jednoduše kteroukoliv možnost realizovat.
54
7. Seznam použité literatury [1]
Internet World Stats [online]. [cit. 2015-05-24]. Dostupné z: http://www.internetworldstats.com/stats.htm
[2] CASTRO, Elizabeth a Bruce HYSLOP. HTML5 a CSS3: názorný průvodce tvorbou WWW stránek. 1. vyd. Brno: Computer Press, 2012, 439 s. ISBN 978-80-251-3733-8. [3]
Bootstrap [online]. [cit. 2015-05-24]. Dostupné z: http://getbootstrap.com/getting-started/
[4] ZAKAS, Nicholas C a Bruce HYSLOP. JavaScript pro webové vývojáře: programujeme profesionálně. Vyd. 1. Brno: Computer Press, 2009, 832 s. ISBN 978-80-251-2509-0. [5] KOFLER, Michael a Bernd ÖGGL. PHP 5 a MySQL 5: průvodce webového programátora. Vyd. 1. Brno: Computer Press, 2007, 607 s. ISBN 978-80-251-1813-9 [6] Nette framework [online]. [cit. 2015-05-24]. Dostupné z: http://doc.nette.org/cs/2.3/ [7] Ruby on Rails framework [online]. [cit. 2015-05-24]. Dostupné z: http://guides.rubyonrails.org/ [8] Node.js platforma [online]. [cit. 2015-05-24]. Dostupné z: https://nodejs.org/api/ [9] ASP .NET [online]. [cit. 2015-05-24]. Dostupné z: http://www.asp.net/web-forms/what-is-web-forms [10] MySQL [online]. [cit. 2015-05-24]. Dostupné z: http://dev.mysql.com/doc/refman/5.7/en/index.html
55
8. Seznam obrázků Obrázek 1: diagram chodu eshopu...................................................................................8 Obrázek 2: HTML5 dokument.......................................................................................17 Obrázek 3: styl pro element body...................................................................................18 Obrázek 4: styl vepsaný přímo do elementu; červené písmo a podtrřený text...............19 Obrázek 5: kombinace id a tříd atributů.........................................................................19 Obrázek 6: kombinované CSS selektory........................................................................19 Obrázek 7: kousek stránky s využitím Boostrapu..........................................................20 Obrázek 8: řetězový zápis jQuery...................................................................................21 Obrázek 9: událost click a animace slideDown..............................................................22 Obrázek 10: jednoduchý recept v XML.........................................................................22 Obrázek 11: diagram funkce MVC.................................................................................23 Obrázek 12: hello word v jazyce PHP............................................................................25 Obrázek 13: PHP zápis vs Latte zápis; oba zápisy jsou ekvivalentní.............................26 Obrázek 14: vytvoření formuláře v controlleru..............................................................27 Obrázek 15: vykreslení formuláře v Latte......................................................................27 Obrázek 16: ukázka tříd v Ruby s výstupem programu.................................................28 Obrázek 17: webová aplikace v Ruby on Rails..............................................................29 Obrázek 18: hello world platformy Node.js bez použití ngix........................................30 Obrázek 19: čtení dat z disku v Node.js.........................................................................30 Obrázek 20: ukázka ASP .NET tlačítka, které mění svůj text po kliknutí......................31 Obrázek 21: ukázka SQL dotazu s výsledkem...............................................................33 Obrázek 22: ukázka HTTP dotazu a odpovědi...............................................................33 Obrázek 23: přehled kategorií........................................................................................41 Obrázek 24: úprava a přídávání kategorií.......................................................................42 Obrázek 25: upravení pořadí a nadřazenosti kategorie se chytne myší a umístí na požadovanou pozici (košile je v tomto obrázku nadřazená kategorie)...........................42 Obrázek 26: WYSIWYG editor......................................................................................43 Obrázek 27: přehled variant, subvariant a galerií produktu...........................................44 Obrázek 28: přehled objednávek....................................................................................45 Obrázek 29: přehled uživatelů........................................................................................46 Obrázek 30: katalog s filtrem, akční produkt a označený produkt.................................47 Obrázek 31: detail produktu...........................................................................................48 56
Obrázek 32: nákupní košík se slevami...........................................................................49 Obrázek 33: uživatelsá sekce..........................................................................................50
57
9. Přílohy – Obsah přiloženého CD Na přiloženém CD se v kořenovém adresáři nachází tato bakalářská práce ve formátu bakalarska_prace.pdf. Návod na instalaci systému popsán v kapitole 5.2. •
app ◦ AdminModule
– pohledy a řadiče administrátorské sekce
◦ FrontModule
– pohledy a řadiče uživatelské sekce
◦ config
– konfigurace aplikace, připojení k databázi atd.
◦ model
– všechny modely
◦ presenters
– všem společný řadič
◦ router
– generátor “pěkné URL”
◦ bootstrap.php
– zaváděcí soubor aplikace
•
lib
– rozšiřující knihovny
•
log
– logy errory atd.
•
temp
– dočasné soubory aplikace
•
www ◦ css
– kaskádové styly celé aplikace
◦ dokumenty
– dokumenty k reklamaci
◦ faktury
– vygenerované faktury
◦ galery
– všechny obrázky galerie
◦ images
– obrázky použité na stránkách
◦ js
– všechny javascripty
◦ plupload
– script pro upload souborů
◦ index.php
– spuštění aplikace
•
bakalarka_prace.pdf
– tato práce
•
database.sql
– databáze pro aplikaci
58
