Text ...
Uk´azka k´odu 4.3: Uk´azka widgetu Accordion Pˇredchoz´ı pˇr´ıklad (zdroj [2]) opˇet ukazuje jednoduchost pouˇzit´ı jQuery.
Tabs Ovl´adac´ı prvek Tabs je z velk´e ˇc´asti podobn´ y pˇredchoz´ımu widgetu. Rozd´ıl spoˇc´ıv´a pouze v tom, ˇze Accordion pˇripom´ın´a harmoniku a Tabs pˇripom´ın´a panel karet (z´aloˇzek), na kter´ y jsme zvykl´ı z nejr˚ uznˇejˇs´ıch program˚ u. Uˇzivatel klikne na poˇzadovanou z´aloˇzku a ta zobraz´ı sv˚ uj obsah. Jedin´ y rozd´ıl oproti pˇredchoz´ımu pˇr´ıkladu spoˇc´ıv´a v u ´pravˇe jQuery, kdy m´ısto .accordion(); pouˇzijeme .tabs();
16
Progressbar Tento ovl´adac´ı prvek je pouze zobrazovac´ı a uˇzivatel jej m˚ uˇze mˇenit pouze expliˇ adn´ citnˇe. Z´ ym zp˚ usobem nelze na liˇstu kliknout a zmˇenit tak jej´ı hodnotou. S liˇstou zobrazovac´ı pr˚ ubˇeh operace se lze setkat napˇr´ıklad pˇri stahov´an´ı ˇci kop´ırov´an´ı soubor˚ u. Pˇr´ıklad tohoto velice jednoduch´eho widgetu je vidˇet na uk´azce k´odu 4.4 (zdroj [2]) < link rel = " stylesheet " href = " // code . jquery . com / ui /1.11.4/ themes / smoothness / jquery - ui . css " > < script src = " // code . jquery . com / jquery -1.10.2. js " > < script src = " // code . jquery . com / ui /1.11.4/ jquery - ui . js " > ... < script > $ ( function () { $ ( " # progressbar " ) . progressbar ({ value : 37 }) ; }) ; ... < div id = " progressbar " >
Uk´azka k´odu 4.4: Uk´azka widgetu Progressbar Staˇc´ı pouze zavolat .progressbar(); a pot´e zadat ˇc´ıslo od 0 do 100 do parametru value, kter´e reprezentuje u ´daj v procentech.
4.5
AJAX
AJAX je zkratka pro Asynchronous JavaScript and XML (Asynchronn´ı JavaScript a XML). Jedn´a se o takov´ y syst´em komunikace mezi klientem a serverem, kde prob´ıh´a pˇrenos dat bez nutnosti znovunaˇcten´ı webov´e str´anky. Aby mohl syst´em fungovat, tak vˇsechny souˇcasn´e webov´e prohl´ıˇzeˇce poskytuj´ı tzv. XMLHttpRequest objekt, kter´ y se pouˇz´ıv´a pro pos´ıl´an´ı Ajaxov´e ˇza´dosti na webov´ y server a n´asledn´e odpovˇedi s poˇzadovan´ ymi daty (pˇrevzato z [1]). Na obr´azc´ıch 4.1 a 4.2 je vidˇet srovn´an´ı standardn´ı HTTP komunikace se serverem a AJAXu. Typick´ ym pˇr´ıkladem tohoto syst´emu je naˇsept´avaˇc (k vidˇen´ı napˇr´ıklad u vyhled´avaˇce Google). Jakmile uˇzivatel nap´ıˇse ˇca´st textu, tak uˇz jsou zobrazeny pod textov´ ym polem pravdˇepodobn´e varianty c´ılov´eho textu. Naˇsept´avaˇc funguje tak, ˇze pokaˇzd´e, kdyˇz uˇzivatel stiskne kl´avesu, tak se pomoc´ı XMLHttpRequest pˇrenese 17
HTTP žádost (request)
> Klient - webový prohlížeč
HTTP odpověď (response) nová stránka
>
>
> >
Webový server
> Aplikační server Databázový server
Obr´azek 4.1: Standardn´ı pˇrenos pomoc´ı HTTP protokolu (vlastn´ı tvorba na z´akladˇe obr´azku z [1])
Obr´azek 4.2: Uk´azka AJAXu a jeho komunikace se serverem (zdroj [17])
souˇcasn´a ˇc´ast textu na server a server podrob´ı tuto ˇc´ast textu anal´ yze a vyhled´av´a podle toho v datab´azi ˇci v jin´em zdroji dat. Pravdˇepodobn´e varianty vrac´ı klientovi a data jsou pomoc´ı JavaScriptu zobrazena do textov´eho pole. Dalˇs´ı informace (vˇcetnˇe pˇr´ıklad˚ u a zdrojov´ ych k´od˚ u) lze na nal´ezet na [10]. Objekt prohl´ıˇzeˇce XMLHttpRequest m´a sadu vlastnost´ı a metod, kter´e se pˇri pr´aci s t´ımto objektem vyuˇz´ıvaj´ı (specifikaci a uk´azky zdrojov´ ych k´od˚ u lze nal´ezt na [16]).
18
5 Implementace syst´emu Fantasy ligy 5.1
Popis aplikace
Vˇse, co uˇzivatel potˇrebuje k ovl´ad´an´ı aplikace je webov´ y prohl´ıˇzeˇc. Vzhledem k tomu, ˇze FL je z´avisl´a na konkr´etn´ı re´aln´e lize, tak u ´spˇech silnˇe z´avis´ı na tom, kdy uˇzivatel zaˇcne hr´at. Ide´aln´ı pˇr´ıpad je, pokud se uˇzivatel zaregistruje pˇred zaˇca´tkem soutˇeˇze. Nicm´enˇe v aplikaci nen´ı nijak omezeno, kdy se uˇzivatel registruje. Po registraci ˇcek´a uˇzivatele prvotn´ı vytvoˇren´ı sestavy a pot´e se jiˇz hra v podstatˇe toˇc´ı v cyklu, jehoˇz jedna iterace je doba mezi jednotliv´ ymi hrac´ımi dny. Situaci zn´azorˇ nuje obr´azek 5.1. Modˇre jsou vyznaˇceny aktivity uˇzivatele a ˇcernˇe aktivity aplikace nez´avisl´e na uˇzivateli. Tento cyklus prov´ad´ı uˇzivatele po celou dobu Fantasy
Import statistik
ní tká
yu edk l s ý av n í án ček
tra
ns
for
ma ce
na
Fan tas
yb od y
Vytvoření sestavy
kontrola výsledků uživatelem
Uzávěrka hracího dne
Obr´azek 5.1: Cyklus aplikace
ligy. Zejm´ena je d˚ uleˇzit´a kontrola v´ ysledk˚ u. Pro u ´spˇech ve hˇre je velice d˚ uleˇzit´e (aˇz t´emˇeˇr nezbytn´e) sledovat v´ ysledky a pr˚ ubˇehy z´apas˚ u, zjiˇst’ovat zranˇen´ı jednotliv´ ych hr´aˇc˚ u a moment´aln´ı formu. Nyn´ı budou rozebr´any jednotliv´e elementy v obr´azku.
5.1.1
Vytv´ aˇ ren´ı sestavy
Na tuto ˇca´st aplikace je tˇreba kl´ast velk´ y d˚ uraz, nebot’ je to v podstatˇe jedin´a uˇzivatelem upravovateln´a (editovateln´a) souˇca´st aplikace. Mˇela by b´ yt dobˇre vypadaj´ıc´ı 19
a uˇzivatelsky pˇr´ıvˇetiv´a. Vytv´aˇren´ı sestavy je ˇreˇseno pomoc´ı javascriptov´e knihovny jQuery UI (jQuery User Interface), umoˇzn ˇuj´ıc´ı tvoˇrit jednoduch´a uˇzivatelsk´a rozhran´ı na u ´rovni webov´e aplikace. Vytv´aˇren´ı sestavy je sloˇzeno ze ˇctyˇr ovl´adac´ıch prvk˚ u (tzv. widget˚ u) z knihovny jQuery UI: interakˇcn´ı syst´em Drag and Drop (t´ahni a pust’ - detailnˇeji viz ˇca´st 4.4.1 jQuery UI - Draggable a Droppable na stranˇe 14), widget Accordion (zobrazen´ı seskupen´ ych dat - detailnˇeji viz ˇc´ast 4.4.1 jQuery UI - Accordion na stranˇe 16), widget Progressbar (informaˇcn´ı liˇsta o pr˚ ubˇehu akce - detailnˇeji viz ˇc´ast 4.4.1 jQuery UI - Progressbar na stranˇe 17), widget Tabs (zobrazen´ı pomoc´ı karet - detailnˇeji viz ˇca´st 4.4.1 jQuery UI Tabs na stranˇe 16).
Kombinace tˇechto ˇctyˇr prvk˚ u umoˇzn´ı vytv´aˇret sestavy pˇr´ıvˇetiv´ ym a dobˇre vypadaj´ıc´ım zp˚ usobem. Pr´ace s jednotliv´ ymi ovl´adac´ımi prvky z knihovny jQuery UI je jednoduch´a (aˇz na syst´em Drag and Drop, kter´ y je lehce komplikovan´ y). M´od vytv´aˇren´ı sestavy je vidˇet na obr´azku 5.2. Jsou zde vidˇet vˇsechny ˇctyˇri ovl´adac´ı prvky z jQuery UI. V lev´e ˇca´sti rozev´ırac´ı seznam vˇsech hr´aˇc˚ u seskupen´ ych do jednotliv´ ych t´ ym˚ u (Accordion). V horn´ı ˇca´sti se nach´az´ı stav rozpoˇctu a liˇsta, kter´a zobrazuje procentu´aln´ı m´ısto pod platov´ ym stropem (Progressbar). Sestava sest´av´a ze 3 formac´ı a jednoho brank´aˇre. Aby se nemuselo ˇreˇsit sloˇzit´e pozicov´an´ı 15 hr´aˇc˚ u a jednoho brank´aˇre, je na jednotliv´ ych kart´ach vidˇet pouze ta aktu´alnˇe zobrazen´a formace pˇeti hr´aˇc˚ u a zb´ yvaj´ıc´ı dvˇe jsou schovan´e (Tabs). Syst´em Drag and Drop lze na statick´em obr´azku jen tˇeˇzko zn´azornit. Na obr´azku jsou vidˇet pr´azdn´e a obsazen´e dresy. Ty symbolizuj´ı m´ısta, kam lze um´ıstit hr´aˇce (Droppable). Aby se hr´aˇc mohl do toho m´ısta dostat, je tˇreba si zvolit hr´aˇce v katalogu a pot´e prostˇrednictv´ım tlaˇc´ıtka myˇsi ho vz´ıt a t´ahnout“ na c´ılovou pozici. ” Kaˇzd´ y hr´aˇc toto t´ahnut´ı“ podporuje (Draggable). Na obr´azku je vidˇet koneˇcn´a f´aze, ” kdy uˇz je hr´aˇc v bl´ızkosti Droppable m´ısta a staˇc´ı pouze pustit tlaˇc´ıtko myˇsi a hr´aˇc je pˇrid´an. Za vˇsimnut´ı stoj´ı, ˇze jednou pˇridan´ y hr´aˇc jiˇz ztr´ac´ı schopnost Draggable, aby neˇsel pˇridat znovu (na obr´azku je vyznaˇcen zelenou barvou). Na tzv. droppable m´ıstˇe je po um´ıstˇen´ı hr´aˇce vidˇet nˇekolik u ´daj˚ u. Dres symbolizuje t´ ym, za kter´ y hr´aˇc hraje. D´ale je zde vidˇet jm´eno, cena hr´aˇce (kter´a se odeˇc´ıt´a od rozpoˇctu), tlaˇc´ıtko Zruˇsit“ a hr´aˇcova fotografie. V tomto projektu je fotografie ” u vˇsech hr´aˇc˚ u pr´azdn´a, nebot’ by mohl v pˇr´ıpadˇe nasazen´ı re´aln´ ych fotek nastat probl´em s autorsk´ ymi pr´avy. Pokud se aplikace dostane do ostr´eho provozu, tak je moˇzn´e fotky doplnit. 20
Obr´azek 5.2: Roster management - vytv´aˇren´ı sestav
5.1.2
Import statistik
Tato ˇca´st aplikace je do jist´e m´ıry automatick´a a podl´eh´a administr´atorovi. ˇ adn´a interakce ˇci pˇr´ım´e ovl´ad´an´ı uˇzivatelem se nepˇredpokl´ad´a. Probl´em statistik Z´ jiˇz byl ˇc´asteˇcnˇe pops´an v anal´ yze probl´em˚ u (konkr´etnˇe viz 3.2 Statistiky na stranˇe 6). Jak jiˇz bylo ˇreˇceno, tak bez statistik z re´aln´e ligy nem´a FL smysl. Funkˇcnost FL z´avis´ı nejenom na statistik´ach jako takov´ ych, ale pˇredevˇs´ım na jejich n´asledn´e transformaci na Fantasy body.
Import ˇ sen´ı pomoc´ı zpoPˇri anal´ yze jsem uv´adˇel tˇri moˇzn´a ˇreˇsen´ı probl´emu statistik. Reˇ platnˇen´eho importu by bylo ze vˇsech nejjednoduˇsˇs´ı a nejlepˇs´ı. V r´amci bakal´aˇrsk´e pr´ace jsem se ale mimo jin´e chtˇel zab´ yvat i moˇznostmi, jak vyuˇz´ıvat data z jin´ ych server˚ u. Proto jsem se rozhodl implementovat tˇret´ı bod v anal´ yze, a sice stahov´an´ı statistik ze serveru. Pro tento projekt byl jako prim´arn´ı zdroj informac´ı a statistik pouˇzit server hokej.cz. Import statistik lze rozdˇelit na n´asleduj´ıc´ı pod´ ulohy: 1. Nalezen´ı a staˇzen´ı poˇzadovan´ ych soubor˚ u se statistikami na serveru Tento bod silnˇe z´avis´ı na serveru. Pokud nebudou soubory vhodnˇe ˇclenˇen´e a
21
snadno k nalezen´ı, m˚ uˇze tento bod pˇredstavovat velk´ y probl´em1 . Nalezen´ı soubor˚ u mus´ı prov´est administr´ator. V pˇr´ıpadˇe serveru textbfhokej.cz je to realizov´ano tak, ˇze existuje jeden soubor, kde se lze pˇrep´ınat mezi jednotliv´ ymi koly podle parametr˚ u URL2 Podle parametru URL se automaticky vybere poˇzadovan´e hrac´ı kolo a soubor se st´ahne. Staˇzen´ y soubor obsahuje kompletn´ı kolo a odkazy na jednotliv´e z´apasy. V cyklu se projdou vˇsechny z´apasy a st´ahnou se jednotliv´e soubory z´apas˚ u. V tˇechto souborech jsou kromˇe jin´ ych informac´ı tak´e jiˇz poˇzadovan´a data se statistikami. Za stahov´an´ı je zodpovˇedn´a sada funkc´ı jazyka PHP3 curl (detailnˇeji viz [5] ˇci pˇr´ıpadnˇe [19]), zejm´ena funkce curl exec() (viz [6]). Na obr´azku 5.4 je vidˇet zdroj dat ze serveru hokej.cz. 2. Nalezen´ı ve staˇzen´em souboru poˇzadovan´a data - statistiky Nyn´ı kdyˇz je soubor uloˇzen na disku a je k dispozici je nutn´e z nˇej extrahovat ta spr´avn´a data. Pro extrakci a hled´an´ı v souboru byl vyuˇzit soubor (knihovna) simple html dom.php (pˇrevzato z [3]) D´ıky tomu to souboru je moˇzn´e hledat v HTML souborech na z´akladˇe DOM 4 Uk´azka pr´ace z touto knihovnou je vidˇet na obr´azku 5.3. Je vidˇet, ˇze jednoduch´ ym zp˚ usobem m˚ uˇzeme hledat a pˇristupovat k jednotliv´ ym element˚ um html souboru.
Obr´azek 5.3: Uk´azka pr´ace se Simple HTML DOM parserem (pˇrevzato z [4])
Tyto dva body se provedou vˇzdy po odehr´an´ı jednoho hrac´ıho dne (kola). Pokyn k jejich proveden´ı vyd´a administr´ator v administraci syst´emu. Nicm´enˇe je moˇzn´e tuto u ´lohu napl´anovat a zautomatizovat tak syst´em importu. Pokud jiˇz m´ame k dispozici poˇzadovan´a data (statistiky), tak m˚ uˇze zaˇc´ıt proces transformace na Fantasy body. 1 Je nutn´e poznamenat, ˇze pokud se zmˇen´ı struktura webu, ze kter´eho se statistiky automaticky stahuj´ı, tak je tˇreba se tomu pˇrizp˚ usobit. Proto zd˚ urazˇ nuji, ˇze toto ˇreˇsen´ı nen´ı ide´aln´ı a pro nasazen´ı v ostr´em provozu nen´ı pˇr´ıliˇs vhodn´e. 2 Uniform Resource Locator - specifick´a adresa um´ıstˇen´ı na Internetu 3 PHP: Hypertext Preprocessor - jazyk pro psan´ı dynamick´ ych webov´ ych aplikac´ı 4 Document Object Model viz [8]
22
Obr´azek 5.4: Zdroj dat z webu hokej.cz
Transformace statistik na Fantasy body Z hlediska Fantasy bod˚ u se statistiky dˇel´ı na tˇri skupiny: 1. Hr´aˇcsk´e statistiky Do t´eto skupiny patˇr´ı pro div´aka ty nejzaj´ımavˇejˇs´ı statistiky. Tuto skupinu tvoˇr´ı: vstˇrelen´e g´oly, asistence, tabulka pravdy (+/-)5 , stˇrely na br´anu a tzv. Radegast index6 . Veˇsker´a transformace na Fantasy body zde spoˇc´ıv´a v n´asoben´ı statistiky koeficientem (v z´avislosti na tom, jestli je hr´aˇc u ´toˇcn´ık ˇci obr´ance 5
statistika pozitivn´ı ˇci negativn´ı u ´ˇcasti na ledˇe pˇri vstˇrelen´em ˇci obdrˇzen´em g´olu Statistika pˇrevzata z ofici´ aln´ıch statistik hokejov´e Tipsport Extraligy. Radegast index charakterizuje bojovnost hr´ aˇce a zahrnuje zblokovan´e stˇrely a hity. Poˇc´ıt´a se n´asleduj´ıc´ım zp˚ usobem. RI = (+/-) + (poˇcet hit˚ u) + 2(poˇcet zblokovan´ ych stˇrel) 6
23
m˚ uˇze b´ yt r˚ uzn´ y koeficient). N´asledovat bude pˇresn´ y v´ yˇcet vˇsech transformac´ı. Pro u ´toˇcn´ıky: F B goly = goly · 7
(5.1)
F B goly = goly · 10
(5.2)
Pro obr´ance:
Dalˇs´ı statistiky se jiˇz pro obr´ance i u ´toˇcn´ıky poˇc´ıaj´ı stejnˇe. F B asistence = asistence · 5 F B plusminus = plusminus strely F B strely = 2 F B radegastIndex = radegastIndex
(5.3) (5.4) (5.5) (5.6)
2. Brank´aˇrsk´e statistiky Tyto statistiky se t´ ykaj´ı brank´aˇr˚ u a jsou lehce rozs´ahlejˇs´ı. Rozd´ıl oproti pˇredchoz´ımu bodu spoˇc´ıv´a v tom, ˇze ne vˇsechny statistiky se n´asob´ı koeficientem. Konkr´etnˇe se jedn´a o statistiku u ´spˇeˇsnosti z´akrok˚ u, kdy se pˇrevod na Fantasy body prov´ad´ı tabulkovˇe (viz obr´azek 5.5). Dalˇs´ı statistiky u brank´aˇr˚ u lze popsat jako podm´ınkov´e statistiky“ - tedy body se pˇripoˇc´ıtaj´ı za splnˇen´ı ur” ˇcit´ ych podm´ınek. V pˇr´ıpadˇe ˇcist´eho konta brank´aˇr vydˇel´a 15 bod˚ u V pˇr´ıpadˇe v´ıtˇezn´eho z´apasu brank´aˇr vydˇel´a 2 body V pˇr´ıpadˇe odehran´ı v´ıce neˇz 40 minut brank´aˇr vydˇel´a 3 body V pˇr´ıpadˇe zah´ajen´ı z´apasu brank´aˇr vydˇel´a 3 body Ostatn´ı brank´aˇrsk´e statistiky se jiˇz pˇrev´ad´ı zp˚ usobem uveden´ ym v pˇredchoz´ım bodu. F B obdrzene goly = obdrzene goly · (−1) F B vstrelene goly = vstrelene goly · 30 F B asistence = asistence · 10 zakroky F B zakroky = 10
(5.7) (5.8) (5.9) (5.10)
3. Obecn´e statistiky Tyto statistiky jsou spoleˇcn´e pro vˇsechny hr´aˇce a brank´aˇre. Tyto statistiky se (podobnˇe jako u ´spˇeˇsnost z´akrok˚ u u brank´aˇr˚ u) transformuj´ı pomoc´ı tabulky (viz obr´azek 5.6). Je tˇreba znovu pˇripomenout, ˇze v tomto projektu figuruj´ı pouze z´akladn´ı statistiky. Tud´ıˇz tabulky na pˇrevod vhazov´an´ı a odehran´ ych minut se v tomto projektu nevyuˇzij´ı, nicm´enˇe pˇrevod t´eto statistiky je k dispozici. 24
Obr´azek 5.5: Tabulka pro transformaci u ´spˇeˇsnosti z´asah˚ u na Fantasy body
Obr´azek 5.6: Tabulka obecn´ ych statistik pro vˇsechny hr´aˇce
Chybˇ ej´ıc´ı hr´ aˇ ci Pˇri importu statistik se m˚ uˇze st´at, ˇze nastoup´ı hr´aˇc, kter´ y nemus´ı b´ yt v datab´azi. Tato skuteˇcnost se m˚ uˇze st´avat pomˇernˇe ˇcasto, protoˇze za re´aln´ y klub m˚ uˇze nastoupit napˇr´ıklad junior nebo hr´aˇc z niˇzˇs´ı soutˇeˇze. Tato vˇec je bˇeˇzn´a i v takov´ ych 25
soutˇeˇz´ıch jako je NHL. Nicm´enˇe z pohledu programov´an´ı aplikace toto pˇredstavuje probl´em. Pokud hr´aˇc neexistuje v DB, tak se mu nemohou pˇripsat statistiky ani Fantasy body. ˇ sen´ım by bylo vytvoˇrit ˇsirˇs´ı datab´azi. Ale stejnˇe bychom probl´em nevyˇreˇsili, Reˇ protoˇze by se dˇr´ıve ˇci pozdˇeji naˇsel nˇejak´ y hr´aˇc, kter´ y prostˇe v datab´azi nebude. Tento probl´em jsem vyˇreˇsil tak, ˇze v pˇr´ıpadˇe importov´an´ı statistiky hr´aˇce, kter´eho syst´em nezn´a, se vytvoˇr´ı z´aznam v datab´azi a vloˇz´ı se pouze jm´eno a pˇr´ıjmen´ı a statistiky. V dan´em ˇcase toho syst´em v´ıc o hr´aˇci nev´ı. Syst´em v tomto pˇr´ıpadˇe y vytvoˇr´ı (pokud je jiˇz vytvoˇren tak pouze otevˇre) soubor missing players.txt, kter´ signalizuje administr´atorovi, ˇze byl do DB pˇrid´an tento hr´aˇc. Na administr´atorovi je, aby hr´aˇce upravil (tj. vyplnil v´ yˇsku, v´ahu, n´arodnost, klub) a pˇridal do katalogu hr´aˇc˚ u, aby byl jiˇz pro pˇr´ıˇst´ı kolo pˇripraven. Usoudil jsem, ˇze tento zp˚ usob ˇreˇsen´ı je v podstatˇe jedin´ y moˇzn´ y, protoˇze pokus o jakoukoliv automatizaci by byl velice tˇeˇzk´ y (ne-li nemoˇzn´ yu ´kol), protoˇze se m˚ uˇze jednat o hr´aˇce, kter´ y nebude figurovat ani na ofici´aln´ıch webov´ ych str´ank´ach klub˚ u. Situace je zn´azornˇena na obr´azku 5.7. V tomto pˇr´ıpadˇe pˇri importu syst´em neznal tˇri hr´aˇce a vytvoˇril si jejich z´aznam v tabulce hr´aˇc˚ u. Na obr´azku je tak´e vidˇet, ˇze syst´em zn´a pouze jm´eno a odveden´ y v´ ykon ve formˇe statistik. Jak jiˇz bylo ˇreˇceno, tak n´asledovat mus´ı z´asah administr´atora a ruˇcn´ı vyplnˇen´ı chybˇej´ıc´ıch u ´daj˚ u.
Obr´azek 5.7: Obsah tabulky hr´aˇc˚ u po importu statistik nezn´am´ ych hr´aˇc˚ u
5.1.3
Uz´ avˇ erka hrac´ıho dne
Uzav´ır´an´ı hrac´ıho dne je z hlediska implementace jednoduˇsˇs´ı neˇz vytv´aˇren´ı sestav nebo import statistik. Tuto ˇca´st lze charakterizovat koneˇcnou f´azi cyklu, kdy se vˇse pˇriprav´ı na n´asleduj´ıc´ı pr˚ ubˇeh (iteraci). Uz´avˇerka se mus´ı postarat o n´asleduj´ıc´ı: aktualizovat uˇzivatelsk´e rozpoˇcty a ceny jednotliv´ ych hr´aˇc˚ u,
26
zkop´ırovat vˇsechny uˇzivatelsk´e sestavy na dalˇs´ı hrac´ı kolo, aktualizovat hodnotu hrac´ıho dne v souboru config.php.
Aktualizace rozpoˇct˚ u a cen hr´aˇc˚ u je pˇr´ım´ y krok po transformaci statistik na Fantasy body. Syst´em najde vˇsechny uˇzivatele, kteˇr´ı mˇeli hr´aˇce v sestavˇe a prom´ıtne vydˇelan´e Fantasy body na finanˇcn´ı odmˇenu na z´akladˇe n´asleduj´ıc´ıho vzorce. F inance = F antasy body · 5000
(5.11)
ˇ Stejn´ Za kaˇzd´ y Fantasy bod se z´ısk´av´a 5 000 virtu´aln´ıch KC. y vzorec plat´ı i pro zvyˇsov´an´ı ceny hr´aˇc˚ u. Vypoˇc´ıtan´e pen´ıze se n´aslednˇe pˇriˇctou do rozpoˇctu uˇzivatel˚ um a k cenˇe jednotliv´ ym hr´aˇc˚ um. Dalˇs´ı d˚ uleˇzit´ y bod, o kter´ y se tato ˇca´st star´a jsou uˇzivatelsk´e sestavy. Pˇri registraci si uˇzivatel vytvoˇr´ı prvotn´ı sestavu (tzn. na zaˇca´tku m´a pr´azdnou soupisku). V kaˇzd´em dalˇs´ım odehran´em kole se sestava zkop´ıruje a uˇzivatel pouze sestavu upravuje (nevytv´aˇr´ı ji znovu). 7 Kop´ırov´an´ı je ˇreˇseno na u ´rovni datab´aze, kdy se vloˇz´ı znovu vˇsechny existuj´ıc´ı sestavy a aktualizuje se u nich sloupeˇcek ud´avaj´ıc´ı se kter´ ym hrac´ım dnem je sestava sv´az´ana. Posledn´ı element´arn´ı u ´prava spoˇc´ıv´a v aktualizaci hodnoty v souboru config.php. V tomto souboru se nach´az´ı pouze definovan´e konstanty pro pr´aci s datab´az´ı a pak pr´avˇe ˇc´ıslo ud´avaj´ıc´ı poˇcet odehran´ ych hrac´ıch dn˚ u (kol). Tento u ´daj je d˚ uleˇzit´ y zejm´ena pro zobrazov´an´ı statistik a v´ ysledk˚ u uˇzivatele v uˇzivatelsk´e ˇc´asti, kdy prob´ıh´a zobrazov´an´ı od nejmladˇs´ıho data po nejstarˇs´ı. D´ale pak tento u ´daj vyuˇz´ıv´a tituln´ı strana, kter´a podle nˇej zobrazuje pˇr´ıˇst´ı z´apasy (viz obr´azek 5.8).
7
Pokud chce uˇzivatel zaˇc´ıt od pr´ azdn´e sestavy, m´a moˇznost pomoc´ı tlaˇc´ıtka Zruˇsit vˇse“ ”
27
Obr´azek 5.8: Dom´ac´ı obrazovka uˇzivatele
5.2
Zabezpeˇ cen´ı aplikace
5.2.1
Autentizace do syst´ emu
Pro pˇrihlaˇsov´an´ı do syst´emu Fantasy ligy je vyˇzadov´ana z´akladn´ı autentizaˇcn´ı metoda pomoc´ı dvojice: pˇrihlaˇsovac´ı jm´eno (login) a heslo (password). V syst´emu nen´ı ˇz´adn´ ym zp˚ usobem hl´ıd´ana obt´ıˇznost hesla (d´elka hesla, poˇcet velk´ ych a mal´ ych znak˚ u a poˇcet speci´aln´ıch znak˚ u).
28
Proces pˇ rihlaˇ sov´ an´ı a hashov´ an´ı Jakmile uˇzivatel zad´a uˇzivatelsk´a jm´eno a heslo, tak se pˇrenesou HTTP8 protokolem (konkr´etnˇe metodou post) data na server. Na serveru dojde k zahashov´ an´ı hesla pomoc´ı hashovac´ı funkce MD5 (problematika hashov´an´ı a MD5 byla vysvˇetlena v ˇca´sti 3.4.3 Problematika hashov´an´ı a ukl´ad´an´ı hesel do datab´aze). Hashov´an´ı hesla by bylo tak´e moˇzn´e na stranˇe klienta (pomoc´ı skriptovac´ıho jazyka JavaScript). D´ıky tomu by byl syst´em bezpeˇcnˇejˇs´ı, protoˇze by se poˇc´ıtaˇcovou s´ıti nepˇren´aˇselo heslo v otevˇren´em textu (tzv. plaintext). Pot´e se login porovn´a s loginem a hash hesla porovn´a s hashem uveden´ ym v datab´azi. Pokud oba u ´daje souhlas´ı, je uˇzivateli umoˇznˇen vstup do syst´emu a je pˇresmˇerov´an na svoji domovskou str´anku (homepage). Je tˇreba jeˇstˇe dodat, ˇze ID uˇzivatele je na serveru drˇzeno v tzv. sessions a tud´ıˇz se uˇzivatel nemus´ı pˇri pohybu v uˇzivatelsk´e sekci opakovanˇe pˇrihlaˇsovat. Podle [15] je session (neboli relace) zp˚ usob uloˇzen´ı informace (v promˇenn´ ych) kter´e mohou b´ yt pouˇzity na v´ıce str´ank´ach. V podstatˇe se jedn´a o ukl´adac´ı m´ısto na stranˇe serveru9 . Sessions mohou b´ yt napˇr´ıklad vyuˇzity v internetov´em obchodˇe jako n´akupn´ı koˇs´ık nebo (jako v tomto projektu) pro drˇzen´ı pˇrihl´aˇsen´eho uˇzivatele. Uchov´an´ı hashe hesla v datab´azi je tak´e vhodn´e z d˚ uvodu bezpeˇcnosti. V pˇr´ıpadˇe u ´toku na datab´azi a z´ısk´an´ı u ´daj˚ u m´a potenci´aln´ı u ´toˇcn´ık k dispozici pouze hash hesla a ne heslo samotn´e. Ot´azkou je samozˇrejmˇe bezpeˇcnost a prolomitelnost hashov´an´ı, ale to nen´ı c´ılem t´eto bakal´aˇrsk´e pr´ace.
5.2.2
Implementace zamyk´ an´ı sestav
Ve Fantasy lize z hlediska bezpeˇcnosti existuje dalˇs´ı probl´em, a sice uzamyk´an´ı sestavy. Uˇzivatel m´a pouze omezen´ y ˇcas k tomu, aby svoji sestavu upravil a pˇripravil se tak na n´asleduj´ıc´ı kolo. Uˇzivatel je sezn´amen s uz´avˇerkou sestavy pomoc´ı ˇcasovaˇce, ˇ kter´ y uvid´ı na sv´e domovsk´e str´ance (viz obr´azek 5.8). Casovaˇ c odpoˇc´ıt´av´a ˇcas aˇz do 60 minut pˇred zaˇc´atkem prvn´ıho utk´an´ı. Po uplynut´ı tohoto ˇcasov´eho limitu je uˇzivateli zablokov´ana jak´akoliv moˇznost manipulace se sestavou. Sestava bude opˇet odemknuta aˇz po importu statistik a pˇrips´an´ı bod˚ u. Uzamyk´an´ı mus´ı b´ yt ned´ılnou souˇca´st´ı vˇsech Fantasy lig, nebot’ uˇzivatel by mohl sledovat utk´an´ı a na z´akladˇe toho mˇenit a pˇrizp˚ usobovat sestavu. V takov´em pˇr´ıpadˇe by Fantasy liga nemˇela smysl. 8 9
HyperText Transfer Protocol - protokol pro transport HTML dokument˚ u Na rozd´ıl od cookies, kdy jsou informace drˇzeny na stranˇe klienta
29
Zablokov´an´ı je realizov´ano tak, ˇze se skryje odkaz na u ´pravu sestavy a m´ısto 10 nˇej je zobrazena informace o zablokov´an´ı sestavy . Je tˇreba rozliˇsit kde se uˇzivatel zrovna v dobˇe uzamyk´an´ı nach´az´ı. Pokud se uˇzivatel nach´az´ı v m´odu u ´pravy sestavy, tak je pˇresmˇerov´an z t´eto sekce. Pˇresmˇerov´an´ı bude fungovat i pokud uˇzivatel obejde odkaz a zad´a do URL ˇr´adku ve webov´em prohl´ıˇzeˇci pˇr´ımo n´azev souboru, kter´ y je spojen s m´odem u ´pravy sestavy.
10
dynamick´e ukryt´ı a zobrazen´ı je realizov´ano pomoc´ı knihovny jQuery a jeho metod hide() a show()
30
6 Datab´aze V t´eto ˇc´asti bude pops´ana struktura datab´aze. Celkovˇe se v datab´azi nach´az´ı 15 tabulek. Z d˚ uvodu pˇrehlednosti budou uvedeny jednotliv´e tabulky a relace po smyslupln´ ych ˇc´astech, kter´e vˇzdy tvoˇr´ı menˇs´ı celek.
6.1
Hr´ aˇ ci a kluby
Informace o hr´aˇc´ıch a klubech jsou uloˇzeny v n´asleduj´ıc´ıch tˇrech tabulk´ach: 1 czech league players, 1 czech league clubs a inactivity types. Tabulka usoben´ı v lize1 . inactivity types slouˇz´ı jako ˇc´ıseln´ık a obsahuje typy ukonˇcen´ı hr´aˇcova p˚
Obr´azek 6.1: Struktura tabulek uchov´avaj´ıc´ı informace o hr´aˇc´ıch a klubech 1
Typy ukonˇcen´ı v lize jsou n´ asleduj´ıc´ı. Hr´aˇc ukonˇcil kari´eru, hr´aˇc je dlouhodobˇe zranˇen´ y a hr´ aˇc odeˇsel do zahraniˇc´ı
31
6.2
Z´ apasy a statistiky
ˇ adovˇe se Z´apasy a statistiky jsou nejrychleji pˇrib´ yvaj´ıc´ı informace v syst´emu. R´ jedn´a o import pˇribliˇznˇe 300 u ´daj˚ u za jeden hrac´ı den. Informace jsou v datab´azi jsou uloˇzeny ve ˇctyˇrech tabulk´ach: 1 czech league statistics, 1 czech league matches, game over types a 1 czech league match statistics. Strukturu ukazuje obr´azek 6.1. Tabulka 1 czech league match statistics je zde pouze jako spojovac´ı tabulka. Tabulka game over types obsahuje typy ukonˇcen´ı z´apasu (norm´aln´ı hrac´ı doba, prodlouˇzen´ı, n´ajezdy).
Obr´azek 6.2: Struktura tabulek uchov´avaj´ıc´ı informace o z´apasech a statistik´ach
6.3
Vytv´ aˇ ren´ı sestavy
Pro vytv´aˇren´ı sestavy je k dispozici tabulka 1 czech league rosters. Co se t´ yˇce sloupeˇck˚ u, tak z tohoto hlediska je tato tabulka nejrozs´ahlejˇs´ı. V t´eto tabulce se nach´azej´ı sestavy na jednotliv´e hrac´ı dny vytvoˇren´e jednotliv´ ymi uˇzivateli. S uˇzivatelem je tabulka v relaci s tabulkou users. Tabulka users je tak´e nezbytn´a pro pˇrihlaˇsov´an´ı do syst´emu. Situaci ukazuje obr´azek 6.3
32
Obr´azek 6.3: Struktura tabulek uchov´avaj´ıc´ı informace o sestav´ach
6.4
ˇ anky Cl´
Vytv´aˇren´ı a spr´avu ˇcl´ank˚ u zabezpeˇcuj´ı tˇri tabulky: articles, files a autors. Tabulka autors udrˇzuje informace u autorech ˇcl´ank˚ u. Kombinace tabulek articles a files uchov´av´a vˇse potˇrebn´e k vytv´aˇren´ı a ˇcten´ı ˇcl´ank˚ u.
33
Obr´azek 6.4: Struktura tabulek uchov´avaj´ıc´ı informace o ˇcl´anc´ıch a autorech
6.5
Testov´ an´ı
Pro testovac´ı m´od bylo tˇreba vytvoˇrit pouze dvˇe jednoduch´e tabulky, kter´e mezi sebou nemaj´ı ˇza´dn´ y vztah. Jedn´a se o tabulky testers a testers report. Do tabulky testers report se ukl´adaj´ı v´ ysledky testov´an´ı.
Obr´azek 6.5: Struktura tabulek u testovac´ıho m´odu
34
7 Testov´an´ı Tato kapitola se zamˇeˇr´ı na bod zad´an´ı t´ ykaj´ıc´ı se testov´an´ı aplikace re´aln´ ymi uˇzivateli. Testov´an´ı aplikace prob´ıhalo pr˚ ubˇeˇznˇe pˇri tvorbˇe t´eto bakal´aˇrsk´e pr´ace. Pr˚ ubˇeˇzn´e testov´an´ı (formou ladˇen´ı) mˇely za c´ıl odhalit potenci´aln´ı chyby pˇredevˇs´ım v m´odu vytv´aˇren´ı sestavy, kter´ y je pro funkˇcnost cel´eho projektu z´asadn´ı. Tato kapitola nicm´enˇe popisuje z´avˇereˇcnou f´azi testov´an´ı, a sice testov´an´ı re´aln´ ymi uˇzivateli.
7.1
Testovac´ı m´ od
Za u ´ˇcelem realizace testov´an´ı re´aln´ ymi uˇzivateli je k dispozici testovac´ı m´od, kter´ y je do jist´e m´ıry samostatn´a aplikace. M´od simuluje funkˇcnost cel´eho projektu a zahrnuje n´asleduj´ıc´ı ˇc´asti1 . 1. V´ ybˇer hrac´ıho kola Vzhledem k tomu, ˇze tento projekt byl dokonˇcen aˇz po odehr´an´ı 1. hokejov´e ligy, tak poˇcet kol byl z celkov´eho poˇctu 52 zkr´acen na 5. Je tˇreba si uvˇedomit, ˇze poˇcet hrac´ıch dn˚ u je z hlediska testov´an´ı nepodstatn´ y a na testov´an´ı poˇcet hrac´ıch dn˚ u ani konkr´etn´ı v´ ybˇer hrac´ıho dne nem´a vliv. 2. Vytvoˇren´ı sestavy na toto hrac´ı kolo Toto bych si dovolil oznaˇcit za nejd˚ uleˇzitˇejˇs´ı ˇc´ast testov´an´ı. Tester zde mus´ı vytvoˇrit sestavu a v testovac´ım sc´en´aˇri m´a uvedeno, aby se pˇredevˇs´ım zamˇeˇril na syst´em Drag and Drop. V syst´emu je tak´e nutn´e otestovat potenci´aln´ı logick´e chyby (napˇr´ıklad aby brank´aˇr neˇsel pˇriˇradit na m´ısto obr´ance a dalˇs´ı chyby tohoto typu) 3. Kontrola dosaˇzen´ ych v´ ysledk˚ u se zvolenou sestavou Po vytvoˇren´ı sestavy se uˇzivatel dozv´ı v´ ysledek. Zobraz´ı se naprosto stejn´ y v´ ysledek jako kdyby jiˇz uˇzivatel soutˇeˇzil ve Fantasy lize. Tato ˇca´st testov´an´ı m´a pˇredevˇs´ım za u ´kol otestovat pˇrehlednost a u ´plnost prezentace v´ ysledk˚ u. 4. Vyplnˇen´ı testovac´ıho dotazn´ıku Posledn´ı ˇc´ast testov´an´ı je pouze z´ısk´an´ı zpˇetn´e vazby od testera formou webov´eho formul´aˇre. Srovn´ame-li testovac´ı m´od a celou aplikaci Fantasy ligy, tak, vynech´ame-li v aplikaci Fantasy ligy datab´azi a celkovˇe ukl´ad´an´ı statistik a v´ ysledk˚ u, jsou do jist´e m´ıry 1
Detailn´ı popis vˇcetnˇe obr´ azk˚ u bude uveden v pˇr´ıloze 8 Uˇzivatelsk´ a dokumentace
35
totoˇzn´e. Testovac´ı m´od tedy umoˇzn´ı zobrazen´ı v´ ysledk˚ u online“, tj. bez pouˇzit´ı ” datab´aze. Z´apasy a hrac´ı kola jsou jedin´e vˇeci, ke kter´ ym je datab´aze nutn´a.
7.2
Shrnut´ı v´ ysledk˚ u
V t´eto ˇc´asti budou zobrazeny a n´aslednˇe diskutov´any v´ ysledky test˚ u. Testov´an´ı prov´adˇelo 11 tester˚ u. Na z´akladˇe dotazn´ıku, kter´ y vyplnili na z´avˇer testov´an´ı, jsou k dispozici n´asleduj´ıc´ı u ´daje. Design webu ohodnotilo 8 tester˚ u jako V´ yborn´ y“ a 3 jako Docela dobr´ y“. ” ” Zb´ yvaj´ıc´ı moˇznosti ( Pr˚ umˇern´e“ a Nevyhovuj´ıc´ı“) nezvolil ˇza´dn´ y z tester˚ u (viz ” ” Graf 1 v sekci Pˇr´ıloha B - Tabulky a grafy na stranˇe 54). Co se t´ yˇce pˇrehlednosti v´ ysledk˚ u na z´akladˇe zvolen´ ych sestav, tak 8 tester˚ u zvolilo moˇznost Vˇse pˇrehledn´e a jasn´e“ a 3 testeˇri zvolili Nepˇr´ıliˇs pˇrehledn´e, ale orientace ” ” celkem dobr´a“. Moˇznost Nepˇrehledn´e a nejasn´e“ nezvolil ˇza´dn´ y z tester˚ u (viz Graf ” 2 v sekci Pˇr´ıloha B - Tabulky a grafy na stranˇe 54). Zaj´ımav´e bylo zjiˇstˇen´ı, kolik zkuˇsenost´ı s jin´ ymi Fantasy ligami mˇeli jednotliv´ y testeˇri. Mezi testery necel´a polovina zvolila moˇznost Nehraji ˇza´dnou FL“. V´ıce neˇz ” polovina tester˚ u jiˇz zkuˇsenosti s FL mˇela a 4 zvolili moˇznost Hraji hokejovou FL“ ” a 2 zvolili moˇznost Hraji fotbalovou i hokejovou FL“. Moˇznosti Hraji jinou FL“ ” ” a Hraji fotbalovou FL“ nikdo nezvolil (viz Graf 3 v sekci Pˇr´ıloha B - Tabulky a grafy ” na stranˇe 55). Posledn´ı graficky zpracovan´ y v´ ysledek testov´an´ı se t´ yk´a chybˇej´ıc´ıch doplˇ nuj´ıc´ıch statistik. Ot´azka znˇela, jak moc V´am vadila absence nˇekter´ ych statistik. Mezi testery pˇrevl´adal n´azor, ˇze chybˇej´ıc´ı statistiky nepˇredstavuj´ı probl´em. Na tuto ot´azku zvolilo 7 tester˚ u odpovˇedˇelo Nevadilo. Mysl´ım, ˇze z´akladn´ı statistiky staˇc´ı“ a 4 Nevadilo, ” i kdyˇz s nimi by to bylo lepˇs´ı. Zb´ yvaj´ıc´ı moˇznosti Vadilo a postr´adal jsem je“ ” a Vadilo a je to d˚ uvod proˇc bych to nehr´al“ nezvolil ˇza´dn´ y z tester˚ u (viz Graf 5 ” v sekci Pˇr´ıloha B - Tabulky a grafy na stranˇe 55).
Zaznamenan´ e v´ aˇ znˇ ejˇ s´ı probl´ emy Pˇri vytv´aˇren´ı sestavy se dva testeˇri setkali s t´ım, ˇze po pˇrid´an´ı hr´aˇce se ukazatel stavu penˇez dostal na nulu, aˇckoliv rozpoˇcet ukazoval jeˇstˇe znaˇcnou ˇc´astku. Po obnoven´ı str´anky a vymaz´an´ı vˇsech hr´aˇc˚ u se jiˇz tento probl´em neobjevil.
36
8 Z´avˇer C´ılem t´eto bakal´aˇrsk´e pr´ace bylo naprogramovat webovou aplikaci Fantasy ligy. Podaˇrilo se mi implementovat syst´em takov´ ym zp˚ usobem, ˇze lze syst´em snadno aplikovat na jin´e hokejov´e ligy. Jedin´e, co je potˇreba dodat je zdroj statistik, hr´aˇce a informace o dan´e lize. V r´amci pˇr´ıpravy jsem podnikl pr˚ uzkum v oblasti Fantasy lig a z´ıskan´e poznatky jsem vyuˇzil pˇri n´avrhu a realizace bakal´aˇrsk´e pr´ace. Vytvoˇren´ı redakˇcn´ıho a administraˇcn´ıho reˇzimu se zdaˇrilo a pˇri realizaci byl kladen d˚ uraz na to, aby autoˇri ˇcl´ank˚ u ani administr´ator nemuseli b´ yt program´atory, a pˇresto mohli syst´em ovl´adat. Pˇri testov´an´ı nˇekolik tester˚ u postr´adalo nˇekter´e prvky, na kter´e byli z jin´ ych webov´ ych aplikac´ı zvykl´ı. Konkr´etnˇe se jedn´a o absenci vlastn´ıho ˇrazen´ı hr´aˇc˚ u pˇri vytv´aˇren´ı sestavy a pˇripom´ınky k syst´emu Drag and Drop. Testov´an´ı bakal´aˇrsk´e pr´ace se podle m´eho n´azoru zdaˇrilo. Testov´an´ı pˇrineslo ˇradu pˇripom´ınek a drobn´ ych chyb, ale podle m´eho n´azoru c´ılem bakal´aˇrsk´e pr´ace nen´ı vytvoˇrit software, kter´ y je 100% funkˇcn´ı na prvn´ı pokus. Pˇredevˇs´ım jde o to vyzkouˇset si cel´ y proces v´ yvoje od specifikace aˇz po uveden´ı na trh. A testov´an´ı (a n´asledn´a oprava chyb, kter´e testov´an´ı odhalilo) je ned´ılnou souˇca´st´ı tohoto procesu v´ yvoje. Se syst´emem Drag and Drop jsem nemˇel v˚ ubec ˇza´dn´e zkuˇsenosti. Usoudil jsem, ˇze pro vytv´aˇren´ı sestavy je tento syst´em velmi vhodn´ y a proto mu byla vˇenov´ana velk´a pozornost. Aˇckoliv testeˇri objevili nˇekolik nedostatk˚ u, jsem pˇresvˇedˇcen, ˇze se mi podaˇrilo vytvoˇrit pˇr´ıjemn´e prostˇred´ı pro vytv´aˇren´ı sestav. Co se t´ yˇce n´avrh˚ u na vylepˇsen´ı, tak v prvn´ı ˇradˇe bych zanalyzoval v´ ysledky testov´an´ı a na z´akladˇe toho bych realizoval zmˇeny, pˇredevˇs´ım v syst´emu Drag and Drop, kter´ y je z hlediska uˇzivatele nejd˚ uleˇzitˇejˇs´ı. Bohuˇzel jsem se pˇresvˇedˇcil, ˇze nen´ı jednoduch´e dostat do syst´emu statistiky a pro vytvoˇren´ı Fantasy ligy, kter´a m´a potenci´al uspˇet v ostr´em provozu, je nutn´e opˇr´ıt se o nˇejakou spoleˇcnost ˇci firmu, zab´ yvaj´ıc´ı se sportovn´ı problematikou. Mysl´ım, ˇze se mi podaˇrilo u ´spˇeˇsnˇe splnit vˇsechny body zad´an´ı a vytvoˇrit tak robustn´ı, funkˇcn´ı a dobˇre vypadaj´ıc´ı webovou aplikaci.
37
Literatura [1] RUVALCABA, Zak a Mike MURACH. Murach’s JavaScript and jQuery: training. Fresno, CA: Mike Murach, 2012, ISBN 978-189-0774-707 [2]
JQuery UI [online]. 2015 [cit. 2015-03-14]. Dostupn´e z: http://jqueryui.com/
[3] JOSHI, Vijay. Mastering jQuery UI [online]. 2015 [cit. 2015-03-28]. ISBN 978-1-78328-665-2. Dostupn´e z: http://www.it-ebooks.info/book/4858/ [4] SOURCEFORGE.NET. PHP Simple HTML DOM Parser [online]. 2015 [cit. 2015-03-14]. Dostupn´e z: http://simplehtmldom.sourceforge.net/ [5] The TCP/IP Guide [online]. 2005 [cit. 2015-03-15]. Dostupn´e z: http://www.tcpipguide.com/free/t NetworkStructuralModelsandClient ServerandPeertoPee.htm [6] PHP Manual: Client URL Library [online]. 2001-2015 [cit. 2015-03-17]. Dostupn´e z: http://php.net/manual/en/book.curl.php [7] PHP Manual: Function curl exec [online]. 2001-2015 [cit. 2015-03-17]. Dostupn´e z: http://php.net/manual/en/function.curl-exec.php [8] Document Object Model. W3C. W3C DOM [online]. 2005 [cit. 2015-03-17]. Dostupn´e z: http://www.w3.org/DOM/ [9] DOM: Document Object Model. Tvorba-webu.cz [online]. 2003-2008 [cit. 2015-03-28]. Dostupn´e z: http://www.tvorba-webu.cz/dom/ [10] AJAX Introduction. W3schools.com [online]. 1999-2015 [cit. 2015-04-01]. Dostupn´e z: http://www.w3schools.com/Ajax/ajax intro.asp [11] DASWANI, Neil, Christoph KERN a Anita KESAVAN. Foundations of security: what every programmer needs to know. New York, 2007, ISBN 978-1590597-842.
38
[12] PHP 5 Cookies. W3schools.com [online]. 1999-2015 [cit. 2015-03-31]. Dostupn´e z: http://www.w3schools.com/php/php cookies.asp [13] Cookies. Php.net [online]. 2001-2015 [cit. 2015-03-31]. Dostupn´e z: http://php.net/manual/en/features.cookies.php [14] Kerberos: The Network Authentication Protocol. Web.mit.edu [online]. 2015 [cit. 2015-03-31]. Dostupn´e z: http://web.mit.edu/kerberos/ [15] PHP 5 Sessions. W3schools.com [online]. 1999-2015 [cit. 2015-03-31]. Dostupn´e z: http://www.w3schools.com/php/php sessions.asp [16] XMLHttpRequest Level 1. W3C [online]. 2014 [cit. 2015-04-01]. Dostupn´e z: http://www.w3.org/TR/XMLHttpRequest/ [17] AJAX-diagram. Future Vision Computers Institut [online]. 2015 [cit. 2015-04-01]. Dostupn´e z: http://futurevisioncomputers.com/jquery/ajax-diagram/ [18] CLARK, Richard. Beginning HTML5 and CSS3: the Web evolved : next generation Web standards. New York, 2012, ISBN 978-1-4302-2874-5. [19] MITCHELL, Lorna Jane. PHP web services : [APIs for the modern web]. 2013, ISBN 978-1-44935-656-9. [20] JavaScript Tutorial. W3schools [online]. 1999-2015 [cit. 2015-04-01]. Dostupn´e z: http://www.w3schools.com/js/
39
Pˇ r´ıloha A Uˇ zivatelsk´ a dokumentace Administr´ atorsk´ aˇ c´ ast Vzhledem k tomu, ˇze webov´a aplikace zprostˇredkov´av´a dlouhodobou soutˇeˇz, je administraˇcn´ı ˇca´st velice d˚ uleˇzitou souˇc´ast´ı projektu. Administrace je realizov´ana tak, aby spr´avce (administr´ator) soutˇeˇze nemusel b´ yt program´ator. Vˇse je rozdˇeleno na podstr´anky a sekce. Po pˇrihl´aˇsen´ı do administrace se zobraz´ı odkazy pro vstup do jednotliv´ ych sekc´ı administrace. Situace je vidˇet na obr´azku 1, str.:40.
Obr´azek 1: Administrace Fantasy ligy
40
Nyn´ı si rozebereme jednotliv´e podsekce. 1. sekce - Vytvoˇ rit nov´ eho hr´ aˇ ce Tato sekce se star´a o vytvoˇren´ı nov´eho hr´aˇce. Nezbytn´a souˇc´ast projektu je mnoˇzina hr´aˇc˚ u, kter´a mus´ı b´ yt v syst´emu pˇr´ıtomna pˇred zaˇca´tkem soutˇeˇze, aby uˇzivatel´e mˇeli z ˇceho vyb´ırat. Pokud by bylo nutn´e na zaˇca´tku nebo v pr˚ ubˇehu sez´ony vytvoˇrit nov´eho hr´aˇce, tak je zde pr´avˇe tato sekce. Sekce je vidˇet na obr´azku 2, str.:41.
Obr´azek 2: Administrace Fantasy ligy - vytvoˇren´ı nov´eho hr´aˇce
2. sekce - Spravovat hr´ aˇ ce Tato sekce obsahuje vˇsechny existuj´ıc´ı hr´aˇce v aplikaci. Je to v podstatˇe seznam hr´aˇc˚ u a operace, kter´e se s t´ımto seznamem daj´ı prov´adˇet. Operace s hr´aˇci jsou n´asleduj´ıc´ı: Upravit, Zmˇenit klub a Vyˇradit hr´aˇce. Pro lepˇs´ı vyhled´av´an´ı je k dispozici vyhled´av´an´ı podle jm´ena, kde je implementov´an naˇsept´avaˇc (pomoc´ı AJAX). Sekce je vidˇet na obr´azku 3, str.:42. 3. sekce - Spravovat neaktivn´ı hr´ aˇ ce Tato sekce se od pˇredchoz´ı liˇs´ı pouze t´ım, ˇze obsahuje seznam jiˇz nehraj´ıc´ıch hr´aˇc˚ u. Je zde i moˇznost hr´aˇce opˇetovnˇe zaˇradit mezi aktivn´ı. Sekce je vidˇet na Obr´azku 4, str.:42.
41
Obr´azek 3: Administrace Fantasy ligy - spr´ava hr´aˇc˚ u
Obr´azek 4: Administrace Fantasy ligy - spr´ava neaktivn´ıch hr´aˇc˚ u 4. sekce - Spravovat kluby Tato sekce m´a na starost spr´avu klub˚ u. Je zde moˇznost zmˇenit veˇsker´e informace, kter´e se o klubu uchov´avaj´ı. Sekce je vidˇet na obr´azku 5, str.:43 5. sekce - Spravovat ˇ cl´ anky Tato sekce m´a na starost spr´avu ˇcl´ank˚ u. Je zde moˇznost Odstranit ˇcl´anek a vytv´aˇret nov´e autory. Sekce je vidˇet na obr´azku 6, str.:43
42
Obr´azek 5: Administrace Fantasy ligy - spr´ava klub˚ u
Obr´azek 6: Administrace Fantasy ligy - spr´ava klub˚ u 6. sekce - Nastaven´ı utk´ an´ı V t´eto sekci prob´ıh´a nastavov´an´ı utk´an´ı. Administr´ator nastav´ı jednolitv´e z´apasy a hrac´ı dny. Sekce je vidˇet na obr´azku 7, str.:44. 7. sekce - V´ ysledky a statistiky utk´ an´ı V t´eto sekci prob´ıh´a nastavov´an´ı statistik a v´ ysledk˚ u. Po odehr´an´ı z´apasu m´a administr´ator moˇznost vyplnit manu´alnˇe statistiky. Po vyplnˇen´ı vˇsech statistik dojde k uzavˇren´ı hrac´ıho dne a prob´ıh´a transformace statistik do Fantasy bod˚ u. Sekce je vidˇet na obr´azku 8, str.:44.
43
Obr´azek 7: Administrace Fantasy ligy - spr´ava utk´an´ı
Obr´azek 8: Administrace Fantasy ligy - spr´ava statistik
8. sekce - Import statistik Posledn´ı sekce umoˇzn ˇuje administr´atorovi import statistik - tedy automatick´e vyplnˇen´ı statistik. V sekci staˇc´ı jen kliknout na poˇzadovan´e kolo jehoˇz statis44
tiky chce administr´ator st´ahnout (pˇredt´ım mus´ı b´ yt vytvoˇren´a utk´an´ı v datab´azi - sekce Nastaven´ı utk´an´ı). Po importu dojde k uzavˇren´ı hrac´ıho dne a probˇehne transformace statistik do Fantasy bod˚ u. Sekce je vidˇet na obr´azku 9, str.:45.
Obr´azek 9: Administrace Fantasy ligy - spr´ava statistik
Uˇ zivatelsk´ aˇ c´ ast Tato ˇca´st je jiˇz veˇrejn´a a uˇzivatel˚ um pˇr´ıstupn´a. Po registraci a pˇrihl´aˇsen´ı uˇzivatele se zobraz´ı u ´vodn´ı obrazovka (obr´azek 10, str.:46). Je zde shrnut´ı tˇech nejd˚ uleˇzitˇejˇs´ıch informac´ı. V uˇzivatelsk´e sekci je menu (podobnˇe jako v administraci). Pro uˇzivatele nejd˚ uleˇzitˇejˇs´ı poloˇzky jsou Moje statistiky a Moje sestava. Ostatn´ı poloˇzky jsou pouze informaˇcn´ıho charakteru.
Moje sestava Tato sekce umoˇzn ˇuje uˇzivateli vytv´aˇret a mˇenit sestavu. Sekce je vidˇet na obr´azku 11, str.:47. Na lev´e stranˇe je katalog hr´aˇc˚ u, kde m´a uˇzivatel k dispozici vˇsechny hr´aˇce. Nahoˇre je ukazatel zb´ yvaj´ıc´ıho rozpoˇctu. Zbytek obrazovky vyplˇ nuj´ı jiˇz vybran´ı hr´aˇci. Pˇrid´av´an´ı hr´aˇc˚ u do sestavy je prov´adˇeno technikou Drag & Drop1 . 1
T´ ahni a pust’. Technika spoˇc´ıv´ a v kliknut´ı a drˇzen´ı myˇsi nad objektem a ten t´ımto zp˚ usobem
45
Obr´azek 10: Fantasy liga - domov uˇzivatele
Moje statistiky Druh´a pro uˇzivatele d˚ uleˇzit´a sekce je sice informaˇcn´ıho charakteru, ale zde jsou um´ıstˇeny statistiky a Fantasy body hr´aˇc˚ u nach´azej´ıc´ı se v uˇzivatelovˇe sestavˇe. Sekce je vidˇet na obr´azku 12, str.:47. Sekce je realizov´ana tak, ˇze kaˇzd´ y hr´aˇc m´a svoji vlastn´ı tabulku, kde v prvn´ım ˇra´dku jsou re´aln´e statistiky z utk´an´ı a ve druh´em odpov´ıdaj´ıc´ı Fantasy body. V posledn´ıch dvou sloupeˇcc´ıch jsou informace d˚ uleˇzit´e pro uˇzivatele. Jednak o kolik stoupla cena hr´aˇce a jednak kolik bod˚ u uˇzivateli vydˇelal2 . pˇresunout a pot´e ho pustit na nov´e m´ısto. 2 Na obr´ azku je informace, ˇze uˇzivatel obdrˇzel 84 bod˚ u z d˚ uvodu, ˇze tento hr´aˇc byl kapit´an a kv˚ uli tomu se body n´ asob´ı 3x
46
Obr´azek 11: Fantasy liga - vytv´aˇren´ı sestav
Pr´avˇe na z´akladˇe tˇechto bod˚ u prob´ıh´a soutˇeˇz.
Obr´azek 12: Fantasy liga - moje statistiky
47
ˇ anky Cl´ V t´eto sekci vid´ı uˇzivatel vˇsechny vytvoˇren´e ˇcl´anky. Je zde vidˇet titulek ˇcl´ank˚ u, kter´ y slouˇz´ı jako odkaz pro otevˇren´ı cel´eho ˇcl´anku. D´ale je mal´ y obr´azek a u ´vodn´ıch nˇekolik slov ˇcl´anku. Sekce je vidˇet na obr´azku 13, str.:48. Detail ˇcl´anku pak na obr´azku 14, str.:48
Obr´azek 13: Fantasy liga - ˇcl´anky
Obr´azek 14: Fantasy liga - detail ˇcl´anku
48
Kluby Zde si m˚ uˇze uˇzivatel prohl´ıˇzet informace o jednotliv´ ych klubech. Sekce je vidˇet na obr´azku 15, str.:49.
Obr´azek 15: Fantasy liga - kluby
Statistiky Kromˇe jiˇz popisovan´e sekce Moje statistiky se v t´eto sekci nach´az´ı prohl´ıˇzen´ı statistik a Fantasy bod˚ u. V obou sekc´ıch m´a moˇznost uˇzivatel vyhled´avat a ˇradit tabulky podle uv´aˇzen´ı. Statistiky jsou vidˇet na obr´azku 16 na stranˇe 50. Fantasy body pak na obr´azku 17 na stranˇe 51.
49
Obr´azek 16: Fantasy liga - statistiky
Pravidla a bodov´ an´ı Tato sekce pouze shrnuje pravidla soutˇeˇze a popisuje transformaci statistik na Fantasy body
50
Obr´azek 17: Fantasy liga - Fantasy body hr´aˇc˚ u
Autorsk´ aˇ c´ ast Tato ˇca´st slouˇz´ı pro vytv´aˇren´ı a u ´pravu ˇcl´ank˚ u. Autor mus´ı b´ yt vytvoˇren administr´atorem. Ten mu pˇridˇel´ı defaultn´ı heslo, kter´e by si mˇel autor pomoc´ı volby Zmˇenit heslo zmˇenit. Sekce je vidˇet na obr´azku 18, str.:52. Autor m´a moˇznost vy´ tvoˇrit nov´ y ˇcl´anek nebo st´avaj´ıc´ı upravit. Uprava ˇcl´anku je vidˇet na obr´azku 19, str.:52. Autor m´a zde k dispozici editor, pomoc´ı nˇehoˇz snadno lze form´atovat text.
51
Obr´azek 18: Fantasy liga - moje ˇcl´anky
Obr´azek 19: Fantasy liga - detail ˇcl´anku
Testovac´ı ˇ c´ ast Tuto ˇca´st vyuˇz´ıvaj´ı testeˇri a tato ˇc´ast v koneˇcn´em d˚ usledku pˇri nasazen´ı do ostr´eho provozu zmiz´ı. Sekce je vidˇet na obr´azku 20, str.:53. Testovac´ı m´od zcela ˇ ıst dotazn´ıku je vidˇet na samostatnˇe provede testera od u ´vodu aˇz po dotazn´ık. C´ obr´azku21, str.:53.
52
Obr´azek 20: Fantasy liga - testovac´ı m´od
Obr´azek 21: Fantasy liga - ˇc´ast dotazn´ıku
53
Pˇ r´ıloha B Tabulky a grafy
8
V´ yborn´e Docela dobr´e 3
Graf 1: Design webu
8
Nepˇr´ıliˇs pˇrehledn´e ale orientace celkem dobr´a Vˇse pˇrehledn´e a jasn´e 3
Graf 2: Pˇrehlednost webu
54
4 Hraji hokejovou FL Hraji fotbalovou i hokejovou FL Nehraji ˇz´adnou FL
2
5
Graf 3: Zkuˇsenosti tester˚ u
7 Nevadilo. I kdyˇz s nimi by to bylo lepˇs´ı Nevadilo. Mysl´ım ˇze z´akladn´ı statistiky staˇc´ı 4
Graf 4: Chybˇej´ıc´ı statistiky
55
