Aukční systém internetové reklamy

ˇ e vysoké uˇcen´ı technické v Praze Cesk´ Fakulta elektrotechnická Katedra poˇc´ıtaˇc˚ u

Bakaláˇrská práce

Aukˇ cn´ı syst´ em internetov´ e reklamy Martin Mates

Vedouc´ı práce: Pavel Stupka

Studijn´ı program: Softwarové technologie a management, Bakaláˇrsk´ y Obor: Web a multimedia 9. ˇcervna 2009

iv

v

Podˇ ekov´ an´ı Rád bych podˇekoval svému vedouc´ımu Pavlovi Stupkovi, ˇze se ochotnˇe ujal mého tématu. Dále dˇekuji Davidovi Grudlovi za jistˇe zdlouhav´ y a nároˇcn´ y v´ yvoj PHP frameworku Nette a celému Nette fóru za trpˇelivé ˇreˇsen´ı m´ ych pot´ıˇz´ı pˇri tvorbˇe aplikace.

vi

vii

Prohl´ aˇ sen´ı Prohlaˇsuji, ˇze jsem práci vypracoval samostatnˇe a pouˇzil jsem pouze podklady uvedené v pˇriloˇzeném seznamu. Nemám závaˇzn´ y duvod proti uˇz´ıván´ı tohoto ˇskoln´ıho d´ıla ve smyslu §60 Zákona ˇc. 121/2000 Sb.,o právu autorském, o právech souvisej´ıc´ıch s právem autorsk´ ym a o zmˇenách nˇekter´ ych zákon´ık˚ u (autorsk´ y zákon).

V Praze dne 8. 6. 2009

.............................................................

viii

Abstract The main goal of this thesis is partial insight into an internet marketing and implementation of auction application for internet ads. This software enables users to buy or sell ad space on their web pages. Users can close deals by means of auction or by fixed price sale. The first part contains main types of on-line ads and the most significant ad companies in the Czech market. Thesis also includes a search engine optimization and defines some key terms. The second part of the thesis describes implementation of the application using PHP technology. Implementation part includes early analysis and selection of the appropriate framework. The most attention is paid to the chosen framework Nette and its architecture.

Abstrakt Hlavn´ım c´ılem této práce je ˇcásteˇcné nahlédnut´ı do internetového marketingu a implementace aukˇcn´ıho systému pro internetovou reklamu. Tento systém umoˇzn ˇuje nab´ızet reklamn´ı prostor na internetov´ ych stránkách a jeho zakoupen´ı formou aukce ˇci prodeje za pevnou cenu. Prvn´ı ˇcást zahrnuje hlavn´ı typy on-line reklamy a nejv´ yznamnˇejˇs´ı reklamn´ı sluˇzby na ˇceském internetu. Práce se také dot´ yká optimalizace pro vyhledávaˇce a definuje kl´ıˇcové pojmy. Druhá ˇcást práce se vˇenuje implementaci aukˇcn´ıho systému pomoc´ı technologie PHP. Pozornost je vˇenována poˇca´teˇcn´ı anal´ yze systému a v´ ybˇeru vhodného frameworku. Implementaˇcn´ı ˇca´st práce se zamˇeˇruje pˇreváˇznˇe na vybran´ y framework Nette a na jeho architekturu.

ix

x

Obsah ´ 1 Uvod

1

2 Internetov´ a reklama a marketing u n´ as 2.1 Platba za zobrazen´ı - PPV . . . . . . . . . . . . . . . . . . 2.2 Kontextová reklama a platba za kliknut´ı – PPC . . . . . . 2.2.1 Google AdSense a Google AdWords . . . . . . . . . 2.2.2 Seznam.cz a Sklik . . . . . . . . . . . . . . . . . . . 2.2.3 Systém ETARGET . . . . . . . . . . . . . . . . . . 2.2.4 Centrum.cz, Atlas.cz a systém adFox . . . . . . . . 2.3 Optimalizace pro vyhledávaˇce – SEO . . . . . . . . . . . . 2.3.1 On-page faktory . . . . . . . . . . . . . . . . . . . . 2.3.2 Off-page faktory . . . . . . . . . . . . . . . . . . . . 2.3.3 Hodnocen´ı stránek vyhledávaˇci – PageRank, S-rank 2.4 Rozhoduj´ıc´ı faktory pro internetovou reklamu . . . . . . . 2.4.1 PageRank . . . . . . . . . . . . . . . . . . . . . . . 2.4.2 S-rank . . . . . . . . . . . . . . . . . . . . . . . . . 2.4.3 Zamˇeˇren´ı stránky . . . . . . . . . . . . . . . . . . . 2.4.4 Návˇstˇevnost stránky . . . . . . . . . . . . . . . . . 2.4.5 Alexa rank . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

3 3 4 4 5 5 5 6 6 6 6 7 7 7 7 8 8

. . . . . . . .

9 9 9 10 10 11 11 11 12

. . . .

15 15 16 16 16

3 Anal´ yza a n´ avrh 3.1 Deklarace zámˇeru . . . . . . . . . . . . . . . . 3.2 Vymezen´ı rozsahu a funkc´ı – hranice systému 3.3 Doménov´ y model . . . . . . . . . . . . . . . . 3.4 Pˇr´ıpady uˇzit´ı . . . . . . . . . . . . . . . . . . 3.5 Relaˇcn´ı model databáze . . . . . . . . . . . . 3.6 Architektura aplikace - MVC . . . . . . . . . . 3.6.1 MVC paradox . . . . . . . . . . . . . . 3.7 Diagram tˇr´ıd . . . . . . . . . . . . . . . . . . 4 Pouˇ zit´ e technologie 4.1 XHTML - Extensible HyperText Markup 4.2 CSS - Cascading Style Sheets . . . . . . 4.3 PHP - Hypertext Preprocessor . . . . . . 4.4 V´ ybˇer vhodného PHP Frameworku . . . xi

. . . . . . . .

. . . . . . . .

. . . . . . . .

Language . . . . . . . . . . . . . . . . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . . . . . . . . . .

. . . . . . . .

. . . .

. . . . . . . . . . . . . . . .

. . . . . . . .

. . . .

. . . . . . . . . . . . . . . .

. . . . . . . .

. . . .

. . . . . . . . . . . . . . . .

. . . . . . . .

. . . .

. . . . . . . . . . . . . . . .

. . . . . . . .

. . . .

. . . . . . . . . . . . . . . .

. . . . . . . .

. . . .

. . . . . . . . . . . . . . . .

. . . . . . . .

. . . .

xii

OBSAH

4.5 4.6 4.7

4.4.1 Zend framework . . . . 4.4.2 Symfony . . . . . . . . 4.4.3 CakePHP . . . . . . . 4.4.4 Nette framework . . . 4.4.5 Koneˇcné rozhodnut´ı . MySQL . . . . . . . . . . . . 4.5.1 Databázová vrstva dibi JavaScript . . . . . . . . . . . 4.6.1 jQuery framework . . . AJAX . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

17 17 17 18 18 18 19 19 19 20

5 Implementace 5.1 Programován´ı v PHP 5 a Nette . . . . . . . . . . . . . . . . . . . 5.2 Ladˇen´ı aplikac´ı v Nette . . . . . . . . . . . . . . . . . . . . . . . . 5.3 Architektura aplikace v Nette . . . . . . . . . . . . . . . . . . . . 5.3.1 Model – vyuˇzit´ı dibi databázové vrstvy . . . . . . . . . . . 5.3.2 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.3.3 Presenter . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.3.3.1 Fáze v´ ykonná . . . . . . . . . . . . . . . . . . . . 5.3.3.2 Fáze zmˇen vnitˇrn´ıch stav˚ u . . . . . . . . . . . . . 5.3.3.3 Fáze vykreslovac´ı . . . . . . . . . . . . . . . . . . 5.3.3.4 Ukonˇcen´ı ˇcinnosti . . . . . . . . . . . . . . . . . . 5.3.4 Komponenty . . . . . . . . . . . . . . . . . . . . . . . . . . 5.4 Bˇeh aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.5 Bezpeˇcnost aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . 5.5.1 Oˇsetˇren´ı vstupu . . . . . . . . . . . . . . . . . . . . . . . . 5.5.1.1 Tvorba formuláˇr˚ u v Nette . . . . . . . . . . . . . 5.5.1.2 SQL injection . . . . . . . . . . . . . . . . . . . . 5.5.1.3 Cross-Site Scripting – XSS . . . . . . . . . . . . . 5.5.2 Adresáˇrov´ y pr˚ uchod . . . . . . . . . . . . . . . . . . . . . 5.6 V´ ybˇer názvu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.7 Uˇzivatelské rozhran´ı . . . . . . . . . . . . . . . . . . . . . . . . . 5.7.1 Grafická podoba aplikace . . . . . . . . . . . . . . . . . . . 5.8 Vybraná zaj´ımavá ˇreˇsen´ı . . . . . . . . . . . . . . . . . . . . . . . 5.8.1 Vytvoˇren´ı náhledu internetové stránky . . . . . . . . . . . 5.8.2 Vyuˇzit´ı JavaScriptového uˇzivatelského rozhran´ı jQuery UI 5.8.3 Vyuˇzit´ı JavaScriptové nápovˇedy jQuery qTip . . . . . . . 5.8.4 Z´ıskán´ı hodnot PageRank, S-rank, Alexa rank . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

23 23 24 24 25 25 26 26 26 27 27 27 27 28 28 28 29 29 29 30 30 30 31 31 31 32 32

6 Testov´ an´ı 6.1 Kognitivn´ı pr˚ uchod . . . . . 6.2 Akceptaˇcn´ı testy . . . . . . 6.3 Test uˇzivatelského rozhran´ı . 6.3.1 V´ ysledky testován´ı . 6.4 Testován´ı validity . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

35 35 35 35 36 36

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

OBSAH 6.5

xiii Testován´ı zobrazen´ı v r˚ uzn´ ych prohl´ıˇzeˇc´ıch . . . . . . . . . . . . . . . . .

37

7 Z´ avˇ er 39 7.1 Doporuˇcen´ı pro pokraˇcován´ı . . . . . . . . . . . . . . . . . . . . . . . . . 40 8 Seznam pouˇ zit´ ych zkratek

41

Literatura

43

A UML diagramy

45

B Zdrojov´ e k´ ody

47

C Uˇ zivatelsk´ a pˇ r´ıruˇ cka C.1 Registrace . . . . . . . . . . C.2 Pˇridán´ı stránky pro reklamu C.3 Vytvoˇren´ı nové nab´ıdky . . ´ cast na aukci/prodeji . . . C.4 Uˇ

53 53 53 54 54

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

D Instalaˇ cn´ı pˇ r´ıruˇ cka 55 D.1 Instalace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 D.2 Poˇzadavky na server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 E Obsah pˇ riloˇ zen´ eho CD

57

xiv

OBSAH

Seznam obr´ azk˚ u 2.1

Distribuce PageRanku odkazován´ım internetov´ ych stránek mezi sebou.[5]

7

3.1

P˚ uvodn´ı Model-View-Controller architektura.[12] . . . . . . . . . . . . .

13

4.1

Velk´ y test framework˚ u serveru root.cz[10] . . . . . . . . . . . . . . . . . .

21

5.1 5.2 5.3 5.4 5.5 5.6

Model-View-Presenter architektura v Nette Frameworku.[12] ˇ Zivotn´ ı cyklus presenteru.[13] . . . . . . . . . . . . . . . . . Logo aukˇcn´ıho systému. . . . . . . . . . . . . . . . . . . . . Grafická podoba v´ ypisu aukc´ı. . . . . . . . . . . . . . . . . . Ukázka v´ ybˇeru data pomoc´ı jQuery UI. . . . . . . . . . . . . Ukázka JavaScriptové nápovˇedy jQuery qTip. . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

33 33 33 33 33 33

A.1 A.2 A.3 A.4 A.5 A.6

Doménov´ y model aukˇcn´ıho systému. . . . Use case diagram nepˇrihláˇseného uˇzivatele. Use case diagram pˇrihláˇseného uˇzivatele. . Databázov´ y model aukˇcn´ıho systému. . . . Diagram tˇr´ıd - vrstva controll. . . . . . . . Diagram tˇr´ıd - vrstva model. . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

46 46 46 46 46 46

xv

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

xvi

´ U ˚ SEZNAM OBRAZK

Seznam tabulek 5.1

Ukázka vybran´ ych filtr˚ u ˇsablon. . . . . . . . . . . . . . . . . . . . . . . .

xvii

26

xviii

SEZNAM TABULEK

Kapitola 1 ´ Uvod Pojem internetov´ y marketing a optimalizace pro vyhledávaˇce jsou v dneˇsn´ı dobˇe velmi ˇcasto skloˇ nované pojmy. Stále v´ıce obchodn´ık˚ u se spoléhá na experty v tomto mladém oboru a uˇz dávno je pryˇc doba, kdy se vˇse toˇcilo jen kolem samotné tvorby internetov´ ych aplikac´ı a jej´ı grafické u ´pravy. Z tohoto d˚ uvodu stoupá poptávka po sluˇzbách, umoˇzn ˇuj´ıc´ıch efektivn´ı propagaci a zviditelnˇen´ı v kl´ıˇcov´ ych vyhledávaˇc´ıch na naˇsem trhu, jako jsou Google a Seznam. C´ılem této práce je ˇcásteˇcné nahlédnut´ı do problematiky internetového marketingu a implementován´ı aplikace, která umoˇzn´ı zakoupen´ı ˇci draˇzbu zpˇetn´ ych odkaz˚ u a obrázkové reklamy tzv. banner˚ u. Tato práce také zodpov´ı otázku, proˇc má nákup zpˇetn´ ych odkaz˚ u smysl a proˇc se uˇzivatel˚ um vyplat´ı za nˇe platit. Internetov´ ym marketingem se zab´ yvá prvn´ı ˇca´st práce. Shrnuje základn´ı typy reklamy, platebn´ı modely a nejv´ yznamnˇejˇs´ı reklamn´ı systémy na ˇceském trhu. Tato ˇca´st se také dot´ yká optimalizace pro vyhledávaˇce a definuje nˇekteré d˚ uleˇzité pojmy jako PageRank, S-rank ˇci Alexa rank. Dalˇs´ı kapitoly se vˇenuj´ı implementaci samotné aplikace, jej´ı u ´vodn´ı anal´ yze, realizaci a následnému testován´ı. Byla vyuˇzita technologie PHP ale i mnoho dalˇs´ıch, coˇz je podrobnˇe rozebráno v kapitole 4. Velká pozornost je také vˇenována v´ ybˇeru vhodného frameworku a srovnán´ı aktuálnˇe nejpouˇz´ıvanˇejˇs´ıch. Implementaˇcn´ı ˇca´st práce se op´ırá z velké ˇca´sti o zvolen´ y framework Nette a jeho inovace, které pˇrináˇs´ı. V´ ysledná aplikace vyuˇz´ıvá celou ˇradu modern´ıch ˇreˇsen´ı z r˚ uzn´ ych zdroj˚ u. Nejzaj´ımavˇejˇs´ım z nich byla také vˇenována pozornost. Mluv´ıme napˇr´ıklad o vytvoˇren´ı náhledu stránky, ˇci vyuˇzit´ı nˇekter´ ych velmi uˇziteˇcn´ ych JavaScriptov´ ych knihoven pro nápovˇedu ˇci vylepˇsen´ı uˇzivatelského rozhran´ı. V závˇeru je celá aplikace testována z r˚ uzn´ ych hledisek, z nichˇz je nejv´ıce prostoru vˇenováno testován´ı s uˇzivateli a optimalizaci pro nejrozˇs´ıˇrenˇejˇs´ı prohl´ıˇzeˇce.

1

2

´ KAPITOLA 1. UVOD

Kapitola 2 Internetov´ a reklama a marketing u n´ as Internetov´ y marketing nebo také on-line marketing je u nás velmi ˇsirok´ y pojem. Obecnˇe lze ˇr´ıci, ˇze se jedná o veˇskeré marketingové aktivity, které prob´ıhaj´ı prostˇrednictv´ım internetu a maj´ı za c´ıl tzv. konverzi. Konverze m˚ uˇze b´ yt pˇriveden´ı návˇstˇevn´ıka na stránky, odeslán´ı poptávkového formuláˇre ˇci nákup v internetovém obchodu. Pokud nahlédneme do historie on-line marketingu, zjist´ıme, ˇze je velmi krátká. Jeˇstˇe pˇred nˇekolika lety byla nejvˇetˇs´ı zbran´ı obrázková reklama tzv. bannery. Dnes internet nab´ız´ı mnoho marketingov´ ych moˇznost´ı a této problematice jsou vˇenovány celé publikace.

2.1

Platba za zobrazen´ı - PPV

Pojem PPV (Pay Per View), v pˇrekladu platba za zobrazen´ı, se objevuje pˇreváˇznˇe v souvislosti s bannerovou reklamou. Cena takové reklamy se jednoduˇse odv´ıj´ı od poˇctu jej´ıho zobrazen´ı na stránce. Toto je jeden z nejstarˇs´ıch model˚ u placen´ı za internetovou reklamu v˚ ubec. Cena za PPV se obvykle udává za tis´ıc zobrazen´ı, neboli CPT (Cost Per Thousand). Cena dále závis´ı na zamˇeˇren´ı internetové stránky a také na tzv. m´ıˇre prokliku1 (CTR – Click Through Rate). M´ıra prokliku se u bannerové reklamy pohybovala kolem 1%, dnes je to pˇribliˇznˇe 0,06 - 0,1%. To je nejsp´ıˇse hlavn´ı d˚ uvod, proˇc je tento model zastaral´ y a vyuˇz´ıvá se ˇc´ım dál t´ım mˇenˇe. Tento fenomén je naz´ yván bannerová slepota a jedná se o podvˇedomé ignorován´ı obrázkové reklamy. Bylo také zjiˇstˇeno, ˇze uˇzivatelé mnohem ˇcastˇeji klikaj´ı na statické obrázky neˇz na pohyblivé animace. M˚ uˇzeme se také setkat s term´ınem PPT (Pay Per Time) v doslovném pˇrekladu – platba za ˇcas. V takovém pˇr´ıpadˇe plat´ı zadavatel reklamy napˇr´ıklad za mˇes´ıc zobrazen´ı reklamy. Tento zp˚ usob m˚ uˇze b´ yt v nˇekter´ ych pˇr´ıpadech v´ yhodnˇejˇs´ı, pokud nen´ı pˇresnˇe 1

