VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Obor: Aplikovaná informatika. Téma: Webové stránky s informačním systémem pro firmu PC Servis

VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Obor: Aplikovaná informatika

Bakalářská práce

T é m a : We b o v é s t r á n k y s i n f o r m a č n í m s y s t é m e m p ro f i r m u P C S e r v i s

Jméno a příjmení: Tomáš Tetour Vedoucí práce: PeadDr. František Smrčka, Ph.D. Jihlava 2013

Anotace Tato bakalářská práce se zabývá tvorbou webové aplikace s informačním systémem pro firmu PC servis, který bude evidovat seznam zboží a zákazníků, rozšířený o nabídku služeb, novinky a akce. Webová aplikace bude rozdělena na tři rozhraní – anonym, zákazník a prodejce. Prodejce má veškerou správu na stránkách. Anonym může objednávat zboží. Zákazník má přehled o objednaném zboží.

Klíčová slova MySQL, PHP, HTML, internetový obchod

Abstract This bachelor thesis deals with the development of a web application providing the information system for a company named PC servis. The information system will record a list of goods and customers including a list of services, news, and actions. The web application will be divided into three interfaces - anonymous customer, registered customer, and seller. The seller assumes all administration on the site. The anonymous customer can order goods. The registered customer has an overview of all ordered goods.

Keywords MySQL, PHP, HTML, e-shop

Poděkování: Zde bych rád poděkoval vedoucímu své bakalářské práce panu PaedDr. Františku Smrčkovi, Ph.D. za jeho odborné vedení a rady při zpracování této práce. Dále bych rád poděkoval pedagogům Vysoké školy polytechnické v Jihlavě za předávání cenných znalostí a zkušeností během celého studia. Poslední poděkování bych chtěl věnovat své přítelkyni za podporu a trpělivost při vypracování bakalářské práce.

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/a 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 uzavření licenční smlouvy o užití mé bakalářské práce a prohlašuji, že s o u h l a s í 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ím licence. V Jihlavě dne 29. 5. 2013 ...................................................... Podpis

Obsah 1

Úvod .............................................................................................................................. 7

2

Analýza .......................................................................................................................... 9

3

4

2.1

Firma ....................................................................................................................... 9

2.2

Webové stránky firmy .......................................................................................... 10

2.3

Uživatelská práva .................................................................................................. 11

2.4

Programovací jazyk a data .................................................................................... 11

2.5

Návrh datového modelu ........................................................................................ 12

Teoretický základ ........................................................................................................ 14 3.1

Programovací jazyky ............................................................................................ 14

3.2

Nástroje pro vývoj ................................................................................................ 17

Implementace............................................................................................................... 18 4.1

Popis řešení ........................................................................................................... 18

4.2

Popis ER - modelu ................................................................................................ 19

4.2.1

Databáze .......................................................................................................... 21

5

Původní design ............................................................................................................ 22

6

Návrh nového designu ................................................................................................. 23 6.1

7

Rozložení stránek .................................................................................................. 23

6.1.1

Javascript ......................................................................................................... 26

6.1.2

Google map ..................................................................................................... 27

Funkcionalita ............................................................................................................... 28 7.1

Anonym ................................................................................................................ 28

7.2

Zákazník................................................................................................................ 28

7.2.1

8

9

Košík................................................................................................................ 33

7.3

Prodejce ................................................................................................................ 36

7.4

Hledání zboží ........................................................................................................ 37

7.5

Komentáře ............................................................................................................. 38

Testování ..................................................................................................................... 40 8.1

Postup testování a výsledky .................................................................................. 40

8.2

Odstranění chyb .................................................................................................... 40

Závěr ............................................................................................................................ 42 9.1

Problémy a jejich řešení ........................................................................................ 42

9.2

Budoucnost ........................................................................................................... 43

Seznam použité literatury .................................................................................................... 44 Seznam obrázků................................................................................................................... 45 Seznam tabulek .................................................................................................................... 45 Seznam použitých zkratek ................................................................................................... 46

1 Úvod V dnešní turbulentní době neustále roste vliv internetu na širokou veřejnost. Internet se jeví jako nejvíce využívaným komunikačním prvkem, kdy na rozdíl od jiných médií, jako je tisk nebo televize, je plně otevřený všem uživatelům, kteří jej v drtivé většině využívají pro získávání

informací.

Prostředí

Internetu

nabízí

spousty

nepřeberných

možností.

Nejjednodušším způsobem, jak tyto informace poskytnout, je vytvoření webové stránky. Webové stránky se v současnosti stávají nejvyužívanějším zdrojem komunikace mezi zákazníky a firmami vůbec. Je to nejefektivnější způsob, jak přestavit vyrůstající společnost lidem, navázat kontakt s novými zákazníky a udržet si ty stávající. Otevírají virtuální dveře do nového rozměru fungování společnosti. Webové stránky se stávají samozřejmostí každé úspěšné firmy. Fungují především jako vstupní brána pro první kontakt se zákazníkem. Je tedy nutné se prezentovat kvalitně vytvořenými stránkami, protože tvoří jakousi vizitku, vypovídající mnoho o jméně společnosti a utváří prvotní dojem, který si uživatel vytvoří. Firma pomocí svých webových stránek poskytuje zákazníkům informace o své činnosti, službách a produktech, které nabízí. Tyto informace může průběžně obnovovat a jsou tak vždy aktuální a přístupné 24 hodin denně. Dá se tedy říci, že kdo nemá vlastní webovou stránku, jako by v dnešní době ani nebyl. Pro svou bakalářskou práci jsem si vybral vytvoření webových stránek s informačním systémem pro vznikající firmu PC Servis. Díky těmto stránkám bude umožněno se malé společnosti prezentovat novým způsobem na Internetu. Cílem této práce je vytvořit webovou aplikaci s informačním systémem pro budoucí firmu PC Servis. Vytvořené webové stránky budou rozděleny do třech částí. První část bude věnována informačnímu přehledu, který bude zobrazovat veškeré poskytované služby a zboží firmy. Další část bude uživatelská (tj. zákaznická), kde si zákazník bude moci objednávat zboží. V této části bude mít registrovaný zákazník možnost sledovat veškeré své objednávky a služby, které u firmy využil. V poslední, administrační části, bude mít prodejce možnost veškeré správy celých webových stránek.

7

Stránky budou naprogramovány v jazyce HTML a CCS, které jsou důležité pro základ a design stránek, PHP, který vytváří jednotlivé funkce stránek a JavaScript, který využiji pro prezentaci firmy. Tyto internetové stránky budou především sloužit pro překupování zboží z internetových portálů aukro.cz a ebay.com za výhodné ceny a k jejich následnému prodeji, kdy prodejce nakoupí zboží z oblasti IT za zvýhodněnou cenu a poté jej prodá ve svém internetovém obchodě. Celý projekt je zpracováván na žádost majitele společnosti PC Servis, kterému budou průběžně prezentovány postupy a cíle a na základě konečného výsledku mu bude celý projekt předán.

8

2 Analýza 2.1 Firma PC Servis je malá firma, nacházející se nedaleko Telče, která se specializuje na opravu počítačů a notebooků. Její hlavní činností je poskytování veškerého servisu z oblasti počítačové techniky. Firma je především zaměřena na překupování použitého zboží z portálů aukro.cz nebo ebay.com, kdy koupené zboží dále nabízí na svých internetových stránkách za výhodné ceny nebo jej používá jako náhradní komponent do opravovaných počítačů. Díky tomuto se daří firmě snížit náklady na opravy na minimum a může tak nabízet své služby za bezkonkurenční ceny ve svém okolí. Firma nabízí širokou škálu služeb. Opravuje například poškozené displeje notebooků, LCD monitorů a také mobilní telefony. Na požádání provede opravu nebo instalaci programů přímo v domě zákazníka. Pokud je nutné spravit počítač ve firmě, a tudíž by se zákazník ocitl bez potřebné techniky, zapůjčí mu firma náhradní počítač, který může zákazník užívat po dobu potřebnou k opravě. Firma také nabízí odkup starších počítačů dle technického stavu. V rámci svých služeb nabízí PC Servis sestavy počítačů dle přání a požadavků svých zákazníků. Při opravách notebooku (např.: prasklého LCD displeje) je firma schopná opravit poškozený komponent mnohem levněji než ostatní servisy počítačů. A to právě z důvodu, že nakupuje nové nebo použité zboží ze zmiňovaných internetových obchodů, kde jsou ceny mnohem nižší než jinde. Zákazníci si raději nechají opravit notebook levněji, navíc se zárukou půl roku, než ve specializovaném servise, kde zaplatí mnohem vyšší cenu než u PC Servis. Dále firma odkupuje použitý hardware přímo od zákazníků (pokud má nějakou cenu). Nemáli hardware žádnou nebo minimální cenu, elektroniku na vlastní náklady recykluje. PC Servis nepůsobí pouze ve svém kamenném obchodě nebo na internetu, ale nabízí opravy menších závad přímo u zákazníka doma (např.: výměna hardwaru, instalace softwaru, nastavení domácí sítě atd.). Mezi cílové zákazníky firmy patří jak amatérští uživatelé počítačů, kteří si nevědí rady s nákupem nového pc nebo s poruchou stávajícího počítače, tak profesionálové, kteří potřebují využít služeb této firmy, a to vše s ohledem na kvalitu a cenu.

