České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačů
Bakalářská práce
Využití VRML v prostředí internetového obchodu Jarčík Jan
Vedoucí práce: Prof. Ing. Žára Jiří, CSc.
Studijní program: Softwarové technologie a management, prezenční
Obor: Web a multimédia
20. května 2010
Poděkování Tímto bych rád poděkoval panu Prof. Ing. Jiřímu Žárovi, CSc. za jeho cenné rady při řešení bakalářské práce a dále mému bratru Martinu Jarčíkovi za pomoc s grafikou.
Prohlášení Prohlašuji, že jsem práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu §60 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ů (autorský zákon). V Praze dne 20. 5. 2010
...............................
Abstract The text focuses on the design and implementation of e-commerce web application with the presentation of products using 3D models. It deals primarily with the technology VRML and the possibility of combining 3D models of products as part s that together form a whole. In addition to the presentation the administration interface for content management Internet commerce is included Central tool for implementation is the programming language PHP.
Abstrakt Text se zaměřuje na návrh a implementaci webové aplikace internetového obchodu s možností prezentace produktů pomocí modelů ve 3D. Zaobírá se především technologií VRML a možnostmi kombinovat 3D modely produktů jako součástí, které společně tvoří jeden celek. Kromě prezentace je součástí aplikace administrační rozhraní pro správu obsahu internetového obchodu. Ústředním nástrojem pro realizaci je programovací jazyk PHP.
Obsah 1 Úvod .......................................................................................................................................1
2 Popis problému, specifikace cíle ............................................................................................2 2.1.
Určení cíle bakalářské práce.......................................................................................2
2.2.
Co je to internetový obchod........................................................................................3
2.3.
Charakteristika internetového obchodu ......................................................................3
2.4.
Prezentace produktů ...................................................................................................4
2.5.
Technologie pro prezentace produktů na internetu ....................................................5
2.5.1.
Zobrazení pomocí sady fotografií...........................................................................5
2.5.2.
Zobrazení pomocí technologie Java Applet ...........................................................6
2.5.3.
Zobrazení pomocí Flash .........................................................................................7
2.5.4.
Zobrazení pomocí VRML ......................................................................................8
2.5.5.
Zobrazení pomocí Adobe Shockwave ....................................................................9
2.5.6.
Zobrazení pomocí Autodesk FBX a QuickTime 7 ...............................................10
2.5.7.
Přehled technologií pro zobrazení produktů ve 3D ..............................................11
3 Analýza a návrh řešení .........................................................................................................13 3.1.
Dostupné technologie ...............................................................................................13
3.2.
Návrh využití technologie VRML............................................................................15
3.3.
Přínos technologie VRML........................................................................................16
3.4.
Návrh realizace 3D scény pomocí PHP....................................................................16
3.5.
Uživatelské role ........................................................................................................17
3.6.
Hardwarové a softwarové prostředky.......................................................................18
4 Realizace...............................................................................................................................19 4.1.
Struktura aplikace .....................................................................................................19
4.1.1.
Architektura MVC ................................................................................................20
4.1.2.
Využití MVC ve webové aplikaci ........................................................................20
4.2.
HTTP, Cookies a Session .........................................................................................21
4.3.
Relační model a databáze .........................................................................................22
4.4.
Model URL...............................................................................................................24
4.5.
Formování a skládání 3D modelů.............................................................................27
4.6.
Administrace.............................................................................................................33
4.6.1.
Úvodní stránka administrace ................................................................................33
4.6.2.
Správa produktů....................................................................................................33
4.6.3.
Správa kategorií ....................................................................................................34
4.6.4.
Správa výrobců .....................................................................................................34
4.6.5.
Správa uživatelů ...................................................................................................34
4.6.6.
Správa objednávek................................................................................................35
4.6.7.
Správa obsahu.......................................................................................................35
4.6.8.
Nastavení aplikace ................................................................................................35
4.6.9.
Správa verzí internetového obchodu ....................................................................36
4.7.
Instalace aplikace......................................................................................................36
5 Testování ..............................................................................................................................37 5.1.
Popis persóny Alice ..................................................................................................37
5.2.
Způsob testování.......................................................................................................37
5.3.
Výsledky testování ...................................................................................................38
6 Závěr .....................................................................................................................................39
Literatura ..................................................................................................................................40 A Seznam použitých zkratek ...................................................................................................41 B Uživatelská a instalační příručka .........................................................................................42 C Obsah přiloženého CD .........................................................................................................54
Seznam obrázků Obrázek 1 - Ukázka použití skládání fotografií .........................................................................5 Obrázek 2 - Ukázka využití Java Appletu, stránky Prince ........................................................6 Obrázek 3 - Ukázka využití Java Appletu, stránky pbasic ........................................................6 Obrázek 4 - Ukázka využití Flash společností Nokia ................................................................7 Obrázek 5 - Ukázka využití Flash na 3dsom.com .....................................................................7 Obrázek 6 - Ukázka modelu v jazyce VRML ............................................................................8 Obrázek 7 - Ukázka využití Adobe Shockwave. ........................................................................9 Obrázek 8 - Ukázka zobrazení 3D modelu přímo pomocí přehrávače QuickTime ................10 Obrázek 9 - Relační model aplikace.........................................................................................23 Obrázek 10 - Tří hlavní třídy pro správu WRL modelů ...........................................................29 Obrázek 11 - Proces rozhodování o sloučení modelů ..............................................................31 Obrázek 12 - Proces sloučení dvou modelů .............................................................................32 Obrázek 13 - Instalace E-shopu................................................................................................36 Obrázek 14 - Domovská stránka aplikace ................................................................................42 Obrázek 15 - Stránka jednoho produktu...................................................................................43 Obrázek 16 - Stránka košíku ....................................................................................................44 Obrázek 17 - Náhled stránky s fakturou ...................................................................................45 Obrázek 18 - Náhled složeného produktu ve 3D......................................................................45 Obrázek 19 - Domovská stránka administrace ........................................................................46 Obrázek 20 - Správa zboží........................................................................................................46 Obrázek 21 - Úprava produktů, první část ...............................................................................47 Obrázek 22 - Úprava a přidávání kategorií ..............................................................................48 Obrázek 23 - Úprava a editace výrobců ...................................................................................48 Obrázek 24 - Správa objednávek..............................................................................................49 Obrázek 25 - Správa článků a obsahu ......................................................................................49 Obrázek 26 - Editace článků.....................................................................................................50 Obrázek 27 - Nastavení poplatků .............................................................................................50 Obrázek 28 - Správa grafiky a zobrazení stránek.....................................................................51 Obrázek 29 - Správa více verzí e-shopu ...................................................................................52
Seznam tabulek Tabulka 1 - Přehled technologií, u kterých je možné odcizit zdrojový kód .............................11 Tabulka 2 - Přehled technologií, u kterých není možné odcizit zdrojový kód .........................11 Tabulka 3 - Hardwarová konfigurace systému.........................................................................18 Tabulka 4 - Mode_rewrite v aplikaci z pohledu návštěvníka...................................................25 Tabulka 5 - Mode_rewrite v aplikaci z pohledu administrátora...............................................26 Tabulka 6 - Hlavní adresářová struktura ..................................................................................54 Tabulka 7 - Adresářová struktura aplikace...............................................................................55
Kapitola 1
Úvod S příchodem internetu v roce 1987 získala veřejná společnost do rukou nástroj poskytující nové možnosti v odvětví zábavy, učení a mj. také podnikání. Jen malá většina internetových stránek propaguje dnes svůj obsah tak, aniž by očekávala zisk či určitou návratnost. Oblast podnikání v internetu je již dokonce brána jako škála obrovských rozměrů, přičemž v tom nejrozšířenějším z nich jsou internetové obchody neboli e-shopy. První e-shop vznikl 3 roky po vzniku celosvětové globální sítě takové, jak ji známe dnes. Zhruba po deseti letech zaznamenal internet bouřlivý rozvoj v této oblasti. A proto dnes, v době, ve které již nakoupilo přes 94% uživatelů internetu nějaký produkt prostřednictvím webových stránek1, je velmi důležité věnovat internetovým obchodům velkou pozornost.
1
http://computerworld.cz/internet-a-komunikace/vyzkum-googlu-co-a-jak-cesi-nakupuji-na-internetu-276
1
Kapitola 2
Popis problému, specifikace cíle 2.1. Určení cíle bakalářské práce Cílem bakalářské práce je navrhnout a implementovat internetový obchod s podporou prezentace produktů ve 3D. Práce se bude zaměřovat na skládání součástí (tj. menších modelů) vybraných produktů s cílem sestavit jednotný celek, který si bude možné v prostředí aplikace internetového obchodu zakoupit. Aplikace by měla na straně zákazníka nabízet tyto funkce:
a) výběr produktů podle kategorie b) prezentaci samostatných produktů s popisem a vlastním náhledem ve 2D i ve 3D c) možnost sloučit vybrané 3D modely, v případě že je to možné, do jednoho celku d) registrace a přihlášení uživatele e) možnost vkládat produkty do košíku f) sestavení a dokončení objednávky
a na straně administrátora:
g) přidávat, editovat a mazat produkty h) přidávat, editovat a mazat kategorie i) editovat a mazat registrované uživatele j) možnost nastavit uživatele jako administrátora k) možnost přiřadit práva a omezení na určité akce administrátorům l) editovat a mazat objednávky m) přidávat, editovat a mazat články na stránce n) přidávat, editovat a mazat aktuality na stránce o) editovat informace o internetovém obchodu (název společnosti, jméno apod.) p) možnost přizpůsobovat a měnit design stránek přímo v administraci q) přidávat, editovat a mazat poplatky za dopravu
2
Ačkoliv samotná implementace internetového obchodu nepřináší sama o sobě nic nového ani převratného, implementace skládání 3D modelů vybraných produktů je ve své podstatě revoluční záležitostí. Je důležité zohlednit fakt, že standardní nástroje pro tvorbu webové aplikace nejsou pro samotnou práci s 3D grafikou konstruovány, a proto je nutné vyhledat způsob a technologii, která bude skládání produktů na straně serveru umožňovat. Po rekonstrukci současné situace využití 3D modelů v internetových obchodech se tedy zaměřím na grafický formát, který bude vzhledem k dostupným technologiím tvorby webu nejpřijatelnějším řešením, a na jeho základě implementuji cílový internetový obchod.
2.2. Co je to internetový obchod Internetový obchod, neboli e-shop, je počítačový program vytvořený za prostým účelem: nabídnout vystavený produkt, vytvořit objednávku a získat zisk. Stejně jako u klasické kamenné prodejny je jeho hlavním smyslem nalákat co nejvíce zákazníků. Snaha vyniknout a získat klientelu je v obou případech stejná, jedná se o klíčový pojem, ale způsoby, jak může každý z nich tohoto dosáhnout, jsou odlišné. Každý subjekt má svoje mínusy i plusy, především se ale liší hned v několika bodech.
2.3. Charakteristika internetového obchodu Jedna z hlavních velmi podstatných vlastností e-shopu je pořizovací cena. Ve srovnání s náklady za kamennou prodejnu, tj. nájem, elektřina apod. je cena internetového obchodu nesrovnatelně nižší. Zatímco náklady na klasickou prodejnu vyjdou na 5 - 30 tis. měsíčně (v případě míst ve zvýhodněných lokalitách i na 50 – 100 tis.) cena za internetový obchod se pohybuje okolo 10 – 20 tis. jednorázově plus roční poplatek za doménu a hosting ± 1700,- Kč.
Smyslem e-shopu je strategie, kdy si zboží v internetovém obchodě pouze objednáte a prodejce vám ho pošle přepravní službou, čímž se velice sníží náklady na provoz a produkt vám tak může být nabídnut s nižší cenou. Tato klíčová myšlenka dala, mezi jinými, e-shopům život. Internetový prodej se díky ní stává pro zákazníky vedle kamenné prodejny stále atraktivnější. Nevýhodou takovéhoto prodeje je ale fakt, že dokud se o onom e-shopu nedočtete někde z reklamy či přímého odkazu, je pro většinu možných návštěvníků obchod s produkty takřka neviditelný. Je tedy zapotřebí větší marketing, reklama či využití moderních technologií a poznatků SEO (Search Engine Optimalization). E-shop bývá i často brán jako 3
doplněk klasické kamenné prodejny, která slouží zároveň jako místo odběru či sklad. Toto spojení je dnes již celkem běžné.
E-shopy se nejčastěji vytváří v programovacím jazyce PHP, méně častěji pak pomocí jazyku Java nebo ASP. Jedná se o programovací jazyky určené pro vývoj internetových aplikací. Tyto jazyky využívají architekturu klient – server, jsou postaveny na bázi vzájemné komunikace mezi klientským prohlížečem HTML kódu a serverovým překladačem jazyka. Společně s těmito jazyky je dnes velmi silně spjata také databáze, nejčastěji MySQL, ve které jsou ukládány informace o produktech a jejich parametry.
2.4. Prezentace produktů „Zboží má své kouzlo, když je vystavený. I když máte doma to samý, uměj ho vystavit tak, že ho chcete. Když něco chcete, znamená to, že to potřebujete.“ [Citát z filmu Mad Money, USA, 2008,]
Představení produktu zákazníkovi tak aby si myslel že ho chce je často klíčem k úspěšnému prodeji. Co se týče možností jak přesvědčit zákazníka ke koupi produktu, má internetový i klasický trh své již zavedené způsoby a taktiky, avšak zatímco kamenné prodejny se snaží lákat především na obal produktu (dodnes platí, že se prodává hlavně obal, nikoliv obsah), internetový obchod se snaží podtrhnout cenu.
Návštěvník klasické prodejny má, narozdíl od prodejny internetové, možnost si produkt „ohmatat“. Tento fakt mu dává jistotu, že produkt, který právě drží v ruce, je právě to co za své peníze dostane. Návštěvník e-shopu je omezen technickým schopnostmi internetových prohlížečů a počítači vůbec, jeho jistota je tedy u produktu v internetovém obchodě nižší.
I přesto však v moderním internetovém obchodu můžeme zvýšit šance na prodej prostřednictvím využití nových technologií, které dnešní počítače nabízejí. Jednou z takovýchto technologií je například u prodejů knih náhled několika tištěných stran ve formátu Adobe PDF, jiný e-shop poskytuje online chat s pracovníky obchodu kteří mají o produktech vyšší přehled, nebo dokonce umožňuje i zobrazení produktů ve 3D.
4
2.5. Technologie pro prezentace produktů na internetu V současné době je nejsnazší a nejpopulárnější způsob zobrazování produktů pomocí jedné nebo více fotografií z různých stran. Pokud tedy zákazník produkt nezná, může si udělat alespoň hrubou představu o tom, jak produkt vypadá. Ostatní parametry, které nejsou z obrázku patrné, jsou zákazníkovi vypsány u popisu. Tato forma zobrazování produktů je nejjednodušší formou vůbec, a proto se jedná o nejběžnější způsob jak produkt zákazníkovi představit. Existují však i další, pokročilé a mnohdy i uživatelsky přívětivější metody.
2.5.1. Zobrazení pomocí sady fotografií Patrně nejjednodušší způsob jak zrealizovat jednoduché 3D promítání produktů v e-shopu je pomocí sady fotografií. Princip spočívá v tom, že místo vytváření prostorového modelu je vystavěný předmět několikrát nafocen ve stejné rovině z několik stran Nejjednodušší je nafotit předmět kolem jedné vertikální středové osy předmětu, čímž se docílí možnosti prohlédnout si celý produkt kolem dokola ze všech stran. Je však možné použít i nafocení v dalších nakloněných rovinách, čímž můžeme získat další zorné úhly předmětu. Takto vyfocené fotografie jsou poté složeny vedle sebe do jednoho celku a uloženy do jednoho souboru, u kterého se můžeme, například pomocí JavaScript, posouvat po těchto fotografiích (vždy zobrazujeme právě jeden výřez – pohled na předmět ) a tím vzbudit dojem zobrazení 3D. Vzhledem k tomu, že každý nový pohled znamená další fotografii, může být velikost výsledného souboru značně vysoká, respektive velikost souboru je přímo úměrná počtu a kvalitě nových pohledů.
Místo technologie JavaScript se však dnes spíše používá o něco málo méně kompatibilní Java Applet. Takovýto applet se pak načte najednou i s fotografiemi a ten dále dle potřeby vykresluje jednotlivé pohledy v daném pořadí.
Obrázek 1 - Ukázka použití skládání fotografií 2
2
http://www.fhi.co.za/3D/garmin_index.html (20.11.09)
5
Pomocí JavaScriptu dokonce dnes již žádný internetový obchod produkty patrně neprezentuje. Příčinou je zřejmě strach z odcizení fotografií produktů, jejichž pořizovací cena je značně vysoká. Důsledkem toho zde JavaScript nahrazuje Java Applet.
2.5.2. Zobrazení pomocí technologie Java Applet Java Applet je softwarová komponenta běžící v kontextu webového prohlížeče. Její obsah se tvoří pomocí jazyku Java, což umožňuje využít rozšířené knihovny pro práci s grafikou, zvukem nebo i dalším rozšířením na bázi klasických Java aplikací. Díky možnostem využít v Javě technologie DirectX a OpenGL fungují rozsáhlé grafické aplikace dokonce i poměrně rychle. Java Applet využívá pro zobrazení 3D modelů jádro (balíček) Java 3D. Pomocí dalších knihoven můžeme převést model vytvořený v určitém modelovacím nástroji (například 3ds Max) do formátu používající toto jádro a následně tak model v appletu zobrazit. Mimo jiné umožňuje Java Applet také interakci přímo z formulářovými prvky mimo applet. Této vlastnosti se dá hojně využít například pro modifikaci modelu, či jeho barvy.
Obrázek 2 - Ukázka využití Java Appletu, stránky Prince 3 Obrázek 3 - Ukázka využití Java Appletu, stránky pbasic 4
Jedna ze společností s velmi propracovanou aplikací pro Java Applet je americká společnost Prince (obrázek vlevo), která využívá těchto technologií pro prezentaci produktů sportovních potřeb. Preciznost modelů i způsob jejich prezentace jsou napohled na velmi vysoké úrovni. Její aplikace je dobrým příkladem toho, kam až je možné dojít se zobrazením 3D modelů na internetu. Společnost Production Basic (obrázek napravo) využívá také Java Applet pro zobrazení svých produktů, avšak nejenže umožňuje prezentaci ve 3D, ale dokonce i přímo modifikaci 3D modelu dle parametrů ve formuláři a posléze lze upravený 3 4
http://www.princetennis.com/tennis/index.aspx (20.11.09) http://www.pbasics.com/Configurator/c-leg.html (20.11.09)
6
model rovnou zakoupit. Takováto forma modifikace a rozšíření produktů může být velkým přínosem pro společnost, neboť podporuje zákazníky si více hrát s vystavěným produktem a pravděpodobně se tak i zvyšuje šance na zakoupení produktů.
2.5.3. Zobrazení pomocí Flash Adobe Flash je dnes pravděpodobně nejrozšířenější program pro tvorbu interaktivních animací pro web. Program pracuje na bázi vektorové grafiky, což nám umožňuje vytvářet soubory zdrojového kódu s aplikací více kompaktní. Díky této vlastnosti se dnes stal velmi oblíbeným mezi webdesignery i uživateli a jeho možnosti výrazně přispívají při tvorbě internetových aplikací. Flash poskytuje svým tvůrcům hned několik způsobů jak zobrazit 3D předměty na webových stránkách. Jedním z nich je například možnost přímo importovat 3D model, vytvořený pomocí aplikací jako je jako Blender, 3ds Max nebo Autodesk Maya, do editoru Flash a v něm poté s modelem dále pracovat.
Obrázek 4 - Ukázka využití Flash společností Nokia 5 Obrázek 5 - Ukázka využití Flash na 3dsom.com 6
Navzdory možnostem, které nám Flash nabízí, není jeho využití pro zobrazování předmětů ve 3D příliš populární. Prakticky jediný internetový obchod využívající tuto technologii, který se mi podařilo v síti internet najít, je internetový obchod společnosti Nokia (obrázek vlevo). Tato společnost však nevyužívá úplně modely z externích nástrojů, ale pouze skupinu fotografií z několika stran, obdobně jako JavaScript nebo Java Applet. Přesto si můžeme možnosti zobrazení ve 3D pomocí Flash prohlédnout alespoň na stránkách anglické společnosti 3DSOM, která se tvorbou takovýchto modelů pro Flash zabývá (obrázek vpravo).
5 6
http://www.nokiausa.com/find-products/phones/nokia-n900 (20.11.09) http://www.3dsom.com/flash3d/flash-3d-gallery.html (20.11.09)
7
2.5.4. Zobrazení pomocí VRML Zobrazení pomocí VRML neboli Virtual Reality Modeling Language bude hlavním předmětem tohoto projektu. Jazyk VRML je grafický formát určený pro popis trojrozměrné scény v textovém tvaru. Webové prohlížeče umožňuje zobrazení těchto souborů pomocí speciálních VRML prohlížečů, mezi nimi je např. Cortona3D. Virtuální scéna, nebo také celý virtuální svět vymodelovaný v tomto jazyce pak může být representován jako jednoduchý statický model v prostoru či dokonce jako model dynamický s animacemi, zvukem či videi. VRML umožňuje mj. vytvářet i interaktivní scény, kombinovat předměty virtuálního světa, interakci s jazykem JavaScript a mnoho dalších.
Obrázek 6 - Ukázka modelu v jazyce VRML7
Ačkoliv se jedná o jazyk již poměrně zastaralý, je k němu dodnes stále integrována podpora v mnoha profesionálních modelovacích programech, jako je např. Autodesk Maya, 3ds Max, Blender aj., a to i v posledních verzích jejich vývoje. Díky tomu můžeme provést export předmětu vymodelovaném v CADu do textového formátu VRML (soubor .wrl) a poté daný předmět jednoduše nasadit na webové stránky. Jako jednu z nevýhod tohoto jazyka však musíme brát v potaz to, že vymodelovaný předmět v podobě VRML je k dispozici pro každého, kdo si jej stáhne, a může si jej pak libovolně upravovat či předělávat dle vlastních potřeb a neexistuje způsob jak tomu zabránit. Dle vlastního průzkumu webových stránek na internetu jsem došel k závěru,že dnes již neexistuje žádný e-shop (alespoň žádný o kterém bych věděl), který by pro prezentaci svých předmětů využíval možnosti VRML nebo jeho rozšířeného nástupce formát X3D.
7
http://www.ocnus.com/models/Vehicles/bicycle.wrl.gz (20.11.09)
8
2.5.5. Zobrazení pomocí Adobe Shockwave Značně podobným způsobem jako pracuje Adobe Flash se svým webovým přehrávačem Adobe Flash Player, funguje i od stejné firmy obdobně založený Adobe Director s přehrávačem Adobe Shockwave. Obě tato řešení se zrodila v dílně firmy Macromedia, kterou společnost Adobe v roce 2005 odkoupila. Detailní rozdíly Adobe Shockwave player a Flash player jsou k dispozici na oficiálních stránkách, avšak stručně se dá říct, že přehrávač Shockwave je spíše zaměřený pro účelové aplikace, 3D hry apod., zatímco Flash na správu a zobrazení multimediálního obsahu nebo tvorbu pokročilejších webových aplikací v internetu.
Obrázek 7 - Ukázka využití Adobe Shockwave.8
Funkcionalita Flash i Shockwave se však v mnoha případech překrývá. Ve většině případů lze ale dosáhnout stejných nebo podobných výsledků jak pomocí Flash, tak pomocí Shockwave, je ovšem nutno vzít v potaz, že výsledné soubory jsou u Shockwave znatelně větší. Technologii Adobe Shockwave využívá např. společnost Clipsal. Produkty, které nabízí ve 3D, si však přímo na jejích stránkách objednat nelze. Clipsal využívá prezentace ve 3D pouze k demonstraci, zatímco prodej provádí prostřednictvím jiných distributorů.
8
http://www.clipsal.com.au/trade/products/3dmodels/light_switches/31va (20.11.09)
9
2.5.6. Zobrazení pomocí Autodesk FBX a QuickTime 7 Jednou z posledních moderních technologií je spojení formátu FBX od firmy Autodesk s multimediálním přehrávačem QuickTime. Formát FBX (.fbx) je grafický formát, do nějž můžeme přímo vyexportovat 3D model z mnohých modelovacích prostředí (AutoCAD, 3ds Max nebo Blender). V rámci tohoto formátu vyvinula společnost Apple plug-in pro multimediální přehrávač QuickTime 7, čímž umožnila zobrazit libovolné 3D modely přímo v prostředí tohoto přehrávače, který lze umístit na webové stránky obdobně, jako to umožňuje například VRML prohlížeč Cortona3D. Tento revoluční způsob prezentace 3D modelů může mít v budoucnosti velký význam, jeho jedinou nevýhodou je však prozatím snadnost odcizení 3D modelů, které může kdokoliv libovolně upravovat a vystavovat jako vlastní produkt. Patrně snad i proto není dodnes k vidění žádný internetový obchod využívající tyto silné schopnosti kombinace.
Obrázek 8 - Ukázka zobrazení 3D modelu přímo pomocí přehrávače QuickTime 9
9
http://download.autodesk.com/us/fbx/20102/FBX_SDK_Help/index.html (20.11.09)
10
2.5.7. Přehled technologií pro zobrazení produktů ve 3D V následujících dvou tabulkách se pokusím shrnout výše sepsané poznatky. V prvním sloupci najdete název technologie určené pro přehrání prezentace 3D modelu, v druhém naleznete formát souboru, ve třetím potřebný přehrávač. Další sloupec informuje, zda-li je možné (implicitně) používat 3D formáty souborů externích nástrojů a jaké aplikace jsou pro ně standardně podporovány. V posledních sloupcích jsou shrnuty výhody a nevýhody tohoto řešení. V první tabulce najdete technologie, u kterých je možné odcizit výsledný kód z prezentace. U technologií uvedených v tabulce druhé to již možné není.
Princip JavaScript
VRML
FBX + QT
Ext
Přehrávač
Import
js
Webový prohlížeč
Ne
wrl
Cortona3D
3ds Max Blender
QuickTime
3ds Max Blender Maya
fbx
Výhody Dostupnost, jednoduchost, znovupoužitelnost jednou napsaného kódu Vytvořen pro prezentaci 3D modelů na internetu, komprese gz Využití 3D formátu vyexportovaného přímo z modelovacích aplikací
Nevýhody Pouze simulace 3D, pro každý úhel pohledu nová fotografie Výstupem je přímo formát se zdrojovými daty Výstupem je přímo formát se zdrojovými daty
Tabulka 1 - Přehled technologií, u kterých je možné odcizit zdrojový kód
Princip
Ext
Přehrávač
Import
Výhody
Java Applet
Java class
JRE (Java Runtime Environment)
3ds Max (obtížné)
Velký počet dostupných Java knihoven pro práci ve 3D (vč. DirectX a OpenGL)
3ds Max Blender
Podpora web. prohlížečů, vektorová grafika, kompaktní formáty
Náročnost na výkon procesoru
Podpora 3D grafických formátů, kvalitní 3D rendering
Slabá vektorová podpora, míra komprese, není primárně určen pro internet.
Flash
Shockwave
fla swf dcr swf
Flash Player
Shockwave Player
3ds Max Blender
Nevýhody Nesnadný import modelů z CADů, prostředí není primárně určeno pro prezentaci ve 3D
Tabulka 2 - Přehled technologií, u kterých není možné odcizit zdrojový kód
11
Kapitola 3
Analýza a návrh řešení 3.1. Dostupné technologie Aplikace poběží v síťovém prostředí klient – server, na straně klienta budou použity následující technologie:
XHTML (extensible hypertext markup language) je značkovací jazyk pro tvorbu hypertextových dokumentů v prostředí WWW. Původně se předpokládalo, že se stane nástupcem jazyka HTML4, avšak dnešní vývoj nové verze HTML5 tento fakt poněkud zvrátil. Existuje ve třech verzích: Strict, Transitional a Frameset. Pro tvorbu internetového obchodu bude použita verze XHTML Strict, která klade důraz na strukturovaný dokument osvobozený od formátovacích značek souvisejících s rozvržením stránky10. Grafický koncept stránky tak přejde na úkol kaskádovým stylům CSS.
CSS (Cascading Style Sheets) je jazyk vytvořený pro popis formátu a zobrazení webových stránek, jako je HTML, XHTML či XML. Pomocí CSS je možné definovat barvu, velikost, rámeček prvků na stránce aj., čímž nahrazuje původní HTML značky, které k tomu byly určeny ve starších verzí HTML. Hlavní myšlenkou CSS je oddělení informačního obsahu na stránkách od obsahu popisujícího jejich zobrazení.11
JavaScript je multiplatformní objektově orientovaný skriptovací jazyk, který se zpravidla používá pro interaktivní a dynamické chování prvků na webové stránce. Přestože syntaxe je obdobná jazykům C++ a Java, nemá JavaScript s Javou nic společného. V prostředí internetového obchodu se mj. JavaScript používá pro kontrolu formulářových polí či přesměrování na patřičnou stránku po kliknutí na některý HTML element.
Na straně serveru budou dále použity tyto technologie:
10 http://www.w3.org/TR/xhtml1/ (19.5.10) 11 http://www.w3.org/Style/CSS/ (19.5.10)
13
PHP (PHP: Hypertext Preprocessor) je open-source skriptovací jazyk vytvořený před více jak 10 lety Rasmusem Lerdofem. Jedná se o zdaleka nejoblíbenější jazyk pro tvorbu webů a hlavním důvodem jeho úspěchu je jednoduchost používání. Neustále se upgraduje a poslední verze jsou již plně objektově orientované. Díky všem těmto pozitivním vlastnostem jazyka je dnes PHP zařazeno dokonce i mezi zcela běžné a standardní služby nabízejících hostingů. Překládání kódu probíhá na straně serveru a ke klientovi je již posílán pouze výstup aplikace. PHP není závislé na platformě a ve spojení s MySQL dnes tvoří patrně nejčastější kombinaci pro realizaci webových aplikací na internetu. Kromě toho PHP nabízí řadu knihoven pro práci s grafikou, se soubory, e-mail službami a také pro spolupráci s řadou internetových protokolů jako je HTTP, SMTP, IMAP, FTP aj.12.
Kromě jazyka PHP se dnes pro tvorbu webových aplikací používají také další technologie. Jedná se o skriptovací platformu ASP (Active Server Pages) společnosti Microsoft a o JSP (Java Server Page) od společnosti Sun Microsystems. Podpora těchto technologií je v současné situaci vedle PHP na poměrně nízké úrovni. Tyto technologie mají tedy uplatnění spíše pro určité, velké webové aplikace, kde jejich nasazení vykazuje jednoznačný důvod a smysl.
MySQL je relační databázový systém, vytvořený švédskou firmou MySQL AB. Jeho hlavními autory jsou Michael „Monty“ Widenius a David Axmark. MySQL je multiplatformní databáze, komunikace s ní probíhá pomocí jazyka SQL (Structured Query Language). Pro svou snadnou implementovanost, výkon a především díky tomu, že se jedná o volně šířitelný software, má vysoký podíl na databázích používaných v současné době. Na úkor některých zjednodušení (např. při zálohování dat, pohledy (view), aj. ) bylo MySQL od začátku optimalizováno především pro rychlost13.
Další možností mimo MySQL je program PostgreSQL. Jedná se také o relační databázový systém s otevřeným zdrojovým kódem a vynikající pověstí pro svou spolehlivost a bezpečnost. Má za sebou více než patnáct let aktivního vývoje a běží na všech operačních systémech včetně Linuxu. PostgreSQL je šířen pod BSD licencí, která umožňuje neomezené používání modifikací a distribuci PostgreSQL zdarma nebo komerčně.
12 13
PHP – objektově orientované - Peter Lavin (ISBN: 978-80-247-2137-8) 2009, strana 22. Open Source software - Štědroň Bohumír (ISBN: 978-80-247-3047-9), 2009, strana 49
14
VRML (Virtual Reality Model Language) je grafický formát definující způsob zápisu virtuálních světů do souborů v textovém tvaru. Tyto soubory obsahují tzv. uzly, pomocí nichž je možné sestavit množinu 3D objektů virtuálního světa. Základní objekty v takovémto 3D prostoru jsou kvádr, koule, válec a kužel, avšak teprve pomocí komplexnějších uzlů, jako je např. IndexedFaceSet, lze zobrazovat i předměty s velmi detailní strukturou. K objektům virtuálního světa lze připínat mj. i různé interaktivní prvky, zvuky či dokonce světla nebo animace14. Velkou předností tohoto formátu je jeho orientace na webové prostředí. Pro přehrání souborů s virtuální scénou (*.wrl) totiž stačí některý z přehrávačů, jako je třeba Cortona 3D, který se po jeho instalaci přímo integruje do webového prohlížeče.
S využitím podpory jazyka VRML v řadě nejpoužívanějších 3D modelovacích programů (jako je Maya, Blender, 3DStudio MAX aj.), ve kterých lze přímo vyexportovat 3D scénu do souboru virtuální reality, tak získáváme mocný nástroj pro snadnou prezentaci 3D modelů přímo na internetu..
3.2. Návrh využití technologie VRML Pro prezentaci produktů ve 3D si dnes můžeme vybrat z řady technologií, které nám internetové prohlížeče a jejich služby nabízejí. Tento text se zabývá využitím technologie VRML. I přesto, že je zřejmé, že dnes jen stěží nalezneme internetový obchod, který by využíval pro prezentaci svých produktů technologii VRML, má tento jazyk svá uplatnění. Kdybychom nalezli způsob jakým přehrávat VRML modely bezpečně, byla by tato technologie pro prezentaci produktů v internetovém obchodě naprosto ideální. V opačném případě je VRML možné pouze tehdy, pokud nám nevadí možnost odcizení patrně pracně vymodelovaných a nejspíše i draze zaplacených 3D modelů přímo ze stránek.
Pokud přistoupíme na tuto technologii zjistíme, že metodika VRML má svá pestrá a obrovská kouzla a že nám nabízí mnohem více, než si jen umíme představit. Příkladem by mohla být situace, kdybychom vystavovali modely, které by byly natolik originální, že jejich odcizení by nemělo smysl (například truhlářská dílna s vlastními originálními výrobky).
14
J.Žára - Laskavý průvodce virtuálními světy. Computer Press, 2000 / strana 5
15
3.3. Přínos technologie VRML Největší přínos u jazyka VRML najdeme právě tam, kde se VRML od ostatních formátů nejvíc liší. Formát pro uložení jazyka VRML není totiž nic víc než textový soubor a právě toho můžeme hojně využít. Stejně tak jako s každým jiným textovým souborem můžeme i s tímto manipulovat v libovolném editoru, to znamená upravovat jej a poté znova ukládat. Ve vývojovém prostředí webových stránek, kde k dispozici máme hned několik skriptovacích jazyků, jako je PHP nebo Java, můžeme navíc celý tento proces ještě zautomatizovat. Tedy pokud modely, které vytvoříme, budou dodržovat pravidla a potřebné normy, můžeme je jednotlivě skládat do sebe pomocí takového skriptovacího jazyka přímo na straně serveru a to vše řídit podnětem návštěvníka stránek, tedy na straně klienta.
Takovýto způsob interakce s 3D modely by mohl přinést výhody, například pro vytváření představ při nakupování nové kuchyně, kde zákazník vloží do košíku myčku, kuchyňskou linku a ledničku a hned mu bude umožněno si produkty představit vedle sebe. Jiné výhody např. v oblasti IT by mohlo být nakupování počítačových sestav. Zákazník vloží do košíku základní desku, procesor, grafickou a TV kartu a na zjednodušeném grafickém modelu uvidí, zdali komponenty do sebe zapadají či kolik mu ještě zbývá místa na základní desce atd. Přidáním interaktivních prvků a animací bychom mohli docílit dalších schopností celé virtuální scény, které VRML nabízí.
3.4. Návrh realizace 3D scény pomocí PHP Skripty jazyka PHP budou k modelům přistupovat jako k běžnému textovému souboru otevřenému pouze pro čtení. Nejprve se tedy načtou všechny soubory vybraných modelů (.wrl), poté se vytvoří nový soubor jako šablona pro zhotovení scény, do které se budou jednotlivé modely vkládat. V případě skládání submodelů bude zapotřebí využít metainformací, např. pro určení pozice pro jiné submodely. Nejlepší způsob bude každému modelu přiřadit modelové číslo a seznam jiných modelových čísel, se kterými se může daný model vázat.
Například blikátko nebo světlo na kolo bude mít modelové číslo M1, konstrukce M2, pedály M3. Model M2 pak bude mít mezi metainformacemi údaje, že se může vázat k M1, M3, a pro ně také bude mít vyhrazené pozice, kam se dají umístit. Model M1 bude podobný,
16
ale k M3 se už vázat nemůže. Takovýmto způsobem by mohla být výsledná scéna poskládána dohromady a poté uložena jako soubor, který by byl poslán klientovi.
3.5. Uživatelské role Každý návštěvník aplikace se rozděluje na dva typy a to na přihlášeného uživatele a nepřihlášeného uživatele. Nepřihlášený uživatel může číst a prohlížet obsah stránek, prohlížet produkty, vkládat je do košíku a sestavovat objednávku, kterou může dokončit i bez registrace, avšak narozdíl od přihlášeného uživatele nemá přehled o objednávkách vytvořených v minulosti. Tento přehled je dostupný pouze pro přihlášené uživatele kteří jsou na stránkách registrováni.
Pokud je uživatel registrován v aplikaci, je taktéž možné mu nastavit práva administrátora a zároveň jeho pravomoci řídit v administračním rozhraní. Přístup do administrace může být také omezen pouze na přístup pod určitou doménou (verzí internetového obchodu) a tak je možné každému administrátorovi přidružit pouze vybranou část (verzi - doménu) internetového obchodu. Pokud má tedy uživatel práva administrátora je možné mu dovolit / zakázat:
1. Nastavovat práva ostatním uživatelům 2. Přidávat do aplikace další verze (domény) internetového obchodu 3. Nastavovat informace o doméně obchodu (sídlo společnosti, majitel apod.) 4. Editovat a mazat objednávky 5. Editovat a vytvářet produkty do aplikace 6. Editovat a mazat uživatele aplikace
O další práva je možné aplikaci rozšířit bez větších zásahů do kódu aplikace.
17
3.6. Hardwarové a softwarové prostředky Hardwarové prostředky na straně klienta jsou určeny především minimálními hardwarovými požadavky pro zobrazení 3D modelu v prohlížeči VRML souborů (standardně Cortona)[8]. Prostředky pro zobrazování stránek bez podpory zobrazení 3D jsou vzhledem k dnešním poměrům již téměř zanedbatelné. Hardwarové prostředky stroje na straně serveru se liší dle akutní vytíženosti aplikace, přičemž pro max. 50 současně aplikaci využívajících uživatelů je minimální konfigurace doporučena následovně: 15
Hardware Procesor Paměť RAM Pevný disk Software Operační systém
Aplikace
Server Intel Celeron 1Ghz 512 MB 20 GB
Klient Pentium® II 300 Mhz 64 MB Zanedbatelný
Linux nebo Windows
Windows (v případě použití VRML přehrávače Cortona 3D) Internetový prohlížeč s podporou cookies a JavaScriptu, VRML prohlížeč
Apache s povoleným mode_rewrite, PHP 5.0, MySQL,
Tabulka 3 - Hardwarová konfigurace systému
15
Linux, Apache, MySQL a PHP - Eric Rosebrock, Eric Filson, (ISBN: 80-247-1260-1), strana 26-27
18
Kapitola 4
Realizace Pro implementaci aplikace jsem použil kostru internetového obchodu, který jsem vyvíjel již v rámci předmětů z 1. a 2 . ročníku bakalářského studia v předmětech X36WAM a X36TW1. Tento internetový obchod je již navíc nasazen necelé 2 roky v ostrém provozu na http://www.sport-sky.cz, čímž jsem získal zpětnou vazbu od běžných uživatelů i administrátorů pro odlaďování většiny nedostatků. Verze internetového obchodu uvedeného v této práci se liší v části zdrojového kódu, který je převeden do objektově orientované formy, a v části HTML kódu který je převeden do standardu XHTML.
Jedna z nových funkcí tohoto internetového obchodu je možnost verzování kompletního obsahu stránek. Ve své podstatě to znamená že je možné vytvořit v administraci další verze celého internetového obchodu s vlastními produkty, mezi kterými lze libovolně přepínat podle příslušné domény nebo podle requestu v URL. Tato funkce nám tak umožňuje mít na jednom hostingu několik desítek různých internetových obchodů pod jednou doménou.
4.1. Struktura aplikace Jednou z předních výhod jazyka PHP je snadný způsob jeho nasazení. Máme-li dostupné všechny prostředky (Apache) pro překlad zdrojového kódu, můžeme vzít libovolné statické stránky HTML a pomoc párových značek „“ z nich vytvářet dynamické stránky. Aby však překladač rozpoznal, že se jedná o soubor aplikace s kódem pro překlad, musí mít takovýto soubor příponu .php. V opačném případě posílá na výstup obsah souboru bez překladu.
Programování, kde sled událostí tvoří bloky kódu, jenž funkci aplikace rozdělují na dílčí úlohy, které se poté řeší samostatně, se nazývá strukturované programování. První verze jazyka PHP byly vyvíjeny tímto směrem. V posledních letech však vznikl nový způsob programování, kterému se říká objektově orientované. Tento způsob je postaven na koncepci srovnání logiky aplikace s logikou reálného světa. Vzniká tak nový pojem „třída“ (ang. Class), který reprezentuje objekt neboli prvek modelované reality s danými vlastnostmi. Příkladem takovéhoto objektu může být např. v reálném světě čajová lžička, která má 19
vlastnosti, jako je velikost, barva, materiál a navíc různá chování, jako je např. vodivost teploty, pružnost aj. Materiál, ze kterého byla lžička vyrobena, může být také objekt, což tedy znamená, že objekty je možné skládat. Vytvoříme-li konkrétní čajovou lžičku s konkrétními vlastnostmi, říkáme, že jsme vytvořili tzv. instanci třídy.
Jazyk PHP podporuje objektově orientované programování přibližně od verze PHP4. Na bázi objektově orientovaného programování vznikly také nové softwarové architektury, jedné z nich se říká MVC. Ta přináší do prostředí vývoje webových aplikací jednu obrovskou výhodu. Jedná se o rozdělení logiky aplikace od uživatelského rozhraní a grafických prvků.
4.1.1. Architektura MVC MVC neboli Model-View-Controller je softwarová architektura, která rozděluje datový model aplikace, uživatelské rozhraní a řídicí logiku do tří nezávislých komponent tak, že modifikace některé z nich má minimální vliv na ostatní.16
Model (model) – reprezentuje informace a funkce objektu, se kterým aplikace pracuje. View (pohled) – reprezentuje uživatelské rozhraní s využitím dat získaných z modelu. Controller (řadič) – reaguje na události a zajišťuje změny v modelu nebo pohledu
4.1.2. Využití MVC ve webové aplikaci Pro oddělení logiky aplikace se používá šablonovací systém Smarty (případně HTMLTmpl, Teng aj.). Smarty funguje tak, že kodér upravuje klasickou stránku HTML (šablonu) a v ní jsou určité značky, které jsou dynamicky vytvářené pomocí PHP. Taková šablona může např. vypadat takto (index.tpl)17:
Vítejte {$jmeno}
16 17
Http://cs.wikipedia.org/wiki/Model-view-controller (15.5.10) http://smarty.ronnieweb.net/co-je-smarty.php (15.5.10)
20
Smarty jako takové je tedy třída, které programátor předává proměnné pro šablonu, a tím se odděluje logika aplikace od HTML výstupu (View). Soubory se Smarty značkami mají koncovku .tpl (z ang. template) a jsou uloženy ve své samostatné složce.
Model v aplikaci budou představovat třídy (Class, soubory *.php) s vnitřními metodami a proměnnými. Tyto třídy jsou např. třída Produkt (která zastupuje v reálném světě konkrétní produkt internetového obchodu s vlastnostmi, jako je název, popis atd.), třída Faktura (která zastupuje fakturu s objednanými produkty s vlastnostmi, jako je datum, způsob dopravy, položky faktury atd.) nebo třeba třída User (která zastupuje model jednoho uživatele na stránkách aplikace s funkcemi pro přihlášení či odhlášení uživatele aj.).
Tyto třídy poté spravuje controller neboli řídící skript PHP (soubory *.php), který na základě requestu (požadavku od klienta, POST nebo GET) rozhodne o zpracování modelu a předání výstupu na view. Hlavní controller určený pro běžné uživatele aplikace je index.php. Ten spravuje výpis produktů na hlavní stránce a v kategoriích. Další controller v aplikace je pak produkt.php, user.php, kosik.php, faktura.php a 3d_space.php a v administraci zbozi.php, users.php, obsah.php a nastaveni.php.
4.2. HTTP, Cookies a Session V rámci komunikace mezi klientem a serverem se v dnešní době používá pro služby WWW základní protokol HTTP. Jedná se o textový protokol který je postaven na síťové architektuře TCP / IP a veškerá komunikace probíhá ve formě dotazu (HTTP request) a odpovědi (HTTP response). Tento protokol je bezestavový (nepamatuje si stavy aplikace), a proto je potřeba tzv. cookies. Jedná se o data přidaná k hlavičce protokolu HTTP, která jsou vyslaná serverem při první návštěvě webové aplikace a která webový prohlížeč posílá zpět při každém dalším požadavku od klienta k serveru. Data obsahují unikátní identifikátor ( označován jako SESSIONID, SESSID, SID apod.) s určitou dobou platnosti a právě podle něho lze opětovně načíst předcházející stavy aplikace. Díky němu je tak možné ukládat na serveru proměnné (např. id přihlášeného uživatele, id produktů v košíku aj.), nebo dokonce i instance daných tříd či jiné informace k SESSIONID přidružené.
21
4.3. Relační model a databáze Relační model je dnes nejrozšířenější způsob pro ukládání dat v databázi na webu a to především díky relační databázi MySQL, která je součásti již téměř každého programu hostingových služeb. Základní jednotkou relačního modelu je tabulka. Každý sloupec této tabulky představuje atribut s jednoznačným názvem a typem (INT, VARCHAR, TEXT, DATE, apod.) a každý řádek této tabulky představuje záznam neboli skupinu hodnot přidružených k daným atributům.
Mají-li dvě a více tabulek atributy stejného typu je možné vytvořit mezi nimi vazbu. Této vazbě se říká relace. Relace může být několika typů:
1:1 – jedná se o typ vazby, kde každému záznamu v jedné tabulce odpovídá právě jeden záznam v tabulce druhé (např. vztah mezi pacientem a zdravotnickou kartou bude odpovídat právě tomuto vztahu, protože právě jednomu pacientovi náleží právě jedna zdravotnická karta a právě jedna zdravotnická karta odpovídá právě jednomu pacientovi)
1:M – jedná se o typ vazby, kde každému záznamu z jedné tabulky může odpovídat víc záznamů z druhé tabulky (např. každá osoba může mít víc telefonů, ale každý telefon má právě jedna osoba)
M:N – jedná se o typ vazby kde každému záznamu z jedné tabulky odpovídá více záznamů z druhé tabulky a každému záznamu z druhé tabulky odpovídá záznam z první tabulky (např. každá objednávka může mít více produktů a každý produkt může být na více objednávkách).
Na základě těchto vlastností relačního modelu se vytváří logika mezi jednotkami v aplikaci. Data lze po té ukládat, upravovat či mazat z databáze pomocí jazyka SQL.
22
Obrázek 9 - Relační model aplikace
Z relačního modelu můžeme vidět všechny tabulky aplikace. Prakticky každá z nich má atribut id a atribut shop. Jedná se o primární a cizí klíč. Atribut id umožňuje každý záznam jednoznačně identifikovat, zatímco atribut shop vytváří vazbu k momentální verzi internetového obchodu. Tímto způsobem lze snadno načítat data přidružená k doméně
23
aplikace a pomocí URL identifikovat jestli budou návštěvníkovi stránek zobrazeny produkty z obchodu s výpočetní technikou nebo třeba s cyklistikou aj.
4.4. Model URL Celý výstup aplikace vzniká na základě modelu request – response neboli česky žádost – odpověď. Dokonce již podle domény se rozhoduje, o jaká data na výstupu půjde. Z globální proměnné $_SERVER['HTTP_HOST'], kterou nabízí jazyk PHP, se načte název domény (proměnná obsahuje např.. www.něco.cz), který se dále porovnává s názvy uloženými v databázi aplikace v tabulce T_SHOP. Aplikace v případě kladného výsledku nadefinujeme globální proměnnou reprezentující ID internetového obchodu pro danou doménu, kterou pak využíváme vždy při načítání dat z tabulek, které jsou k doméně přidruženy.
// inicializace domény, odstraníme nepotřebný prefix www. $domain = str_replace("www.", "", $_SERVER['HTTP_HOST']);
// název domény je část řetězce v proměnné domain před první tečkou $prefix_web_name = substr($domain, 0, strpos ($domain,"."));
// poté doménu vyhledáme v databázi $result_set_shop = mysql_query(" SELECT id FROM " . T_SHOP . " WHERE nazev = '" . $prefix_web_name . "'");
$row_set_shop = mysql_fetch_array($result_set_shop); define ("SHOP_ID", $row_set_shop['id']);
$result_product_list = mysql_query(" SELECT * FROM " . T_ZBOZI . " WHERE shop = '" . SHOP_ID. "'");
Příklad jak zobrazit produkty patřičné domény
24
Tímto způsobem se dá jednoznačně určit verze internetového obchodu. Budeme-li tedy mít např. aplikaci uloženou na jednom hostingu a jako hlavni doménu nastavíme cyklistika.cz a jako alias nastavíme mobily.cz můžeme v rámci jedné aplikace vytvořit hned dva internetové obchody.
Další řízení aplikace přes URL probíhá na bázi konfiguračního souboru .htaccess. Webový server (Apache) tento soubor využívá pro různé konfigurace serveru a mj. ho lze použít pro překlad webových adres či přesměrování. O tento překlad se stará modul mode_rewrite, který musí být v nastavení serveru povolen. Je-li mode_rewrite povolen, můžeme vytvářet velmi užitečné a přátelské URL odkazy, typickým příkladem je např. tato:
www.domena.cz/zakladni-deska-asus-powermax2
Aplikace mode_rewrite bohatě využívá, viz následující konstrukce:
Využití modulu mode_rewrite v aplikaci: URL
Controller
doména.cz/katalog/název-kategorie
index.php
doména.cz/produkt/název-produktu
produkt.php
doména.cz/page/název-článku
page.php
Popis Seznam produktů v dané kategorii
Odkazuje na konkrétní produkt
Statické stránky, respektive články vytvořené v administraci
doména.cz/user/název-akce
user.php
Přehled
objednávek
a
osobních
údajích přihlášeného uživatele doména.cz/kosik/název-akce
kosik.php
Práce
s nákupním
objednávkou www.doména.cz/admin/název-akce
admintools/
Vstup do administrace
index.php Tabulka 4 - Mode_rewrite v aplikaci z pohledu návštěvníka
25
košíkem
a
Využití modulu mode_rewrite v aplikaci - administrace: URL
Controller
Popis
(/admintools/) /admintools/zbozi/název-akce
zbozi.php
Administrace produktů
/admintools/users/název-akce
users.php
Administrace uživatelů
/admintools/objednavky/název-akce objednavky.php Administrace objednávek /admintools/nastaveni /název-akce /admintools/obsah/název-akce
nastaveni.php
Nastavení a zobrazení obchodu
obsah.php
Administrace článků a stránek
/admintools/multishop/název-akce
multishop.php
Administrace verzí e-shopu
/admintools/statistiky/název-akce
statistiky.php
Přehled a statistiky
Tabulka 5 - Mode_rewrite v aplikaci z pohledu administrátora
V souboru .htaccess jsou dané překlady zapsány obdobně jako na následujícím příkladu:
# Mode rewrite povolen RewriteEngine on
# následující konstrukce říká: všechny odkazy (URL linky) které začínají na „katalog/“ pošli # na soubor index.php a vše, co se nachází v URL za “katalog/”, předej jako GET parametr s # názvem pgid, například /katalog/zakladni-desky bude přeložen na # index.php?pgid=zakladni-desky
RewriteRule ^katalog/(.*) /index.php?pgid=$1 [QSA]
Přes soubor .htaccess se dá i nastavit stránka, která bude návštěvníkovi zobrazena v případě, že požadovaná stránka nebyla nalezena, dělá se to následujícím příkazem:
# Ukázka přesměrování stránek pokud nebyla nalezena patřičná stránka ErrorDocument 404 /jina_stranka.php
26
4.5. Formování a skládání 3D modelů Fakt že VRML využívá pro ukládání 3D scény právě textové soubory, přináší pro jejich využití také jednu obrovskou výhodu. Ta spočívá v možnosti manipulovat s tímto souborem prostřednictvím jazyka pro tvorbu webového obsahu (např. PHP, ASP aj.) jako s jakýmkoliv jiným souborem uloženým na serveru. V takovémto prostředí máme možnost otvírat a slučovat soubory virtuálních světů dle potřeb návštěvníka stránek. V případě internetového obchodu můžeme tedy zákazníkům kromě možnosti nechat si zobrazit produkt ve 3D umožnit také sloučit dvě k sobě odpovídající součásti (VRML modely) a zobrazit je obě zároveň v jedné scéně. Využití si můžeme představit třeba u prodeje cyklistických kol. Návštěvník stránek si vybere například žlutý rám horského kola a podle možností si k němu vyhledá řidítka, pedály aj. součásti tak, aby mu výsledný dojem připadal co nejefektivnější. Celou scénu si může zobrazit prostřednictvím stránek a ucelit si tak obraz o výsledném produktu.
Princip slučování modelů je založen na bázi označení modelů referenčním klíčem s přidruženými informacemi o pozici dvou a více modelů. Mějme např. model A, model B, model C a model D. Model A může pro lepší názornost představovat rám horského kola, model B řidítka, model C bude představovat zvonek a model D tachometr. Víme, že k modelu A je možné připojit model B, avšak již ne model C. Model C je možné připojit pouze na model B, to samé platí pro model D. Jestliže návštěvník stránek bude chtít zobrazit modely A,B,C i D všechny v jedné scéně k sobě přidružené, je třeba určit vazby a rozmístění modelů mezi modely v souborech .wrl .
Každý z modelů má tzv. referenční klíč, který jednoznačně identifikuje typ objektu. Abychom nadefinovali dva modely jako slučitelné, musíme mezi nimi vytvořit vazbu na tyto klíče. Takže např. model A má vazbu na model B a model B má vazbu na model C a D, modely C a D již vazbu mít nemusejí, je k nim již vytvořena u modelu B. Referenci je možné definovat i obráceně. Tedy že model B bude mít vazbu na A a modely C a D budou mít vazbu na B. Jakmile máme připravené vazby, musíme nadefinovat pozice přidružených modelů. Veškeré pozicování v aplikaci je bráno absolutně vůči středu virtuálního světa, takže pokud máme ve scéně ve středu virtuálního světa model A pak víme že model B může být umístěn pouze na absolutních pozicích daných pozicí modelu A vůči modelu B. To samé platí i pro modely C a D.
27
Veškeré informace o vazbách a absolutních pozicích modelu jsou uloženy přímo v souborech .wrl. K jejich popisu slouží informační uzel WorldInfo, který
v souboru
zastupuje dokumentační účely.
#VRML V2.0 utf8 # # Soubor obsahuje model základní desky počítače, je možné k němu přidružit jeden chladič, # dvě operační paměti, jednu grafickou kartu a dvě audio PCI karty # # Uzel WorldInfo obsahuje všechny informace o vazbách mezi přidruženými modely WorldInfo { title "deska" # klíč je reprezentován jako parametr se jménem type – u tohoto modelu # se klíč = deska info [ "autor:Jan Jarčík", "type:deska", "scale:0.5 0.5 0.5 "rel-chladic:3 1.2 -0.2", "rel-pamet:1.1 -2 -1.4", "rel-pamet:1.1 -2 -1.1", "rel-grafika:-0.1 0 -0.8", "rel-pci-audio:-3.8 1 -0.5", "rel-pci-audio:-3.2 1 -0.5", ] } Transform{ children[ DEF mainboard Transform { … } ] } Př. zápisu vazeb a referenčního klíče v souboru .wrl
Název referenčního klíče a vazby se zapisují mezi parametry VRML uzlu WorldInfo, konkrétně do parametru info, který může obsahovat libovolný počet textových řetězců. Každý z těchto řetězců definuje v rámci aplikace jeden parametr neboli vlastnost wrl modelu. Správná formulace parametru je:
:. Tímto způsobem je např. zapsán referenční klíč, jehož parametr se jmenuje type.
28
Vazba mezi produkty se také zapisuje pomocí parametrů ve WorldInfo. Aby bylo možné rozpoznat, že daný parametr popisuje vazbu mezi modely, musí začínat jeho název řetězcem „rel-„, kde za pomlčkou následuje přímo název type přidruženého modelu, v příkladě výš je možné vidět, že základní desku je možné přidružit s modely, který mají type rovno: chladic, pamet, grafika a pci-audio. Hodnotou parametru rel- je absolutní pozice přidruženého modelu v prostoru. Takže chceme-li např. aby se vybraný model A mohl slučovat s modelem B a aby model B byl na souřadnicích x = 0.5, y = 0.7, z = 1, zapíšeme do parametru info „rel-B:0.5 0.7 1“
O ostatní se již stará webová aplikace. Jsou proto vytvořené 3 třídy:
Obrázek 10 - Tři hlavní třídy pro správu WRL modelů
29
Zpracování WRL objektů začíná ve chvíli, kdy je vynesen požadavek na controller 3d_space.php nebo produkt.php. V obou případech je totiž vyžadováno zobrazení 3D modelu. Controller 3d_space.php je určen pro skládání dvou a více modelů, zatímco produkt.php pouze pro zobrazení jednoho modelu. Nejprve je vždy vytvořena instance od třídy TheSpace, která reprezentuje celý prostor pro ukládání 3D objektů a inicializuje výstupní soubor.
Objekty do prostoru můžeme přidat jednotlivě metodou setSpaceByProduct($product), které předáváme objekt typu Produkt, nebo hromadně metodou setSpaceBySession(), která zpracuje všechny instance typu Produkt ve třídě Basket. Třída Produkt reprezentuje jeden produkt internetového obchodu, třída Basket reprezentuje celý nákupní košík. Třída TheSpace vždy z předaných objektů vytvoří instance třídy WrlObject, které předává třídě ListOfWrlObject
reprezentující
seznam
WRL objektů.
Poté se
zavolá metoda
mixRelationObject() třídy TheSpace. Tato metoda má na starosti sloučit modely všech WRL objektů ve třídě ListOfWrlObject do jednoho objektu a nakonec přidat k výstupu scénu s ovládacími prvky, jako jsou tlačítka pro rotaci výsledné scény a zobrazování více pohledů. Celý proces můžete vidět v následujícím diagramu aktivit.
30
Obrázek 11 - Proces rozhodování o sloučení modelů
31
Obrázek 12 - Proces sloučení dvou modelů
32
4.6. Administrace Administrace je dostupná, pokud se uživatel s právy administrátora přihlásí prostřednictvím formuláře na www.domena.cz/admin. Další přístupy jsou možné ze stránky s náhledem produktu, kde se v případě, že je uživatel přihlášen jako administrátor, může po kliknutí na symbol tužky dostat rovnou na editaci tohoto produktu v administraci. Celková správa je rozdělena do těchto kategorií: správa zboží, správa uživatelů, správa objednávek, správa článků a aktualit, správa více verzí internetového obchodu a nastavení internetového obchodu.
4.6.1. Úvodní stránka administrace Úvodní stránka administrace je určena pro rychlý přehled stavů internetového obchodu. Je zde možné vidět počet přijatých objednávek dnes a počet přijatých objednávek celkově. Dále úvodní stránka informuje o celkovém počtu registrovaných uživatelů a o celkovém počtu produktů v databázi. Kromě toho je možné také vidět deset posledních akcích na stránkách v administraci.
4.6.2. Správa produktů Na úvodní stránce správy produktů je vždy zobrazeno dvanáct posledních produktů v databázi. Pomocí šipek na konci seznamu je možné listovat mezi dalšími stránkami s dvanácti produkty a pro ještě snazší orientaci v produktech se nachází nad seznamem panel s několika filtry který umožňuje konkretizovat patřičný výběr.
Při vytváření nebo editaci produktu nejprve vybereme kategorii a zadáme údaje pro popis produktu. Můžeme nahrát jeden hlavní obrázek a deset dalších vedlejších. Dále je možné nastavit, jestli bude produkt aktivní nebo ne, jestli se bude zobrazovat na titulní stránce a další podobné parametry. Dále je u editace produktu možnost nahrát soubor .wrl, a k němu patřičné textury. Je však nutné, aby textury byly namapované do složky ./maps, do které se také textury nahrávají.
Kromě parametrů pro popis produktu je možné také zadat přímo URL, které bude na produkt odkazovat. Není-li tak učiněno, doplní se URL automaticky podle názvu produktu. URL produktu využívá překladu adres v souboru .htaccess (viz kapitola Model URL), takže je možné aby odkaz na produkt byl ve tvaru www.domena.cz/produkt/nazev-produktu. Pokud
33
administrátor zadá již exitující URL, přidá se za odkaz číslo určující aktuální počet stejných existujících odkazů URL, čímž aplikace brání kolizi v odkazech.
Pro editaci a popis produktu je možné využít editor WYSIWYG (z angl. What you see is what you get) FCKeditor, což je javascriptový editor, open source, vytvořený pro editaci a správu HTML obsahu na webu18.
4.6.3. Správa kategorií Kategorie tvoří stromovou strukturu, což znamená, že každá kategorie je buď hlavní kategorií nebo podkategorií nějaké jiné kategorie. Každá kategorie může mít libovolný počet podkategorií. Každá kategorie může mít přiřazen profil parametrů specifických pro danou kategorii. Například kategorie Grafické karty může mít přiřazený profil parametrů, který bude blíže specifikovat vlastnosti grafických karet. Každému takovémuto profilu můžeme nastavit libovolný počet parametrů. Jeden parametr kategorie může být např. velikost paměti grafické karty a v takovém případě můžeme připisovat všem produktům v kategorie novou vlastnost určující velikost paměti grafické karty.
Kromě přidání profilů ke kategorii je také možné kategorie mezi sebou různě přesouvat, nastavit jim vlastní URL link (což je vhodné zejména pro vyhledávače) nebo nastavit kategorie jako aktivní / neaktivním a tím je zneviditelnit v hlavní nabídce internetového obchodu.
4.6.4. Správa výrobců Každý produkt může mít přiřazeného jednoho výrobce ze seznamu výrobců. K tomuto výrobci je také možno přiřadit webovou stránku, na kterou se bude při výpisu stránky produktu odkazovat.
4.6.5. Správa uživatelů Úvodní stránka správy uživatelů představuje seznam všech registrovaných návštěvníků internetového obchodu. Seznam je možné třídit podle domény internetového obchodu či omezit výběr pouze na administrátory nebo VIP uživatele (status VIP je možné změnit v editaci uživatele). Dále je možné registrovaným návštěvníkům nastavit různá práva. Pokud 18
http://ckeditor.com/ 22.5.10
34
má uživatel nastaveno právo administrátora, to znamená je mu povelen přístup do administrace internetového obchodu, je možné omezit jeho práva pouze na vybrané akce. Dále je možné administrátora omezit pouze na přístup do některé verze internetového obchodu. Což je vhodné zejména tehdy, pokud se o jednotlivé domény stará více administrátorů.
4.6.6. Správa objednávek Na úvodní stránce správy objednávek jsou zobrazeny všechny objednávky internetového obchodu (vždy pouze pro vybranou doménu) vč. zakoupených produktů. Objednávky je možné editovat, tedy měnit způsob dopravy a poplatky za dopravu, měnit počet kusů jednotlivých produktů, přidávat poznámku operátora nebo také změnit stav vyřízení (vyřízeno, nevyřízeno, probíhá vyřizování, čeká na odběr).
4.6.7. Správa obsahu Správou obsahu se rozumí možnost přidávat,editovat a odebírat články na stránce a možnost přidávat, editovat a odebírat aktuality. Články jsou celé, ve své podstatě statické, stránky, na které odkazuje levý panel stránek pod výpisem kategorií. Pro jejich editaci je možné použít WYSIWYG FCKeditor a také je možné přiřadit článek ke konkrétní kategorii. Takový článek se poté zobrazuje vždy nad výpisem produktů při výběru patřičné kategorie. Aktuality jsou krátké zprávy které se vypisují přímo v pravém panelu stránek.
4.6.8. Nastavení aplikace V nastavení aplikace je možno provádět tři věci:
•
Nastavení základních informací jako je název firmy, adresa apod.
•
Nastavení zobrazení stránek, nastavení barev a nastavení bannerů
•
Nastavení poplatků za dopravu způsob platby
Na první stránce v nastavení se nachází formulář se základními prvky pro popis internetového obchodu (název firmy, adresa, jméno majitele…). Tento formulář je individuální pro každou doménu e-shopu a stejně tak to platí i pro nastavení zobrazení stránek a poplatků.
35
Stránka zobrazení umožňuje nastavit, zdali se na domovské stránce bude zobrazovat box s pěti nejnovějšími, s pěti nejprodávanějšími či s pěti nejsledovanějšími produkty. Dále je možné rozhodnout, jestli se na stránkách budou zobrazovat aktuality, vyměnit hlavni logo stránky, nastavit barvy pro některé prvky nebo přidat reklamní banner na některé z pěti vybraných míst.
4.6.9. Správa verzí internetového obchodu Jednou z velmi důležitých částí aplikace je stránka s nastavením všech verzí internetového obchodu. Je zde možné přidávat novou verzi obchodu, upravit název domény nebo přidat alias k doméně, což ve výsledku znamená, že pro více domén se může zobrazit více verzí internetového obchodu a k jedné verzi internetového obchodu může být přiřazeno více domén. O tom, která verze bude návštěvníkovi stránek zobrazena, rozhoduje skript /config/application_config.php v adresáři config který je spuštěn při každém volání aplikace.
4.7. Instalace aplikace Pro instalaci aplikace stačí nahrát veškeré soubory aplikace na FTP, v souboru config/db.php nastavit přístup do databáze a složkám templates_c a save_files (včetně podsložek) nastavit práva na 777. Program se začne instalovat zadáním adresy stránek do webového prohlížeče, sám si vytvoří tabulky v databázi, pokud neexistují, a vytvoří několik vzorových položek na stránce pro snazší orientaci. Podobných výsledků je možné dosáhnout, spuštěním skriptu config/instal/run.php.
Obrázek 13 - Instalace E-shopu
36
Kapitola 5
Testování Testování je konečná fáze vývoje, která by u žádné aplikace neměla být nikdy podněcována. Je možné ji provádět s uživatelem i bez uživatele, vždy podle dostupných podmínek a kritérií. Smyslem testování je odstranit nedostatky, které nemusejí být patrné pro programátora, jenž aplikaci zná, a docílit tak toho, aby aplikace byla srozumitelná pro každého, kdo bude s aplikací pracovat. V mé práci jsem se zaměřil na testování s uživatelem, dále označovaným jako uživatel Alice.
5.1. Popis persóny Alice Alice je 22letá studentka vysoké školy s humanitní fakultou, internet používá jen tehdy pokud to považuje za nutné, před internetovým obchodem dává přednost kamenné prodejně avšak několikrát si už produkt prostřednictvím nějakého e-shopu zakoupila. S 3D grafikou ani modely žádné zkušenosti nemá, s počítačem umí pracovat bez potíží.
5.2. Způsob testování Testování probíhalo v tichém nerušivém prostředí s jedním osobním počítačem připojeným k internetu. Alice dostala za úkol:
a) Prostřednictvím internetového obchodu si vybrat dva libovolné produkty z různých kategorií, vložit je do košíku a objednat si jejich dopravu domů s možností zaplacení při převzetí nebo předem.
b) Vybrat všechny potřebné součásti pro sestavení jízdního kola nebo skateboardu, výsledný složený celek zkontrolovat ve 3D prostoru, změnit jednu ze součástí produktu a po té si celý sestavený předmět v internetovém obchodě zakoupit.
Záměrem prvního úkolu bylo zjistit, jestli vůbec samotný internetový obchod splňuje podmínky intuitivního ovládání a jestli vůbec, i bez přidané funkce zobrazení produktů ve 3D, je možné v e-shopu bez problému nakupovat. Druhý úkol měl prokázat nakolik je využití skládání modelů efektivní, jakým způsobem dokáže uživatel ovládat prostor s modely, a 37
nakolik chápe uživatelské rozhraní pro práci s 3D modely v e-shopu. Alice byla před začátkem testování požádána, aby během celého testu „myslela na hlas“ a tím umožnila v průběhu testu analyzovat cíle samotných kroků, které během nakupování prováděla. Zatímco Alice plnila úkoly, tester (já) stál za jejími zády a zapisoval si poznámky k jejím postupům.
5.3. Výsledky testování Výsledky testů pomohli odhalit několik nedostatků v aplikaci, většina z nich byla odstraněna, avšak některé z nich v rámci projektu již opravit nešlo (především kvůli očekávání funkcí které byly mimo rozsah bakalářské práce nebo na které mi v tomto semestru již nezbyl čas).
V testu a) byla odhalena chyba při nakupování bez registrace. Uživatel měl možnost v nákupním košíku zadat pouze několik údajů o sobě pro dokončení objednávky, ale po odeslání formuláře s osobními údaji byly ztraceny informace o způsobu platby a dopravy, které před odesláním zadal, a proto Alice musela zadat informace znova. Tato funkce byla opravena, žádné další problémy se základním ovládáním již v aplikaci odhaleny nebyly.
V testu b) bylo zjištěno, že uživatel zpočátku vůbec netuší co má pro zobrazení 3D modelu udělat. Tlačítko které k této funkci sloužilo nebylo pravděpodobně dostatečně kontrastní a možnost zobrazení produktu ve 3D tak nedávalo dostatečně najevo. Bylo proto nahrazeno výraznějším tlačítkem s obrázkem a animovanou šipkou.
Další nedostatky byli nalezeny při prohlížení produktů. Alice požadovala náhled produktu ze spodu, avšak scéna nabízí pouze zobrazení ze strany, ze shora, z obecného pohledu a náhled s animací kolem dokola. Možnost přidat dalšího pohledu do scény zabraňoval podklad na kterém vymodelovaný předmět stojí.
Poslední problém byl, že Alice nevěděla jak produkty dohromady složit. Aplikace skládá produkty sama, automaticky po vložení dvou a více modelů, které na sebe pasují, o této informaci však uživatel nevěděl, nebyl o tom patřičně informován. Tento nedostatek byl vyřešen přidáním informačních nápisů pod zobrazením modelu u produktu a další k výpisu košíku.
38
Kapitola 6
Závěr Způsobů jak něco prodat je mnoho. Dnešní internetové obchody skutečně poskytují mnoho výhod oproti klasickým obchodům, ale současně s nimi přináší i několik nevýhod. Snadný a levný provoz e-shopu znamená více potencionální konkurence (Více lidí dokáže provozovat internetový obchod). Obchodování prostřednictvím internetu znamená velké rivalství na trhu, a proto je nutné najít cestu jak zaujmout. Zákazníci si nejčastěji vybírají produkty podle cenové kategorie. Avšak tam, kde nemůže být nabídnuta lepší cena, je nutno nabídnout něco jiného, něco navíc, něco, co jim jiný obchod nedá. Zobrazení produktů ve 3D s dalšími možnostmi interakce je přínosnou metodou, jeho smysl se však nedá hledat všude. Pokud zákazník shání pouze jeden onen konkrétní produkt, který zná, řídí se jen podle ceny a způsob prezentace ho takřka nezajímá. Proč by měl tedy zákazník nakupovat právě u nás? Co mu můžeme ještě nabídnout? Stojí vůbec náš potencionální klient o prezentaci produktů ve 3D?
Odpovědi na tyto otázky se v jednotlivých případech natolik liší, že nemá smysl se dožadovat obecného řešení, ale pokud se chceme řídit heslem „náš zákazník náš pán“, je důležité prezentovat produkty našich stránek tak, aby to také právě oni ocenili.
V další práci na projektu by bylo vhodné implementovat administrační rozhraní pro spojování produktů a tím by odpadla nutnost zapisovat informace o spojování do souboru .wrl. Taková administrace by ušetřila mnoho práce a především by zajistila větší přehlednost o slučitelných produktech. Scéna pro vkládání produktů by mohla být rozšířena o další náhledy zobrazení, testování bych rozšířil o větší množství testovaných uživatelů a na jeho bázi bych vytvořit intuitivnější uživatelské rozhraní. V další fázi implementace bych také řešil co se stane pokud uživatel vloží do košíku dva různé produkty stejného typu, kdy je třeba rozhodnout který z produktů bude ve výsledku zobrazen.
39
Literatura [1] Greg Hopkins – Tutorial and Information on 3D Graphics http://www.java3d.org/czech.html [2] Autodesk - Autodesk FBX Future http://www.autodesk.cz/adsk/servlet/index?siteID=551663&id=13110780 [3] Autodesk - Maya 7 Features http://usa.autodesk.com/adsk/servlet/item?siteID=123112&id=13587627 [4] Adobe - Flash Player http://www.adobe.com/products/flashplayer [5] Blender - Import and Export http://www.blender.org/download/python-scripts/import-export/ [6] Macromedia Flash and Director Resource Center http://www.adobe.com/products/director/resources/integration/ [7] J.Žára - Laskavý průvodce virtuálními světy. Computer Press, 2000. [8] Linux, Apache, MySQL a PHP - Eric Rosebrock, Eric Filson, Grada, 2005
40
Příloha A
Seznam použitých zkratek 2D Two - Dimensional 3D Three - Dimensional ASP Active Server Pages BSD Berkeley Software Distribution CAD computer-aided design CSS Cascading Style Sheets FTP File Transfer Protocol HTML Hyper Text Markup Language HTTP Hypertext Transfer Protocol IMAP Internet Message Access Protocol MVC Model View Controller PHP PHP Hypertext Preprocessor (Personal Home Page) SQL Structured Query Language SEO Search Engine Optimization SMTP Simple Mail Transfer Protocol URL Uniform Resource Locator VRML Virtual Reality Modeling Language WWW World Wide Web WYSIWYG What You See Is What You Get XHTML eXtensible Hyper Text Markup Language XML eXtensible Markup Language
41
Příloha B
Uživatelská a instalační příručka Následující text slouží jako pomůcka pro přehled hlavních funkcí aplikace internetového obchodu s podporou VRML. Jejím cílem je upřesnit ovládání uživatelského rozhraní a to v sekci pro běžného návštěvníka stránek i v sekci pro administrátora.
B.1.1. Domovská stránka aplikace
Obrázek 14 - Domovská stránka aplikace
Na obrázku 14 můžete vidět domovskou stránku aplikace. V první řadě se nachází seznam odkazů pro přepínání mezi doménami internetového obchodu, které je možné v administraci přidávat či odebírat. V hlavičce stránek po pravé straně naleznete formulář pro vyhledávání produktů v eshopu a pod ním odkaz na košík zákazníka. Vedle košíku je vidět kolik produktů košík obsahuje a jaká je jeho momentální cena. Napravo od košíku je také možno spatřit obrázek červeno modro žluté kostky s nápisem 3D, který po kliknutí přesměruje stránku na zobrazení smíchané scény s modely produktů v košíku. 42
Pod hlavičkou stránek se nachází ve třech sloupích samotný obsah stránek. První sloupec informuje o dostupných kategorií, článků a o pěti nejprodávanějších či nejnovějších produktech, které vybrané kategorie nabízí. Druhý sloupec zobrazuje seznam produktů v kategorii, případně při otevření článku zobrazuje jeho obsah. Ve třetím sloupci se nachází formulář pro přihlášení/odhlášení uživatele a odkaz pro přístup do osobní složky s přehledem o objednávkách a osobních údajích. Pod tímto formulářem aplikace nabízí také možnost přihlásit se k odebírání novinek a zpráv (newsletter). Seznam posledních aktualit se nachází také ve třetím sloupci a je možné pod něj i nad něj přidávat reklamní banner.
B.1.2. Stránka produktu
Obrázek 15 - Stránka jednoho produktu
43
Na stránce produktu je možné spatřit bližší informace a popis produktu. Po kliknutí na tlačítko „Přidat do košíku“, vložíme, jak sám název tlačítka říká, produkt do košíku a tím umožníme smíchat model vybraného produkt s jiným produktem. Po vložení všech produktů do košíku můžeme přejít k pokladně, kliknutím na košík v hlavičce stránek.
B.1.4. Stránka nákupního košíku
Obrázek 16 - Stránka košíku
Stránka nákupního košíku představuje přehled všech produktů vybraných k zakoupení. Produkt z košíku vyjmeme kliknutím na červený křížek vedle názvu produktu. Počet kusů vybraného produktu můžeme změnit zadáním hodnoty počtu kusů v tabulce a kliknutím na přepočítat. Nakonec zbývá vyplnit způsob platby a dopravy, případně připsat poznámku k objednávce. Nejsme-li přihlášení, vyzve nás aplikace k nové registraci, nebo k pokračování bez registrace se zadáním několik osobních údajů (jméno, adresa apod.). Pomocí tlačítka „Odsouhlasení objednávky“ můžeme přejít k odsouhlasení smluvních podmínek a poté si nechat zobrazit list objednávky – fakturu.
44
B.1.6 Náhled na objednávkový list – Faktura
Obrázek 17 - Náhled stránky s fakturou
B.1.5. Náhled složeného produktu ve 3D
Obrázek 18 - Náhled složeného produktu ve 3D
45
B.2.1. Hlavní stránka administrace
Obrázek 19 - Domovská stránka administrace
Hlavní stránka administrace informuje o počtu posledních objednávek dnes, a o počtu objednávek za celou dobu provozu. Dále je možné vidět počet registrovaných uživatelů, počet produktů v e-shopu a poslední aktivity administrátorů v administraci.
B.2.2. Správa produktů
Obrázek 20 - Správa zboží
46
Hlavní stránka správy zboží zobrazuje přehled posledních dvanácti produktů v databázi, pomocí šipek pod tabulkou je však možné listovat seznamem a nechat si tak zobrazit i další produkty. Pro lepší manipulaci s produkty se nad výpisem nachází panel pro fulltextové vyhledávání nebo omezení výpisu na vybraná kritéria. Kliknutím na lupu v řádku vedle produktu je možné přejít detailní výpis produktu, kliknutím na tužku, produkt editovat, klinutím na červený křížek, produkt smazat. Pokud klikneme v horním panelu správy produktů na ikonu „Nové zboží“, zobrazí se nám stránky s možnostmi vytvářit nový produkt.
B.2.3. Úprava a vytváření produktů
Obrázek 21 - Úprava produktů,
Pro vytváření a úpravu produktů se používá stejný formulář. V první části je potřeba vybrat patřičnou kategorii produktu, vyplnit název, cenu, DPH a další podobné údaje o produktu. Kromě toho je také možné nahrát k produktu obrázek typu JPG, případně zadat URL adresu na vzdálený obrázek v internetu. Pomocí checkboxů může administrátor určit, jestli bude produkt aktivní nebo ne, jestli se bude produkt zobrazovat na hlavní stránce či jestli bude zařazen do výprodeje. K dispozici má také textové pole pro zadání URL adresy k produktu a
47
klíčových slov (to je vhodné zejména pro vyhledávače). Pokud administrátor textové pole pro URL nevyplní, učiní to aplikace sama, automaticky z názvu produktu. V druhé části úpravy má administrátor k dispozici WYSIWYG editor pro vyplnění informací o produktu. Dále může nahrát k produktu dalších 10 obrázků, jeden WRL model a libovolný počet textur.
B.2.4. Úprava a kategorií
Obrázek 22 - Úprava a přidávání kategorií
Kategorie je možné přidávat a měnit pokud kliknete v horním panelu správy produktů na ikonu „Kategorie“. Červený křížek v řádku vedle kategorie maže vybranou kategorii, tužka umožňuje kategorii upravit, další odkaz s obrázek slouží pro vnoření kategorií. Vedle tohoto odkazu se nachází odkaz s obrázek se šipkou, který umožňuje kategorii přesunout a po té odkaz s obrázkem popisovače, který umožňuje ke kategorii přidat profil parametrů. Podobným způsobem se také pracuje na stránce výrobců
Obrázek 23 - Úprava a editace výrobců
48
B.2.5. Správa objednávek
Obrázek 24 - Správa objednávek
Hlavní stránka správy objednávek obsahuje seznam posledních objednávek v e-shopu. Kliknutím na lupu se administrátor přesune k náhledu faktury, kliknutím na tužku k úpravě objednávky a kliknutím na červený křížek objednávku smaže. Kromě těchto funkcí může administrátor nastavit stav objednávky na „Nevyřízená“, “Probíhá vyřizování“, „Čeká na odběr“, „Vyřízená“, a to, pomocí výběru na konci řádku vybrané objednávky. Taktéž je možné seznam usměrnit v panelu nad tabulkou, kde jsou nástroje pro omezení výpisu podle stavu objednávky, nebo podle fulltextu.
B.2.6. Správa článků a obsahu stránek
Obrázek 25 - Správa článků a obsahu
Hlavní stránkou správy článků a obsahu je seznam se všemi vytvořenými články . Stránku vytvoříme po vyplnění textového pole a kliknutí na tlačítko „Založit“. Po té je možné obsah
49
editovat pomocí odkazu s tužkou, či je smazat kliknutím na červený křížek. Editace článku je zobrazena na obrázku 26. Každý článek můžeme přiřadit k nějaké kategorii nebo na úvodní stránku. Také jé možné nastavit jestli se bude zobrazovat v levém sloupci pod výpisem kategorií či ne, a nebo celý článek dočasně zneaktivnit.
Obrázek 26 - Editace článků
B.2.7. Nastavení poplatků za dopravu
Obrázek 27 - Nastavení poplatků
50
Poplatky za dopravu a různé typy placení je možné nastavit v sekci „Nastavení“ / „Poplatky“. Nejprve se vždy ukládá poplatek za dopravu. Ke každému poplatku za dopravu je možné přidat poplatek za způsob placení. Červený křížek smaže vybraný poplatek, tužkou můžeme poplatek upravovat a pomocí třetího obrázku v odkazu přidávat k dopravě další způsoby platby.
B.2.8. Správa grafiky a zobrazení stránek
Obrázek 28 - Správa grafiky a zobrazení stránek
Stránka se správou grafiky slouží pro nastavení barev a rozložení prvků na stránkách. V první části je možné nastavit jestli se budou zobrazovat pod výpisem kategorií boxy s pěti nejprodávanějšími, nejsledovanějšími nebo nejnovějšími produkty. V další části můžeme přidávat banner na stránku a to na různá rozmístění (top, první sloupec, hlavní obsah, pravý sloupec a další). Pomocí třetí sekce je možné měnit obrázek v hlavičce stránek a pomocí sekce čtvrté měnit barvy k přidruženým částím stránek.
51
B.2.9. Správa verzí internetového obchodu
Obrázek 29 - Správa více verzí e-shopu
Chceme-li aby aplikace běžela na jednom hostingu pod více doménami a aby pro každou doménu měla různé produkty, musíme vytvořit v sekci „E-shopy“ nový internetový obchod. Tento fakt ovšem neznamená nic víc, než vyplnit název domény a kliknout na tlačítko „Založit“. Jakmile nastavíme e-shop jako aktivní (pomocí checkboxu ve sloupečku run), bude aplikace pokaždé při jejím volání kontrolovat URL a podle zadaných domén vybírat přidružená data. Chceme-li ale aby aplikace měla více domén shodných pro stejný obsah, vyplníme kolonku Alias1 až Alias 7.
Pokud ještě nemáme doménu k hostingu nastavenou je možné spustit nově vytvořený e-shop pomocí modrého tlačítka se šipkou, které aktivuje vybraný obchod v rámci jedné session. Odkazy na hlavní stránce mohou také fungovat bez přidělení nové domény, ale pak místo http://www.nazev-domeny musí být ve tvaru /index.php?set_shop=<shop_id>
52
B.3. Instalační příručka Instalovat aplikaci je možné dvěma způsoby. Jedním z nich je instalace prosté aplikace bez vzorových dat, druhým je instalace vč. vzorových dat, jako jsou vzorové produkty, články apod. Po dobu 25.5.2010 – 25.8.2010 bude aplikace k nahlédnutí také na stránce http://eshop3d.tk/
B.3.1. Instalace aplikace bez vzorových dat a) Zkopírujte všechny soubory se složky „install/ftp_bez_vzorovych_dat/“ na hosting. b) Nastavte práva 777 na složky: templates_c, save_files (vč. podsložek) c) Na hostingu v souboru config/db.php nastavte přístup do databáze MySQL d) Otevřete ve webovém prohlížeči doménu s hostingem, aplikace vás vyzve k instalaci, klikněte na ANO. e) Dále se řiďte instalačním průvodcem, který vás dovede až k cíli. f) Při vstupu do administrace bude vaše výchozí jméno: název_domény, heslo: admin
Obrázek 30 - Instalace aplikace - krok 1
B.3.2. Instalace aplikace včetně vzorových dat g) Zkopírujte všechny soubory se složky „install/ftp_se_vzorovymi_daty/“ na hosting. h) Nastavte práva 777 na složky: templates_c, save_files (vč. podsložek) i) Na hostingu v souboru config/db.php nastavte přístup do databáze MySQL j) V phpMyAdmin nechat vykonat SQL ze souboru instal/SQL/vzorova_data.sql k) Při vstupu do administrace bude vaše výchozí jméno: cvut, heslo: admin 53
Příloha C
Obsah přiloženého CD Hlavní adresářová struktura Název složky
Popis obsahu
Bp
PDF této bakalářské práce
Install
Zdrojové soubory aplikace
Install / ftp_bez_vzorovych_dat
Zdrojové soubory bez vzorových dat
Install / ftp_se_vzorovymi_daty
Zdrojové soubory se vzorovými daty
SQL
Soubory SQL pro import tabulek v MySQL Tabulka 6 - Hlavní adresářová struktura
Adresářová struktura aplikace Název složky
Popis obsahu
admintools
Hlavní soubory administrace typu controller
admintools / config
Konfigurace aplikace v administraci
admintools / scripts
Soubory typu controller a funkce pro admin.
config
Hlavní konfigurace aplikace
config / install
Soubory pro průvodce instalace aplikace
config / install / data
Soubor .sql pro MySQL tabulky při instalaci
config / install / images
Obrázky pro průvodce instalace
css
Kaskádové styly - CSS
images
Hlavní obrázky aplikace
images / admin
Obrázky pro administrační rozhraní
images / eshops
Obrázky pro zákaznický rozhraní
images / wrml_scene
Hlavní scéna .wrl pro skládání modelů
images / wrml_scene / maps
Obrázky pro prvky v hl. scéně .wrl
jscripts
JavaScriptové soubory použité v aplikaci
jscripts / fckeditor
WYSIWYG editor pro administraci
jscripts / jguery_colorpicker
Výběr barev v administraci – jQuery
save_files
Soubory nahrané uživateli 54
save_files / banners
Bannery
save_files / layout
Hlavička stránek
save_files / tmp
Vygenerované scény složených modelů .wrl
save_files / userfiles
Data nahraná přes FCKeditor v administraci
save_files / wrml
Soubory .wrl s 3D modely produktů
save_files / zbozi
Obrázky s produkty e-shopu
scripts
Soubory typu controller, funkce a class
scripts / class
Veškeré třídy aplikace
scripts / funkce
Funkce společné pro všechny třídy aplikace
smarty
Šablonovací systém Smarty
templates
Šablony HTML souborů - VIEW v MVC
templates_c
Přeložené šablony systémem Smarty Tabulka 7 - Adresářová struktura aplikace
55