Pod´ıl n´ avˇstˇevn´ık˚ u, kteˇr´ı klikli na reklamu, udávan´ y v procentech.

3

´ REKLAMA A MARKETING U NAS ´ KAPITOLA 2. INTERNETOVA

4

známa návˇstˇevnost stránky a nebylo by snadné urˇcit, za jakou dobu by doˇslo k urˇcitému poˇctu zobrazen´ı. V´ yhoda tohoto systému spoˇc´ıvá ve velmi snadné implementaci. Staˇc´ı pouze zobrazovat bannery a poˇc´ıtat jejich naˇcten´ı ˇci zaznamenávat dobu jejich platnosti.

2.2

Kontextov´ a reklama a platba za kliknut´ı – PPC

Kontextová reklama a PPC (Pay Per Click) jsou dva zdánlivˇe odliˇsné pojmy. V praxi jdou ale ruku v ruce a jejich kombinace dnes tvoˇr´ı jednu z nejmocnˇejˇs´ıch marketingov´ ych strategi´ı na internetu. Jako kontextová reklama se oznaˇcuj´ı reklamn´ı sdˇelen´ı vkládaná do stránek v kontextu k jejich obsahu. V´ yraznˇe se tak zvyˇsuje jejich m´ıra prokliku. Zde uˇz hovoˇr´ıme o tzv. c´ılené reklamˇe, která mnohem v´ıce zasáhne c´ılovou skupinu návˇstˇevn´ık˚ u. Kontextovou reklamu poprvé masivnˇe vyuˇzila spoleˇcnost Google v roce 1998. Vyhledávaˇc v kontextu s poloˇzen´ ym dotazem zobrazil vhodné inzeráty. Pojem kontextová reklama proto b´ yvá ˇcasto spojován s vyhledávaˇci. PPC se dá povaˇzovat za druh´ y stupeˇ n kontextové reklamy. V´ yhoda platby za kliknut´ı je zˇrejmá, inzerent plat´ı aˇz ve chv´ıli, kdy na svou stránku pˇrivede potencionáln´ıho zákazn´ıka. Jelikoˇz návˇstˇevn´ıci pˇricházej´ı z kontextové reklamy, je v´ıce pravdˇepodobné, ˇze najdou to co hledaj´ı, dojde tedy k dosaˇzen´ı marketingového c´ıle. V dneˇsn´ı dobˇe jde do tohoto modelu aˇz tˇretina vˇsech financ´ı vyˇclenˇen´ ych na on2 line reklamu a existuj´ı velmi dobˇre zpracované implementace od nejv´ yznamnˇejˇs´ıch vyhledávaˇc˚ u na naˇsem trhu. Cena za kliknut´ı u kontextové reklamy se odv´ıj´ı hlavnˇe od konkurence daného kontextu a kl´ıˇcov´ ych slov3 . U velmi konkurenˇcn´ıch obor˚ u, jako napˇr´ıklad tvorba internetov´ ych stránek, jsou ochotni inzerenti zaplatit aˇz 20 Kˇc za jedno kliknut´ı. Cena, jakou jsou inzerenti ochotni zaplatit, také ovlivˇ nuje poˇrad´ı jejich reklamy vzhledem k ostatn´ım.

2.2.1

Google AdSense a Google AdWords

Spoleˇcnost Google je ve svˇetˇe rozhodnˇe nejv´ yznamnˇejˇs´ı spoleˇcnost´ı v oblasti kontextové ˇ PPC reklamy. Ceská republika je jednou z velmi mála zem´ı, kde se Google dˇel´ı o toto prvenstv´ı s jinou spoleˇcnost´ı - s vyhledávaˇcem Seznam. Google AdWords se zab´ yvá inzerc´ı zobrazovanou v kontextu s v´ ysledky vyhledáván´ı vyhledávaˇce Google. V tomto pˇr´ıpadˇe plat´ı inzerenti pˇr´ımo spoleˇcnosti Google. AdSense je oproti tomu novˇejˇs´ı systém zamˇeˇren´ y na ˇsiroké spektrum partnersk´ ych internetov´ ych stránek a m˚ uˇze zobrazovat reklamu prakticky kdekoli, kde to jej´ı provozovatel zaˇr´ıd´ı. Zde jde velká ˇca´st penˇez inzerenta vlastn´ıkovi stránek, na kter´ ych bylo na reklamu kliknuto. 2 3

V´ yzkum spoleˇcnosti MarketingSherpa’s, leden 2006.[16] Kontextov´ a reklama se zamˇeˇruje na urˇcitá slova nebo slovn´ı spojen´ı, kter´ ym ˇr´ıkáme kl´ıˇcov´ a slova.

´ REKLAMA A PLATBA ZA KLIKNUTÍ – PPC 2.2. KONTEXTOVA

5

V obou pˇr´ıpadech jde o nejv´ıce propracovan´ y systém kontextové reklamy u nás a obˇe tyto sluˇzby slouˇz´ı jako velmi siln´ y nástroj on-line marketingu ve svˇetˇe. Je také moˇzné jejich propojen´ı se sluˇzbou Google Analytics4 .

2.2.2

Seznam.cz a Sklik

Seznam byl jeden z prvn´ıch ˇcesk´ ych vyhledávaˇc˚ u, kter´ y kombinoval vyhledáván´ı s katalogem firem, zpravodajstv´ım, televizn´ım programem, pˇredpovˇed’´ı poˇcas´ı, e-mailem a ˇradou dalˇs´ıch sluˇzeb. Google tyto sluˇzby sice také nab´ız´ı, ale jsou pro uˇzivatele v´ıce skryté. V ˇza´dném pˇr´ıpadˇe nechci zpochybˇ novat kvalitu sluˇzeb vyhledávaˇce Seznam, nicménˇe jeho popularitˇe znaˇcnˇe nahrála ˇrada skuteˇcnost´ı. Mnoho lid´ı si dodnes mysl´ı, ˇze je Seznam jedin´ y a ten nejsprávnˇejˇs´ı vyhledávaˇc a b´ yvá ˇcasto synonymem internetu. Je to zp˚ usobeno pˇreváˇznˇe malou internetovou vzdˇelanost´ı ˇceského obyvatelstva. K tomuto postaven´ı jen pˇrisp´ıvá fakt, ˇze je Seznam nastaven jako domovská stránka v mnoha firmách a internetov´ ych kavárnách. Seznam má sv˚ uj vlastn´ı systém PPC kontextové reklamy s názvem Sklik, kter´ y je pˇr´ımou konkurenc´ı Google AdWords. Reklama se tedy zobrazuje s v´ ysledky vyhledáván´ı. Tuto sluˇzbu rozhodnˇe nelze pˇrehl´ıˇzet, jelikoˇz je Seznam nejvyuˇzivanˇejˇs´ım vyhledávaˇcem u nás. V praxi se ˇcasto kombinuje kontextová reklama od Seznamu s tou od Googlu.

2.2.3

Syst´ em ETARGET

ˇ e republice je bezesporu ETARGET. Tˇret´ı nejv´ yznamnˇejˇs´ı spoleˇcnost´ı v oblasti PPC v Cesk´ Na rozd´ıl od sv´ ych dvou nejvˇetˇs´ıch konkurent˚ u nemá ETARGET k dispozici ˇza´dné vyhledáván´ı ani portál5 . Poskytovatel této sluˇzby vsadil na kvalitn´ı partnerské weby, mezi které patˇr´ı velmi v´ yznamné a navˇstˇevované servery. Jmenujme napˇr´ıklad zive.cz, idnes.cz nebo nova.cz. Tento systém se snaˇz´ı konkurovat sluˇzbˇe Google AdSene a jeho hlavn´ı filosofi´ı je snaha o zobrazen´ı reklamy na velmi d˚ uvˇeryhodn´ ych m´ıstech.

2.2.4

Centrum.cz, Atlas.cz a syst´ em adFox

Dalˇs´ım hráˇcem na poli PPC reklamy u nás je systém adFox poskytovan´ y spoleˇcnost´ı Centrum Holdings, která vznikla roku 2008 slouˇcen´ım dvou spoleˇcnost´ı Atlas.cz a NetCentrum. Spojily se tak dva v´ yznamné portály centrum.cz a atlas.cz. Tato f˚ uze byla reakc´ı na silné postaven´ı spoleˇcnost´ı Seznam a Google na naˇsem trhu. Tato sluˇzba se v´ıce podobá sluˇzbˇe Google AdSense, tedy zobrazován´ı na stránkách partner˚ u a rozdˇelován´ı provize. Oproti systému ETARGET nedisponuje adFox kvalitn´ımi referencemi a reklama se zobrazuje sp´ıˇse na ménˇe d˚ uvˇeryhodn´ ych stránkách. 4

Sluˇzba poskytuj´ıc´ı komplexn´ı statistiky návˇstˇevnosti a dalˇs´ı sluˇzby jako napˇr´ıklad statistiku kl´ıˇcov´ ych slov, pˇres kter´ a n´ avˇstˇevn´ıci pˇrich´ azej´ı nebo mˇeˇren´ı doby, kterou uˇzivatelé tráv´ı na stránkách. 5 Internetov´ a str´ anka, kter´ a ˇcasto slouˇz´ı jako domovská stránka a sdruˇzuje mnoho aktuáln´ıch informac´ı a sluˇzeb na hlavn´ı str´ ance.

6


Aˇckoli tato sluˇzba nen´ı bez v´ yznamu, s pˇr´ıchodem konkurenˇcn´ıho systému Sklik, popularitˇe ETARGETu a poˇceˇstˇen´ı systému Google AdSense jej´ı postaven´ı velmi utrpˇelo a nadále klesá. AdFox nepˇrináˇs´ı oproti konkurenci ˇza´dné v´ yhody jen je jednou z mála alternativ.

2.3

Optimalizace pro vyhled´ avaˇ ce – SEO

Optimalizace pro vyhledávaˇce (SEO - Search Engine Optimization) b´ yvá ˇcasto u ´plnˇe ’ zamˇen ˇována s internetov´ ym marketingem. Nen´ı to tak velká chyba, nebot SEO je vedle kontextové reklamy hlavn´ı pil´ıˇr on-line marketingu. Jedná se o ˇcinnosti, d´ıky kter´ ym stoupá pozice internetové stránky ve v´ ysledc´ıch vyhledáván´ı na urˇcitá slovn´ı spojen´ı. O této pozici rozhoduje celá ˇrada faktor˚ u, které m˚ uˇzeme ˇclenit do dvou skupin: off-page a on-page. Problematika optimalizace pro vyhledávaˇce je tak obsáhlá, ˇze pˇresahuje rámec této práce, proto pouze shrnu nejd˚ uleˇzitˇejˇs´ı skuteˇcnosti, kter´ ych se dot´ yká implementovaná aplikace.

2.3.1

On-page faktory

Do této kategorie ˇrad´ıme vˇse, co se pˇr´ımo vyskytuje na internetové stránce. Mluv´ıme zde o kvalitˇe psaného textu, mnoˇzstv´ı odkaz˚ u vedouc´ıch na extern´ı stránky, správné struktuˇre zdrojového kódu, metadatech, správnˇe zvolen´ ych nadpisech, titulc´ıch stránek a podobnˇe. Kvalifikovaná firma, jej´ımˇz oborem je SEO, se jako prvn´ı zab´ yvá tˇemito faktory a ˇcasto se stává, ˇze vytvoˇr´ı celou stránku znovu.

2.3.2

Off-page faktory

Off-page se dá volnˇe pˇreloˇzit jako mimo stránku, tedy vˇsechny okolnosti, které se pˇr´ımo nevyskytuj´ı na webové stránce. Mezi tyto faktory patˇr´ı zejména mnoˇzstv´ı extern´ıch odkaz˚ u smˇeˇruj´ıc´ıch na danou stránku. Tyto odkazy se naz´ yvaj´ı zpˇetné. U zpˇetn´ ych odkaz˚ u nesledujeme jen jejich poˇcet, ale také d˚ uvˇeryhodnost a zamˇeˇren´ı stránky, na které odkaz leˇz´ı. Sledujeme také tzv. anchor text, tedy textové sdˇelen´ı odkazu. Rozd´ıl je na prvn´ı pohled zˇrejm´ y prodej kvalitn´ıch motorek“ sdˇel´ı vice neˇz ” napˇr. kliknˇete zde“. I toho si vyhledávaˇce vˇs´ımaj´ı. ”

2.3.3

Hodnocen´ı str´ anek vyhled´ avaˇ ci – PageRank, S-rank

Vˇsechny v´ yˇse zm´ınˇené on-page i off-page faktory vyhledávaˇce sleduj´ı a pˇridˇeluj´ı internetov´ ym stránkám urˇcité hodnocen´ı tzv. rank. Oba nejvˇetˇs´ı vyhledávaˇce na naˇsem trhu maj´ı svá hodnocen´ı - Google má PageRank, Seznam S-rank.

2.4. ROZHODUJÍCÍ FAKTORY PRO INTERNETOVOU REKLAMU

7

Obˇe tyto hodnoty jsou kl´ıˇcové v oblasti SEO. Ovlivˇ nuj´ı pozici stránky ve v´ ysledc´ıch vyhledáván´ı a také jsou to ukazatele celkové d˚ uvˇeryhodnosti ˇci kvality. Jak Google tak Seznam pouˇz´ıvaj´ı zcela odliˇsné algoritmy pro v´ ypoˇcet sv´ ych rank˚ u, kompetn´ı vzorece nejsou známy.

2.4

Rozhoduj´ıc´ı faktory pro internetovou reklamu

Tyto okolnosti vypl´ yvaj´ı hlavnˇe z princip˚ u optimalizace pro vyhledávaˇce a základn´ıch marketingov´ ych strategi´ı na internetu. Následuj´ıc´ı ˇra´dky se budou pˇr´ımo t´ ykat nejd˚ uleˇzitˇejˇs´ıch faktor˚ u ovlivˇ nuj´ıc´ıch cenu reklamy.

2.4.1

PageRank

PageRank je ˇc´ıslo od 1 do 10 a z pˇredchoz´ı podkapitoly v´ıme, ˇze je to hodnocen´ı stránek vyhledávaˇcem Google podle celé ˇrady faktor˚ u. Zde si odpov´ıme na otázku, proˇc má PageRank pro zadavatele internetové reklamy tak velk´ y v´ yznam. Asi hlavn´ım d˚ uvodem je systém pˇredáván´ı rank˚ u mezi stránkami. Pokud stránka s vysok´ ym PageRankem odkazuje na stránku s n´ızk´ ym, pˇredá tak ˇca´st svého hodnocen´ı a slabˇe hodnocené stránce to pom˚ uˇze. Google totiˇz pˇredpokládá, ˇze dobˇre hodnocené – d˚ uvˇeryhodné stránky odkazuj´ı na kvalitn´ı materiály (viz obrázek 2.1). Je tedy zˇrejmé, ˇze cena zpˇetného odkazu na stránce se odv´ıj´ı z velké ˇcásti od PageRanku.

2.4.2

S-rank

S-rank pˇredstavuje stejnˇe jako PageRank celkové hodnocen´ı stránky a udává se od 0 do 100. V´ıme jen, ˇze na rozd´ıl od PageRanku je v´ıce zaloˇzen na off-page faktorech. Základn´ı princip by mˇel b´ yt stejn´ y. Hodnocen´ı S-rank je druhá nejd˚ uleˇzitˇejˇs´ı hodnota, která udává kvalitu internetová stránky, a pro inzerenty má velk´ y v´ yznam.

2.4.3

Zamˇ eˇ ren´ı str´ anky

Z hlediska reklamy je zamˇeˇren´ı internetové stránky kl´ıˇcové. Zpˇetn´ y odkaz bude m´ıt pro vyhledávaˇce vˇetˇs´ı váhu a obrázková reklama zaznamená mnohem vˇetˇs´ı m´ıru prokliku. Je proto velmi d˚ uleˇzité d˚ ukladnˇe ohraniˇcit jednotlivé kategorie stránek v implementovaném aukˇcn´ım systému tak, aby kaˇzd´ y web naˇsel svou kategorii a byly mezi nimi jasnˇe dané hranice.

8


Obrázek 2.1: Distribuce PageRanku odkazován´ım internetov´ ych stránek mezi sebou.[5]

2.4.4

N´ avˇ stˇ evnost str´ anky

Je nasnadˇe, ˇze návˇstˇevnost stránky bude inzerenty velmi zaj´ımat. Stránka s obrovskou základnou pravideln´ ych návˇstˇevn´ık˚ u má také velk´ y potenciál z´ıskat vysok´ y PageRank i S-rank a bannerová reklama i PPC zaznamená v´ıce kliknut´ı. Návˇstˇevnost stránky s sebou ale pˇrináˇs´ı jeden nemal´ y problém. Jak ji zjistit? Návˇstˇevnost nen´ı veˇrejnˇe dostupná informace a ˇcasto ji znaj´ı jen samotn´ı majitelé ˇci správci stránek. PageRank nebo S-rank nám o návˇstˇevn´ıc´ıch neˇreknou nic a my se tak mus´ıme spoléhat na informace od inzerenta. Jedin´ y extern´ı u ´daj, kter´ y souvis´ı s návˇstˇevnost´ı stránek, je tzv. Alexa rank.