9

2.2 Webové stránky firmy Firma PC Servis pracuje na stejném principu jako mnoho jiných počítačových prodejen a servisů, avšak její výjimečnost tkví v tom, že v okolí Telče podobná firma s možností internetového obchodu nepůsobí. V blízkém okolí lze nalézt pouze malé soukromníky, kteří se zabývají opravou počítačů nebo jejich prodejem, ale jejich služby můžeme nalézt pouze v kamenných obchodech. Navíc jsou poměrně drahé a rychlost vyřízení zadané zakázky trvá i několik týdnů. Vzhledem k této skutečnosti bude vytvoření webových stránek s e-shopem pro firmu PC Servis jasná konkurenční výhoda. Vytvoření internetové stránky se stane pro firmu PC Servis jednou z možností zviditelnění se nejen ve svém okolí. Velkou výhodu bude mít firma díky stránkám především v aktuálnosti informací, které navíc budou dostupné internetovým uživatelům nepřetržitě. Firma zde bude mít možnost aktualizovat stav zboží a cen, nabízet různé slevy a akce a prezentovat informace o nabízených službách. Oproti ostatním firmám tak bude PC Servis výjimečný v tom, co bude prodávat – a to právě díky vytvořeným stránkám na webu. Většinou všechny internetové obchody v oblasti IT prodávají nové zboží, které dodávají ze skladů. Tato firma se od nich bude odlišovat. Bude nakupovat hardware přímo z internetových obchodů aukro.cz a ebay.com za minimální ceny a prostřednictvím svého internetového obchodu jej dále prodávat. Webové stránky zjednoduší komunikaci mezi majitelem firmy a zákazníky a můžou pomoci oslovit nové, potenciální zákazníky nebo udržet kontakt s těmi stávajícími. Po celou dobu vytváření stránek pro firmu bude kladen důraz na kvalitu a přehlednost a tím i možnost reklamy firmy PC Servis okolí, kde působí. V rámci možností budou stránky přizpůsobeny tak, aby při zadávání názvu firmy do internetového vyhledávače byly lehce k nalezení. S ohledem na finanční náročnost budou stránky vytvořeny za přijatelnou cenu a jejich následný provoz a údržba bude oproti nákladům vynaložených na případnou jinou formu reklamy (např. tisk letáků a roznesení do domácností) s nízkými náklady.

10

2.3 Uživatelská práva Webové stránky pro firmu PC Servis budou rozděleny pro tři typy uživatelů. Typy uživatelů: 

Anonym – Jedná se o uživatele, který si bude moci pouze prohlížet webové stránky a v případě, že si bude chtít zboží objednat, objedná si jej pomocí objednacího formuláře.



Zákazník – Uživatel typu „zákazník“ je vlastně zaregistrovaný anonym. Tento uživatel bude mít veškerá práva jako anonym, s tím rozdílem, že díky registraci bude mít přehled o stavu objednaného zboží, dále může sledovat počet bodů získaných za koupené zboží a zobrazí se mu přehled služeb, které u firmy využil.



Prodejce – Prodejce bude působit zároveň jako správce a bude mu náležet veškerá administrace webových stránek.

2.4 Programovací jazyk a data Webové stránky budou programovány v jazyce PHP, HTLM a CSS. Pro ukládání dat o zákaznících a jejich objednávkách bude použita databáze MySQL, kde budou také uloženy data o popisu zboží.

11

2.5 Návrh datového modelu Pro lepší představu, jak budou internetové stránky fungovat a kam se budou data ukládat, jsem sestavil datový model. Datový model, který je blíže znázorněn na obrázku, bude složen z jedenácti tabulek.

Obr. 1: Datový model Zdroj: Vlastní zpracování

Hlavní položkou datového modelu je tabulka zboží. Tato tabulka obsahuje podrobnější informace o vybraném zboží, jeho stavu na skladě a ceně. Následují další dvě důležité, a přitom velice podobné tabulky, zákazník a anonym. Registrovaný zákazník má oproti anonymu následující výhody:

12



Díky registraci získá vlastní login a heslo pro přihlášení do webového portálu, tím pádem má přehled o všech zakoupených produktech či využitých službách.



Může komentovat jednotlivé zboží pomocí tabulky komentář.



V neposlední řadě jsou zákazníkovi přiděleny body za nákup zboží nebo za využití služeb firmy.

Anonym se liší od zákazníka tím, že se nemusí zdržovat zbytečnou registrací a může rovnou objednávat zboží (pouze musí vyplnit formulář s kontaktními údaji). Tabulka prodejce slouží pro přihlášení do administrace. Po přihlášení zde může prodejce provádět veškeré úpravy se zbožím. V tabulkách stav a košík se ukládají informace o zboží, které je v košíku a počítá se stav položek v košíku.

13

3 Teoretický základ 3.1 Programovací jazyky HTML HTML (hypertextový značkovací jazyk) je v dnešní době stále nejoblíbenější jazyk pro vytváření jednoduchých www stránek. HTML je značkovací jazyk, který používá definované značky (tagy) k vytváření a formátování dokumentů pro webové stránky. Jazyk HTML je nyní v aktuální verzi 4.01 a dále se již nevyvíjí. Normy a doporučení pro jazyk HTML schvaluje nezávislé mezinárodní konsorcium W3C. [1] CSS CSS (kaskádové styly) je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Tvoří souhrn pravidel a metod pro formátování webových stránek. [2]

JavaScript JavaScript je objektově orientovaný skriptovací jazyk. Používá se z pravidla jako interpretovaný programovací jazyk pro www stránky, vkládá se přímo do HTML kódu stránky. Ovládají se jím různé interaktivní prvky GUI, tvoření animací nebo efekty obrázků. Je programován v Jazyce C/C++/Java. [3] MySQL MySQL je databázový systém. Tento program je volně šiřitelný jako Open Source. V současné době je oblíbený díky své rychlosti a licenci. MySQL je malý, rychlý a jednoduchý databázový systém. Lze do něj ukládat různá data (texty, čísla, obrázky, datum, atd.). MySQL se většinou propojuje s jazykem PHP, pomocí něhož umožňuje přístup k uloženým datům. Databáze MySQL se skládá z tabulek, které jsou dále složeny ze sloupců a řádků. [4] PHP PHP je skriptovací jazyk běžící na straně serveru, speciálně navržen pro potřeby webové stránky. PHP je Open Source. PHP je všestranný jazyk pro webové aplikace, který dokonale zvládá generování obrázků, generování souborů PDF a dokonce vytváření Flash animací (použitím libswf a Ming) generovaných za běhu. Výstupem může být rovněž libovolný text jako například XHTML 14