2.4.5

Alexa rank

Alexa rank poskytuje kalifornská spoleˇcnost Alexa Internet zaloˇzena roku 1996. Tento rank je zaloˇzen na objemu datového pˇrenosu stránky, a proto pˇr´ımo odráˇz´ı návˇstˇevnost. Tento datov´ y pˇrenos se mˇeˇr´ı pomoc´ı speciáln´ı liˇsty, kterou maj´ı v prohl´ıˇzeˇci nainstalovanou uˇzivatelé internetu. Alexa rank je ˇc´ıslo, jehoˇz nejniˇzˇs´ı hodnota je 1 a nejvyˇsˇs´ı se pohybuje v ˇra´dech milion˚ u. Rozd´ıl oproti jin´ ym rank˚ um je ten, ˇze ˇc´ım niˇzˇs´ı Alexa rank stránka má, t´ım lépe. Napˇr´ıklad, pokud má internetová stránka Alexa rank 50 000 bude m´ıt mnohem vˇetˇs´ı návˇstˇevnost neˇz stránka s rankem 7 000 000.

2.4. ROZHODUJÍCÍ FAKTORY PRO INTERNETOVOU REKLAMU

9

Problém tohoto hodnocen´ı je jistˇe jeho ˇca´steˇcná neobjektivnost. Ta je zp˚ usobena nerovnomˇern´ ym geografick´ ym rozloˇzen´ım uˇzivatel˚ u s nainstalovanou Alexa liˇstou. Nejv´ıce takov´ ych uˇzivatel˚ u nalezneme bezesporu ve Spojen´ ych státech a v západn´ı Evropˇe. Dalˇs´ı nev´ yhodou jistˇe je, ˇze drtivá vˇetˇsina internetov´ ych uˇzivatel˚ u, kteˇr´ı nerozum´ı problematice a nezaj´ımá je, nemá nainstalovanou Alexa liˇstu. Tito lidé pˇritom mohou ˇcasto pˇredstavovat c´ılovou skupinu. Spoleˇcnost Alexa Internet sice tvrd´ı, ˇze vyuˇz´ıvá i jiné zdroje ke zjiˇstˇen´ı návˇstˇevnosti, nikde vˇsak neuvád´ı jaké. Pˇres vˇsechny zjevné nev´ yhody se Alexa rankem dá ˇr´ıdit a m˚ uˇzeme alespoˇ n rámcovˇe odhadnout, jaká je návˇstˇevnost ciz´ı stránky.

10


Kapitola 3 Anal´ yza a n´ avrh V této kapitole se zamˇeˇr´ıme na vlastn´ı zámˇer celého systému a pˇresné vymezen´ı jeho funkc´ı. Pro anal´ yzu byly vyuˇzity základn´ı modely, které popisuj´ı aplikaci jak z hlediska datové struktury, tak z hlediska uˇzivatele.

3.1

Deklarace z´ amˇ eru

C´ılem projektu je vytvoˇren´ı aukˇcn´ıho systému bannerové reklamy a zpˇetn´ ych odkaz˚ u. Aplikace bude také umoˇzn ˇovat prodej za pevné ceny. Uˇzivatelé budou m´ıt moˇznost po registraci nab´ızet prostor na sv´ ych stránkách a inzerenti, kteˇr´ı hledaj´ı stránky pro svou reklamu, budou moci pˇrehlednˇe procházet nab´ıdky. Pokud uˇzivatel zv´ıtˇez´ı na aukci (jeho nab´ıdka bude nejvyˇsˇs´ı v dobˇe ukonˇcen´ı aukce), nebo reklamu zakoup´ı, budou mu zaslány kontaktn´ı informace prodejce a naopak prodejci bude zaslán kontakt na kupuj´ıc´ıho. Toto bude jediná cesta, jak se budou moci uˇzivatelé kontaktovat mezi sebou, pokud nepoˇc´ıtáme komentáˇre pod nab´ıdkami. Uˇzivatelé tedy nebudou moci snadno systém obej´ıt a kontaktovat se tak sami mezi sebou. Cel´ y projekt bude realizován jako internetová aplikace, která pobˇeˇz´ı na serveru Apache u extern´ı hostingové spoleˇcnosti1 .

3.2

Vymezen´ı rozsahu a funkc´ı – hranice syst´ emu

Systém umoˇzn´ı uˇzivatel˚ um bezplatnou registraci a bezpeˇcné pˇrihláˇsen´ı do aplikace. Pˇrihláˇsen´ y uˇzivatel bude jednoznaˇcnˇe identifikovateln´ y a bude m´ıt následuj´ıc´ı moˇznosti: • Procházen´ı a filtrace jiˇz prob´ıhaj´ıc´ıch nab´ıdek. • Zaloˇzen´ı nové aukce nebo prodeje za pevnou cenu a následnou editaci nebo mazán´ı. 1

Spoleˇcnost nab´ızej´ıc´ı prostor pro internetové stránky na serveru s nainstalovan´ ym PHP a datab´ azov´ ym serverem.

11

´ ´ KAPITOLA 3. ANALYZA A NAVRH

12

• Pˇridán´ı nové internetové stránky pro reklamu, jej´ı editace, mazán´ı a aktualizace u ´daj˚ u. • Editace vlastn´ıho profilu a osobn´ıch u ´daj˚ u. ´ cast na aukci formou aukˇcn´ıho pˇr´ıhozu, zakoupen´ı za kup hned“ cenu nebo • Uˇ ” ´ cast na prodeji za pevnou cenu prob´ pˇridán´ı komentáˇre. Uˇ ıhá zakupován´ım tzv. slot˚ u2 . Systém bude automaticky zajiˇst’ovat: • Rozes´ılán´ı informaˇcn´ıch e-mail˚ u po ukonˇcen´ı aukce, pˇrehozen´ı uˇzivatele a nákupu slotu. • Ukonˇcován´ı nab´ıdek po uplynut´ı jejich doby trván´ı. • Zjiˇst’ován´ı kl´ıˇcov´ ych informac´ı pro internetovou reklamu na nab´ızené stránce, viz kapitola 2.4. • Automatické vytváˇren´ı náhledu pˇridan´ ych stránek. Ovládán´ı systému by mˇelo b´ yt intuitivn´ı a vˇsechny poloˇzky i akce budou ˇrádnˇe popsány formou textov´ ych instrukc´ı a nápovˇedy pˇr´ımo v aplikaci.

3.3

Dom´ enov´ y model

Doménov´ y model (pˇr´ıloha A.1) je konceptuáln´ı datov´ y model a slouˇz´ı pˇredevˇs´ım k modelován´ı reality. Jeho smysl spoˇc´ıvá hlavnˇe v ucelen´ı pˇredstavy logick´ ych celk˚ u systému a jejich d˚ uleˇzit´ ych atribut˚ u. Na prvn´ı pohled je zˇrejmé, ˇze napˇr´ıklad adresa uˇzivatele nejsp´ıˇse nebude realizována jako samostatná databázová tabulka, nebot’ je ve vztahu 1:1 s uˇzivatelem. Stejnˇe tak tˇr´ıdy n´ ahled str´ anky a obr´ azek profilu nám ˇr´ıkaj´ı pouze, jaké informace budou pro systém d˚ uleˇzité, ale nic o konkrétn´ı implementaci.

3.4

Pˇ r´ıpady uˇ zit´ı

Diagramy pˇr´ıpad˚ u uˇzit´ı (pˇr´ılohy A.2 a A.3) zobrazuj´ı jednotlivé u ´kony systému a jeho chován´ı z hlediska uˇzivatele. Systém rozliˇsuje dva hlavn´ı typy aktér˚ u, uˇzivatele pˇrihláˇseného a nepˇrihláˇseného. Tˇret´ım aktérem je ˇcas. Nepˇrihláˇsen´ y uˇzivatel m˚ uˇze procházet vˇsechny nab´ıdky i zobrazovat jejich detaily, nem˚ uˇze vˇsak nijak zasáhnout do pr˚ ubˇehu prodeje ani pˇridat komentáˇr. Tento uˇzivatel nemá pˇr´ıstup do ˇzádn´ ych jin´ ych sekc´ı, m˚ uˇze se pouze pˇrihlásit nebo registrovat. Pˇrihláˇsen´ y uˇzivatel jiˇz má zpˇr´ıstupnˇeny vˇsechny funkce systému popsané v kapitole 3.2. Uˇzivatel je automaticky odhláˇsen po delˇs´ı neaktivitˇe. 2

Uˇzivatelé mohou nab´ıdnout v´ıce stejn´ ych reklamn´ıch prostor˚ u v rámci jedné nab´ıdky, které oznaˇcujeme jako sloty.

ˇ Í MODEL DATABAZE ´ 3.5. RELACN

3.5

13

Relaˇ cn´ı model datab´ aze

Relaˇcn´ı databázov´ y model (pˇr´ıloha A.4) pˇresnˇe popisuje strukturu databázov´ ych tabulek a relac´ı mezi nimi. Rozd´ıl oproti doménovému modelu je hlavnˇe závislost na konkrétn´ı implementaci. Zde jiˇz mus´ıme zohledˇ novat potˇreby systému, takˇze se zde objevuj´ı unikátn´ı atributy jako id a ostatn´ı ciz´ı kl´ıˇce. Vid´ıme také, ˇze v databázi neevidujeme náhled stránky ani obrázek profilu, nebot’ jsem se rozhodl tyto obrázky jednoznaˇcnˇe identifikovat jejich názvem a ukládat pˇr´ımo na disk. Datovou integritu pˇritom zajiˇst’uje sám systém. Dále bych se pozastavil u slouˇcen´ı adresy a uˇzivatele do jedné tabulky users. Toto slouˇcen´ı je dáno vztahem 1:1, tedy jeden uˇzivatel má jednu adresu, a proto nen´ı tˇreba dalˇs´ı tabulka.

3.6

Architektura aplikace - MVC

Zkratkou MVC3 se oznaˇcuje tˇr´ıvrstvá architektura aplikac´ı, která se tˇeˇs´ı obrovské oblibˇe pˇreváˇznˇe u internetov´ ych projekt˚ u. Tuto architekturu poprvé popsal Trygve Reenskaug v roce 1979 a vstoupil tak do dˇejin programován´ı jako takového. Architektura MVC dˇel´ı aplikaci do tˇr´ı vrstev – model, view a controller (viz obrázek 3.1). Aplikaˇcn´ı logiku oddˇelenou od uˇzivatelského rozhran´ı naz´ yváme model. Uˇzivatelské rozhran´ı potom dále dˇel´ıme na vrstvu, která obstarává v´ ystup na monitor (view) a vrstvu zpracovávaj´ıc´ı vstupy klávesnice a myˇsi (controller). V této architektuˇre model o existenci view ˇci controlleru v˚ ubec nev´ı. View prezentuje data od modelu a ve chv´ıli, kdy uˇzivatel nˇejak zareaguje, pˇrevezme akci controller a vyˇza´dá si od modelu nová data. Takto je MVC architektura chápána vˇetˇsinou v´ yvojáˇr˚ u dnes. Na pap´ıˇre je vˇse v poˇra´dku, ale v praxi jsou hranice mezi jednotliv´ ymi vrstvami ˇcasto velmi nejasné, hovoˇr´ıme o tzv. MVC paradoxu.

3.6.1

MVC paradox

Jako pˇr´ıklad si vezmˇeme obyˇcejn´ y v´ ypis ˇclánk˚ u na blogu. Teorie hovoˇr´ı následovnˇe: • Model má metodu, která vrát´ı vˇsechny ˇclánky (napˇr´ıklad z databáze). • Controller tuto metodu zavolá a z´ıskan´ y seznam pˇredá do view. • View se postará o vykreslen´ı. V praxi se ale ukáˇze, ˇze budeme cht´ıt ˇclánky nav´ıc stránkovat, ˇradit podle r˚ uzn´ ych kategori´ı, omezit jejich v´ ybˇer ˇci vypsat 10 nejˇctenˇejˇs´ıch na hlavn´ı stránce. Toto vˇsechno jsou podle teorie MVC poˇzadavky prezenˇcn´ı logiky a model nemus´ı v˚ ubec zaj´ımat. Bylo 3

Model-View-Controller.


14

by jistˇe nelogické v praxi pokaˇzdé z´ıskávat od modelu vˇsechny ˇclánky a nepotˇrebné zahazovat. V praxi se tedy ˇcasto rezignuje nad MVC a do modelu se pˇridávaj´ı nejr˚ uznˇejˇs´ı metody, které vracej´ı ˇclánky tak, jak je konkrétnˇe poˇzaduje view. Vhodnˇejˇs´ı je tedy MVC vn´ımat obecnˇeji, jako princip maj´ıc´ı za c´ıl pˇremostit mezeru mezi lidsk´ ym mentáln´ım modelem a modelem poˇc´ıtaˇcov´ ym, jehoˇz ideálu zat´ım nebylo dosaˇzeno.[12] Chtˇel jsem hlavnˇe poukázat na skuteˇcnost, ˇze MVC architektura nen´ı v praxi ˇza´dn´ y dogmatick´ y pojem a jej´ı implementace se mohou podstatnˇe liˇsit. V implemetované aplikaci proto vyuˇz´ıvám jej´ı obdobu.

3.7

Diagram tˇ r´ıd

Diagram tˇr´ıd pˇredstavuje statick´ y pohled na systém. Zobrazuje zejména tˇr´ıdy jako typy objekt˚ u a vztahy, které mezi nimi existuj´ı. Tento diagram m˚ uˇze b´ yt ˇca´steˇcnˇe závisl´ y na implementaci, tedy na konkrétn´ım programovac´ım jazyce ˇci potˇrebách frameworku. Náˇs diagram tˇr´ıd je velmi specifick´ y, jelikoˇz byl pro realizaci vybrán framework Nette (v´ıce o architektuˇre frameworku v kapitole 5). Model obsahuje v horn´ı ˇca´sti nˇekolik nejd˚ uleˇzitˇejˇs´ıch tˇr´ıd Nette, od kter´ ych dˇed´ı nebo je implementuj´ı námi napsané objekty. Pro jednoduchost byly uvedeny jen jejich názvy. Pro zjednoduˇsen´ı byl diagram tˇr´ıd rozdˇelen na dvˇe ˇca´sti. Prvn´ı pˇredstavuje vrstvu controll, tedy presentery a jednu komponentu aukceTable (viz pˇr´ıloha A.5). Druhá ˇca´st pˇredstavuje model aplikace neboli tˇr´ıdy, které komunikuj´ı s databáz´ı (pˇr´ıloha A.6).

ˇ ÍD 3.7. DIAGRAM TR

Obrázek 3.1: P˚ uvodn´ı Model-View-Controller architektura.[12]

15

16


Kapitola 4 Pouˇ zit´ e technologie V následuj´ıc´ı kapitole se pokus´ım shrnout vˇsechny technologie, které byly pro tvorbu systému vyuˇzity. Velká pozornost bude také vˇenována v´ ybˇeru vhodného PHP frameworku.

4.1

XHTML - Extensible HyperText Markup Language

Jedná se o znaˇckovac´ı jazyk pro tvorbu statick´ ych internetov´ ych stránek vyvinut´ y konsorciem 1 W3C . XHTML je následn´ıkem jazyka HTML, jehoˇz v´ yvoj byl ukonˇcen v roce 1999 verz´ı 4.01, a v´ıce se pˇribliˇzuje podm´ınkám XML dokument˚ u. Tento jazyk popisuje strukturu obsahu, ale neˇr´ıká nic o jeho koneˇcném vzhledu. XHTML syntaxi rozum´ı internetové prohl´ıˇzeˇce a veˇsker´ y i dynamick´ y obsah se nakonec pˇrevede do této podoby. Rozliˇsujeme tˇri druhy XHTML dokument˚ u, neboli 2 DTD , která se udává na zaˇcátku dokumentu. ˇ e strukturáln´ı znaˇckován´ı, neobsahuje ˇza´dné znaˇcky spojené • XHTML 1.0 Strict - Cistˇ s formátován´ım vzhledu. Pˇredpokládá se vyuˇzit´ı spoleˇcnˇe s CSS. • XHTML 1.0 Transitional - Pˇrechodn´ y typ mezi HTML a XHTML. Povoluje atributy pro formátován´ı textu a odkaz˚ u v elementu body a nˇekteré dalˇs´ı atributy. Je vhodn´ y pro formátován´ı stránek vytváˇren´ ych pro starˇs´ı prohl´ıˇzeˇce. • XHTML 1.0 Frameset - Tento typ podporuje dnes jiˇz pˇrekonané rámce, které se hojnˇe vyuˇz´ıvaly v minulosti. V dneˇsn´ı dobˇe se jiˇz nepouˇz´ıvá. Rozhodl jsem se psát práci v modernˇejˇs´ım XHTML 1.0 Strict, jelikoˇz je to z technologického hlediska nejˇcistˇs´ı pˇr´ıstup. Nˇekteré prohl´ıˇzeˇce, zejména Internet Explorer, pracuj´ı se starˇs´ım XHTML 1.0 Transitional v takzvaném Quirks módu, kter´ y se snaˇz´ı b´ yt kompatibiln´ı s pˇredchoz´ımi verzemi HTML. To ˇcasto zp˚ usob´ı, ˇze je interpretace 1 2

Mezin´ arodn´ı konsorcium, které vyv´ıj´ı webové snadtardy. (www.w3.org) Document Type Definition.

17

ˇ E ´ TECHNOLOGIE KAPITOLA 4. POUZIT

18

pouˇzit´ ych kaskádov´ ych styl˚ u rozd´ılná od jin´ ych prohl´ıˇzeˇc˚ u, které tyto dokumenty vykresluj´ı ve Standards módu. Psan´ım dokumentu v XHTML 1.0 Strict se tedy vyhneme spoustˇe problém˚ u spojen´ ych s optimalizac´ı pro r˚ uzné internetové prohl´ıˇzeˇce.

4.2

CSS - Cascading Style Sheets

Jazyk kaskádov´ ych styl˚ u popisuje zp˚ usob zobrazen´ı stránek napsan´ ych v HTML, XHTML ˇci XML jazyce. B´ yvá um´ıstˇen v samostatném souboru a k dokumentu se pˇripojuje v jeho hlaviˇcce. K dokumentu m˚ uˇze b´ yt pˇripojeno v´ıce verz´ı, kaˇzdá pro jiné médium (obrazovka, tisk, PDA). Velk´ ym neˇsvarem CSS je optimalizace pro r˚ uzné internetové prohl´ıˇzeˇce, které je ˇcasto interpretuj´ı rozd´ılnˇe. V´ yvojáˇri proto nˇekdy p´ıˇs´ı zvláˇstn´ı CSS napˇr´ıklad pro Internet Explorer, nebo se uchyluj´ı k nevalidn´ım praktikám v podobˇe CSS hack˚ u.

4.3

PHP - Hypertext Preprocessor

Jedná se o platformovˇe nezávisl´ y skriptovac´ı jazyk slouˇz´ıc´ı primárnˇe k tvorbˇe dynamick´ ych internetov´ ych stránek. PHP skripty jsou vˇetˇsinou provádˇeny na stranˇe serveru a vrac´ı v´ ysledek v podobˇe XHTML, HTML ˇci XML dokumentu. Tento jazyk jsem pro tvorbu aplikace zvolil zejména pro jednoduchost jeho syntaxe a podporu. Je to u nás nejpouˇz´ıvanˇejˇs´ı jazyk pro tvorbu stránek, i kdyˇz má oproti alternativám celou ˇradu nev´ yhod. Jmenujme napˇr´ıklad nejvˇetˇs´ı z nich a to, ˇze jazyk PHP nebyl od zaˇcátku navrˇzen jako objektov´ y. Podpora objektového programován´ı se objevila teprve ve verzi 5 (vydáno v roce 2004) a s ohledem na zpˇetnou kompatibilitu se pot´ yká s celou ˇradou problém˚ u. Dalˇs´ı nev´ yhodou je neparalelismus neboli absence programov´ ych vláken. Z jin´ ych programovac´ıch jazyk˚ u jmenujme napˇriklad JSP3 a jeho pˇr´ımou konkurenci ASP.NET4 . Tyto jazyky jsou velmi robustn´ı a hod´ı se na v´ yvoj aplikac´ı velkého rozsahu. 5 Dalˇs´ı alternativou je RoR , které se u v´ yvojáˇr˚ u tˇeˇs´ı stále vˇetˇs´ı oblibˇe. Srovnán´ı jednotliv´ ych technologi´ı je velmi oˇsemetné téma a bylo by tˇreba vˇenovat mu vˇetˇs´ı pozornost. Toto porovnán´ı, aby mohlo b´ yt objektivn´ı, také vyˇzaduje mnoho znalost´ı a zkuˇsenost´ı, které si vyˇzaduj´ı d˚ ukladn´ y pr˚ uzkum. Ten by byl nad rámec této práce.

4.4

V´ ybˇ er vhodn´ eho PHP Frameworku

Programován´ı webov´ ych aplikac´ı zaˇz´ıvá v posledn´ı dobˇe nov´ y siln´ y trend – frameworky. Tyto frameworky se snaˇz´ı nab´ızet jiˇz hotová ˇreˇsen´ı ˇcast´ ych programátorsk´ ych problém˚ u 3

Java Server Pages firmy Sun Microsystems Active Server Pages a framework .NET firmy Microsoft 5 Ruby on Rails - Programovac´ı jazyk Ruby dohromady s frameworkem Rails 4

´ ER ˇ VHODNEHO ´ 4.4. VYB PHP FRAMEWORKU

19

a ˇsetˇr´ı tak mnoho ˇra´dek kódu, které by musel v´ yvojáˇr psát pro kaˇzdou aplikaci znovu. 6 Tomuto pˇr´ıstupu ˇr´ıkáme DRY . Pokud budeme mluvit o PHP frameworc´ıch, budeme urˇcitˇe hovoˇrit o sadˇe skript˚ u napsan´ ych v PHP. Tˇechto framework˚ u je celá ˇrada od drobn´ ych knihoven aˇz po velké kostry aplikac´ı se svou vlastn´ı architekturou. Já se zamˇeˇr´ım na ty nejpouˇz´ıvanˇejˇs´ı a pokus´ım se shrnout jejich klady i zápory.

4.4.1

Zend framework

Pˇri v´ ybˇeru vhodného frameworku pro internetovou aukci byl Zend prvn´ım kandidátem. Bylo to dáno hlavnˇe t´ım, ˇze se jedná o nejznámˇejˇs´ı framework, kter´ y je podporován samotn´ ymi v´ yvojáˇri PHP. V´ yvoj tohoto frameworku zaˇcal roku 2005 a v souˇcastné dobˇe je na svˇetˇe ve verzi 1.8. Zend byl od poˇca´tku stavˇen pomoc´ı modulárn´ıch bal´ıˇck˚ u, kde maj´ı tˇr´ıdy jasnˇe strukturované pojmenován´ı a je moˇzné r˚ uzné bal´ıˇcky pouˇz´ıvat samostatnˇe. Návrhy tˇr´ıd jsou dˇelány striktnˇe podle návrhov´ ych vzor˚ u. Je kladen d˚ uraz na to, aby si programátor mohl tˇr´ıdy sám rozˇsiˇrovat. Asi nejvˇetˇs´ı v´ yhoda Zend frameworku tkv´ı v obrovském mnoˇzstv´ı jeho knihoven. Ty obstarávaj´ı snad vˇsechny typické problémy od odes´ılán´ı e-mail˚ u pˇred editaci obrázk˚ u,FTP pˇripojen´ı aˇz po kompletn´ı captcha7 ˇreˇsen´ı. Od Zendu mˇe odradila jeho udávaná pomalost. Podle testu framework˚ u na serveru root.cz (viz obrázek 4.1), potˇrebuje Zend pro zobrazen´ı dat z databáze aˇz 1s. Tato doba klesne na pˇrijateln´ ych 40-100ms aˇz po pouˇzit´ı eAcceleratoru8

4.4.2

Symfony

Dalˇs´ım frameworkem o kterém se velmi ˇcasto hovoˇr´ı je Symfony. Tento framework se snaˇz´ı uˇsetˇrit co moˇzná nejv´ıce psan´ı kódu programátorem. Velká ˇca´st kód˚ u se nacház´ı ve zvláˇstn´ıch konfiguraˇcn´ıch souborech, které se p´ıˇs´ı ve velmi u ´sporném a ˇcitelném zápisu zvaném YAML9 . Jedná se o deklarativn´ı metodu programován´ı. Podle ohlasu programátor˚ u je práce v Symfony velmi produktivn´ı, ale nauˇcit se v nˇem trvá ze vˇsech framework˚ u asi nejdéle.

4.4.3

CakePHP

CakePHP je dalˇs´ım velikánem na poli PHP framework˚ u. Inspiruje se hlavnˇe u Ruby on Rails, jehoˇz hlavn´ı pˇrednost´ı je pˇr´ımoˇcarost a jednoduchost. Framework se zamˇeˇruje pˇredevˇs´ım na pˇrehledn´ y a krátk´ y zdrojov´ y kód a je velmi populárn´ı v zahraniˇc´ı. 6

Dont Repeat Yourself - Neopakuj se. Test, kter´ y se na webu pouˇz´ıv´ a ve snaze automaticky odliˇsit skuteˇcné uˇzivatele od robot˚ u. 8 Open-source optimalizaˇcn´ı n´ astroj pro PHP, kter´ y ukládá do cache kompilovanou podobu zdrojového k´ odu a zrychluje tak jeho spouˇstˇen´ı. 9 YAML Ain’t Markup Language 7


20

D˚ uvodem, proˇc jsem se nakonec rozhodl Cake nevyuˇz´ıt, bylo chybˇej´ıc´ı kvalitn´ı komunitn´ı fórum. I pˇres fakt, ˇze existuje mnoho zdroj˚ u informac´ı, bylo velmi obt´ıˇzné nalézat odpovˇedi na otázky, které bˇehem testován´ı vyvstávaly.

4.4.4

Nette framework

Nette je rozhodnˇe ze vˇsech v´ yˇse zm´ınˇen´ ych nejnovˇejˇs´ı. Veˇrejnosti byl pˇredstaven na konferenci WebExpo 200810 na pˇrednáˇsce pˇredn´ıho ˇceského PHP programátora Davida Grudla, kter´ y je také autorem celého projektu. Tento framework je jiˇz plnˇe pˇripraven vyuˇz´ıvat jmenn´ ych prostor˚ u pˇripravované verze PHP 5.3. a soustˇred´ı se hlavnˇe na nedokonalosti objektového programován´ı jazyka PHP. Zde mˇe velice zaujala práce s formuláˇri a vlastn´ı lad´ıc´ı nástroj Nette/Debug o kterém budu hovoˇrit v´ıce v kapitole 5.2. Také mˇe velice pˇrekvapila aktivn´ı a vstˇr´ıcná komunita, která je spojena s projektov´ ym fórem. Takto komunita se skládá pˇreváˇznˇe z ˇcesk´ ych programátor˚ u a vˇsichni jsou do projektu velice zapálen´ı. Velká ˇcást uˇzivatel˚ u tohoto frameworku dokonce pˇreˇsla z konkurenˇcn´ıho Zend Frameworku, coˇz vypov´ıdá o kvalité celého projektu. Nette je nav´ıc podle velkého testu framework˚ u serveru root.cz jeden z nejv´ ykonnˇejˇs´ıch (obrázek 4.1)

4.4.5

Koneˇ cn´ e rozhodnut´ı

Velmi vstˇr´ıcná ˇceská komunita, zamˇeˇren´ı na kvalitu PHP programován´ı, rychlost a velmi dobré ohlasy mˇe nakonec pˇresvˇedˇcily, ˇze nejlepˇs´ı volba bude Nette Framework. Jelikoˇz je Nette relativnˇe nov´ y projekt, chyb´ı ˇrada knihoven, kter´ ymi disponuje jeho konkurence. Doplnˇen´ı se ani neplánuje, ponˇevadˇz se do Nette daj´ı velmi snadno zakomponovat jiˇz existuj´ıc´ı ˇreˇsen´ı. Bylo by to znovu psan´ı jiˇz hotového a to jde proti filosofii celého projektu. Rozhodl jsem se tedy spolu s Nette vyuˇz´ıvat knihovny Zend frameworku. Z´ uˇcastnil jsem se také ˇskolen´ı Nette frameworku poˇrádané pˇr´ımo jeho autorem – Davidem Grudlem a mus´ım ˇr´ıct, ˇze mˇe cel´ y projekt velmi zaujal.

4.5

MySQL

MySQL je databázov´ y systém, vytvoˇren´ y ˇsvédskou firmou MySQL AB. Jde o multiplatformn´ı databázi. Komunikace s n´ı prob´ıhá – jak uˇz název napov´ıdá – pomoc´ı jazyka SQL11 . Podobnˇe jako u ostatn´ıch SQL databáz´ı se jedná o dialekt tohoto jazyka s nˇekter´ ymi rozˇs´ıˇren´ımi.[3] 10

Nejvˇetˇs´ı ˇcesk´ a konference o technologi´ıch a businessu na internetu. Structured Query Language - standardizovan´ y dotazovac´ı jazyk pouˇz´ıvan´ y pro práci s daty v relaˇcn´ıch datab´ az´ıch. 11

4.6. JAVASCRIPT

21

MySQL je optimalizováno hlavnˇe na rychlost. S t´ım bohuˇzel pˇriˇsla ˇrada zjednoduˇsen´ı, jako napˇr´ıklad velmi jednoduché zálohován´ı a aˇz v posledn´ıch letech zaˇcalo podporovat dalˇs´ı funkce jako triggery, pohledy ˇci uloˇzené procedury. Tento databázov´ y systém jsem zvolil hlavnˇe proto, ˇze je to volnˇe ˇsiˇriteln´ y software a také pro jeho velmi velkou podporu hostingov´ ych spoleˇcnost´ı. MySQL plnˇe vyhovuje vˇsem potˇrebám naˇs´ı internetové aplikace – aukˇcn´ıho systému.

4.5.1

Datab´ azov´ a vrstva dibi

Dibi je databázová knihovna napsaná v jazyce PHP. Autorem dibi je David Grudl, tedy stejn´ y ˇclovˇek co stoj´ı za cel´ ym Nette Frameworkem. Hlavn´ım pˇr´ınosem dibi je zapouzdˇren´ı PHP databázov´ ych funkc´ı do objektového rozhran´ı s generován´ım v´ yjimek a také sjednocen´ı základn´ıch funkc´ı jako je pˇripojen´ı k databázi, vykonán´ı pˇr´ıkazu a z´ıskán´ı v´ ysledku. C´ılem této databázové vrstvy je také uˇsetˇrit programátorovi práci se zápisem SQL dotaz˚ u.

4.6

JavaScript

JavaScript je objektovˇe orientovan´ y interpretovan´ y skriptovac´ı jazyk, kter´ y se z pravidla vyuˇz´ıvá pro internetové stránky. Tyto skripty jsou ˇcasto vkládány pˇr´ımo do HTML kódu a jsou spouˇstˇeny na stranˇe klienta. JavaScript obvykle ovládá r˚ uzné interaktivn´ı prvky uˇzivatelského rozhran´ı nebo grafické efekty. Velk´ ym problémem JavaScriptu je jeho rozd´ılná interpretace a podpora v r˚ uzn´ ych prohl´ıˇzeˇc´ıch, zejména ve starˇs´ıch verz´ıch Internet Exploreru nebo Opery. Tento problém ˇreˇs´ı z velké ˇcásti JavaScriptové frameworky.

4.6.1

jQuery framework

Jedná se o velmi populárn´ı JavaScriptov´ y framework, kter´ y umoˇzn ˇuje pohodlnou manipulaci 12 s DOM dokumentu XHTML (umoˇzn ˇuje pracovat se selektory u ´rovnˇe CSS3). Framework obsahuje také spoustu knihoven pro nejr˚ uznˇejˇs´ı druhy animac´ı ˇci ajaxové volán´ı. JQuery mˇen´ı zápis JavaScriptu jako takového a velmi ho zjednoduˇsuje. Velkou v´ yhodou je také peˇclivˇe odladˇená kompatibilita funkc´ı pro vˇsechny známé prohl´ıˇzeˇce. Cel´ y bal´ık jQuery má nav´ıc velmi pˇrijatelnou velikost. Jeho komprimovaná verze má necel´ ych 20KB. Hlavn´ı v´ yhodou projektu jQuery je jeho popularita. Vzniká tak obrovské mnoˇzstv´ı snadno pouˇziteln´ ych rozˇs´ıˇren´ı. Nˇekolik z nich jsem také pouˇzil pro aukˇcn´ı systém viz kapitoly 5.8.2 a 5.8.3. 12

Document Object Model - objektovˇe orientovaná reprezentace XML nebo (X)HTML dokumentu.


22

4.7

AJAX

Zkratkou AJAX13 oznaˇcujeme skupinu technologi´ı slouˇz´ıc´ıch k vytváˇren´ı interaktivn´ıch webov´ ych aplikac´ı, které mohou komunikovat se serverem bez nutnosti znovunaˇcten´ı stránky. Mezi komunikac´ı serveru s klientem operuje jeˇstˇe tˇret´ı JavaScriptová vrstva. Zat´ımco v klasické aplikaci kliknut´ı na odkaz automaticky vyvolá poˇzadavek na server a vrácená stránka se automaticky zobraz´ı, v pˇr´ıpadˇe AJAXov´ ych aplikac´ı poˇzadavek vyvolá a vrácená data zpracuje klientsk´ y skript. Z pohledu webového serveru jde pˇritom stále jen o normáln´ı GET nebo POST poˇzadavek HTTP.

13

Asynchronous JavaScript and XML.

4.7. AJAX

23

Obrázek 4.1: Velk´ y test framework˚ u serveru root.cz[10]

24


Kapitola 5 Implementace Jak jsem jiˇz zmiˇ noval v kapitole 4, pro implementaci celé aplikace jsem zvolil jazyk PHP a Nette Framework. V´ yvoj aplikace v Nette je velmi specifick´ y, a proto mi jako nováˇckovi zabralo spoustu ˇcasu pochopen´ı celkové filosofie a struktury. Z tohoto d˚ uvodu bych rád vˇenoval nejv´ıce pozornosti práci s t´ımto frameworkem a zamˇeˇril se pˇreváˇznˇe na zaj´ımavé a netypické ˇca´sti ˇreˇsen´ı.

5.1

Programov´ an´ı v PHP 5 a Nette