nebo jakýkoli jiný XML soubor. PHP 5 se značně přibližuje ostatním jazykům podporujícím objektově orientované programování. Nové jsou některé funkce, obsluhy chyb atd. PHP je nejrozšířenějším a nejoblíbenějším skriptovacím jazykem. Je šířen volně. Jedna z nejsilnějších a nejvýznamnějších vlastností PHP je jeho podpora pro širokou škálu databází. Vytvoření webové stránky spolupracující s databází je tak vcelku jednoduché. [6] RegEx Regulární výraz (regular expression), označovaný též zkráceně jako regexp nebo regex je speciální řetězec znaků, který představuje určitý vzor pro textové řetězce. Regulární výrazy se proto nejčastěji používají ke kontrole dat zadávaných ve formulářích (např.: e-mailová, adresa, PSČ atd.) nebo „pasování” kódu. Regulární výrazy lze v současné době najít téměř ve všech programovacích jazycích (C#, Java, Visual Basic.NET, Perl, PHP, Javascript atd.). I základní znalost regulárních výrazů může programátoru při psaní kódu ušetřit mnoho řádků. Existují různé odnože regulárních výrazů – nejznámější jsou Perl-compatible regulární výrazy a POSIX regulární výrazy. Ačkoliv většina novějších programovacích jazyků používá regulární výrazy odvozené od jazyka Perl, drobné rozdíly v implementaci tu stále přetrvávají (například Javascript nepodporuje všechny Perl regular expressions konstrukce). [7] V regulárních výrazech existuje několik typů metaznaků: Tab. 1: Regulární výrazy - metaznaky .

zastupuje libovolný znak

[]

povolení právě jednoho ze skupiny znaků

^

zakázané znaky uzavřeme do hranaté závorky

[1-5], [a-e], [A-Z]

definice znaků v abecedě nebo interval čísel

()

opakování určitě sekce znaků

( ) kvantifikátor

opakování se bude vztahovat na celou sekci

|

pro výběr několika variant textu

\

pro odlišení znaku nebo metaznaku ( \, ^, $, ., [, ], |, (, ), ?, *, +, {, }.) Zdroj: [8]

15

Následující tabulky zobrazují seznam kvantifikátorů a hranic. Kvantifikátor počet opakování: Tab. 2: Regulární výrazy - kvantifikátory ?

minimálně 0krát, maximálně 1krát

*

minimálně 0krát (maximálně neomezeno)

+

minimálně 1krát (maximálně neomezeno)

{n}

právě n-krát

{m,n}

minimálně m-krát, maximálně n-krát

{m,}

minimálně m-krát (maximálně neomezeno) Zdroj: [8]

Předdefinované skupiny znaků: Tab. 3: Regulární výrazy - předdefinovaná skupina znaků \d

číslice 0-9

\D

jakýkoliv znak kromě číslic 0-9

\w

znaky "slova" (ekvivalentní zápisu [a-zA-Z0-9_])

\W

jakýkoliv znak kromě znaků "slova" (ekvivalentní zápisu [^a-zA-Z0-9_])

\s

bílé znaky (mezera, tabulátor, znaky pro zalomení řádků)

\S

jakýkoliv znak kromě "bílých" znaků Zdroj: [8]

Hranice: Tab. 4: Regulární výrazy - hranice znaků ^

začátek řetězce (textu, v němž se vyhledává)

$

konec řetězce (textu, v němž se vyhledává) Zdroj: [8]

16

3.2 Nástroje pro vývoj PSPad 4.5.6 Jedná se o velmi zajímavý editor určený programátorům nejrůznějších programovacích jazyků. Program neobsahuje nekonečnou řadu zbytečných funkcí, které většina stejně nikdy nevyužije, ale soustředí se spíše na jednoduchost, přehlednost a rychlost. Zajímavá je funkce šablony, která umožňuje definovat určitou část programové kódu (či něčeho obdobného) pod definovaný příkaz a při programování tento kód rychle vyvolat. Pro používání této funkce a nadefinování příslušných bloků kódu je nutno si pročíst nápovědu, která je velmi kvalitně zpracována. Program podporuje přes 30 různých prostředí (PHP, HTML, XML, ASP, SQL, Python, atd.), které uživatelům výrazně ulehčí práci a sami si mohou vytvořit další. [10] PhpMyAdmin Tento nástroj se používá pro jednoduchou správu MySQL. PhpMyAdmin je napsaný v jazyce PHP, který umožňuje zálohování, vytváření, vkládaní, editaci a mazání záznamu v tabulkách, dále vytváření databázi apod. PhpMyAdmin se spouští přes webové rozhraní. [5] Adobe Photoshop Působí jako světový standard pro editaci bitmapový obrázků v nejvyšší kvalitě. Uživatelé jej ocení nejen při úpravě fotografií, ale také při tvorbě zcela nových obrázků. Adobe Photoshop je ideální pro tvorbu webové grafiky, dokáže rozřezat obrázek a exportovat do HTML, atd. Jedná se o software s placenou licencí. [12] SmartDraw SmartDraw je software pro tvoření ER-diagramu. Tento program mimo jiné slouží pro kreslení grafů, organizačních schémat, formulářů a jiných diagramů. Jedná se placený software, který nabízí 30 denní free verzi. [11]

17

4 Implementace 4.1 Popis řešení V rámci své bakalářské práce jsem se rozhodl vytvořit webové stránky pro firmu PC Servis. Po konzultaci s majitelem firmy mi byly postupně sděleny požadavky pro vytvoření firemních webových stránek. Pro práci jsem použil programovací jazyky HTML a PHP. Tyto jazyky jsem si zvolil z toho důvodu, že se již nějakou dobu pohybuji v programování webových stránek a blíže jsem se s nimi seznámil na praxi ve firmě, která se zabývá vytvářením webových aplikací a tvorbou eshopů. K ukládání dat jsem použil databázi MySQL, která byla více popsána v teoretické části, jelikož je jednoduchá a snadno implementovatelná v jazyce PHP. Přemýšlel jsem i o databázi PostgresSQL, ale tu jsem nakonec nevyužil, protože s ní nemám dobré zkušenosti. Skriptovací jazyk JavaScript není v mé práci tolik využívaný. Použil jsem jej ojediněle pouze na úvodní stránce, a to k zobrazování obrázku, který ukazuje, čím se firma zabývá. Pro mou práci je však nezbytná třída kontroly regulárních výrazů RexEx (Regular expression), a to především pro registraci zákazníka nebo přidávání komentářů. Jestliže by pro kontrolu správnosti nebyla tato třída vložena, zákazník by mohl napsat do formuláře cokoliv a narušit tak správnou funkci webu nebo v horším případě napadení serveru. Uvažoval jsem zde použít i JavaScript, který však lze v prohlížeči vypnout, což je pro funkci kontroly úplně zbytečné. Webové stránky jsou po celou dobu v provozu na serveru web1.simplest.cz pod subdoménou servis.flaky.cz. Zvažoval jsem, zda stránky nebudu testovat na programu server2go, ale od tohoto nápadu jsem upustil, jelikož tento virtuální server nezobrazuje správně kaskádové styly. Až budou tyto stánky hotové a v plném provozu, poběží na doméně www.flaky.cz.

18

4.2 Popis ER - modelu Jak již bylo zmíněno v předchozích kapitolách, k ukládání dat jsem využil databázi MySQL. Databáze se skládá z jedenácti tabulek, které obsahuji informace o zboží, zákaznících, akcích apod. Každá z těchto tabulek je složena z určitých atributů.

Obr. 2: ER - model Zdroj: Vlastní zpracování

19

Zboží – Je jedna z hlavní tabulek datového modelu. Ukládají se zde informace o zboží a jeho cenách. Atributy: id_zboz int(10), nazev varchar(50), image1 varchar(50), kategorie varchar(30), cena int(10), skladem int(10), zaruka int(10), novinka int(1) a popis1-popis10(text). Tyto názvy atributů jsou dány, protože každé zboží je jiného kategorie a má jiný popis, proto je tu také tabulka kategorie. Dále v atributu image1 je uložená skutečná cesta obrázku, kde je uložen na serveru. Zákazník - Důležitá tabulka sloužící k ukládání dat o registrovaných zákaznících. Je zde uložen login a heslo pro přihlašování do internetového obchodu. Atributy: id_z int(10), jmeno varchar(30), prijmeni varchar(30), ulice varchar(50), obec varchar(20), psc int(6), email varchar(50), tel int(15), login varchar(30), heslo varchar(30). Anonym - Skoro totožná tabulka jako zákazník. Složí pro uložení adresy zákazníka, pokud si objednává zboží, aniž by byl registrovaný, což je rychlejší způsob pro objednání zboží. Atributy: id int(10), jmeno varchar(30), prijmeni varchar(30), email varchar(50), tel int(12), ulice varchar(50), obec varchar(30), pcs int(6). Prodejce – Poslední, důležitou tabulkou, je prodejce. Prodejce (administrátor) slouží pro veškeré úpravy, přidávání a mazání zboží, ceníku, kategorie a komentářů. Dále zjišťuje stav objednávek atd. Atributy: id_p int(10), login varchar(50), heslo varchar(120), prava int (10). Ceník - Tato tabulka slouží pro ukládání informací o jednotlivých cenách služeb, které firma poskytuje. Atributy: id_ceny int(10), nazev (text), cena int(50). Kategorie - Do této tabulky se ukládá popis jednotlivých produktů (např.: kategorie procesor se skládá z těchto popisu: výrobce, patice, pracovní frekvence, turbo, velikost L2 a L3, počet jader a ostatní). Jiná kategorie obsahuje jiný popis, proto mají souvztažné atributy – název jako popis1 až popis10. Atributy: kategorie varchar(50), popis1 až popis10 varchar(50). Akce - Zde jsou uloženy informace o akcích na určité zboží. Je zde napsáno, jak dlouho bude akce trvat a za jakou cenu lze zboží koupit. Atributy: id_a int(10), popis varchar(50), od (date), do (date), cena int(10).

20

Košík - Do tabulky košík se ukládají informace o zboží, které je uloženo v košíku. Atribut id_z poskytuje informaci, jakému zákazníkovi tento košík patří. Atribut stav zobrazuje tři stavy (0-výběr zboží, 1-odeslání objednávky, 2-odeslání objednávky z prodejny). Atributy: id_k int(10), stav int(1), datum (date), postovne int(5), id_z int(10) je cizí klič tabulky zakaznik. Stav - Tabulka především propojuje tabulky zboží a košík a počítá počet produktů v košíku. Atributy: id_s int(10), pocet int(10), id_k int(10) cizí klič košíku, id_zboz int(10) cizí klíč tabulky zboží. Služby - Tato tabulka uchovává názvy a ceny služeb, které zákazník využil u firmy. Skládá se z atributů: id_sluzby int(10), sluzba (text), cena int(10), id_z int(10) cizí klíč tabulky zákazník. Komentáře – Slouží jako tabulka pro zobrazování komentářů pro jednotlivé produkty. Atributy: id_kom int(10), datum (date), popis (text), tema varchar(50), uroven int(10), poradi int(10), predchozi int(10), id_z int(10) je cizí klíč zákazníka, id_zboz int(10) je cizí klíč tabulky zboží.

4.2.1 Databáze Na obrázku je zobrazena konkrétní databáze datového modelu.

Obr. 3: Databáze Zdroj: Vlastní zpracování

21

5 Původní design Pro firmu PC Servis byl původně vytvořen design, který je vidět na obrázku č. 4.

Obr. 4: Beta design stránek Zdroj: Vlastní zpracování

Původní design webových stránek nebyl pro majitele dostačující. Bylo zde použito mnoho přechodů barev, což působilo rušivě a stránky tak byly nepřehledné. Po obsahové stránce již nevyhovovaly nabídce zboží a služeb firmy. Navíc tento design obsahoval mnoho kaskádových stylů, které nepodporovalo více internetových prohlížečů, hlavně Internet Explorer, a proto bylo nutné zaměřit se na jejich renovaci.

22

6 Návrh nového designu 6.1 Rozložení stránek S ohledem na neustále se rozšiřující nabídku zboží a služeb firmy, jsem zvolil jednoduchý a přehledný návrh stránky, podobně jako mají jiné internetové obchody a servisy.

Obr. 5: Design stránek Zdroj: Vlastní zpracování

V porovnání nové a původní, zkušební verze stránek je viditelný pokrok jak v celkové vizualizaci stránky a jejím designu, tak v lepší přehlednosti nabídky zboží a služeb pro zákazníka. 23

Celá webová stránka se skládá z jednoho velkého kontejneru. Kontejner je dále rozdělen na tři části.

Obr. 6: Kostra webových stránek Zdroj: Vlastní zpracování

Hlavička - Hlavička je rozdělena na tři další kontejnery – menu, logo a přihlášení. V sekci menu jsou odkazy na podstránky, které se zobrazují v obsahu. Dále je zde obrázek loga firmy. Poslední kontejner je přihlášení. Tvoří jej dva odkazy sloužící pro přihlášení a registraci. V tomto kontejneru se ještě zobrazuje počet položek v košíku. Zápatí - Zápatí má pouze dvě části, a to kontakt, kde jsou poskytnuty kontaktní informace firmy, a pracovní doba. Obsah - Hlavní kontejner, který se mění a pokaždé je sestaven z několika dalších kontejnerů. Zobrazuje

se

zde

úvodní

stránka,

služby,

ceník,

kontakt,

o

nás

a

zboží.

Zboží má pododkazy produktů, které se skládají z několika kontejnerů.

24

Pododkaz produkt se dále rozděluje na dvě základní rozdělení - popis zboží a komentáře. Popis zboží se skládá z dvou částí. První část tvoří několik dalších kontejnerů - obrázek, název produktu, odkaz pro přidání produktu do košíku, cena, záruka, skladem, body a jejich hodnoty. Druhá část se skládá z technických parametrů a popisu. Každý produkt má pět popisu na pravé straně a pět popisů na levé straně.

Obr. 7: Kostra produktů stránky Zdroj: Vlastní zpracování

Design celého webu je vyveden v bílém pozadí s černým textem. Tyto barvy jsem se zvolil z toho důvodu, že jsou jasné a přehledné. Zkoušel jsem i kombinace modročerné barvy a zaoblení kontejneru ale tento design nevypadal na pohled dobře a při zobrazení v jiných prohlížečích docházelo k chybnému zobrazení stránky.

25

6.1.1 Javascript Javascript slideshow slouží k automatickému zobrazování obrázků za sebou v určitém intervalu. Slideshow jsem použil, abych oživil stránky, a také obrázky lépe vystihují, čím se firma zabývá. Tento slideshow je volně ke stažení na adrese http://www.htmldrive.net/items/show/324/desSlideshow-Stylish-featured-image-slideshowjQuery-plugin.html.

Obr. 8: Slideshow Zdroj: Vlastní zpracování

Zdrojový kód jsem musel přizpůsobit podle vytvořených webových stránek následovně: 

Nahrál jsem upravené obrázky na server do složky images o rozměrech 608 x 225 pixelů a změnil cestu k obrázku.



Bylo nutné přepsat ukazatele (Oprava a instalace, Záloha dat, Nastavení sítě, Oprava mobilů, Tvorba webů a eshopů, Prodej hardwaru a Výkup hardwaru).



Dále bylo potřeba upravit kód ve složce js/deslideshow.js na řádku 77 a 78 na tento kód Tab. 5: Kód pro velikost ukazatele slideshow 1 2 3 4

g.find(".nav").children("li") .css("height","31px")… .css("line-height","31px")… .css("height","31px")… Zdroj: Vlastní zpracování

26

Výška ukazatele je upravena na 31px, to proto, aby všech pět ukazatelů nepřesahovalo výšku slideshow kontejneru. Toto zmenšení způsobí problém v oblasti zobrazování pozadí v ukazateli. Obrázek pozadí je tedy třeba upravit na velikost ukazatele. 

Poslední krok bylo upravit velikost slideshow kontejneru: Tab. 6: Kód pro přizpůsobení slideshow

1 <script language="javascript" type="text/javascript"> 2 $(function() { 3 $("#desSlideshow").desSlideshow({ 4 autoplay: 'enable', //Povoleni nebo zakázání automatického přehrávání obrázků 5 slideshow_width: '800', //Šířka slideshow kontejneru 6 slideshow_height: '250', //Výška slideshow kontejneru 7 thumbnail_width: '190', //Šířka ukazatele 8 time_Interval: '2000', //Interval v milisekundách 9 directory: 'images/' 10 //Složka, kde se nacházejí obrázky pro zobrazení při načítaní obrázků a pozadí ukazatele 11 }); 12 }); 13 Zdroj: Vlastní zpracování

6.1.2 Google map Google map umožňuje vložit mapu od společnosti Google na vlastní webové stránky a zobrazit tak na mapě adresu firmy.

Obr. 9: Google mapa Zdroj: [9]

27

7 Funkcionalita Celá webová stránka je rozdělena na tři uživatelské účty - anonym, zákazník a prodejce.

7.1 Anonym První část je informační, tuto část budeme nazývat anonymní. Kdokoliv vstoupí na stránku, má možnost prohlížet si jednotlivé odkazy: Domů (Úvodní stránka) – Úvodní stránka tvoří jakousi vizitku firmy PC Servis a stručně poskytuje uživateli potřebné informace. Celé úvodní schéma je obohaceno o slideshow pro rychlou představu, k čemu slouží webová stránka. Služby – V této sekci je zobrazen přehled nabízených služeb. Ceník – Přehled cen služeb, které firma nabízí. Kontakt – Je zde uveden kontakt na majitele firmy a mapa maps.google.cz. O nás – Obsahuje krátké povídání a popis, čím se zabývá majitel firmy. Zboží – Tato stránka podrobně zobrazuje přehled veškerého zboží na skladě. Je zde možnost prohlížet si jednotlivé zboží, u kterého jsou stručně popsány jeho technické parametry. Pokud se anonym rozhodne koupit si nějaké zboží, vloží jej do košíku a potom si ho objedná přes objednací formulář. Následně mu na zadaný mail přijde potvrzení objednávky, a je-li zvolena platba přes účet, budou mu zaslány údaje potřebné k platbě.

7.2 Zákazník Druhá část je uživatelská, budeme ji dále nazývat jako část „zákazník“. Zákazník má všechny možnosti jako anonym, ale navíc disponuje přehledem o veškerém objednaném zboží a využitých službách, za které dostává plusové body. Aby se anonym stal zákazníkem, je třeba se na stránkách registrovat. K tomu slouží odkaz v pravém horním rohu registrovat/přihlásit. Při klepnutí na tento odkaz se zobrazí nová stránka s formulářem pro vyplnění. Login, jméno, příjmení, ulice, obec a heslo jsou kontrolovány na tyto funkce:

28

a) regulární výrazy Tab. 7: Kód pro test regulárních výrazu 1 function testRegVyraz($slovo){ 2 if (!eregi("[_a-zA-Z0-9\.\-]$", $slovo) ){ # kontrola slova regulárním výrazem 3 $message = "Neplatné znaky $slovo"; 4 return $message; 5 } 6 else{ 7 return false; 8 } 9 } Zdroj: Vlastní zpracování

b) na délku řetězce Tab. 8: Kód pro test délku řetězce 1 function testSlova($slovo,$delka){ 2 if (!(strlen($slovo)<=$delka) ){ # kontrola délky slova 3 $message = "Délka slova je větší jak $delka znaků"; 4 return $message; 5 } 6 else{ 7 return false; 8 } 9 } Zdroj: Vlastní zpracování

Požadovaný email je testován na regulární výrazy, a to tak, aby obsahoval tvar [email protected] Tab. 9: Kód pro test regulárních výrazu (email) 1 function testRegVyrazEmail($slovo){ 2 if (!eregi("^[_a-zA-Z0-9\.\-]+@[_a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,4}$", $slovo) ){ 3 # kontrola emailu regulárním výrazem 4 $message = "Zadejte platný e-mail."; 5 return $message; 6 } 7 else{ 8 return false; 9 } 10 } Zdroj: Vlastní zpracování

29

Telefonní číslo je taktéž testováno na regulární výrazy a na délku řetězce. Délka řetězce nesmí být delší než 16 znaků - bereme v úvahu i číslo s předvolbou a mezery mezi trojicemi čísel. Telefonní číslo se může skládat z předvolby +xxx, a devíti čísel nebo pouze z čísla bez předvolby, kdy obě varianty mohou i nemusí obsahovat mezery. Nejkratší telefonní číslo tak bude mít tvar např.: 7286xx852 a nejdelší číslo bude obsahovat 16 znaků např.:+420 728 6xx 852. Tab. 10: Kód pro test regulárních výrazu (telefonní číslo) 1 function testRegVyrazTel($tel){ 2 if (!eregi("^[0-9]{3} ?[0-9]{3} ?[0-9]{3}$", $tel) ){ # kontrola čísla regulárním výrazem 3 $message = "Neplatné znaky telefonního čísla."; 4 return $message; 5 } 6 else{ 7 return false; 8 } 9 } Zdroj: Vlastní zpracování

PSČ (poštovní směrovací číslo) je testováno na max. délku 6ti znaků, což je bráno i s mezerou za prvním trojčíslím (např.: 588_56 nebo 58856). Také je testováno na regulární výrazy. Může obsahovat pouze číslice od 1 – 9 a mezeru za prvním trojčíslím. Tab. 11: Kód pro test regulárních výrazu (PSČ) 1 function testRegVyrazPsc($psc){ 2 if (!eregi("^[0-9]{3} ?[0-9]{2}$", $psc) ){ # kontrola čísla regulárním výrazem 3 $message = "Neplatné znaky PSC."; 4 return $message; 5 } 6 else{ 7 return false; 8 } 9 } Zdroj: Vlastní zpracování

Po vyplnění všech údajů a odeslání formuláře jsou všechny řetězce zkontrolovány. Provádí se následná kontrola, zda se zadaný nový login neshoduje s jiným loginem uloženým v databázi. Dále se testuje, jestli se obě zadaná hesla ve formuláři shodují - pokud ano, heslo se pomocí hashovací funkce SHA1 upraví na hash a všechny tyto hodnoty se uloží do databáze.

30

Tab. 12: Kód pro test loginu a zašifrování hesla 1 2 3 4 5

$select = mysql_query("SELECT login FROM zakaznik WHERE login='".addslashes($_POST['login'])."'"); # test, jestli již login není uložen v databázi $_POST['heslo'] = SHA1($_POST['heslo']); # SHA1 zašifruje heslo Zdroj: Vlastní zpracování

Po kontrole všech zadaných údajů je registrace hotová a lze se přihlásit jako zákazník. Přihlášení se provádí pomocí odkazu přihlásit/registrovat. Po kliknutí se zobrazí nová stránka s formulářem pro přihlášení a i celý tento formulář je testován na regulární výrazy a délky řetězců. Je-li vše v pořádku, testuje se, jestli se login a heslo shodují s databází. Jsou dvě možnosti jak testovat heslo. Buď vzít odeslané heslo a pomocí hashovací funkce jej upravit na hash a porovnat s databází nebo vzít heslo z databáze a dešifrovat jej pomocí funkce a porovnat jej. Je-li zákazník přihlášen, má veškeré svoje informace uloženy pod svým profilem, na který se dostane pomocí odkazu s názvem loginu, pod kterým působí. Protože je zákazník přihlášen, odkazy přihlásit/registrovat se změní na odhlásit/login. Po kliknutí na odkaz login se načte nová stránka, která je rozdělena do pěti kontejnerů: 1) Profil zákazníka - Zde jsou uvedeny veškeré údaje o zákazníkovi. Tyto údaje lze měnit pomocí odkazu upravit údaje. Po přejití na úpravu jsou údaje zobrazeny ve formuláři, kde se dají editovat. Po editaci jsou opět testovány na nepřípustné znaky a délku řetězce. V tomto kontejneru lze dále nalézt stav bodů za nákup zboží a služeb. 2) Košík - Zobrazuje produkty uložené v košíku. Produkty jsou srovnány do tabulek. Při odhlášení a znovu přihlášení zákazníka zůstávají produkty v košíku, dokud jej zákazník z košíku neodebere pomocí odkazu zrušit.

Je-li v košíku alespoň jeden

produkt, zobrazí se tlačítko pro objednání zboží. V rámci objednání přibude výběr pro způsob platby a zvolení přepravní služby. Tyto výběry jsou ošetřeny na špatnou kombinaci platby s dopravní službou. Po odeslání objednávky je kontrolováno, jestli je vybráno poštovné a zda je požadované zboží na skladě. K ověření, zda je zboží na skladě, slouží tento kód.

31

Tab. 13: Kód pro ověření zda je zboží na skladě 1 if ($_POST['objednat'] && $_SESSION['id_z'] && ($_POST['postovne']<'43') 2 && ($_POST['postovne']>='0') && !($_POST['postovne']=='21')) 3 { 4 $result = mysql_query("SELECT zbozi.id_zboz,skladem,pocet 5 FROM kosik JOIN stav JOIN zbozi WHERE id_z='{$_SESSION['id_z']}' 6 AND stav='0' AND kosik.id_k=stav.id_k AND zbozi.id_zboz=stav.id_zboz 7 order by stav.id_zboz desc"); 8 #test, zda je zboží na skladě 9 $objednat=true; 10 while($Rrek = MySQL_Fetch_Array($result)){ 11 $rozdil=$Rrek[skladem]-$Rrek[pocet]; 12 if ($rozdil<0){ 13 echo '

Zboží nelze objednat. Vybrané zboží není k dispozici.

'; 14 $objednat=false; 15 } 16 } Zdroj: Vlastní zpracování

Je-li vše v pořádku, odešle se požadavek na objednání zboží. 3) Další kontejner slouží k zobrazení služeb, které zákazník využil a kolik za ně zaplatil. 4) Zboží čekající na schválení - Předposlední kontejner slouží k zobrazení zboží, které čeká na zpracování. Zde bude zobrazeno do té doby, dokud prodejce nezpracuje objednávku a zboží nepošle. 5) Objednané zboží - Poslední kontejner eviduje veškerého zboží, které si zákazník koupil nebo objednal. Zboží v košíku, zboží čekající na zpracování a objednané zboží se orientuje podle stavu, který zajišťuje tabulka stav. Je-li stav nulový je zboží v košíku, změní-li se stav na 1, zboží bylo objednáno a čeká na zpracování. Poslední stav, kdy se změní na 2, znamená, že zboží je odesláno zákazníkovi. Objednané zboží a využité služby se sčítají a pomocí procent se z konečné částky vypočítají body, které se připisují zákazníkovi.

32

7.2.1 Košík Jak funguje košík? Košík najdeme vedle odkazu na profil nebo vedle registrace. V tomto kontejneru se skrývá mnoho funkcí pro počítání stavu zboží v košíku. Záleží však na tom, jestli je uživatel přihlášen jako zákazník nebo je zde jako anonym. 

Anonym – Pokud si bude zákazník objednávat zboží, po přidání zboží do košíku se nejprve provede kontrola, jestli je přihlášen nebo působí jako anonym. Tab. 14: Kód pro přidání zboží do košíku 1 if (!$_SESSION['id_z'] && // pokud jste přihlášen 2 !$resultt = mysql_num_rows(mysql_query("SELECT id_k FROM kosik WHERE 3 id_k='{$_SESSION['id_anonym']}' and stav='0' "))) 4 // hledá se, jestli je zboží v košíku, id košíku se shoduje s id anonymem. 5 Pokud ne, v košíku není žádné zboží od anonyma 6 { 7 $vysledek = mysql_query("INSERT INTO kosik VALUES ('','0','0','','0') "); 8 // vytvoří se nový košík pro anonyma 9 $result = mysql_fetch_array(mysql_query("SELECT id_k FROM kosik 10 WHERE stav='0' AND id_z='0' order by id_k desc ")); 11 $_SESSION['id_anonym'] = $result[id_k]; //id košíku se přidělí id anonyma 12 } Zdroj: Vlastní zpracování

33

Když je košík vytvořen a uživateli anonymu je přidáno id košíku, provedou se další příkazy, které spočítají stav v košíku. Tab. 15: Kód pro zjištění stavu košíku 1 $Rrek = MySQL_Fetch_Array($result); 2 //zjištění počtu zboží pro zákazníka nebo anonyma z id košíku 3 $suma = MySQL_Fetch_Array(mysql_query("SELECT pocet FROM stav 4 WHERE id_k='".$Rrek[id_k]."' AND id_zboz='".$_GET['id_kosik']."' ")); 5 $suma= $suma[pocet]+1; 6 //pokud je zboží v košíku, zvětší se stav košíku o jeden 7 $vysledek = mysql_query("UPDATE stav SET pocet='".$suma."' 8 WHERE id_k='".$Rrek[id_k]."' AND id_zboz='".$_GET['id_kosik']."' "); 9 $vysledek = mysql_num_rows(mysql_query("SELECT * FROM stav 10 WHERE id_k='".$Rrek[id_k]."' AND id_zboz='".$_GET['id_kosik']."' ")); 11 if (!$vysledek) 12 { 13 if ($_SESSION['id_anonym']) 14 { 15 $vysledek = mysql_query("INSERT INTO stav VALUES ('','1','{$_SESSION['id_anonym']}', 16 '{$_GET['id_kosik']}') "); 17 } 18 else 19 { 20 $vysledek = mysql_query("INSERT INTO stav VALUES ('','1','{$Rrek[id_k]}', 21 '{$_GET['id_kosik']}') "); 22 } 23 }//test, jestli je zboží v košíku, jestli ne přidá se do košíku Zdroj: Vlastní zpracování

Pokud je vše v pořádku, nastupují další příkazy, které aktualizují celkový stav v košíku. Tento stav se zobrazuje vedle odkazu na košík (viz. Tab. 16).

34

Tab. 16: Kód pro aktualizaci stavu košíku 1 if($_SESSION['id_anonym'] || $_SESSION['id_z']) 2 // test, jestli jste přihlášen jako anonym nebo zákazník 3 { 4 if ($_SESSION['id_z']) 5 { 6 $sql = mysql_fetch_array(mysql_query("SELECT SUM(pocet) FROM stav 7 JOIN kosik WHERE id_z='{$_SESSION['id_z']}' AND stav='0' AND 8 kosik.id_k=stav.id_k ")); 9 $_SESSION['stav'] = $sql['SUM(pocet)']; 10 } 11 else if ($_SESSION['id_anonym']) 12 { 13 $sql = mysql_fetch_array(mysql_query("SELECT SUM(pocet) FROM stav 14 JOIN kosik WHERE kosik.id_k='{$_SESSION['id_anonym']}' AND stav='0' AND 15 kosik.id_k=stav.id_k ")); 16 $_SESSION['stav'] = $sql['SUM(pocet)']; 17 } 18 //aktualizace stavu 19 if (!$_SESSION['stav']) 20 { 21 if (!$_SESSION['id_anonym']) 22 { 23 $vysledek = mysql_query("DELETE FROM kosik 24 WHERE id_k='{$_SESSION['id_anonym']}' "); 25 }else if ($_SESSION['id_z']) 26 { 27 $vysledek = mysql_query("DELETE FROM kosik where id_k='{$_SESSION['id_z']} "); 28 } 29 } 30 if ($_SESSION['id_anonym']) 31 { 32 echo 'Anonym '.$_SESSION['id_anonym']; 33 // vypíše se anonym a číslo anonymu (číslo košíku) 34 } 35 } Zdroj: Vlastní zpracování



Zákazník – Je-li uživatel přihlášen jako zákazník, jsou všechny příkazy podobné jako u anonymního uživatele, pouze s tím rozdílem, že zboží v košíku zůstává i po odhlášení a následném přihlášení. Zjišťování stavu v košíku je stejné jako u anonyma. Košík se přiděluje zákazníkovi, ne naopak, jak tomu bylo u anonyma.

35

7.3 Prodejce Poslední rozdělení uživatelské části se nazývá administrace, budeme ji říkat prodejce. Veškeré přidávaní, upravování a mazání zboží, přidávaní novinek, služeb a potvrzování objednávek jsou úkoly, které provádí sám prodejce. Jedná se o část, která je jak přihlášeným tak anonymním uživatelům skrytá. Přidání zboží – Nejprve si prodejce vybere kategorii zboží, které chce zboží přidat. Podle toho, jakou kategorii si vybere, zobrazí se příslušný formulář. Například vybereme kategorii notebook. Zobrazí se nový formulář z kategorie notebook, kde prodejce vyplní údaje o zboží - název, skladem (počet kusu na skladě), cena, kategorie (tato položka je již automaticky doplněna), image1 (slouží pro vybrání obrázku pro dané zboží), popis zboží (procesor, operační paměť, pevný disk, grafická karta, základní deska, display, rozhraní a ostatní). Po vyplnění všech těchto hodnot můžeme formulář odeslat. Po odeslání se formulář testuje na regulární výrazy. Pokud je vše v pořádku, je přidané zboží okamžitě vystaveno. Stav objednávek – Tento odkaz slouží k zjištění stavu objednávek. Celá část je rozdělena na tři kontejnery. První kontejner zobrazuje objednané zboží, které je třeba zpracovat a odeslat zákazníkovi. Při odeslání zboží se změní stav na číslo 2. Druhý kontejner slouží k zobrazování již koupeného zboží. Poslední kontejner zobrazuje služby, které zákazník využil. Přidat akci – Formulář k přidání se skládá z popisu akce, data (od kdy do kdy bude akce platit) a za jakou cenu se bude zboží nabízet. Započítat služby zákazníkovi – Tato položka slouží k přidání služby zákazníkovi. Je složena z popisu služby, ceny a id zákazníka. Přidat ceník nebo službu – Formulář sloužící k přidání nového ceníku nebo nově poskytované služby. Formulář je složen z názvu a ceny. Po úpravě nebo smazání služby je nutné přejít na odkaz ceník, kde se údaje souběžně upraví.

36

7.4 Hledání zboží Vyhledávat zboží může provádět anonym, zákazník i prodejce. Po kliknutí na odkaz Hledat se rozbalí možnost hledání. Možnosti, jak najít požadované zboží pomocí zadání: 

názvu zboží



kategorie



ceny od - do



nebo podle záruky

Hledání se dá různě kombinovat. Kategorie a název se automaticky vyhledají, i když je zadána pouze část názvu zboží. Tab. 17: Kód pro vyhledávání zboží 1 if ($_POST['hledat']=='ok'){ 2 $query = "SELECT * FROM zbozi WHERE nazev like'%{$_POST['nazev']}%' 3 AND skladem>'0'"; 4 if($_POST['kategorie']){ 5 $query.="AND kategorie like'%{$_POST['kategorie']}%'"; 6 } 7 if($_POST['od']){ 8 $query.="AND cena>='{$_POST['od']}'"; 9 } 10 if($_POST['do']){ 11 $query.="AND cena<='{$_POST['do']}'"; 12 } 13 $result = mysql_query($query); 14 $pocet= mysql_num_rows($result); 15 }else { 16 $result = mysql_query("SELECT * FROM zbozi WHERE skladem>'0'"); 17 $pocet= mysql_num_rows($result); 18 } Zdroj: Vlastní zpracování

Pokud do vyhledávače není nic zadáno, zobrazí se veškeré nabízené zboží. Funkce hledání nalezne pouze zboží, které je skladem.

37

7.5 Komentáře Další možnost, kterou má prodejce a registrovaný zákazník, je přidávat komentáře ke zboží. Uvažoval jsem o způsobech, jak komentáře použít. První možnost byla vytvářet komentáře za sebou tak, jak jsou vloženy. Tento způsob byl ale nepraktický a nepřehledný. Proto jsem zvolil jiný způsob, a to takový, že princip přidávání komentářů funguje na návaznosti na předchozí komentář. Každý komentář je složen z určitého kontejneru. Kontejnery se automaticky zvětšují, pokud je vložen další komentář. Komentuje-li se pouze produkt, úroveň komentářů se nezvětšuje. Pokud ale nekomentujeme produkt, ale vyjadřujeme se k předchozímu komentáři, zvětšuje se velikost o úroveň. Proto, aby komentáře fungovaly a správně se zobrazovaly, je zapotřebí těchto hodnot: 

Úroveň – Udává, v jaké úrovni se komentář nachází.



Pořadí – Toto číslo udává, kolikátý je komentář v pořadí.



Předchozí – Tento atribut tvoří nejdůležitější hodnotu, kterou udává předchozí komentář. Kdyby v atributu „předchozí“ nebyla žádná hodnota, komentáře by se sice řadili do správné úrovně a do správného pořadí, ale mohlo by se stát, že budou tyto komentáře zobrazeny u jiných komentářů, se kterým logicky vůbec nesouvisí.

Další faktory, udávající zobrazení komentáře: 

Téma – Třídí témata do skupin. Každé téma má jiné komentáře.



ID_z – Id zákazníka je důležité pro zobrazení jména uživatele, který komentář píše.



ID_zbozi – Toto id je potřeba pro třídění komentářů podle zboží.

38

Pro zobrazení komentářů jsou použity rekurzivní funkce: Tab. 18: Kód pro výpis komentářů 1 function serad($tema, $id_zbozi, $predchozi) 2 { 3 if (!$predchozi) 4 { 5 $result=mysql_query("SELECT * FROM komentare WHERE tema='$tema' 6 AND id_zboz='$id_zbozi' ORDER BY id_kom decs "); 7 $Rrek=MySQL_Fetch_Array($result); 8 $predchozi=$Rrek[id_kom]; 9 } 10 $result=mysql_query("SELECT * FROM komentare JOIN zakaznik 11 WHERE predchozi='$predchozi' AND zakaznik.id_z=komentare.id_z 12 AND tema='$tema' AND id_zboz='$id_zbozi' ORDER BY poradi ASC "); 13 while ($Rrek=MySQL_Fetch_Array($result)) 14 { 15 echo ''; 29 } Zdroj: Vlastní zpracování

39

8 Testování Poslední kontrolní fází při vytváření webových stránek je část testování.

8.1 Postup testování a výsledky Při vytváření webových stránek byla každá funkcionalita otestována zvlášť na serveru. Po následném ucelení pak byly všechny funkce opětovně testovány dohromady. Regulární výrazy byly otestovány na jednotlivých řetězcích. Po úspěšném testu byly dále sloučeny a testovány na formulářích pro registraci, přihlašování, vkládání komentářů apod. Po vytvoření celé webové stránky bylo také vyzkoušeno, zda se stránky správně zobrazují i v nejvíce využívaných prohlížečích jako je Google Chrome, Internet Explorer, Opera a Mozilla Firefox. Test ukázal, že se sice vytvořené stránky zobrazují v různých prohlížečích v barvově lehce odlišném odstínu, což ale nemá razantní vliv na změnu designu stránky. Velikost zobrazovací plochy byla zvolena v rozlišení 800px na šířku a výška je automaticky zvětšována dle obsahu stránky. Zvolená šířka stránky je na dnešní dobu minimální. Při tvorbě webových stránek se vychází z rozlišení většího než 800px.

8.2 Odstranění chyb Při testování funkčnosti stránek bylo odhaleno několik chyb, které byly postupně opraveny. Jednalo se o následující chyby: 

Při zobrazení vytvořené webové stránky v prohlížeči Internet Explorer se nezobrazují některé prvky kaskádových stylů – hlavně barevná schémata a přechody odstínů barev. Dále se u určitých odkazů nabízí jiné zobrazení, které ale nemá vliv na jeho funkčnost. Bohužel tento problém nelze odstranit. Musel by se změnit celý design stránek.



Pokud bylo přidáno další zboží do košíku, počet položek v košíku se nezvětšil. Počet zboží v košíku se zvýšil až při následné aktualizaci stránky. Problém způsobovaly chybně uspořádané funkce, které pro správné zobrazování stavu košíku stačilo znovu správně uspořádat.



Další problém košíku se týkal možnosti objednání více zboží, než které bylo k dispozici na skladě. K vyřešení tohoto problému byla vytvořena funkce k porovnání 40

stavu zboží v košíku a skutečného stavu na skladě. Pokud si bude chtít zákazník objednat více zboží, než je možné, zobrazí se mu hlášení „zboží není k dispozici“. 

Byly zjištěny chybně zapsané regulární výrazy. Pro testování regulárních výrazů byla vytvořena nová stránka, kde mohly být výrazy odzkoušeny na jednotlivých řetězcích.



Docházelo k chybnému zobrazení pořadí reakcí na komentáře. Tento problém byl vyřešen vytvořením rekurzivního výpisu.

41

9 Závěr Cílem bakalářské práce bylo vytvořit webovou stránku s informačním systémem pro vznikající firmu PC Servis, v rámci které bude mít majitel možnost prezentovat svoji firmu na internetu a poskytovat informace o nabízených produktech a službách. Díky vytvořenému objednávkovému systému bude moci prodávat své zboží a obchodovat se svými zákazníky. V souvislosti s objednávkovým systém, byly webové stránky uživatelsky rozděleny do třech částí. Každá část má přidělena určitá práva a k těmto právům se váží určité funkce. První část je informační, kdy smí neregistrovaný uživatel pouze prohlížet obsah stránek popř. objednávat zboží bez registrace. Cílem druhé části bylo vytvořit registraci pro uživatele a umožnit mu tak využívat určitých výhod. Poslední část je věnována prodejci a veškeré jeho administraci stránek. Všechny zadané požadavky na vytvoření stránek byly splněny. Nad rámec požadavků byly přidány i některé praktické funkce navíc. Jednou z funkcí, které byly přidány, je větvení komentářů, díky které na sebe komentáře postupně navazují.

9.1 Problémy a jejich řešení Při vytváření webových stránek se vyskytly problémy, které byly lehce i hůře odstranitelné. Jeden ze závažnějších důvodů, který se ale nepovedlo odstranit, bylo zobrazování designu stránky v prohlížeči Internet Explorer dle jeho verze. Tento prohlížeč bohužel nepodporuje všechny kaskádové styly, které byly při tvorbě užity, a proto zde dochází při načtení stránky k určitým designovým chybám. Problém lze odstranit využitím jiných kaskádových stylů, které daný prohlížeč podporuje, ovšem ty se míjely se zadanými požadavky na vzhled vytvořené stránky. Méně závažným problémem pak bylo zobrazování komentářů u zboží, které se nezobrazovaly ve správném pořadí a správné úrovni tak, aby na sebe logicky navazovaly. Tento problém byl vyřešen po delší době testování, a to přidáním funkce rekurzivního výpisu. Mezi nezávažné problémy, které se vyskytly, avšak ihned po prvním otestování byly odstraněny, patřilo například chybné zobrazení objednávek, vypisování duplicit v tabulkách, chybně zapsané regulární výrazy a jiné.

42

9.2 Budoucnost Vytvořené webové stránky by se měly dále rozšířit o novou stránku, kde bude registrovanému uživateli zobrazen přehled bodů a možnosti, jak je využít. Jelikož majitel firmy nemá zatím stanoveno, jak konkrétně budou slevy využívány, je tato část předmětem další spolupráce. Celý web lze dále rozšířit i o další kategorie zboží, například o mobilní telefony, sítě a podobně. Největším přínosem pro firmu by do budoucna byla funkce stahování informací o jednotlivých produktech a jejich následnému zobrazení na stránkách firmy. Prodejce tak nebude muset ručně zadávat jednotlivé technické informace k určitému zboží, ale všechny tyto parametry budou automaticky vyplněny. Majiteli firmy bylo dále doporučeno rozšířit své internetové stránky o online chat, který by umožňoval rychlejší komunikaci a okamžitý kontakt prodejce se zákazníkem. V současné době je nutné přizpůsobit zobrazení webových stránek nejen rozlišení počítačů a notebooků, ale nyní již také mobilních telefonů a tabletů, a to z důvodu neustálého vývoje techniky a rozšiřování dostupnosti internetového připojení do nových technických produktů. V rámci případných požadavků majitele tak bude možnost vytvořené stránky automaticky přizpůsobit potřebnému rozlišení dle současné užívané techniky.

Dnešní doba je dobou nepřeberných možností a fungování společností na internetu se již stalo naprostou samozřejmostí. Kvalitně vytvořené webové stránky umožní každému představit svou firmu na celosvětové síti internetu. Díky vytvořeným webovým stránkám bude mít malá, vznikající firma možnost prezentovat se novým způsobem a otevřou se jí pomyslné dveře do virtuálního světa. Firmě tak bude umožněno působit nejen ve svém blízkém okolí, ale má možnost oslovit i širší veřejnost. Celé webové stránky pro firmu PC Servis byly vytvořeny v souladu s požadavky majitele s ohledem na jejich funkčnost, praktičnost a design. Z výše uvedeného vysvětlení tak soudím, že byl praktický přínos práce splněn.

43

Seznam použité literatury [1] HTML. Artic Studio Webdesign - tvorba internetových stránek [online]. 2011 [cit. 201305-09]. Dostupné z: http://www.artic-studio.net/slovnicek-pojmu/jazyk-html/ [2] CSS. Kaskádové styly – Wikipedie [online]. 2013 [cit. 2013-05-09]. Dostupné z: http://cs.wikipedia.org/wiki/Kask%C3%A1dov%C3%A9_styly [3] JavaScript. JavaScript – Wikipedie [online]. 2013 [cit. 2013-05-09]. Dostupné z: http://cs.wikipedia.org/wiki/JavaScript [4] MySQL. Artic Studio Webdesign - tvorba internetových stránek [online]. 2011 [cit. 201305-09]. Dostupné z: http://www.artic-studio.net/slovnicek-pojmu/databaze-mysql/ [5] PhpMyAdmin. Artic Studio Webdesign - tvorba internetových stránek [online]. 2011 [cit. 2013-05-09]. Dostupné z: http://www.artic-studio.net/slovnicek-pojmu/databaze-mysql/ [6] PHP. Artic Studio Webdesign - tvorba internetových stránek [online]. 2011 [cit. 2013-0509]. Dostupné z: http://www.artic-studio.net/slovnicek-pojmu/skriptovaci-jazyk-php/ [7] Regulární výrazy. Regulární výrazy - Regexp | tutoriály, testery | PHP, Perl, Javascript, .NET [online]. 2008 [cit. 2013-05-09]. Dostupné z: http://www.regularnivyrazy.info/ [8]

Základy regulárních výrazů. [online]. 2008 [cit. 2013-05-09]. Dostupné z:

http://www.regularnivyrazy.info/regularni-vyrazy-zaklady.html#.UX-NHxzJStY [9]

Mapa. Mapy

Google [online].

2013

[cit.

2013-05-09].

Dostupné

z:

2013-05-09].

Dostupné

z:

http://maps.google.cz/maps?hl=cs&tab=wl [10]

PSPad

editor.

[online].

2013

[cit.

http://www.stahuj.centrum.cz/vyvojove_nastroje/wwwtvorba/ostatni_editory/pspad/?g[hledano]=PSPad&g[oz]=4.5.7+&g[up]=Build+2449 [11]

SmartDraw.

[online].

2012

[cit.

2013-05-09].

Dostupné

z:

http://www.stahuj.centrum.cz/podnikani_a_domacnost/kancelarske_aplikace/ostatni/smartdra w/?g[hledano]=smartDraw%202014&g[oz]=2012 [12]

Adobe

Photoshop.

[online].

2010

[cit.

2013-05-12].

Dostupné

z:

http://www.stahuj.centrum.cz/grafika_a_design/tvorba_grafiky/bitmapove_editory/adobephotoshop/?g[hledano]=adobe%20photoshop&g[oz]=12.0&g[up]=CS5+Extended 44

Seznam obrázků Obr. 1: Datový model ............................................................................................................... 12 Obr. 2: ER-model ..................................................................................................................... 19 Obr. 3: Databáze ....................................................................................................................... 21 Obr. 4: Beta design stránek ...................................................................................................... 22 Obr. 5: Design stránek .............................................................................................................. 23 Obr. 6: Kostra webových stránek ............................................................................................. 24 Obr. 7: Kostra produktů stránky ............................................................................................... 25 Obr. 8: Slideshow ..................................................................................................................... 26 Obr. 9: Google mapa ................................................................................................................ 27

Seznam tabulek Tab. 1: Regulární výrazy - metaznaky ..................................................................................... 15 Tab. 2: Regulární výrazy - kvantifikátory ................................................................................ 16 Tab. 3: Regulární výrazy - předdefinovaná skupina znaků ...................................................... 16 Tab. 4: Regulární výrazy - hranice znaků ................................................................................ 16 Tab. 5: Kód pro velikost ukazatele slideshow .......................................................................... 26 Tab. 6: Kód pro přizpůsobení slideshow .................................................................................. 27 Tab. 7: Kód pro test regulárních výrazu ................................................................................... 29 Tab. 8: Kód pro test délku řetězce ............................................................................................ 29 Tab. 9: Kód pro test regulárních výrazu (email) ...................................................................... 29 Tab. 10: Kód pro test regulárních výrazu (telefonní číslo) ...................................................... 30 Tab. 11: Kód pro test regulárních výrazu (PSČ) ...................................................................... 30 Tab. 12: Kód pro test loginu a zašifrování hesla ...................................................................... 31 Tab. 13: Kód pro ověření zda je zboží na skladě ..................................................................... 32 Tab. 14: Kód pro přidání zboží do košíku ................................................................................ 33 Tab. 15: Kód pro zjištění stavu košíku ..................................................................................... 34 Tab. 16: Kód pro aktualizaci stavu košíku ............................................................................... 35 Tab. 17: Kód pro vyhledávání zboží ........................................................................................ 37 Tab. 18: Kód pro výpis komentářů........................................................................................... 39

45

Seznam použitých zkratek PHP - Personal Home Page PC - Personal computer MySQ - My Structured Query Language SQL - Structured Query Language XHTML - extensible hypertext markup language CSS -Cascading Style Sheets IT - Informační Technologie LCD - Liquid Crystal Display XML - eXtensible Markup Language PDF - Portable Document Format

46