Mezi hlavn´ı v´ yhody Nette frameworku patˇr´ı bezesporu jeho snaha vylepˇsit objektové programován´ı jazyka PHP 5. Jak uˇz v´ıme z kapitoly 4.3 jazyk PHP se stal objektov´ ym aˇz bˇehem svého v´ yvoje, a proto trp´ı ˇradou nedokonalost´ı. Velk´ ym rozd´ılem mezi objektov´ ym jazykem a jazykem, kter´ y se objektov´ ym stal, je absence spoleˇcného pˇredka vˇsech tˇr´ıd. Object Pascal deklaruje TObject, ASP.NET má System.Object a v Javˇe nebo Ruby stoj´ı v hierarchii nejv´ yˇse Object. Tohoto spoleˇcného pˇredka pro PHP pˇridává Nette framework.[14] Vˇsechny objekty Nette aplikace dˇed´ı od tˇr´ıdy Nette/Object. Ta doplˇ nuje nˇekteré kl´ıˇcové vlastnosti programovac´ımu jazyku a zlepˇsuje tak jeho celkovou kulturu. Napˇr´ıklad pˇr´ıstup k pˇredem nedeklarované promˇenné, kter´ y b´ yvá ˇcasto zp˚ usoben chybou v programu, nyn´ı generuje v´ yjimku. V ˇcistém PHP toto vede pouze k jej´ımu deklarován´ı a chyba se v aplikaci hledá velmi obt´ıˇznˇe. Velk´ ym zpestˇren´ım PHP objekt˚ u je také vylepˇsen´ı vlastnost´ı (property), coˇz jsou speciáln´ı ˇcleny tˇr´ıd, které umoˇzn ˇuj´ı pracovat s metodami tak, jako by to byly promˇenné. Mám na mysli tzv. gettery a settery (viz v´ ypis kódu 5.1). Property podporuj´ı vˇsechny modern´ı objektovˇe orientované jazyky, v PHP vˇsak nejsou. Dalˇs´ı zaj´ımavou vlastnost´ı, kterou ˇcisté PHP nemá a pˇridává ji tˇr´ıda Nette/Object je moˇznost pˇripsat nové metody do jiˇz existuj´ıc´ıho objektu pomoc´ı tzv. extension method. Tu známe napˇr´ıklad z tˇret´ı verze jazyka C# nebo Ruby. 25

26

KAPITOLA 5. IMPLEMENTACE

1 $obj−>c a p t i o n = ’ H e l l o World ’ ; 2 // Pˇreloˇz´ı se na $obj->setCaption(’Hello World’) 4 echo $obj−>c a p t i o n ; 5 // Pˇreloˇz´ı se na vol´ an´ı $obj->getCaption();

V´ ypis kódu 5.1: Pˇr´ıstup k vlastnostem vylepˇseného PHP objektu.[14] 1 Debug : : e n a b l e ( ) ; 2 // Inicializace Nette/Debug 4 Debug : : dump( $var ) ; 5 // Vylepˇsený výpis obsahu promˇenné.

V´ ypis kódu 5.2: Ukázka pouˇzit´ı Nette/Debug.

5.2

Ladˇ en´ı aplikac´ı v Nette

Nette Framework obsahuje velmi uˇziteˇcnou knihovnu s názvem Nette/Debug (nˇekdy také Ladˇenka). Ta má na starosti zachytáván´ı chyb (i fatáln´ıch) ˇci v´ yjimek a jejich pˇrehledn´ y v´ ypis na obrazovku. Tento v´ ypis obsahuje mnoho uˇziteˇcn´ ych informac´ı pro ladˇen´ı aplikace. Hned vid´ıme, kter´ y ˇrádek kódu zp˚ usobil chybu a dostaneme také tzv. call stack neboli v´ ypis postupného volán´ı skript˚ u. Ladˇenka nám také vyp´ıˇse obsah vˇsech serverov´ ych promˇenn´ ych, promˇenn´ ych prostˇred´ı a HTTP hlaviˇcky. Mezi dalˇs´ı uˇziteˇcné vlastnosti tˇr´ıdy Debug patˇr´ı také vylepˇsen´ y v´ ypis obsahu promˇenné (dump), kter´ y vylepˇsuje PHP funkci var_dump. V´ ypis promˇenné se tak v HTML prostˇred´ı neslije do jednoho ˇrádku (viz v´ ypis kódu 5.2).

5.3

Architektura aplikace v Nette

Nette aplikace vyuˇz´ıvá obdobu architektury MVC, kterou naz´ yvá MVP1 . Framework pˇricház´ı s velmi zaj´ımavou myˇslenkou - kaˇzd´ y odkaz je zde totéˇz co zavolán´ı funkce tˇr´ıdy, která pˇr´ımo komunikuje s modelem a presentuje ho v lidsky pˇrijatelné formˇe. Odsud název presenter. Presenter v Nette Frameworku má velmi podobnou roli jako controller v architektuˇre MVC. Vyb´ırá pohled (view) a pˇredává mu model, nebo data z modelu. Udrˇzuje stav persistentn´ıch promˇenn´ ych. A pˇredevˇs´ım zpracovává reakce uˇzivatele (viz obrázek 5.1).[12] Chtˇel bych poukázat zejména na skuteˇcnost, ˇze uˇz se nepohybujeme v rovinˇe URL, ve které jsme nejprve museli poskládat hypertextov´ y odkaz, pˇr´ıpadnˇe ho pˇreskupit pomoc´ı mod_rewrite2 a následnˇe analyzovat. Toto vˇsechno dˇelá framework za nás. 1

Model-View-Presenter Modul nainstalovan´ y na serveru Apache, kter´ y umoˇzn ˇuje provádˇet pˇreklad URL adres pomoc´ı seznamu pravidel. 2

5.3. ARCHITEKTURA APLIKACE V NETTE

27

1 $db = d i b i : : g e t C o n n e c t i o n ( ) ; 3 // Uk´ azka jednoduchého výbˇeru 4 $ r e s u l t = $db−>s e l e c t ( ’ ∗ ’ )−>from ( ’ t a b u l k a ’ )−>where ( ’ nazev=%s ’ , ’ nazev ’ )−> fetchAll () ; 6 // V´ıcen´ asobný insert 7 $db−>i n s e r t ( ’ t a b u l k a ’ , $ a r r , $ a r r , $ a r r , $ a r r )−>e x e c u t e ( ) ;

V´ ypis kódu 5.3: Ukázka dibi zápisu SQL.

5.3.1

Model – vyuˇ zit´ı dibi datab´ azov´ e vrstvy

I kdyˇz to nen´ı v˚ ubec nutné, doporuˇcuje se v aplikaci Nette vyuˇz´ıvat knihovnu dibi. Jak jsem jiˇz zmiˇ noval v kapitole 4.5.1, dibi umoˇzn ˇuje velmi jednoduch´ y a pˇrehledn´ y zápis SQL. Ten je pak nav´ıc pˇrenositeln´ y mezi r˚ uzn´ ymi databázov´ ymi systémy (MySQL, MySQLi, PostgreSQL, SQLite, ODBC a experimentáln´ı MS SQL, Oracle a PDO). Tato knihovna také automaticky uvozuje identifikátory a ˇretˇezce, formátuje specifické databázové datové typy jako napˇr´ıklad datum a automaticky zajiˇst’uje escapován´ı vstupn´ıch ˇretˇezc˚ u. Escapován´ı je kl´ıˇcová obrana proti u ´tok˚ um na databázi, jako je Cross Site Scripting nebo SQL injection. Podporuje také v´ıcenásobn´ y insert, kter´ y vkládán´ı do databáze mnohonásobnˇe zrychl´ı (viz v´ ypis kódu 5.3). Model v samotné aplikaci pˇredstavuje 5 tˇr´ıd – Auctions, Comments, Users, Webs a Prihozy. Kaˇzdá z nich obsahuje funkce pro manipulaci s daty své databázové tabulky. Tˇr´ıda Users nav´ıc implementuje abstraktn´ı tˇr´ıdu IAuthenticator, která zajiˇst’uje autentizaci uˇzivatele. Kaˇzdá tˇr´ıda modelu si ve svém konstruktoru vyˇza´dá pˇripojen´ı do databáze od dibi knihovny. Ta vyuˇzije u ´daje z konfuguraˇcn´ıho souboru config.ini a toto pˇripojen´ı poskytne ve formátu objektu DibiConnection.

5.3.2

View

View, podobnˇe jako v jin´ ych frameworc´ıch, zajiˇst’uj´ı dynamické PHP ˇci PHTML ˇsablony. Nette se zde inspiruje v ˇsablonovac´ım systému Smarty a poskytuje sv˚ uj vlastn´ı velmi podobn´ y. Jedná se vlastnˇe pouze o zjednoduˇsen´ı zápisu PHP, abychom nem´ıchali v´ ykonnou ˇca´st s HTML. Tyto zjednoduˇsen´ı naz´ yváme v Nette filtry a obstarává je tˇr´ıda CurlyBracketsFilter. Tˇemito filtry je moˇzné jednoduˇse zapsat jak´ ykoli cyklus, vypsat promˇenné ale i oznaˇcit ˇca´sti ˇsablony, které se maj´ı ukládat do cache a mnoho dalˇs´ıho. Vybrané filtry naleznete ˇ v tabulce 5.1. Sablony se daj´ı do sebe libovolnˇe vkládat a funguje zde také systém tzv. layout˚ u, kde mohou r˚ uzné ˇsablony pouˇz´ıvat jinou jako sv˚ uj obal. Kaˇzd´ y vykreslovaˇc v presenteru ˇci vykreslitelná komponenta Nette má pˇriˇrazenou svou ˇsablonu.

28


Obrázek 5.1: Model-View-Presenter architektura v Nette Frameworku.[12]

Z´ apis v curlyBrackets {$variable} {!$variable} {foreach ?} ... {/foreach} {while ?} ... {/while} {cache ?} ... {/cache}

PHP ekvivalent nebo v´ yznam ... ... cachovan´ y blok

Tabulka 5.1: Ukázka vybran´ ych filtr˚ u ˇsablon.

5.3. ARCHITEKTURA APLIKACE V NETTE

29

ˇ Obrázek 5.2: Zivotn´ ı cyklus presenteru.[13]

5.3.3

Presenter

Jak uˇz v´ıme z architektury MVP, presentery reaguj´ı na události pocházej´ıc´ı od uˇzivatele a zajiˇst’uj´ı zmˇeny v modelu nebo v pohledu. Tuto vrstvu reprezentuje v naˇs´ı implementaci celkem 9 tˇr´ıd. Ty tvoˇr´ı jádro celé aplikace a jsou vlastnˇe logick´ ymi celky. Program by teoreticky mohl m´ıt pouze jeden presenter, coˇz by ale nebylo pˇr´ıliˇs elegantn´ı. Presenter RegistracePresenter.php napˇr´ıklad zajiˇst’uje vykreslen´ı registraˇcn´ıho formuláˇre, jeho validaci i zpracován´ı, odeslán´ı potvrzovac´ıho e-mailu a také metodu pro potvrzen´ı uˇzivatelského u ´ˇctu. Kaˇzd´ y presenter má v aplikaci sv˚ uj ˇzivotn´ı cyklus (viz obrázek 5.2). Tento cyklus se sestává celkem ze ˇctyˇr fáz´ı, pˇredstavovan´ ych volán´ım volitelnˇe existuj´ıc´ıch metod. Jde o startup, action{Action}, beforePrepare , prepare{View}, handle{Signal}, beforeRender, render{View} a shutdown. Kaˇzdá metoda se hod´ı na nˇeco jiného. Ty, které maj´ı spoleˇcné znaky, ˇrad´ıme do spoleˇcn´ ych fáz´ı ˇzivotn´ıho cyklu.

30 5.3.3.1

KAPITOLA 5. IMPLEMENTACE F´ aze v´ ykonn´ a

Do této fáze patˇr´ı metody startup a action{Action}. Zde je prostor pro inicializace persistentn´ıch parametr˚ u a manipulaci s modelem s moˇznost´ı následného pˇresmˇerován´ı. Po tomto pˇresmˇerován´ı se skript ukonˇc´ı, prohl´ıˇzeˇc si vyˇza´dá novou stránku a skript se spust´ı znovu. Tud´ıˇz vˇsechny nepersistentn´ı promˇenné se ztrat´ı. Funkce startup je vyvolána na zaˇca´tku ˇzivotn´ıho cyklu presenteru a m˚ uˇze obsahovat napˇr´ıklad zajiˇstˇen´ı pˇripojen´ı k databázi ˇci inicializaci tˇr´ıdn´ıch promˇenn´ ych. Metoda action{Action} by mˇela obsahovat vykonán´ı operac´ı, po kter´ ych m˚ uˇze následovat pˇresmˇerován´ı. Zde m˚ uˇze napˇr´ıklad prob´ıhat automatické pˇresmˇerován´ı na jinou jazykovou verzi nebo validace vstupn´ıch parametr˚ u. Onou validac´ı m˚ uˇzeme chápat pˇredán´ı dat modelu k validaci, ovˇeˇren´ı práv a následné pˇresmˇerován´ı do patˇriˇcn´ ych m´ıst, pokud se vyskytne problém.[13] 5.3.3.2

F´ aze zmˇ en vnitˇ rn´ıch stav˚ u

Sem patˇr´ı metoda beforePrepare. Ta obsahuje inicializaci komponent, které jsou spoleˇcné pro v´ıce metod (napˇr: stránkován´ı, ˇrazen´ı nebo formuláˇr). Funkce prepare{View} má na starosti registraci komponent pro konkrétn´ı pohled a handle{Signal} zpracovává signály neboli subrequesty. T´ımto se rozum´ı komunikace se serverem pod prahem normáln´ıho pohledu, tedy akce, které se dˇej´ı, aniˇz by se zmˇenilo view. Tato metoda je kl´ıˇcová pro zpracován´ı AJAXov´ ych poˇzadavk˚ u. 5.3.3.3

F´ aze vykreslovac´ı

V této fázi se m˚ uˇze vyskytovat metoda beforeRender, která deklaruje vˇse, co maj´ı spoleˇcné vˇsechny vykreslovaˇce. Nemus´ıme tedy nˇekteré spoleˇcné promˇenné r˚ uzn´ ych ˇsablon registrovat v´ıcekrát. Dalo by se ˇr´ıci, ˇze metoda beforeRender odstraˇ nuje duplicity v kódu. Funkce render{View} má na starosti vykreslen´ı konkrétn´ıho pohledu a vˇeci s t´ım spojené. Mluv´ıme zde hlavnˇe o registraci promˇenn´ ych ˇsablon nebo o tvorbˇe odkaz˚ u v ˇsablonách. 5.3.3.4

Ukonˇ cen´ı ˇ cinnosti

Do této fáze spadá jediná metoda – shutdown. Ta je vyvolána pˇri ukonˇcen´ı ˇzivotn´ıho cyklu presenteru. Zde m˚ uˇzeme napˇr´ıklad ukonˇcit databázové pˇripojen´ı.

5.3.4

Komponenty

Komponenta je ˇca´st aplikace, kterou je moˇzné opakovanˇe vyuˇz´ıvat. Sdruˇzuje dohromady nˇekteré funkce, které spolu logicky souvis´ı, a chceme je vyuˇz´ıvat na v´ıce m´ıstech aplikace. Je to dynamick´ y objekt webové stránky, kter´ y nen´ı závisl´ y na okoln´ım obsahu a dá se jednoduˇse volat a pouˇz´ıvat.

ˇ APLIKACE 5.4. BEH

31

Komponenta v Nette je jak´ ykoli objekt, kter´ y je potomkem tˇr´ıdy Control. Takováto komponenta se dokáˇze sama vykreslit vlastn´ı ˇsablonou. V naˇs´ı aplikaci existuje jen jedna taková komponenta – aukceTable. Ta dokáˇze vypsat nab´ıdky, které j´ı byly pˇredány, do pˇrehledné tabulky a um´ı je ˇradit podle libovolné kombinace sloupc˚ u.

5.4

Bˇ eh aplikace

Pˇri spuˇstˇen´ı pˇricház´ı jako prvn´ı ke slovu soubor index.php. Ten pouze definuje konstanty d˚ uleˇzité pro chod programu, jako je systémová cesta k domovskému adresáˇri ˇci adresáˇri s knihovnami, a volá soubor bootstrap.php (viz v´ ypis kódu B.1). Definice uveden´ ych konstant nen´ı poˇzadavkem Nette Frameworku, jde pouze o uˇziteˇcnou zvyklost. Kdyˇz se totiˇz sloˇzka s aplikac´ı nebo knihovnami pˇresune, bude staˇcit zmˇenit jednu cestu v souboru index.php. Soubor bootstrap.php slouˇz´ı jako zavádˇec´ı. Je v nˇem incializace celého Nette frameworku a vˇsechna potˇrebná konfigurace. Jako prvn´ı se volá tˇr´ıda loader.php, která umoˇzn ˇuje automatické vkládán´ı vˇsech potˇrebn´ ych tˇr´ıd. V aplikaci se potom vˇsechny pouˇz´ıvané tˇr´ıdy volaj´ı automaticky a nen´ı proto v˚ ubec nutné psát require pˇr´ıkazy. Dále zde nalezneme inicializaci tˇr´ıdy Nette/Debug, pˇripojen´ı do databáze, nastaven´ı u ´loˇzného adresáˇre pro sessions, naˇcten´ı konfigurace ze souboru config.ini a také nastaven´ı routeru. Router mimo jiné definuje v´ ychoz´ı presenter, kter´ y bude pouˇzit jako prvn´ı. Nakonec se zavolá metoda run, která celou aplikaci spust´ı.

5.5

Bezpeˇ cnost aplikace

Kaˇzdá internetová aplikace mus´ı velmi dbát na bezpeˇcnost, nebot’ je dostupná ˇsiroké veˇrejnosti a je známo mnoho tzv. hack˚ u, které mohou aplikaci uˇskodit. Mohou zp˚ usobit ztrátu dat, neoprávnˇen´ y pˇr´ıstup nebo pád celé aplikace.

5.5.1

Oˇ setˇ ren´ı vstupu

Jelikoˇz je jazyk HTML navrˇzen jako beztypov´ y, pouˇz´ıvá se stejn´ y element input pro zadán´ı e-mailu, data, jména i napˇr´ıklad ˇc´ıselné hodnoty. Tento problém ˇreˇs´ı aˇz pˇripravovaná verze HTML 5 a jej´ı nové typy tohoto elementu (datetime, url, email, range a dalˇs´ı). My zat´ım mus´ıme vˇsechny vstupy od uˇzivatele kontrolovat a to zejména na stranˇe serveru. Kontrola ˇcasto prob´ıhá i na stranˇe klienta v podobˇe JavaScriptu. Ta má tu v´ yhodu, ˇze reaguje okamˇzitˇe a negeneruje se zbyteˇcnˇe poˇzadavek na server. Pro uˇzivatele ale nen´ı problém JavaScript vypnout, a proto je pro nás kl´ıˇcová serverová kontrola. Docház´ı tak ˇcasto k duplicitn´ı validaci, coˇz je jeden z nedostatk˚ u dneˇsn´ıho pˇr´ıstupu.

32 5.5.1.1

KAPITOLA 5. IMPLEMENTACE Tvorba formul´ aˇ r˚ u v Nette

Kontrolu vstupn´ıch dat velmi usnadˇ nuje tvorba formuláˇr˚ u frameworku Nette. Ta um´ı formuláˇre pˇrehlednˇe popsat, vykreslit i validovat a to jak na stranˇe klienta tak serveru. To vˇsechno v´ıce ménˇe automaticky. O vˇsechno se stará tˇr´ıda AppForm, která disponuje velk´ ym mnoˇzstv´ım nejr˚ uznˇejˇs´ıch metod. Základn´ı funkce pro generován´ı nejˇcastˇejˇs´ıch prvk˚ u jsou addText, addPassword, addSubmit , addTextarea a dalˇs´ı. Jejich prvn´ım parametrem je vˇzdy jednoznaˇcn´ y identifikátor a druh´ ym text, kter´ y se vygeneruje do pˇr´ısluˇsného elementu label. Kaˇzdá z tˇechto funkc´ı vrac´ı objekt typu FormControl, jeˇz um´ı spoustu dalˇs´ıch vˇec´ı. Z tˇech nás nyn´ı zaj´ımaj´ı jeho metody addRule, addCondition a addConditionOn, které slouˇz´ı k validaci. Tyto tˇri metody se na sebe daj´ı libovolnˇe ˇretˇezit, takˇze je moˇzné sestavit i velmi komplikovaná validaˇcn´ı pravidla. Tyto funkce pˇrij´ımaj´ı jako prvn´ı parametr volán´ı statické validaˇcn´ı metody, takˇze je moˇzné jednoduˇse pˇridat vlastn´ı. V Nette uˇz ale máme vˇetˇsinu potˇrebn´ ych (Form::EMAIL, Form::FILLED, FORM::MIN_LENGTH a dalˇs´ı) pˇripravenou k pouˇzit´ı. Formuláˇr také definuje metodu render, která obstarává jeho vykreslen´ı do ˇsablony v podobˇe HTML kódu. Toto vykreslen´ı je moˇzné do velké m´ıry ovlivnit. Kaˇzd´ y prvek formuláˇre definuje metody getControlPrototype a getLabelPrototype, které umoˇzn ˇuj´ı práci pˇr´ımo s HTML. Máme také moˇznost vykreslit formuláˇr v ˇsablonˇe ruˇcnˇe a po ˇca´stech nebo si napsat vlastn´ı metodu render. Jednoduchost tvorby formuláˇr˚ u demonstruje sestaven´ı registraˇcn´ıho formuláˇre v naˇsem aukˇcn´ım systému (viz zdrojov´ y kód B.2). Tento kód zajiˇst’uje kontrolu jak na stranˇe serveru, tak na stranˇe klienta. Klientské skripty budou vygenerovány do ˇsablony. 5.5.1.2

SQL injection

SQL injection patˇr´ı mezi nejˇcastˇejˇs´ı zneuˇzit´ı neoˇsetˇreného formuláˇrového vstupu. Pokud totiˇz textov´ y ˇretˇezec z formuláˇre vkládáme pˇr´ımo do SQL pˇr´ıkazu, je moˇzné formuláˇrem podstrˇcit vlastn´ı ˇca´st SQL a celkov´ y databázov´ y dotaz zmˇenit. Tomuto chován´ı lze pˇredej´ıt zejména escapován´ım speciáln´ıch znak˚ u v ˇretˇezc´ıch pro ’ databázi. Toto escapován´ı zajiˇst uje databázová vrstva dibi automaticky, pˇri skládán´ı SQL dotazu. 5.5.1.3

Cross-Site Scripting – XSS

Tato metoda také vyuˇz´ıvá neoˇsetˇren´ ych vstup˚ u. Nezasahuje ale do SQL syntaxe, n´ ybrˇz se snaˇz´ı aplikaci podstrˇcit vlastn´ı skript. M˚ uˇze tak uˇcinit bud’ pˇres neoˇsetˇren´ y formuláˇr, nebo editac´ı URL. Podstrˇcen´ y skript b´ yvá nejˇcastˇeji JavaScript, kter´ y m˚ uˇze napˇr´ıklad z´ıskat citlivé u ´daje od uˇzivatel˚ u nebo zniˇcit celkov´ y vzhled stránky. Pokud apliace nen´ı nijak oˇsetˇrená, tak se tento skript spust´ı, m´ısto toho aby se jen vypsal.

´ ER ˇ NAZVU ´ 5.6. VYB

33

Obrana je opˇet jednoduchá. Je nutné odfiltrován´ı nebezpeˇcn´ ych entit PHP funkc´ı htmlspecialchars v okamˇziku zpracován´ı formuláˇre, nebo v okamˇziku v´ ypisu. To samé plat´ı pro promˇennou z´ıskanou metodou GET, tedy pˇr´ımo z URL adresy.

5.5.2

Adres´ aˇ rov´ y pr˚ uchod

´ Utok tohoto typu zpravidla vzniká pˇri neopatrném zacházen´ı s citliv´ ymi u ´daji v kombinaci se ˇspatnˇe nastaven´ ym webov´ ym serverem, kde má uˇzivatel pˇr´ıstup po celé adresáˇrové struktuˇre. V naˇs´ı aplikaci jsou uloˇzena velmi citlivá data v souboru /app/config.ini. Mus´ıme tedy zamezit tomu, aby mˇel uˇzivatel do této sloˇzky pˇr´ıstup a nemohl si tak tento statick´ y soubor pˇreˇc´ıst napˇr´ıklad zadán´ım cesty k souboru v internetové adrese. M˚ uˇzeme se bud’ spolehnout na nastaven´ı webového serveru, kde bude adresáˇrov´ y pr˚ uchod zakázán, ale sp´ıˇse se doporuˇcuje oˇsetˇrit citlivé adresáˇre souborem .htaccess. Tento soubor slouˇz´ı jako dodateˇcná konfigurace webového serveru Apache. Staˇc´ı soubor um´ıstit do kaˇzdého adresáˇre, kam chceme znemoˇznit pˇr´ıstup a vloˇzit do nˇej jedin´ y ˇrádek: Deny from all.

5.6

V´ ybˇ er n´ azvu

Bylo nutné vymyslet pro cel´ y projekt název. Takov´ y název mus´ı jasnˇe vystihovat, o co se jedná a mˇel by b´ yt snadno zapamatovateln´ y. Nejprve jsem zvaˇzoval m´ıt v názvu slovo aukce ˇci reklama a pohrával jsem si s kombinac´ı r˚ uzn´ ych i cizojazyˇcn´ ych tvar˚ u. Pak jsem si ale uvˇedomil, ˇze systém nab´ız´ı i prodej za pevnou cenu a také ˇze by se mohla aplikace v budoucnu rozˇs´ıˇrit nad rámec internetové reklamy. Zvolil jsem proto název, kter´ y ponechává dostatek volnosti a pˇritom vystihuje podstatu systému – Webdeal.

5.7

Uˇ zivatelsk´ e rozhran´ı

Pˇri tvorbˇe uˇzivatelského rozhran´ı jsem se drˇzel hlavn´ıch zásad pro tvorbu webdesignu. ˇ Cerpal jsem z knihy Adobe Photoshop praktick´ y webdesign od Jakuba Krˇcmáˇre a z vlastn´ıch zkuˇsenost´ı. Tyto zásady by se daly shrnout do následuj´ıc´ıch bod˚ u: • Snadno dostupná navigace na obvyklém m´ıstˇe, která nemˇen´ı pozici. Mus´ı b´ yt jasné, kde se uˇzivatel právˇe nacház´ı. • Podtrˇzené nen´ı nic, co nen´ı odkaz a naopak odkazy v textu jsou podtrˇzené. Odkazy kontrastuj´ı s bˇeˇzn´ ym textem. • Pouˇzit´ı dostateˇcnˇe vypov´ıdaj´ıc´ıch ikon. • Barevnˇe oddˇelená hláˇsen´ı systému, podle druhu sdˇelen´ı.

34

KAPITOLA 5. IMPLEMENTACE • Vhodnˇe zvolené kontrastn´ı barvy a velikosti p´ısma. • Mus´ı b´ yt na prvn´ı pohled jasné, o jak´ y druh stránky se jedná a co nab´ız´ı. • Logo odkazuj´ıc´ı na domovskou stránku.

5.7.1

Grafick´ a podoba aplikace

Pro tvorbu grafiky byl pouˇzit program Adobe Photoshop CS4. Hlavn´ı snaha byla navodit d˚ uvˇeryhodn´ y vzhled s d˚ urazem na jednoduchost. Jako jedna z kontrastn´ıch barev byla zvolena ˇzlutá, nebot’ tato barva v lidech evokuje urˇcitou tendenci k uvolnˇen´ı a celkové d˚ uvˇeˇre. Je to barva bohatstv´ı, která naznaˇcuje, ˇze p˚ ujde o obchodován´ı a o pen´ıze. Tato zásada byla dodrˇzena i pˇri tvorbˇe loga, jako symbol jsem zvolil zlaté mince (viz obrázek 5.3). Dalˇs´ım kl´ıˇcov´ ym prvkem aplikace je pˇrehledné zobrazen´ı prob´ıhaj´ıc´ıch nab´ıdek. Tyto nab´ıdky se daj´ı ˇradit podle libovolné kombinace sloupc˚ u vzestupnˇe i sestupnˇe. Toto je znázornˇeno ˇsipkami vpravo od nadpisu sloupc˚ u. Nejd˚ uleˇzitˇejˇs´ı prvky tabulky jsou opatˇreny ikonami (obrázek 5.4).

5.8

Vybran´ a zaj´ımav´ aˇ reˇ sen´ı

Z celé aplikace jsem vybral nˇekolik ˇreˇsen´ı, která mi pˇriˇsla zaj´ımavá a jejich realizace nen´ı u ´plnˇe obvyklá.

5.8.1

Vytvoˇ ren´ı n´ ahledu internetov´ e str´ anky

Pokud uˇzivatel vkládá do systému novou stránku pro reklamu, aplikace automaticky vytvoˇr´ı náhled celé stránky neboli screenshot. Jak ale aplikace tento obrázek z´ıská? Nejprve jsem se pokouˇsel naj´ıt algoritmus ˇcistˇe v PHP, kter´ y by toto zajistil. Zanedlouho jsem ale zjistil, ˇze to nen´ı moˇzné. K uloˇzen´ı náhledu se ˇcasto vyuˇz´ıvá napˇr´ıklad vykreslovac´ı jádro prohl´ıˇzeˇce, které se PHP skriptem pouze spouˇst´ı. Dalˇs´ı moˇznost pˇredstavoval programovac´ı jazyk Perl a jeho modul ImageMagick. Vypadalo to jako sloˇzit´ y a ˇcasovˇe nároˇcn´ y problém, a tak jsem se sp´ıˇse zamˇeˇril na hledán´ı internetové sluˇzby, která by toto poskytovala. Takov´ ych sluˇzeb existovalo hned nˇekolik, ale vˇetˇsinou byly bud’ pomalé, nebo z nˇejakého d˚ uvodu nefungovaly. Jako nejlepˇs´ı se mi zdál server snapcasa.com, kter´ y sice jako jedin´ y vyˇzadoval registraci, zato kvalitou pˇredˇcil vˇsechny ostatn´ı. Sluˇzba nab´ız´ı zdarma 500 000 vytvoˇren´ı náhled˚ u mˇes´ıˇcnˇe, coˇz je v´ıce neˇz dostaˇcuj´ıc´ı. Implementoval jsem tedy tˇr´ıdu screenshot.php, která um´ı odeslat poˇzadavek na server snapcasa.com a vytvoˇren´ y obrázek stáhnout, zmenˇsit na poˇzadovanou velikost a uloˇzit do sloˇzky /img/screenshots/. Staˇzen´ı obrázku prob´ıhá pomoc´ı PHP rozˇs´ıˇren´ı curl (viz zdrojov´ y kód B.3).

´ ZAJÍMAVA ´ RE ˇ SEN ˇ Í 5.8. VYBRANA

35

1 < s c r i p t type=” t e x t / j a v a s c r i p t ”> 2 $( function () { 3 $ ( ” i n p u t#datumod” ) . d a t e p i c k e r ( ) ; 4 }) ; 5

V´ ypis kódu 5.4: Inicializace grafického kalendáˇre pro v´ ybˇer data.

5.8.2

Vyuˇ zit´ı JavaScriptov´ eho uˇ zivatelsk´ eho rozhran´ı jQuery UI

Pˇri tvorbˇe formuláˇre pro zaloˇzen´ı nab´ıdky, jsem chtˇel co nejlépe vyˇreˇsit zadáván´ı data zaˇcátku a konce. Jenˇze jak pˇrimˇet uˇzivatele, aby zadal datum v poˇzadovaném formátu? Chtˇel jsem opustit tradiˇcn´ı jednoduchá ˇreˇsen´ı v podobˇe nápovˇedy dd.mm.rrrr nebo tˇr´ı oddˇelen´ ych input˚ u. L´ıbilo se mi ˇreˇsen´ı v podobˇe mini kalendáˇre, se kter´ ym jsem se v minulosti jiˇz mnohokrát setkal. Hotové ˇreˇsen´ı nab´ıdlo zaj´ımavé JavaScriptové rozˇs´ıˇren´ı napsané ve frameworku jQuery s názvem jQuery UI. Jak název napov´ıdá, nejedná se jen o zmiˇ novan´ y kalendáˇr, ale o komplexn´ı sadu knihoven rozˇsiˇruj´ıc´ı grafické uˇzivatelské rozhran´ı internetov´ ych stránek. Knihovna nab´ız´ı opravdu mnoho. Zmiˇ nme napˇr´ıklad dialogová okna, r˚ uzné posuvn´ıky nebo dynamické menu. Já jsem z knihovny pouˇzil pouze v´ ybˇer data s názvem datepicker. Implementace byla velmi snadná. Staˇcilo naˇc´ıst jádro jQuery UI, které reprezentuje skript ui.core.js a poté jednotlivé moduly. Pro naˇs´ı aplikaci postaˇcil ui.datepicker.js. M˚ uˇzeme také editovat pˇripojen´ y CSS soubor a zmˇenit tak vzhled celého kalendáˇre (viz obrázek 5.5). Inicializace prob´ıhá po naˇcten´ı celé stránky jQuery syntax´ı (viz zdrojov´ y kód 5.4).

5.8.3

Vyuˇ zit´ı JavaScriptov´ e n´ apovˇ edy jQuery qTip

QTip je dalˇs´ı velmi vydaˇrená JavaScriptová knihovna postavená na frameworku jQuery. Umoˇzn ˇuje implementaci vyskakovac´ı nápovˇedy v pˇekném grafickém proveden´ı (obrázek 5.6). Cel´ y projekt je k dispozici na adrese craigsworks.com/projects/qtip/, kde se také nalézá velmi podrobná a kvalitn´ı dokumentace. Pouˇzit´ı bylo opˇet snadné. Staˇcilo vytvoˇrit vlastn´ı qTip styl, ve kterém jsou definovány barvy, ohraniˇcen´ı ale i tˇreba um´ıstˇen´ı, kde se nápovˇeda bude vzhledem k pˇripojenému elementu vyskytovat. Pak uˇz zb´ yvalo jen zavolat funkci qTip na vybran´ y element pomoc´ı jQuery selektoru (viz zdrojov´ y kód B.4). Vˇsechny nápovˇedy jsou k aplikaci pˇripojeny v souboru qtips.js. Tato forma nápovˇedy je vyuˇzita ve formuláˇri pro zaloˇzen´ı nové nab´ıdky a objasˇ nuje poloˇzky, které by mohly b´ yt uˇzivatel˚ um nejasné.

36

5.8.4


Z´ısk´ an´ı hodnot PageRank, S-rank, Alexa rank

Pro cenu internetové reklamy jsou tyto faktory kl´ıˇcové. Proto by nebylo moudré, nechat prodávaj´ıc´ı, aby tyto hodnoty u sv´ ych stránek uvádˇeli sami. Jednak nemus´ı vˇedˇet, jak je zjistit, ale hlavnˇe nen´ı zaruˇceno, ˇze uvedené u ´daje budou pravdivé. Proto vznikla nutnost, aby systém byl schopen tyto hodnoty sám zjiˇst’ovat. Z´ıskáván´ı Alexa ranku se obeˇslo bez vˇetˇs´ıch pot´ıˇz´ı. Staˇcilo sestavit poˇzadavek na server data.alexa.com. Ten jako odpovˇed’ vrát´ı soubor XML, kter´ y obsahuje mimo jiné i námi poˇzadovan´ yu ´daj. PHP 5 velmi usnadnilo práci s XML soubory, a proto je z´ıskán´ı Alexa ranku záleˇzitost´ı jednoho ˇrádku. Zjiˇstˇen´ı S-ranku a PageRanku uˇz bylo sloˇzitˇejˇs´ı. Podle dostupn´ ych informac´ı jsem se pokusil napsat vlastn´ı ˇreˇsen´ı, ale brzy jsem narazil na ˇradu problém˚ u. Bylo nutné simulovat poˇzadavky Google toolbaru a Seznam liˇstiˇcky. Google nav´ıc vyˇzaduje jak´ ysi kontroln´ı souˇcet, kter´ y jsem nebyl schopen z´ıskat. Nakonec jsem nalezl funkˇcn´ı ˇreˇsen´ı na stránkách xrank.cz a vyuˇzil jej ve vlastn´ıch tˇr´ıdách SRank.php a PageRank.php.

´ ZAJÍMAVA ´ RE ˇ SEN ˇ Í 5.8. VYBRANA

Obrázek 5.3: Logo aukˇcn´ıho systému.

Obrázek 5.4: Grafická podoba v´ ypisu aukc´ı.

Obrázek 5.5: Ukázka v´ ybˇeru data pomoc´ı jQuery UI.

Obrázek 5.6: Ukázka JavaScriptové nápovˇedy jQuery qTip.

37

38


Kapitola 6 Testov´ an´ı Pro internetové aplikace podobného typu je testován´ı velmi d˚ uleˇzité. Pom˚ uˇze odhalit ˇradu problém˚ u, které vznikly pˇri v´ yvoji programu a za ostrého provozu by mohly poˇskodit dobré jméno celého projektu. Testy také pomohou odhalit nestabilitu a spolehlivost systému. Je nutné také provˇeˇrit uˇzivatelské rozhran´ı, zdali nen´ı nepˇrehledné a uˇzivatelé se nedostávaj´ı pˇri bˇeˇzn´ ych u ´konech do nesnáz´ı. Aplikace byla ˇzkuˇsebnˇe zprovoznˇena na internetové adrese www.webdeal.cz.

6.1

Kognitivn´ı pr˚ uchod

Jedná se o prvotn´ı formu testován´ı, kterou provád´ı sám v´ yvojáˇr na základˇe stanoven´ ych scénáˇr˚ u. Testován´ı bylo modelováno na uˇzivatele, kter´ y se registruje, pˇridá nˇekolik stránek pro reklamu a vytvoˇr´ı na nˇe nab´ıdky. Jin´ y fiktivn´ı uˇzivatel nab´ıdky zakoup´ı a komentuje. Tento test odhalil obˇcasnou pomalou odezvu serveru snapcasa.com, na kter´ y je zas´ılán poˇzadavek o vytvoˇren´ı náhledu stránky. Z tohoto d˚ uvodu jsem pod kl´ıˇcové formuláˇre pˇridal informaci, ˇze pˇridáván´ı stránky ˇci jej´ı aktualizace m˚ uˇze trvat delˇs´ı dobu. Vˇse ostatn´ı probˇehlo bez problém˚ u.

6.2

Akceptaˇ cn´ı testy

Akceptaˇcn´ı testy ovˇeˇruj´ı splnˇen´ı zadán´ı, tedy katalogu poˇzadavk˚ u z anal´ yzy. V aukˇcn´ım systému byla otestována pˇr´ıtomnost vˇsech funkc´ı vymezen´ ych u ´vodn´ı studi´ı.

6.3

Test uˇ zivatelsk´ eho rozhran´ı

Dalˇs´ı fáz´ı bylo testován´ı uˇzivatelského rozhran´ı. Testu se u ´ˇcastnilo celkem 7 osob ve vˇeku 18 aˇz 25 let. Snaˇzil jsem se oslovit respondenty r˚ uzného zamˇeˇren´ı a zámˇernˇe jsem nikomu nesdˇelil, podstatu celého systému. 39

´ Í KAPITOLA 6. TESTOVAN

40

Uˇzivatelé mˇeli za u ´kol registrovat se do systému, pˇridat novou internetovou stránku pro reklamu a následnˇe na ni zaloˇzit libovolnou nab´ıdku. Mˇeli se také pokusit z´ uˇcastnit ciz´ı aukce libovolnou formou. Po tomto u ´kolu ˇcekal vˇsechny u ´ˇcastn´ıky jednoduch´ y dotazn´ık: 1. L´ıb´ı se vám celková struktura systému a jeho grafické vyznˇen´ı? 2. Chápete podstatu systému? 3. Scház´ı vám nˇejaká kategorie internetové stránky? Pokud ano jaká? 4. Bylo pro vás ovládán´ı systému intuitivn´ı? Stalo se vám, ˇze jste si s nˇeˇc´ım nevˇedˇel/a rady? 5. Podaˇrilo se vám u ´kol splnit? Jak dlouho vám to zabralo? 6. Pˇripadá vám pˇrehledné vypisován´ı nab´ıdek?

6.3.1

V´ ysledky testov´ an´ı

Zadan´ y u ´kol se podaˇrilo splnit vˇsem u ´ˇcastn´ık˚ um testu. V´ ysledky ale ukázaly, ˇze je nutné, v´ıce informovat novˇe pˇr´ıchoz´ı uˇzivatele o smyslu celého projektu a odbornˇejˇs´ıch pojmech, jako je PageRank ˇci S-rank. Nˇekteˇr´ı u ´ˇcastn´ıci si na poˇcátku mysleli, ˇze jde o aukci bˇeˇzného zboˇz´ı, jin´ı neodhalili podstatu ani po dokonˇcen´ı u ´kolu. Pˇridal jsem proto u ´vodn´ı odstavec, kter´ y shrnuje hlavn´ı u ´ˇcel aplikace a pˇridal vysvˇetlen´ı základn´ıch pojm˚ u. S vyplˇ nován´ım formuláˇr˚ u nemˇel nikdo ze z´ uˇcastnˇen´ ych vˇetˇs´ı problémy. Vˇsechny nejasnosti pomohla vyˇreˇsit JavaScriptová nápovˇeda, která mˇela velmi kladné ohlasy. Vypisován´ı nab´ıdek shledala vˇetˇsina u ´ˇcastn´ık˚ u jako pˇrehledné. Ukázalo se vˇsak, ˇze titulek aukce nemá moc velk´ y smysl, nebot’ se objevuje aˇz v detailu aukce a atraktivitu nab´ıdky pˇr´ıliˇs neovlivn´ı. V´ ypis titulku v hromadném v´ ypisu jsem povaˇzoval za redundantn´ı, ’ nebot vˇsechny kl´ıˇcové informace zadává uˇzivatel zvláˇst’. Jeden testovan´ y u ´ˇcastn´ık by ocenil podrobnˇejˇs´ı filtrován´ı nab´ıdek. D´ıky tomuto testován´ı bylo také odhaleno chybné zobrazen´ı formuláˇr˚ u v prohl´ıˇzeˇci Safari 4 na operaˇcn´ım systému Mac OS X Leopard.

6.4

Testov´ an´ı validity

Testován´ı validity sp´ıˇse pouze doplˇ nuje celkové testován´ı aplikace. Stránky jsou napsané v nejmodernˇejˇs´ı HTML syntaxi - XHTML 1.0 Strict. Validn´ı kód napomáhá optimalizaci pro r˚ uzné internetové prohl´ıˇzeˇce a je také ukazatelem celkové kvality stránek. Jako validaˇcn´ı nástroj byla vyuˇzita sluˇzba pˇr´ımo od W3C konsorcia na adrese validator.w3.org. Tento test odhalil drobné chyby v HTML syntaxi jako napˇr´ıklad neuzavˇrené párové tagy. Zdrojov´ y kód stránek je nyn´ı validn´ı podle standard˚ u W3C konsorcia a struktura stránek je tak sémantická.

´ Í ZOBRAZENÍ V RUZN ˚ YCH ´ ˇ C ˇ ÍCH 6.5. TESTOVAN PROHLÍZE

6.5

41

Testov´ an´ı zobrazen´ı v r˚ uzn´ ych prohl´ıˇ zeˇ c´ıch

Ned´ılnou souˇcást´ı testován´ı webov´ ych aplikac´ı je jejich zobrazen´ı v r˚ uzn´ ych internetov´ ych prohl´ıˇzeˇc´ıch. Ty ˇcasto interpretuj´ı kaskádové styly ˇci JavaScript velmi rozd´ılnˇe a v nˇekter´ ych pˇr´ıpadech mohou u ´plnˇe znemoˇznit práci se systémem. Kl´ıˇcové jsou pro aplikaci nejpouˇz´ıvanˇejˇs´ı prohl´ıˇzeˇce, kter´ ymi jsou Internet Explorer 6,7 a 8, FireFox 2 a 3, Opera 9.2, Safari 4 a Google Chrome. Ve vˇsech tˇechto prohl´ıˇzeˇc´ıch byla aplikace testována na operaˇcn´ım systému Windows. Dále probˇehl test na velkém mnoˇzstv´ı r˚ uzn´ ych prohl´ıˇzeˇc˚ u (celkem 63) pomoc´ı sluˇzby na serveru browsershots.org. Do této aplikace je moˇzné zadat adresu stránek a ona sama vygeneruje náhledy ve vybran´ ych prohl´ıˇzeˇc´ıch. Toto testován´ı odhalilo chybné zobrazen´ı formuláˇre pro zaloˇzen´ı nab´ıdky a nefunkˇcn´ı JavaScript na skr´ yván´ı nˇekter´ ych jeho poloˇzek v Internet Exploreru 6 a 7. Bylo nutné napsat zvláˇstn´ı skript pro tyto prohl´ıˇzeˇce, nebot’ na element option se nedala navázat JavaScriptová událost onClick a animaˇcn´ı funkce jQuery slideDown zp˚ usobovala mizen´ı formuláˇrov´ ych prvk˚ u.

42

´ Í KAPITOLA 6. TESTOVAN

Kapitola 7 Z´ avˇ er Hlavn´ım c´ılem práce bylo vytvoˇrit aukˇcn´ı systém internetové reklamy, kter´ y by reflektoval aktuáln´ı potˇreby. V´ ysledná aplikace pohodlnˇe umoˇzn ˇuje jak nákup, tak prodej reklamn´ıho prostoru pro obrázkovou (bannerovou) nebo textovou (zpˇetn´ y odkaz) reklamu. Pˇri poˇca´teˇcn´ı anal´ yze bylo nutné nahlédnout do problematiky on-line marketingu, aby v´ ysledná sluˇzba mohla co nejv´ıce vycházet vstˇr´ıc aktuáln´ım poˇzadavk˚ um. Tento pr˚ uzkum se podaˇrilo bezezbytku splnit a aplikace nyn´ı sama zajiˇst’uje nejd˚ uleˇzitˇejˇs´ı informace o internetov´ ych stránkách urˇcen´ ych pro inzerci. Podaˇrilo se také zodpovˇedˇet otázku, z jak´ ych d˚ uvod˚ u jsou tv˚ urci stránek ˇci inzerenti ochotni platit nemalé ˇca´stky za zpˇetné odkazy. Dalˇs´ım u ´kolem byl v´ ybˇer vhodného PHP frameworku pro implementaci. Prozkoumal jsem ty nejpouˇz´ıvanˇejˇs´ı a po peˇclivém zváˇzen´ı vˇsech klad˚ u i zápor˚ u jsem zvolil ˇcesk´ y framework Nette. I kdyˇz byla práce v tomto frameworku z poˇca´tku sp´ıˇse pˇr´ıtˇeˇz´ı, ve v´ ysledku Nette práci velmi usnadnilo a uˇsetˇrilo mnoho ˇrádek kódu. Pˇri implementaci autentizace uˇzivatele ˇci tvorbˇe formuláˇr˚ u bylo Nette obzvláˇstˇe uˇziteˇcné, nebot’ nab´ız´ı vlastn´ı funkˇcn´ı zp˚ usoby ˇreˇsen´ı. Tvorba UML diagram˚ u umoˇznila systematickou tvorbu systému a pˇrinesla ucelen´ y pohled na program jiˇz na poˇcátku v´ yvoje. Zabránila tak nˇekolikanásobnému pˇrepisován´ı zdrojov´ ych kód˚ u. Zejména diagram pˇr´ıpad˚ u uˇzit´ı mi pomohl uvˇedomit si, ˇze nˇekteré u ´kony se v aplikaci na r˚ uzn´ ych m´ıstech opakuj´ı a bylo by tedy lepˇs´ı implementovat je ve formˇe komponenty. Ta m˚ uˇze b´ yt opakovanˇe vyuˇzita na v´ıce m´ıstech aplikace. D´ıky testován´ı systému se podaˇrilo odhalit spoustu drobn´ ych chyb, zejména zobrazován´ı v r˚ uzn´ ych internetov´ ych prohl´ıˇzeˇc´ıch a nedostatky uˇzivatelského rozhran´ı. Vˇsechny tyto nedostatky byly u ´spˇeˇsnˇe opraveny. Grafická podoba aplikace se setkala s kladn´ ymi ohlasy. Celou práci hodnot´ım jako velice pˇr´ınosnou hlavnˇe z hlediska novˇe nabyt´ ych znalost´ı a zkuˇsenost´ı spojen´ ych s tvorbou internetov´ ych aplikac´ı. 43

´ ER ˇ KAPITOLA 7. ZAV

44

7.1

Doporuˇ cen´ı pro pokraˇ cov´ an´ı

I kdyˇz aplikace plnˇe splˇ nuje zadán´ı, jej´ı nasazen´ı do ostrého provozu bych doporuˇcil odloˇzit. Bˇehem v´ yvoje jsem se totiˇz setkal s mnoha dalˇs´ımi nápady, jak systém vylepˇsit. Napˇr´ıklad uˇzivatelé by si mohli dob´ıjet u ´ˇcty skuteˇcn´ ymi penˇezi a za nˇe uskuteˇcn ˇovat veˇskeré transakce. Systém by také mohl slouˇzit k draˇzbˇe jiného zboˇz´ı napˇr´ıklad domén nebo hotov´ ych projekt˚ u. Dalˇs´ı uˇziteˇcnou vˇec´ı by jistˇe bylo hodnocen´ı uˇzivatel˚ u, které by vypov´ıdalo o d˚ uvˇeryhodnosti nab´ıdek.

Kapitola 8 Seznam pouˇ zit´ ych zkratek AJAX Asynchronous JavaScript and XML ASP Active Server Pages CPT Cost Per Thousand CSS Cascading Style Sheets CTR Click Through Rate DOM Document Object Model DRY Dont Repeat Yourself DTD Document Type Definition FTP File Transfer Protocol HTML HyperText Markup Language HTTP Hypertext Transfer Protocol JSP JavaServer Pages MVC Model View Controller MVP Model View Presenter ODBC Open Data Base Connectivity PDA Personal Digital Assistant PDO PHP Data Objects PHP Hypertext Preprocessor PHTML PHP HyperText Markup Language 45

46

ˇ YCH ´ KAPITOLA 8. SEZNAM POUZIT ZKRATEK

PPC Pay Per Click PPT Pay Per Time PPV Pay Per View SEO Search Engine Optimization SQL Structured Query Language UI User Interface URL Uniform Resource Locator XHTML Extensible HyperText Markup Language XML Extensible Markup Language YAML YAML Ain’t Markup Language

Literatura [1] Alexa the web information company. http://www.alexa.com/, stav z 1. 6. 2009. [2] jQuery UI - Home. http://jqueryui.com/, stav z 31. 5. 2009. [3] MySQL - wikipedie, otevˇrená encyklopedie. http://cs.wikipedia.org/wiki/MySQL/, stav z 25. 5. 2009. [4] Nette framework forum. http://forum.nettephp.com/cs/,. [5] Pagerank - wikipedie, otevˇrená encyklopedie. http://cs.wikipedia.org/wiki/PageRank, stav z 10. 5. 2009. [6] qtip - the jquery tooltip plugin. http://craigsworks.com/projects/qtip/, stav z 1. 6. 2009. [7] The w3c markup validation service. http://validator.w3.org/, stav z 6. 6. 2009. [8] Zjistˇete si S-Rank a PageRank a dalˇs´ı ranky. http://xrank.cz/, stav z 31. 5. 2009. [9] J. Arlow and I. Neustadt. UML 2 a unifikovaný proces vývoje aplikac´ı. Computer Press, 2007. [10] P. Danˇek. Velk´ y test PHP framework˚ u: Zend, Nette, PHP a RoR. http://www.root.cz/clanky/velky-test-php-frameworku-zend-nette-php-a-ror/, stav z 20. 5. 2009. [11] D. Grudl. Mvc paradox a jak jej reˇsit. http://phpfashion.com/mvc-paradox-a-jak-jej-resit, stav z 27. 5. 2009. 47

48

LITERATURA

[12] D. Grudl. Nette framework: MVC a MVP. http://zdrojak.root.cz/clanky/nette-framework-mvc--mvp/, stav z 20. 5. 2009. [13] D. Grudl. Nette/application/presenter. http://nettephp.com/cs/nette-application-presenter, stav z 29. 5. 2009. [14] D. Grudl. Nette/Object — Nette Framework. http://nettephp.com/cs/nette-object, stav z 25. 5. 2009. [15] J. Krˇcmáˇr. Adobe Photoshop praktický webdesign. Grada, 2006. [16] M. Kub´ıˇcek. Velký pr˚ uvodce SEO. CPress, 2008. [17] R. Pecinovsk´ y. Návrhové vzory - 33 vzorových postup˚ u pro objektové programov´ an´ı. Computer Press, 2007.

Pˇ r´ıloha A UML diagramy

49

50

ˇ ÍLOHA A. UML DIAGRAMY PR

Obrázek A.1: Doménov´ y model aukˇcn´ıho systému.

51

Obrázek A.2: Use case diagram nepˇrihláˇseného uˇzivatele.

52


Obrázek A.3: Use case diagram pˇrihláˇseného uˇzivatele.

53

Obrázek A.4: Databázov´ y model aukˇcn´ıho systému.

54


Obrázek A.5: Diagram tˇr´ıd - vrstva controll.

55

Obrázek A.6: Diagram tˇr´ıd - vrstva model.

56


Pˇ r´ıloha B Zdrojov´ e k´ ody

57

ˇ ÍLOHA B. ZDROJOVE ´ KODY ´ PR

58 1
// [ Krok 1 ]: Naˇcten´ı Nette frameworku // toto umoˇzn´ı volat vˇsechny potˇrebné tˇr´ıdy automaticky. // Nen´ı proto nutné v ˇz´ adné tˇr´ıdˇe aplikace uv´ adˇet require pˇr´ıkazy. r e q u i r e o n c e LIBS DIR . ’ / Nette / l o a d e r . php ’ ;

8 // [ Krok 2 ]: Konfigurace prostˇred´ı 9 // 2a) povolen´ı Nette/Debug pro lepˇs´ı zobrazen´ı chyb a ladˇen´ı aplikace 10 Debug : : e n a b l e ( ) ; 12 // 2b) naˇcten´ı konfigurace z config.ini souboru 13 Environment : : l o a d C o n f i g ( ) ; 15 // 2c) kontrola, zdali m´ a adres´ aˇr /app/temp povolen´ı z´ apisu 16 i f ( @ f i l e p u t c o n t e n t s ( Environment : : expand ( ’%tempDir%/ c h e c k ’ ) , ’ ’ ) === FALSE) { 17 throw new E x c e p t i o n ( ”Make d i r e c t o r y ’ ” . Environment : : g e t V a r i a b l e ( ’ tempDir ’ ) . ” ’ w r i t a b l e ! ” ) ; 18 } 20 21 22 23 24

// 2d) povolen´ı RobotLoaderu - umoˇzn ˇuje automatické includov´ an´ı potˇrebných tˇr´ıd $ l o a d e r = new RobotLoader ( ) ; $ l o a d e r −>a d d D i r e c t o r y (APP DIR) ; $ l o a d e r −>a d d D i r e c t o r y ( LIBS DIR ) ; $ l o a d e r −>r e g i s t e r ( ) ;

26 // 2e) pˇripojen´ı do datab´ aze pomoc´ı dibi 27 d i b i : : c o n n e c t ( Environment : : g e t C o n f i g ( ’ d a t a b a s e ’ ) ) ; 29 // 2f ) nastaven´ı sessions a jejich u ´loˇzného adres´ aˇre 30 $ s e s s i o n = Environment : : g e t S e s s i o n ( ) ; 31 $ s e s s i o n −>s e t S a v e P a t h (APP DIR . ’ / s e s s i o n s / ’ ) ; 33 // [ Krok 3 ]: Konfigurace aplikace 34 // 3a) nastav´ı pˇredn´ı controller 35 $ a p p l i c a t i o n = Environment : : g e t A p p l i c a t i o n ( ) ; 37 // [ Krok 4 ]: Nastaven´ı routeru 38 $ r o u t e r = $ a p p l i c a t i o n −>g e t R o u t e r ( ) ; 40 $ r o u t e r [ ] = new Route ( ’ i n d e x . php ’ , array ( 41 ’ p r e s e n t e r ’ => ’ Homepage ’ , 42 ’ a c t i o n ’ => ’ d e f a u l t ’ , 43 ) , Route : : ONE WAY) ; 45 $ r o u t e r [ ] = new Route ( ’
// ’ , array ( 46 ’ p r e s e n t e r ’ => ’ Homepage ’ , 47 ’ a c t i o n ’ => ’ d e f a u l t ’ , 48 ’ i d ’ => NULL 49 ) ) ; 51 // [ Krok 5 ]: Spuˇstˇen´ı aplikace 52 $ a p p l i c a t i o n −>run ( ) ;

V´ ypis kódu B.1: Soubor bootstrap.php.

59

1 2 3 4 5 6

$form = new AppForm ( $ t h i s , ’ r e g i s t r a c e ’ ) ; $form−>addGroup ( ’ Pˇr i h l aˇs o v a c´ı u ´daje : ’ ) ; $form−>addText ( ’ l o g i n ’ , ’ l o g i n : ’ ) −>addRule ( Form : : FILLED , ’ Login mus´ı b´ y t vyplnˇe n . ’ ) −>addRule ( Form : : MIN LENGTH, ’ Minimá ln´ı dé l k a l o g i n u j s o u 2 znaky . ’ , 2 ) −>addRule ( Form : : MAX LENGTH, ’ Maximá ln´ı dé l k a l o g i n u j e 50 znak˚ u . ’ , 50) ;

8 $form−>addPassword ( ’ h e s l o ’ , ’ h e s l o : ’ ) 9 −>addRule ( Form : : FILLED , ’ H e s l o mus´ı b´ y t vyplnˇe no . ’ ) ; 11 $form−>addPassword ( ’ h e s l o K o n t r o l a ’ , ’ h e s l o znovu : ’ ) 12 −>addRule ( Form : : FILLED , ’ K o n t r o l a h e s l a mus´ı b´ y t vyplnˇe na . ’ ) 13 −>addRule ( Form : : EQUAL, ’ K o n t r o l a h e s l a n e s o u h l a s´ı . ’ , $form [ ’ h e s l o ’ ] ) ; 15 16 17 18

$form−>addGroup ( ’ Kontaktn´ı u ´daje : ’ ) ; $form−>addText ( ’ m a i l ’ , ’ e−m a i l : ’ ) −>addRule ( Form : : FILLED , ’E−m a i l mus´ı b´ y t vyplnˇe n . ’ ) −>addRule ( Form : : EMAIL, ’ Z a d e j t e p l a t n y ´ e−m a i l . ’ ) ;

21 $form−>addGroup ( ’ K o n t r o l a p r o t i spamu : ’ ) ; 23 24 25 26 27 28 29 30

$form−>addCaptcha ( ’ c a p t c h a ’ , ’ o p iˇs t e kó d : ’ ) −>s e t T e x t C o l o r ( Image : : rgb ( 0 , 0 , 0 ) ) −>s e t F o n t S i z e ( 1 4 ) −>s e t H e i g h t ( 2 8 ) −>setWidth ( 8 0 ) −>s e t B g C o l o r ( Image : : rgb ( 2 5 5 , 2 5 5 , 2 5 5 ) ) −>addRule ( ’ Captcha : : v a l i d a t e V a l i d ’ , ’ O p iˇs t e s p r á v nˇe p´ısmena z obrá zku . ’ ) −>g e t C o n t r o l P r o t o t y p e ( )−>c l a s s ( ’ c a p t c h a ’ ) ;

V´ ypis kódu B.2: Vytvoˇren´ı registraˇcn´ıho formuláˇre.


60

1 c l a s s Screenshot { 3 4

/∗ ∗ @var S t r i n g ∗ ∗/ p r i v a t e $code ;

6 7 8

public function construct () { $ t h i s −>code = ’ 5260 ’ ; }

10

p u b l i c f u n c t i o n s a v e S c r e e n s h o t ( $ u r l , $webid ) { i f ( extension loaded ( ’ c u r l ’ ) ) { $ch = c u r l i n i t ( ’ h t t p : / /www. s n a p c a s a . com/ g e t . aspx ? code= ’ . $ t h i s −>code . ’&s i z e=l&u r l= ’ . $ u r l ) ; curl setopt ( $ch , CURLOPT RETURNTRANSFER, true ) ; curl setopt ( $ch , CURLOPT BINARYTRANSFER, true ) ; $output = curl exec ( $ch ) ;

12 13 14 15 16

i f ( $output ) { $ f h = fopen (WWWDIR . ’ /img/ s c r e e n s h o t s / ’ . $webid . ’ . j p g ’ , ’w ’ ) ; f w r i t e ( $fh , $output ) ; fclose ( $fh ) ;

18 19 20 21

try { $image = Image : : f r o m F i l e (WWWDIR . ’ /img/ s c r e e n s h o t s / ’ . $webid . ’ . j p g ’ ) ; $image−>r e s i z e ( 1 0 0 , 7 5 ) ; $image−>s a v e (WWWDIR . ’ /img/ s c r e e n s h o t s /100 x75 / ’ . $webid . ’ . j p g ’ ) ; } c a t c h ( E x c e p t i o n $e ) { throw new E x c e p t i o n ( ’ N e p o d aˇr i l o s e v y t v oˇr i t s c r e e n s h o t s t r á n k y . Zkuste t o p o z d ˇe j i . ’ ) ; }

23 24 25 26 27 28 29 31 32 33 34 35 36 37 38 39 }

r e t u r n true ; } else { throw new E x c e p t i o n ( ’ Chyba pˇr i v y t v á ˇr e n´ı s c r e e n s h o t u str´ anky . ’ ) ; } } else { throw new E x c e p t i o n ( ’PHP e x t e n s i o n p h p c u r l i s not l o a d e d . ’ ) ; } }

V´ ypis kódu B.3: Tˇr´ıda screenshot.php. Vytvoˇren´ı náhledu stránky.

61

1 // Definice vlastn´ıho qtip stylu 2 $ . fn . qtip . s t y l e s . cerny = { 3 padding : 5 , 4 textAlign : ’ l e f t ’ , 5 border : { 6 width : 7 , 7 radius : 5 8 }, 9 tip : ’ leftMiddle ’ , 10 name : ’ dark ’ 11 } 13 // Nav´ az´ an´ı na element input 14 $ ( ’ i n p u t#frmvytvoreniAukce −t i t u l e k ’ ) . q t i p ( { 15 c o n t e n t : ’ T i t u l e k aukce s e z o b r a z´ı v d e t a i l u v aˇs´ı nab´ıdky . N e z o b r a z u j e s e pˇr i hromadném v y ´ p i s u a u k c´ı . ’ , 16 show : ’ mouseover ’ , 17 h i d e : ’ mouseout ’ , 18 s t y l e : ’ cerny ’ , 19 position : { 20 corner : { 21 target : ’ rightMiddle ’ , 22 tooltip : ’ leftMiddle ’ 23 } 24 } 25 } ) ;

V´ ypis kódu B.4: Ukázka skriptu qtips.js. Pouˇzit´ı jQuery qTip

62


Pˇ r´ıloha C Uˇ zivatelsk´ a pˇ r´ıruˇ cka V této pˇr´ıruˇcce naleznete instrukce pro vˇsechny d˚ uleˇzité funkce systému.

C.1

Registrace

1. Vpravo nahoˇre kliknˇete na odkaz registrace. 2. Vyplˇ nte vˇsechny poloˇzky formuláˇre. Vaˇse uˇzivatelské jméno mus´ı b´ yt unikátn´ı. Pokud jiˇz vaˇse jméno nˇekdo vyuˇz´ıvá, systém vás upozorn´ı. Dále je nutné správnˇe opsat kontroln´ı kód z obrázku. 3. Po u ´spˇeˇsné registraci vám bude zaslán e-mail na uvedenou adresu, kde je nutné kliknout na odkaz pro potvrzen´ı registrace. Pokud vám e-mail nepˇrijde, zkontrolujte spam. 4. Po tomto potvrzen´ı je jiˇz moˇzné se pˇrihlásit pod vaˇs´ım uˇzivatelsk´ ym jménem a heslem.

C.2

Pˇ rid´ an´ı str´ anky pro reklamu

1. Pro pˇridán´ı stránky je nutná registrace a pˇrihláˇsen´ı do systému. 2. V hlavn´ım menu zvolte poloˇzku MOJE WEBY, pod kterou se nacház´ı v´ ypis vaˇsich stránek pro reklamu. 3. Ve spodn´ı ˇca´sti stránky vlevo kliknˇete na odkaz Pˇ RIDAT NOV´ Y WEB. 4. Vyplˇ nte a odeˇslete zobrazen´ y formuláˇr. Dbejte na správn´ y tvar URL adresy. V tomto formuláˇri by URL adresa nemˇela konˇcit lom´ıtkem. 5. Po odeslán´ı formuláˇre se aplikace pokus´ı z´ıskat hodnoty PageRank, S-rank, Alexa rank a náhled stránky. To m˚ uˇze trvat delˇs´ı dobu (aˇz 1 minutu). Pokud se stránka pˇridá a vy u n´ı nevid´ıte náhled, zkuste tlaˇc´ıtko aktualizovat v sekci MOJE WEBY. 63

ˇ ÍLOHA C. UZIVATELSK ˇ ´ PR ˇ ÍRUCKA ˇ PR A

64

C.3

Vytvoˇ ren´ı nov´ e nab´ıdky

1. Pro vytvoˇren´ı nové nab´ıdky je nutná registrace a pˇrihláˇsen´ı do systému. 2. V hlavn´ım menu zvolte poloˇzku VYTVOˇ RIT NAB´ IDKU. 3. Vyplˇ nte formuláˇr, postupujte podle nápovˇedy. Vˇsechny poloˇzky jsou povinné kromˇe UKONˇ CIT AUKCI a KUP HNED CENA. Pokud se vám nápovˇeda nezobrazuje, ujistˇete se, ˇze máte ve svém prohl´ıˇzeˇci zapnut´ y JavaScript. 4. Na konci formuláˇre vyberte jeden z vaˇsich web˚ u pro tuto nab´ıdku, nebo m˚ uˇzete pˇridat nov´ y. Pokud pˇridáváte nov´ y, m˚ uˇze vytvoˇren´ı nab´ıdky trvat delˇs´ı dobu (aˇz 1 minutu). 5. Po u ´spˇeˇsném odeslán´ı formuláˇre budete pˇresmˇerováni do sekce MOJE NAB´ IDKY.

C.4

´ cast na aukci/prodeji Uˇ

1. Pro u ´ˇcast na nab´ıdce je nutná registrace a pˇrihláˇsen´ı do systému. ŃKA. Zde jsou zobrazeny 2. Kliknˇete v hlavn´ım menu na poloˇzku DOMOVSK´ A STRA prob´ıhaj´ıc´ı nab´ıdky. Je moˇzné je ˇradit podle libovolné kombinace sloupc˚ u. 3. Pro u ´ˇcast na nab´ıdce, je nutné zobrazit jej´ı detail. Uˇcin´ıte tak kliknut´ım na ikonku lupy u vybrané nab´ıdky. 4. Pokud se jedná o prodej za pevnou cenu, m˚ uˇzete zakoupit libovoln´ y poˇcet slot˚ u za uvedenou ˇca´stku kliknut´ım na tlaˇc´ıtko KUP SLOT. Pokud jde o aukci, je moˇzné pˇrihodit libovolnou ˇca´stku nejn´ıˇze vˇsak minimáln´ı pˇr´ıhoz. Jeho hodnota je vyplnˇena automaticky. Provedete tak tlaˇc´ıtkem Pˇ RIHOˇ D. Nˇekdy je moˇzné zakoupit aukci okamˇzitˇe tlaˇc´ıtkem KUP HNED. 5. Pokud nab´ıdku zakoup´ıte, nebo je váˇs pˇr´ıhoz na aukci nejvyˇsˇs´ı v dobˇe jej´ıho ukonˇcen´ı, budou vám zaslány kontaktn´ı u ´daje prodejce. Je také moˇzné pˇridat k nab´ıdce komentáˇr. Komentáˇre slouˇz´ı primárnˇe k upˇresnˇen´ı nab´ıdky a zodpovˇezen´ı vˇsech nejasnost´ı.

Pˇ r´ıloha D Instalaˇ cn´ı pˇ r´ıruˇ cka Jelikoˇz se jedná o internetovou aplikaci napsanou v jazyce PHP, je nutné, aby bˇeˇzela na serveru Apache s nainstalovan´ ym a správnˇe nakonfigurovan´ ym PHP a databáz´ı. Pro vyzkouˇsen´ı je systém v obdob´ı od 20.5.2009 do 1.8.2009 um´ıstˇen na webovém serveru na adrese www.webdeal.cz.

D.1

Instalace

1. Zkop´ırujte obsah sloˇzky aplikace do koˇrenového adresáˇre na vaˇsem serveru. 2. Ujistˇete se, ˇze sloˇzky /img/avatars, /img/screenshots, /img/screenshots/100x75 /app/temp a /app/log maj´ı nastaveno právo zápisu. 3. Do databáze importujte soubor webdeal.sql 4. V souboru /app/config.ini nastavte pˇrihlaˇsovac´ı u ´daje pro vaˇsi databázi. 5. Pokud je to tˇreba, tak v souboru index.php zmˇen ˇte cesty ke kl´ıˇcov´ ym adresáˇr˚ um.

D.2

Poˇ zadavky na server

• PHP minimálnˇe ve verzi 5.2.0. • Nainstalovaná databáze MySQL 5. • Povoleny PHP rozˇs´ıˇren´ı php_curl, php_gd2 (mus´ı b´ yt v bundled verzi). • Povolena PHP funkce ini_set(). • Na serveru Apache povolen rewrite_module. • Vypnut´ y eAccelerator.

65

66

ˇ ÍLOHA D. INSTALACN ˇ Í PR ˇ ÍRUCKA ˇ PR

Pˇ r´ıloha E Obsah pˇ riloˇ zen´ eho CD • /aplikace – Kompletn´ı zdrojové kódy systému. • /databaze – Obsahuje vyexportovanou databázi do souboru webdeal.sql. • /bakalarska_prace – PDF s bakaláˇrskou prac´ı. • /prirucka – Obsahuje instalaˇcn´ı a uˇzivatelskou pˇr´ıruˇcku. • /dokumentace – Kompletn´ı dokumentace vygenerovaná programem PHP Documentor.

67

Aukční systém internetové reklamy

Recommend Documents