Sem vložte zadání Vaší práce.

Sem vložte zadání Vaší práce.

České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství Bakalářská práce Webová aplikace pro správu a prezentaci aktivit florbalového klubu Frantřišek Vintr Vedoucí práce: Wallenfelsová Helena RNDr. 10. května 2013

Poděkování Můj velký dík patří paní Heleně Wallenfelsové RNDr., která byla moc hodná a ujala se, jako vedoucí, mé bakalářské práce. A dále bych jí chtěl poděkovat i za rady, které mi hlavně v začátku práce velice pomohli. Mé poděkování si ovšem zaslouží i všichni ti, kteří mi ochotně pomáhali mou bakalářskou práci testovat.

Prohlášení Prohlašuji, že jsem předloženou práci vypracoval samostatně a že jsem uvedl veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů, zejména skutečnost, že České vysoké učení technické v Praze má právo na uzavření licenční smlouvy o užití této práce jako školního díla podle 60 odst. 1 autorského zákona. V Praze dne 10. května 2013.....................

České vysoké učení technické v Praze Fakulta informačních technologií c 2013 František Vintr. Všechna práva vyhrazena. Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora. Odkaz na tuto práci Vintr, František. Webová aplikace pro správu a prezentaci aktivit florbalového klubu. Bakalářská práce. Praha: České vysoké učení technické v Praze, Fakulta informačních technologií, 2013.

Abstract This bachelor thesis is dealing with the detailed analysis, design and implementation of a web application that will be used for evidence and organization of the activities of floorball club. The result of this work is a fully functional and useable application. Keywords Floorball, evidence, organization, research, analysis, design, implementation. Abstrakt Tato bakalářská práce se zabývá podrobnou analýzou, návrhem a implementací webové aplikace, která má sloužit pro evidenci a organizaci aktivit florbalového klubu. Výsledkem této práce je plně funkční a použitelná aplikace. Florbal, evidence, organizace, rešerše, analýza, návrh, im- Klíčová slova plementace. ix

Obsah Úvod 1 1 Analýza potřeb evidence a organizace aktivit florbalového klubu a redakčního systému 3 2 Vymezení cílů a požadavků na aplikaci 7 2.1 Požadavky na aplikaci..................... 7 2.2 Vymezení cílů BP........................ 8 3 Rešerše podobných aplikací 9 3.1 Freeware redakční systémy................... 9 3.2 Tymuj.cz............................. 10 3.3 Esportsmedia.cz......................... 10 4 Analýza a návrh implementace produktu 11 4.1 Popis uživatelských rolí..................... 11 4.2 Přehled funkcionality role Správce.............. 11 4.3 Přehled funkcionality role Uživatel............. 12 4.4 Návštěvník webových stránek................. 13 4.5 Třívrstvá architektura aplikace................ 13 5 Realizace 17 5.1 Specifikace využitých techologií................ 17 5.2 Specifikace užitých podpůrných aplikací a knihoven..... 20 5.3 1FreeHosting poskytovatel hostingu............. 25 6 Bezpečnost 27 xi

6.1 Soubor.htaccess......................... 27 6.2 Ošetření SQL injection..................... 28 6.3 Šifrování hesel.......................... 28 6.4 Dvouúrovňová validace vstupních hodnot........... 29 7 Možná rozšíření v budoucnu 31 7.1 Kalendář akcí.......................... 31 7.2 Evidence docházky....................... 31 7.3 Evidence plateb......................... 32 7.4 Galerie obrázků......................... 32 7.5 Propojení se sociálními sítěmi................. 32 8 Uživatelské testování 33 8.1 Heuristický test......................... 33 8.2 Testeři.............................. 33 8.3 Výsledky............................. 33 8.4 Zajímavosti z testování..................... 34 Závěr 35 Zhodnocení splnění cílů BP..................... 35 Vlastní přínos BP........................... 35 Literatura 37 A Seznam použitých zkratek 39 B Uživatelská příručka 41 B.1 Přihlášení............................ 41 B.2 Uživatelská sekce........................ 41 B.3 Rozšíření pro administrátory.................. 42 C Obsah přiloženého CD 47 xii

Seznam obrázků 4.1 MVC schéma............................ 14 4.2 Struktura databáze......................... 15 4.3 Schéma návaznosti modulů..................... 16 5.1 Zájem o dané Frameworky podle statistik společnosti Google.. 20 5.2 Doba odezvy Frameworků..................... 21 5.3 Srovnání využití paměti...................... 22 5.4 Starý vzhled Tinycme editoru................... 23 5.5 Nový vzhled Tinycme editoru................... 23 5.6 Vzhled CKE editoru........................ 23 B.1 Zalomení článku.......................... 42 B.2 Mapy.cz návod k nalezení potřebných dat........... 44 B.3 cfbu.cz návod k nalezení potřebných dat v tabulce ligy.... 45 B.4 cfbu.cz návod k nalezení potřebných dat v profilu klubu... 45 xiii

Úvod Florbal je dynamickým sportem, který svou rychlostí expanze nemá na světě obdoby. Přesto na internetu stále chybí aplikace, která by byla volně dostupná a plně by naplnila i vcelku banální potřeby florbalových klubů. Rozhodl jsem se tedy udělat podrobný průzkum existujících webových aplikací florbalových klubů, rešerši dostupných alternativních řešení a následný průzkum potřeb těch, kteří webové stránky nemají. Na základě těchto poznatků jsem navrhl a implementoval jednoduchou webovou aplikaci, která by měla být intuitivní a srozumitelná i těm, kteří s tvorbou nebo správou webů nemají žádné zkušenosti. 1

Kapitola 1 Analýza potřeb evidence a organizace aktivit florbalového klubu a redakčního systému Během mého předběžného průzkumu jsem zjistil, že neexistuje žádná volně dostupná webová aplikace, která by plně uspokojila potřeby evidence a organizace aktivit sportovního florbalového klubu. Proto jsem se o danou věc začal zabývat blíže. Následný průzkum ukázal velmi různorodé pohledy na potřeby a funkčnost webových stránek klubu, ať už napříč ligami nebo rovnou týmy ve stejné lize. Extraligové týmy si už jsou plně vědomi toho, že florbal je u nás druhým kolektivním sportem s nejrozšířenější hráčskou základnou a na vrcholné úrovni je již za hranicemi amatérského sportu, tedy mluvímeli zejména o extraligových a prvoligových týmech. Proto není divu, že si pořizují, ať už z vlastní iniciativy či díky nátlaku sponzorů, webové stránky udělané na míru. Ovšem tyto aplikace slouží pouze k prezentaci klubu a nijak neusnadňují interní záležitosti. V první národní lize je to podobné, přesto je zde vidět, že kluby dávají svým týmovým webovým stránkám menší váhu a moc do nich neinvestují. Můj mateřský oddíl Sokol Královské Vinohrady dokonce do svých stránek neinvestoval ani korunu. Za jejich podobu a funkčnost vděčí jednomu z bývalých hráčů, který je vytvořil ze solidarity. Tím to však zdaleka nekončí. Vedení se ani nestará o obsahovou část webu, ta je opět v plné režii dobrovolníků z řad hráčů. Na druhou stranu, díky vcelku povedené propagaci na facebooku a různým doprovodným programům během zápasů, jsou schopní držet krok s mnohem kvalitnějšími extraligovými weby a dokonce svou návštěvností na zápasech je překonat. 3

1. Analýza potřeb evidence a organizace aktivit florbalového klubu a redakčního systému Pokračujeme-li čím dál níže skrze úrovně lig, tak dle očekávání, upadá jak už podoba stránek, tak i obsah ba dokonce někteří webové stránky vůbec nemají. Hlavním důvodem je, že o nižší ligu není, jak za řad sponzorů, tak ani z řad fanoušků, tak silní zájem, tudíž investice do profesionálně naprogramovaných stránek se jeví jako vyhození peněz oknem ven. Díky nízké základně hráčů se i rapidně snižuje možnost, že by se mohl najít v týmu nějaký dobrovolník, který by byl schopný a udělal webové stránky zadarmo. Proto tyto týmy šahají po alternativách jako je např. volný redakční systém Wordpress, který umožní prezentovat svůj klub na internetové síti i programováním nezasažené jedince. Přesto všechno mnoho takových narychlo vytvořených týmových webů po chvíli upadá do nečinnosti a končí následovným zrušením samotných webových stránek. Proč tomu tak je? Trošku bližší rozebraní si, v mé práci, můžete přečíst v kapitole s rešerší aplikací. Ale vezmeme-li to nyní obecněji, tak bez informační újmy můžeme říct, že je tam zbytečně moc nastavení, které neznalé uživatele akorát matou a nakonec to v týmu skončí tak, že ten hráč, který danou aplikaci rozchodil, to dostane celé na starost. Poté následuje vcelku čitelné vyústění v nečinnost stránek, protože v jednom se to dělat nedá. Pokud tedy nemáte v týmu nadšeného reportéra. Rozhodl jsem se tedy zaměřit na skupinu s amatérskými týmy hrající nižší florbalové ligy a dál pátral potom, co by si takový tým, kromě zjednodušeného redakčního systému přál. Druhým nejžádanějším bodem byla evidence kontaktů na hráče z týmu. Důvod je prostý. Každý rok plno hráčů přestoupí do jiných týmů nebo ukončí kariéru. To má za následek např. zanášení korespondence přes e-mail a tedy dochází k následnému spamu bývalých hráčů, kteří už za klub nehrají. Dalším důvodem je, že Česká florbalová unie dává příspěvky na dopravu na ligové zápasy, které jsou mimopražské, ale podmínkou je auto plné hráčů, tedy minimálně 4 osoby na auto. Občas se tedy stane, že nový hráč si zapomene vzít na tréninku kontakt na mobilní telefon řidiče a pak volá ostatním spoluhráčům a doufá, že číslo získá od nich. Což je velmi nepraktické. Dalším probíraným bodem byla možnost editace adresy, kde tým trénuje a kontaktu na trenéra. Nejlépe však řešené pomocí interaktivní mapy, aby případný návštěvník nemusel nic dlouho hledat. I tento možná zprvu svérázně znějící požadavek má své opodstatnění. Haly v Praze jsou doslova přeplněné různými sporty jako je házená, volejbal florbal a další, což má za následek, že své haly mají jisté pouze velkokluby, které mají s majiteli navázanou dlouhodobější spolupráci. Tedy ne zřídka se stane, že tým jednou zapomene zamluvit včas halu a poté se musí stěhovat do jiné haly nebo naopak předběhne jiné a následně se stěhuje za lepším. Dalším bodem byla implementace RSS čtečky. Velkokluby mají neustále nějaké aktualizace ať už z dorosteneckých kategorií nebo mužských atd., 4

takže se vyplatí jejich web navštěvovat často, ovšem pokud tým má pouze chudou hráčskou základnu a tedy pouze např. mužský tým, tak aktualizace nebudou tak časté. Proto je pro fanoušky týmu mnohem užitečnější, pokud zjistí nový článek díky RSS čtečce a následně se na web podívají. Posledními body byla řeč o evidenci docházky, která se mi bohužel do časového rozvrhu implementace nevešla a o vložení ligové tabulky a týmových statistik na stránky, aby se nemuseli složitě proklikávat přes spletité menu na stránkách České florbalové unie. 5

Kapitola 2 Vymezení cílů a požadavků na aplikaci 2.1 Požadavky na aplikaci Shrňme si, co by výsledná webová aplikace měla mít, dle pokynů cílové skupiny. Veřejná vrstva: zobrazení napsaných článků, zobrazení tabulky ligy, zobrazení statistik ligy, zobrazení interaktivní klubové kontaktní adresy, RSS. Interní vrstva: správa uživatelských účtů, redakční systém, možnost zobrazení kontaktů na ostatní spoluhráče, možnost úpravy kontaktu na klub. 7

2. Vymezení cílů a požadavků na aplikaci 2.2 Vymezení cílů BP Cílem této práce je analýza, návrh a implementace webové aplikace, která bude sloužit pro evidenci a organizaci aktivit sportovního florbalového klubu. Výsledkem bude plně funkční a uživatelsky přívětivá aplikace. Aplikace bude postavena na kódu napsaném v PHP a bude využívat další moderní open-source (volně dostupné) technologie a nástroje. 8

Kapitola 3 Rešerše podobných aplikací Během zkoumání webových stránek florbalových klubů a dohledávání univerzálních webových aplikací pro správu sportovních klubů bylo zjištěno, že v tomto odvětví se nám naskýtá vcelku značný prostor pro možnou konkurenceschopnost v budoucnu. Největšími hráči jsou: 3.1 Freeware redakční systémy Jako zástupce daného druhu aplikací jsem si zvolil velmi populární redakční systém Worprdpress. Tato webová aplikace za roky od svého vzniku prodělala mnoho změn a v dnešní době je se jedná o velmi mocný nástroj na blogerské scéně, které nabízí neskutečné množství nastavení a plno volně dostupných grafických šablon ke stažení, proto není divu, že těší oblibě i u správců webů pro florbalové kluby. Ovšem právě tolik možností úprav a tlačítek na obrazovkách správců webu je mnohdy paradoxně i jejich negativní stránkou. Pokud uživatel nemá žádné zkušenosti s tvorbou stránek nebo s jejich správou, tak ho množství nastavení mnohdy vystraší, protože jednoduše nechápe, k čemu některé nastavení jsou. Jistě, většinu jich člověk ani nemusí vůbec nastavovat, přesto na analfabeta působí zastrašujícím dojmem. Co když něco špatně zmáčkne a web pak nepůjde? Ano i těmito otázkami se někteří uživatelé zabývají. Další negativní stránkou je, že neexistuje žádný volně stažitelný plugin na načítání výsledků ze stránek z florbalové unie. Je sice možno stáhnout nějaké alternativy jako např. Project management nebo Team rosters, které nám dovolí vytvořit si tabulky, statistiky a všechno tam poctivě zápas po zápase přepisovat, ale vzhledem k tomu, že ne každý by tím rád trávil večery, nehledě na to, chybí i česká lokalizace. I přes tyto nedostatky je wordpress vcelku hojně využíván pro správu florbalových klůbů. 9

3. Rešerše podobných aplikací 3.2 Tymuj.cz Opět se jedná o volně dostupnou aplikaci poskytovanou zadarmo. Zde je cena kompenzována zobrazováním reklam. Velkou výhodou je, že uživatel si jednoduše v pár krocích vytvoří svůj vlastní tým, kde následně krásně vidí soupisku týmu, může psát články a co je hlavním tahákem aplikace, možnost tvorby docházky. Velkým nedostatkem je zde ovšem nemožnost cokoliv publikovat veřejně, je to pouze interní záležitost a opět zde není možno nahrávat jakékoliv informace z florbalové unie. Další stinnou stránkou je, že se aplikace za poslední 3 roky vůbec nikam neposunula a kvůli zanedbatelné oblibě můžeme s troškou nadsázky říci, že tento projekt je mrtvý. 3.3 Esportsmedia.cz V tomto případě se už nejedná o webovou aplikaci jako takovou a zde ani nepočítejte s nulovou cennou. Jedná se o společnost, která se přímo zabývá tvorbou sportovních webů. Prvním velkým úspěchem společnosti byl vytvořený web pro hokejový klub HC Sparta Praha, který si získal velkou oblibu, díky čemuž si společnost vysloužila majoritní postavení na tvorbu webových aplikací pro všechny extraligové hokejové kluby. Na to i poukazuje horní proužek na domovských stránkách hokejových klubů, kde na sebe všechny kluby navzájem odkazují. Je to po vzoru NHL.com, kde rovněž jako u nás jedno společnost dělá webové stránky všem ligovým klubům. Tato společnost si sjednala respekt dále i u fotbalových klubů, ale co hlavně, začíná se prodírat i na florbalovou scénu. Jmenovitě spravuje web Tatranu Střešovice, jež je titánem mezi florbalovými kluby a následně si od společnosti nechali udělat webové stránky i FBC 98 Chomutov, FBC Kladno. Jak je z oblíbenosti i z podoby webů patrno, tato společnost je jediným opravdovým hráčem na scéně. Vytváří opravdu kvalitní, profesionální stránky a díky zkušenostem dokáží poradit lidem, který se správou a tvorbou webových stránek sportovních klubů nemají naprosto žádnou zkušenost. Jedinou stinnou stránkou tedy zůstává cena, která se odvíjí od komplexnosti vytvářené webové aplikace. 10

Kapitola 4 Analýza a návrh implementace produktu 4.1 Popis uživatelských rolí 4.1.1 Správce Správce je uživatelská role s nejvyššími právy, tudíž má přístup ke všem akcím, které webová aplikace podporuje. Tuto roli bude vlastnit správce aplikace a trenéři. 4.1.2 Uživatel Uživatel je nejzákladnější uživatelská role umožňující pracovat se svými příspěvky, osobními daty a umožňuje zobrazit kontakty na ostatní uživatele (spoluhráče z týmu). 4.2 Přehled funkcionality role Správce 4.2.1 Správa osobního účtu editace osobních údajů změna hesla přihlášení do aplikace odhlášení z aplikace 11

4. Analýza a návrh implementace produktu 4.2.2 Správa cizích uživatelských účtů vytvoření uživatele editace osobních údajů reset hesla vypsání seznamu uživatelů 4.2.3 Správa vlastních článků vytvoření článku editace článku smazání článku seznam článků 4.2.4 Správa cizích článků editace článku smazání článku seznam článků 4.2.5 Správa připojení k České florbalové unii nastavení ligových údajů 4.2.6 Správa veřejného kontaktu na tým nastavení adresy a kontaktu 4.3 Přehled funkcionality role Uživatel 4.3.1 Správa osobního účtu editace osobních údajů změna hesla přihlášení do aplikace 12

4.4. Návštěvník webových stránek odhlášení z aplikace 4.3.2 Správa vlastních článků vytvoření článku editace článku smazání článku seznam článků 4.4 Návštěvník webových stránek Návštěvník webových stránek nemá naprosto žádné pravomoci ke změně jakéhokoliv obsahu na webových stránkách. Jinak řečeno, může si webové stránky pouze prohlížet. Kam všude se může návštěvník dostat, si můžeme ukázat v jednoduché mapě stránek: Aktuality Zobrazení napsaných článků. Tabulka Zobrazení ligové tabulky. Statistiky Zobrazení statistik hráčů a brankářů daného klubu. Zápasy Zobrazení odehraných ligových zápasů daného klubu. Kontakt Mapka a kontaktní údaje na klub. RSS Možnost odebírat kanál s novými články na webu. 4.5 Třívrstvá architektura aplikace 4.5.1 Controller Controller je vrstva, která tvoří vrstvu s řídící logikou celé aplikace, laicky bychom ho mohli nazvat mozkem celé aplikace. Hlavním vstupem vrstvy jsou data získaná z HTTP metod GET a POST, odeslané prohlížečem uživatele. Controller získaná data zpracuje a vyhodnotí. Následně, v případě potřeby, může zavolat Model vrstvu, pokud potřebuje získat nějaká data z databáze aplikace a nakonec vše odešle do nejpříhodnějšího View, kterému může předat svá získaná či vypočtená data. 13

4. Analýza a návrh implementace produktu Obrázek 4.1: MVC schéma 4.5.2 Model Model je datová vrstva celé aplikace. Jejím prostřednictvím pracujeme s databází aplikace, což v praxi znamená, že s její pomocí data z databáze načítáme, přidáváme nebo je měníme. 4.5.3 View View je prezentační vrstvou celé aplikace. Jejím úkolem je tedy uživateli přívětivě prezentovat vyhodnocená a zpracovaná data z Controlleru. 14

4.5. Třívrstvá architektura aplikace Obrázek 4.2: Struktura databáze 15

4. Analýza a návrh implementace produktu Obrázek 4.3: Schéma návaznosti modulů 16

Kapitola 5 Realizace 5.1 Specifikace využitých techologií 5.1.1 HTML HTML (HyperText Markup Language) je jedním z hlavních jazyků umožňující publikaci dokumentů na internetu a jeho struktura se člení pomocí značek zvaných tagy. Je podporován všemi moderními webovými prohlížeči např. Mozillou Firefoxem či Google Chromem. HTML je aplikací jazyka SGML (Standard Generalized Markup Language). Pomocí jazyka SGML můžeme vytvářet definice libovolných značkovacích jazyků, kterým říkáme DTD (Document Type Definition). Takovéto definice samozřejmě existují i pro jazyk HTML. Značka <!DOCTYPE> nám říká jakému DTD daný dokument odpovídá a bežně se nazývá prologem. Jelikož existuje více verzí HTML, má každá verze vlastní DTD. Pomocí zmíněné značky <!DOCTYPE> pak můžeme určit, kterou verzi HTML v dokumentu používáme. Ve své bakalářské práci jsem pracoval s dvěma druhy DTD a to s: XHTML 1.0 Strict Tento druh je jeden z nejpoužívanějších, protože zabraňuje interpretovat některé CSS vlastnosti v prohlížeči Internet Explorer. Tedy přesněji řečeno, zabraňuje mu, aby se přepnul do tzv. quirk mód, který interpretuje některé css vlastnosti proti W3C konvencím. Proto jsem si ho zvolil pro svou publikační veřejnou část práce i s ohledem na dobrou zpětnou kompatibilitu se staršími prohlížeči. HTML 5 Je sice v podstatě stále v experimentální fázi a jeho konečná specifikace by měla být schválena do konce roku 2014. Přesto už dnes je řada funkcí plně podporována moderními prohlížeči. Místo v mé práci si našel v administrativní části, kde jeho částí využívám pouze 17

5. Realizace velmi poskromnu např. v přihlašovacím formuláři, ale jeho hlavním účel bylo mi pomoci si povšimnout menších niancí a novinek oproti předešlým HTML verzím. 5.1.2 PHP PHP (Personal Home Page) je programovací jazyk, který pracuje na straně serveru. Je určený především pro programování dynamických webových stránek např. ve formátu HTML a XHTML. Velkou výhodou je, že podporuje mnoho knihoven pro různé účely od zpracování textu, grafiky až po přístup k většině databázových systémů (mj. MySQL, PostgreSQL) a podporu celé řady internetových protokolů. To i jeho jednoduchost použití mu pomohlo se dostat na první místo mezi nejpoužívanějšími jazyky pro webové stránky. 5.1.3 SQL SQL (Structured Query Language) je standartním jazykem pro práci s databázovým serverem. Takových serverů existuje celá řada. Mezi nejrozšířenější patří MySQL a MS SQL od firmy Microsoft. MySQL je asi nejrozšířenější, hlavně proto, že je distribuován pod volnou licencí a proto jsem s ním přišel do kontaktu i já, při tvorbě své bakalářské práce, pomocí uživatelské rozhraní phpmyadmin. 5.1.4 JavaScript JavaScript je programovací jazyk, který běží na straně klienta, na rozdíl od ostatních jiných programovacích jazyků (např. PHP a ASP), které se spouštějí na straně serveru, a používá se pro tvorbu interaktivních webových prvků. Jeho velkou výhodou je, že šetří zátěž serveru a jeho primární využití většinou spočívá v kontrole uživatelem vyplněných formulářů či rozbalování menu. Velkou nevýhodou ovšem zůstává to, že běží právě na uživatelské straně, tudíž může být jeho kód uživatelem pozměněn, což z bezpečnostního hlediska jeho využití silně limituje a umožňuje ho bezpečně využít pouze k naprogramování podpůrných funkcí jako např. již zmíněné rozbalování menu. 18

5.1. Specifikace využitých techologií 5.1.5 CSS CSS (Cascading Style Sheets) neboli česky kaskádové styly, je kolekce metod pro grafickou úpravu webových stránek. S jejich pomocí můžeme vyčlenit grafickou část webu od té obsahové části. Největší výhodou stylů je, že nahradily krkolomné rozložení jednotlivých částí webu pomocí tabulek či hůře pomocí rámečků. Ovšem zvládají toho samozřejmě mnohem více, jako např. nastavení barvy písma, odsazení odstavců atd. Styly se obvykle, dle zažitých konvencí, vyčleňují do samostatných souborů, přestože by mohli být psány rovnou k elementům. To se dělá maximálně jako následek nějakého JavaScript interaktivního úkonů a důvod proč tomu tak je, je vcelku zjevný. Vyčleněním do samotného soboru se mnohem více zpřehledňuje kód pro kodéry a programátory. V novém HTML 5 se dokonce některé tagy prolínající se ve své skutkové podstatě s některými nastaveními kaskádových stylů ruší nebo pozměňují svou informační hodnost pro roboty vyhledávacích internetových portálů a tak kaskádové styly dostávají čím dál více na důležitosti. Dnešní weby využívají hlavně verzi CSS 2.1, která je plně kompatibilní se staršími prohlížeči ovšem některé prohlížeče si vysvětlují některá nastavení po svém, hlavně plno kodéry proklínaný Internet Explorer a proto je nutné všechna nastavení prohlížečů na začátku vyresetovat. Na tuto práci je vhodný populární reset soubor od Erica Mayera a pokud ani to danou chybu nespraví, tak ještě máme k dispozici tzv. hack, který násilně donutí určený prohlížeč, aby se daná věc zobrazoval stejně jak ve Firefoxu, tak i v ostatních prohlížečích. Ve své administrátorské sekci dokonce i lehce využívám nový CSS 3, který je zatím ve vývoji, ale základní novinky jsou již v moderních prohlížečích plně podporovány. 5.1.6 Doxygen Doxygen je univerzální nástroj pro generování dokumentace z anotací C++ zdrojových kódů, ale také ovšem podporuje další populární programovací jazyky jako C, JAVA, PHP. Vzhledem k tomu, že je multiplatformní, tak ho lze využít jak pod Windows, tak i pod Mac OS i Linuxem. Obsahem generované dokumentace je pak popis jednotlivých skriptů, funkcí, tříd, a proměnných spolu, s jejich vlastnostmi a parametry. Z mého pohledu je u mých tříd Modelů popis jednotlivých funkcí velice důležitý a proto jsem se rozhodl v daném formátu udělat komentáře pro případné vygenerování dokumentace. 19

5. Realizace Obrázek 5.1: Zájem o dané Frameworky podle statistik společnosti Google 5.2 Specifikace užitých podpůrných aplikací a knihoven 5.2.1 CodeIgniter CodeIgniter je volně dostupný PHP Framework, poskytován pod licencí OSL v. 3,0. Je založen na architektuře MVC a jeho hlavním cílem je ušetřit vývojářům čas díky předpřipraveným knihovnám s funkcemi, které řeší často opakující se úlohy, jako např. upravení dotazu pro SQL server na bezpečný dotaz znemožňující prolomení bezpečnosti webu. Což umožňuje, aby se vývojář soustředil pouze na implementaci zadané úlohy. Při vybírání PHP Frameworku jsem volil mezi těmi ve světě nejoblíbenějšími, jako jsou: Zend, Symfony, Yii, a již zmíněný CodeIgniter. Jako hlavní kritérium jsem si zvolil, že chci, aby měl Framework pěknou dokumentaci, abych dodatečně nemusel dohledávat nějakou implicitně vyjádřenou věc, která by nebyla na první pohled tak zřejmá, jak by si začínající vývojář přál. V této kategorii jasně exceluje CodeIgniter, který nemá v tomto směru konkurenci a jako třešničkou na dortu je skutečnost, že na stránkách net.tutsplus.com/ (viz. [4]) můžete najít neoficiální video tutoriál, kde je všechno důležité krásně dopodrobna rozebráno. 20

5.2. Specifikace užitých podpůrných aplikací a knihoven Obrázek 5.2: Doba odezvy Frameworků Druhým kritériem bylo, že chci aby Framework nenutil uživatele nahrávat zbytečně velké množství dat. Jak můžete sami vidět na obrázku 5.2, robustní Frameworky Zend i Symfony v testu naprosto propadli. CodeIgniter si vedl ovšem zase skvěle spolu s Yii, zabírají o cca. polovinu méně paměti. Dále je zajímavé porovnat i dobu odezvy, kde rozdíly nejsou už až tak markantní, přesto nám pomůžou si udělat lepší obrázek o testovaných subjektech. Asi nebude překvapením, že Zend i Symfony opět dosahovali nejhorších výsledků, jak si můžete povšimnout na obrázku 5.3. CodeIgniter se umístil krásně v průměru, kde dokázal Yii překonat pouze v nejkratším čase, ovšem nás nejvíce zajímá průměr a tam o ždibec zaostává. Byl jsem tedy na vážkách mezi Yii a CodeIgniterem, pro který zatím hrála v plus výtečná dokumentace, proto jsme se rozhodl provést průzkum trhu, s čím má dnes člověk největší šanci se uplatnit. Ač s podivem, protože u nás není velmi znám, tak pokud člověk na volné noze hledá práci jako webový vývojář, tak největší šanci na uchycení bude mít se znalostí CodeIgnitera nebo CakePHP. Symfony dopadl nejhůře, je o něj až o 2/3 menší zájem. Co setýče českého trhu, tak u nás je největší zájem o znalost Zendu nebo u nás dosti populárního českého Frameworku Nette, který mně k srdci až tak nepřirostl i když věřím, že je dobrý. Pod vahou nabytých vědomostí pro mě tedy byla jasná volba CodeIgniter, i když i ten si našel pár odpůrců. Někteří 21

5. Realizace Obrázek 5.3: Srovnání využití paměti říkají, že je na vrcholu své slávy a brzo skončí, někomu se nelíbí jeho jednoduché roztřídění a skoro až absolutní benevolence během programování a rozčleňování jednotlivých částí aplikace což může být trošku problém, pokud se programuje ve velké skupině a jeden se nechá trochu unést. Dokonce jsem se i dočetl, že je architektura MVC pomalu mrtvá a budoucnost je v duchu rozčleňování, jaký začíná používat Symfony. Abych řekl pravdu, doufám, že tomu tak nebude, protože osobně, z pohledu začínajícího vývojáře, Symfony Framework opravdu nemám rád a protože žádný z těchto záporných pohledu pro mě není relevantní, tak na mé rozhodnutí neměli žádný vliv. 5.2.2 jquery jquery je javascriptový Framework s širokou podporou prohlížečů. Je svobodný a otevřený software pod licencí MIT. Tento Framework patří ve světě mezi nejoblíbenější a nejpoužívanější i když pomalu stoupá i obliba jiných Frameworků jako např. MooTool nebo Dojo, přesto jsem dal přednost osvědčené kvalitě hlavně i proto, že s ním mám už nějaké dřívější lehčí zkušenosti. Dále je vcelku zajímavé, že jako jeden z prvních dává jasně najevo, že stále optimalizovat funkčnost i pro prastarý Internet Explorer 6 je silným přežitkem doby a proto verze označené 22

5.2. Specifikace užitých podpůrných aplikací a knihoven Obrázek 5.4: Starý vzhled Tinycme editoru Obrázek 5.5: Nový vzhled Tinycme editoru Obrázek 5.6: Vzhled CKE editoru 2.x jsou již optimalizovány pouze pro Internet Explorer 9+ a samozřejmě i pro ostatní moderní prohlížeče, pro přesné upřesnění. 5.2.3 CKEditor CKEditor je zdarma volně dostupný WYSIWYG textový editor uvolněný pod licencemi GPL, LGPL a MPL. Jeho hlavní využití tkví jako pomůcka při psaní článků v redakčním systému, kde běženého uživatele zbavuje nutnosti znát HTML tagy pro vytvoření např. stylů písma, jakým je třeba tučné písmo. Uživatel vidí pouze klasické značky jako např. v Microsoft Word a po jejich stisknutí má ihned možnost vidět, jak se daný text změnil. Samozřejmě při ukládání článku do databáze se uloží správné HMTL formátování. Opět nebude překvapením, že se jedná o jeden z nejpoužívanějších WY- SIWYG editorů spolu s Tinymce. Který je tedy lepší? Odpověď bude znít asi překvapivě, ale oba jsou stejně dobří. Zkoušel jsem procházet diskuze a prohledávat různé stránky ovšem zkušení vývojáři se většinou shodnou na tom, že jsou v podstatě skoro identické, oba výborně modifikovatelné, přehledné. Zvolil jsem si tedy jeden z nich jednoduchým stylem, vybral jsem si, který se mi po grafické stránce více líbí. Bohužel, možná bohu dík, si vývojáři Tinymce tohoto rozdílu také všimli a během psaní dokumentace k mé bakalářské práci jsem zjistil, že rovněž přišli s novým grafickým vzhledem. To jestli by se dalo mluvit o plagiátorství či nikoliv můžete posoudit sami dle přiložených obrázků 5.4, 5.5, 5.6. 23

5. Realizace 5.2.4 Bootstrap Bootstrap je CSS Framework vytvořený lidmi od Twitteru. Tento Framework se snaží využívat již některé základní vlastnosti experimentálních technologií HTML 5 a CSS 3, které jsou již podporovány všemi moderními prohlížeči. Díky svému povedenému designu se těší velké oblibě a velmi často se využívá při vývoji nových aplikací, kde se nechceme moc zatěžovat grafickou stránkou a naopak chceme svůj čas věnovat implementační stránce věci. Ovšem můžeme ho spatřit i na mnoha osobních webových stránek. Dále je díky němu možno udělat responzivní design, který bude automaticky zjišťovat, jak je velká obrazovka a tedy obsah webových stránek uzpůsobí, tak aby je adekvátně k možnostem zařízení zobrazil co nejhezčeji. Tedy zobrazí se hezky jak na monitoru počítače, tak na tabletu i na mobilním telefonu. Jeho velká výhoda, tedy nastylování snad všeho co jde, je i jeho Achylovou patou. Z praktického hlediska vlastně musí uživatel stáhnout zbytečně velký soubor, který třeba vývojář ani zcela nevyužívá. A co se týče responzivního designu pro různá zařízení i to má své chyby na kráse. Někteří odborníci praví, že výpočet rozměrů obrazovky zbytečně zatěžuje procesor a proto je mnohem efektivnější udělat speciální sub doménu webu určenou pouze pro mobilní zařízení. Například na stránkách novinky.cz si můžete ve spodní části stránky, díky odkazu Mobilní verze, povšimnout, že tento portál tuto problematiku řeší rovněž speciální subdoménou. Ve své práci jsem proto Bootstrap využil pouze v administrátorské části, rovněž z důvodu, který jsem zmínil výše, tedy protože jsem se chtěl hlavně zaměřit na implementační část aplikace a za předpokladu, že správci budou hlavně středního věku a využívat moderní aktualizované prohlížeče webových stránek, tak se neočekávají žádné problémy s grafickou podobou aplikace. Pokud by ovšem využívali nějaký zastaralý prohlížeč, tak stále by se mělo vše zobrazit správně, maximálně bez nějakých dekorativních prvků. 5.2.5 Mapy API Mapy API je rozhraní, které nám umožňuje využívat webovou aplikaci vytvořenou lidmi z internetového portálu seznam.cz a využívající se na stránkách mapy.cz. S jeho pomocí můžeme vložit do vlastních stránek interaktivní mapu. Největší rival stránek mapy.cz je aplikace od titána Googlu nazvaný Google maps. I když se to může zdát být jako válka Davida s Goliášem, tak i zde má překvapivě náš David (mapy.cz) navrch. Protože mapy.cz spravuje tuzemská firma, tak se snaží vytvořit co nejpodrobnější a nejrozmanitější mapy naší mateřské vlasti. Mapy jsou přehledné, hlavně grafické symboly např. klinik hotelů jsou mnohem lépe i barevně rozlišeny 24

5.3. 1FreeHosting poskytovatel hostingu než u konkurence. Dále jsou líbivé a dokonce máme možnost se i podívat na podrobné turistické mapy, což určitě také není k zahození. Jedinou věcí, kterou Google mohl konkurovat, byla možnost si zobrazit reálný pohled z daného bodu v ulici, který se skládá z mnoha fotek nafocených speciálními auty. Ovšem letos lidé z mapy.cz hodlají udělat totéž a dokonce mají nasmlouváno, že se budou moci dostat i na některé soukromé pozemky čím budou opět o krok napřed před konkurencí. Jediná špatná stránka je, že to zabere 2 roky. Pod tíhou těchto argumentů jsem tedy sáhl po Mapy API i když mi to nakonec způsobilo nečekanou komplikaci při zjištění, že Bootstrap Framework mi zabraňoval správnému zobrazení. Což jsem ovšem napravil pomocí pozměnění jedné vlastnosti u img selektoru: img { } max width : i n h e r i t ; 5.2.6 Fis proxy Čfbu Fis proxy Čfbu nazvat API rozhraním by bylo víc než smělé. I když je to zarážející, protože je to v podstatě jediný možný způsob, jak získat data z webu České florbalové unie (Čfbu), tak získaná data tímto způsobem jsou v hrozném formátu. Žádné XML, žádný Json, prostě a jednoduše si všechna data musíme vyparsovat pomocí např. regulárních výrazů, ovšem co hůř, v některých ligách mají tabulky či seznamy drobná rozšíření, která mohou časem i přibývat, tudíž vývojář musí stále dbát na aktuálnost své funkce zpracovávací data. 5.3 1FreeHosting poskytovatel hostingu Implementace mé bakalářské práce probíhala přímým nahráváním a testováním aplikace na serverech firmy 1FreeHosting.com, jež jsem měl přímo propojenou s mým vývojářským prostředím Netbeans. Tato firma poskytuje zdarma hostování webových stránek na svých doménách druhého řádu a je zcela bez reklam. Někdo by mohl namítnout, že takovíto poskytovatelé nenabízí tak kvalitní a stabilní služby jako ti placení a pro jakoukoliv webovou aplikaci nejsou zcela vhodní. Tomuto pohledu na věc mohu dát za pravdu jen z půlky. Vzhledem k tomu, že cílovou skupinou jsou týmy z nižších lig, které hrají florbal hlavně pro zábavu, tak můžeme vcelku snadno předpokládat, že nehodlají investovat do placené domény a aplikace poběží právě na některém z free hostingů. 25

5. Realizace Během implementace jsem bohužel zjistil, že u poskytovatele dochází k vcelku četnému chvilkovému výpadku (přetížení) databázových serverů. Ačkoliv to pro někoho může být úsměvné, tak i tato věc mi nakonec byla ku prospěchu. Tato abnormalita mi pomohla při vylaďování funkčnosti mé webové aplikace. 26

Kapitola 6 Bezpečnost 6.1 Soubor.htaccess Soubor.htaccess je speciální soubor určený k tomu, aby si majitel stránek mohl upravit vlastnosti serveru bez toho, aby o to žádal správce serveru. Může fungovat např. na serveru Apache, který dnes běží na většině webových serverů. Tečka na začátku jména značí, že je soubor v unixových systémech považován za skrytý a proto ho uživatel nemá šanci vidět, což je přesně to co chceme. Tento soubor se ukládá do adresářů, ve kterém jsou uloženy soubory s webovými stránkami a v onom stávajícím adresáři dovoluje správci upravit jeho chování. Běžná využití jsou takováto: chybové stránky, přepisování (přesměrování) URL adres, kešování souborů, autorizace, autentizace, zákaz přístupu z určitých IP adres nebo povolení jenom některých, zapnutí nebo vypnutí procházení adresářů, nastavení jiného výchozího souboru webové aplikace, komprese přenášení souborů. Jednoduše řečeno, všechno co se dá nastavit na serveru v httpd.conf, může admin serveru povolit, a to pak půjde nastavit i v.htaccess. 27

6. Bezpečnost 6.2 Ošetření SQL injection SQL injection je technika napadaní databázové vrstvy. Podstatou útoku je, že uživatel zcela záměrně odešle svůj dotaz na neošetřený vstup, což má za následek provedení vlastního podsunutého SQL dotazu. V běžném životě jsou útoky prováděny přes neošetřené formuláře, pomocí manipulace s URL nebo podstrčenými daty v cookie, což je vlastně balíček dat, která server pošle prohlížeči, který je uloží na počítači uživatele. Mohou se tam například ukládat přihlašovací údaje. Ale zpět k SQL injection. Nyní si na příkladu ukážeme, jak takové napadení může vypadat, protože slovní popis nemusí být zcela všem jasný. Mějme SQL dotaz na serveru, kde správce webu očekává, že mu uživatel v dotazu odešle svůj e-mail: SELECT f i e l d l i s t FROM t a b l e WHERE f i e l d = $EMAIL ; Útočník strukturu dotazu odhadne a v proměnné EMAIL odešle dotaz: x ; DROP TABLE members ; což nám vytvoří nechtěný dotaz, který nám smaže tabulku s uživateli: SELECT f i e l d l i s t FROM t a b l e WHERE f i e l d = x ; DROP TABLE members ; ; I když se to zdá být neskutečné, tak na internetu je stále obrovské množství webů, které tento druh útoků nemají nijak ošetřený. Většinou je to způsobenou nezkušeností programátorů. Pokud však programátor využívá jakýkoliv z rozšířených Frameworků, tak si už s tímto nemusí moc lámat hlavu vzhledem k tomu, že je v každém zabudovaná ochranná funkce, která speciální znaky nahradí jiným ekvivalentním zápisem a znemožní vykonání zákeřného útoku. I v mnou používaném Frameworku (CodeIgniter) je tato funkce zabudovaná a plně jí využívám. 6.3 Šifrování hesel Nové počítače jsou čím dál rychlejší a proto je v dnešní době více než nutné neusnout na vavřínech a držet krok s realitou. Doba šifrování pomocí MD5 (Message-Digest algorithm) již v dnešní době není ani zdaleka bezpečnou formou šifrování dat. Nejenže jsou počítače schopné toto šifrování, díky výpočetní síle, prolomit, ale dokonce se jim to může povést ve zlomku sekundy díky tzv. Rainbow Tables (viz. podsekce níže). Dokonce už byly prolomeny i hašovací algoritmy jako SHA1 and SHA256. Proto je dnes vyžadováno využívat alespoň PHP hašování (bcrypt) hesel metodou BLOWFISH, který hašuje s takzvanou solí, což je náhodně vygenerovaný řetězec, který následně 28

6.4. Dvouúrovňová validace vstupních hodnot znemožňuje možnost slovníkových útoků. Takto vygenerované heslo nelze zpětně dešifrovat. Tento algoritmus k vygenerování zakódovaného hesla používám i já ve své vytvořené aplikaci. Při registraci nového uživatele vytvářím zmíněnou sůl způsobem, že náhodně vygenerované číslo zahašuji pomocí sha1 a následný řetězec oříznu do délky 22 znaků. Tuto sůl připojím k náhodně vygenerovanému heslu, celé to znovu zahašuji a následně zašifrované heslo uložím do databáze. Nakonec odešlu nezašifrované heslo uživateli na e-mailem. 6.3.1 Rainbow Tables (Duhová tabulka) Rainbow Tables jsou novou generací crackingu využívající pokročilejších metod pro prolomení hesel zašifrovaných technologiemi MD5 nebo LM (Lan Manager ). Rainbow tables se staly známými pro svou rychlost crackování. Jedná se o speciální druh tabulky, která využívá operační paměti při obnově nezašifrovaného textu z textu šifrovaného jednosměrnou šifrou. Představují kompromis mezi výpočetní náročností útoku hrubou silou a prostorovou náročností předem vypočtených tabulek pro reverzní funkci k hašovací funkci. 6.4 Dvouúrovňová validace vstupních hodnot Validace v mé aplikaci je dvouúrovňová a co to ve skutečnosti znamená? První vrstva je interaktivní. Je postavená na jquery Validation, který je, jak již název napovídá, externím modulem pro jquery. Ovšem toto není dostatečná ochrana, protože uživatel může mít javascript omylem vypnutý nebo co je pravděpodobnější, ho má vypnutý úmyslně nebo si ho upraví dle vlastní libosti. Toto není problém, vzhledem k tomu, že funguje na straně klienta. Proto bylo nutné udělat i druhou validaci dat na straně serveru, která u mě ovšem žádnou zpětnou vazbu nedává, pouze data zamítne, pokud nejsou v požadovaném formátu. Důvod, který mě k tomuto kroku vedl, byl ten, že se mi dnes opravdu nezdá být reálné, že by měl někdo omylem vypnutý javascript a těm kteří se pokouší napadnout mou aplikaci, nehodlám poskytovat komfort ve formě zpětné vazby. 29

Kapitola 7 Možná rozšíření v budoucnu 7.1 Kalendář akcí Ne nezbytný modul, ale bezesporu pomůže zpřehlednit mnoho věcí, jakými je například začátek a konec sezóny, uzávěrka týmových poplatků, termíny soustředění nebo svátky, díky nimž odpadnou tréninky. 7.2 Evidence docházky Modul na evidenci docházky je ať už z profesionálního hlediska, či z amatérského, nezbytností. V prvním případě pomáhá trenérovi týmu sledovat, jak hráč plní své povinnosti. Pokud na tréninky daný hráč moc často nechodí, tak kouč může usoudit, že hráč nedostatečně pracuje na své fyzické kondici i na své technické stránce při práci s holí, nehledě na to má absence za následek i chybějící znalost nacvičených herních signálů, taktických formací na přesilovky ba dokonce i na samotnou sehranost se spoluhráči. I kdyby to byl druhý Jiří Dopita a měl neuvěřitelný přehled o hře, stále musíme mít na paměti, že spoluhráči takový přehled nemají a musí si zvyknout na herní návyky svého spoluhráče z formace. Z amatérského hlediska je důležitost evidence spíše banální leč přesto velmi důležitá. Díky předvyplnění docházky hráči týmu, na webových stránkách, může trenér zjistit, zda se sejde dost hráčů či nikoliv a pak by trénink zrušil. Důvody špatné docházky může být několik, vyjmenuji několik z nich, např. zranění, služební jízda do ciziny, daní přednosti návštěvě hokejového zápasu či přetaženost z únavného pracovního dne. Proto není radno evidenci docházky podceňovat, možné výčitky, způsobené ztrátou času jízdou na trénink, který v tak malém počtu nemohl probíhat, by akorát napomohli 31

7. Možná rozšíření v budoucnu k rozvracení týmového ducha. 7.3 Evidence plateb Modul na evidenci plateb by měl sloužit na evidenci všech plateb, které se týkají týmu. Mluvíme tedy o platbě týmových poplatků, ze kterých se hradí zaplacení pronajaté haly na tréninky, na pronajetí haly na domácí ligové zápasy, na zaplacení rozhodčích na ligových zápasech, na zaplacení startovného v lize. Dále je nutné znát, zda všichni hráči zaplatili osobní ligový poplatek, aby mohli v lize pořádané Českou florbalovou unií nastoupit a tudíž mohli být zapsaní do týmové soupisky na stránkách ligy. A nakonec se evidence hodí i na evidenci pokut, třeba za pozdní docházku na trénink, pozdní příchod na rozcvičku před zápasy atd. Princip implementace by byl pojat velice jednoduše a to formou zaškrtnutí voleb přijdu nebo nepřijdu v daný den. 7.4 Galerie obrázků Smyslem galerie obrázků je jednoduše možnost sdílet nafocené fotky pořízené během zápasů, které by se dali následně přiložit k reportům z nich. Nebo nahrání nějakých motivačních obrázků, fotomontáží či cokoliv jiného. Zde mě ještě napadlo, že by se to možná dalo propojit s webovou stránkou flickr.com určenou k sdílení fotografií na internetu, ale zatím jsem neporovnal všechna pro a proti, takže implementace tohoto modulu je zatím jen v obecných představách. 7.5 Propojení se sociálními sítěmi Pokud chce jít klub s dobou, tak je propojení se sociálními sítěmi, jako je hlavně Facebook či Google+, jasně další logický krok při propagaci klubu. Jejich moc je v dnešním kybersvětě nepopiratelná a tudíž tvoří jeden z hlavních pilířů podpírající most mezi klubem a fanoušky. Hlavním důvodem proč tomu tak je, je ten, že dnešní lidé tráví na sociálních až neúměrně mnoho času, u mnoha subjektů to už můžeme nazvat závislostí, proto se zde šíří informace rychleji než lavina a to je přesně to, co každá pořádná propagace potřebuje. 32

Kapitola 8 Uživatelské testování 8.1 Heuristický test K otestování aplikace jsem využil zjednodušený heuristický test k zjištění použitelnosti mé webové aplikace, přesněji řečeno administrátorského rozhraní. Tento dotazník je uložen v podobě textového souboru na přiloženém CD pod názvem heuristic.doc a tedy volně přístupný k nahlédnutí. 8.2 Testeři I když jsem neměl k dispozici mnoho testerů, tak jsem si hlavně kladl za cíl, aby skupinka testerů byla co nejrozmanitější. To se mi nakonec i povedlo a testery jsem mohl rozdělit do tří skupin: programátoři, florbalový hráči, počítačově méně zdatní uživatelé. 8.3 Výsledky Výsledky testování byly více než povzbudivé. Všichni testeři uváděli, že webové stránky jsou jednoduché, přehledné, vzhledově přívětivé a i zpětná vazba je srozumitelná. Ačkoliv to mou ješitnost potěšilo, je dobré mít na paměti, že všichni testeři byli mí známí, tudíž celkové vyhodnocení bude mít menší odchylku. Můžeme tedy předpokládat, že aplikace je pravděpodobně 33

8. Uživatelské testování z větší části naprosto srozumitelná, ovšem např. některé věty ve zpětných vazbách by po konzultacích šli zformulovat pravděpodobně o trošku lépe. Výsledky, ale měli i svou odvrácenou tvář. Během testů byl nalezen jeden napůl funkční validujicí skript na straně klienta, tedy uživatel byl na chybu upozorněn a přesto mu šlo data odeslat, načež byla operace zastavena až druhou validační PHP vrstvou. Dále byla zjištěna nadbytečnost možnosti, aby si administrátor změnil svou uživatelskou roli v aplikaci. Musel jsem uznat, že je opravdu naivní si myslet, že by administrátor své postavení degradoval. Následkem opravy ovšem vznikla nová chyba, při odeslání úpravy profilu, kterou jsem vzápětí také opravil. Následně už žádné zbytečnosti nebo chyby ve funkcionalitě webové aplikace nebyli zjištěny. 8.4 Zajímavosti z testování Během testů webové aplikace jsem byl odzbrojen nečekanou otázkou testerem ze skupiny počítačově méně zdatní uživatelé. Nastavení správných ligových parametrů je trošku složitější a aby se zamezilo možným překlepům, tak jsem doporučil parametry zkopírovat z vyznačeného místa, načež se na mě tester obrátil a zeptal se mě, jak to má zkopírovat, že v Microsoft Wordu na to má tlačítko a že tu neví, jak to má udělat. I když tato otázka mohla vyplynout ze skutečnosti, že mám ve svém prohlížeči skrytou hlavní nabídku nástrojů, přesto mi to pomohlo uvědomit si, že i takové banální zkratky jakými jsou CTRL+C či CTRL+V jsou pro někoho úplnou neznámou. Přestože v moderním světě je počítačová gramotnost už vcelku na slušné úrovni, tak pořád nesmíme zapomínat na starší generace, které s počítači nevyrůstaly stejně tak jako má generace. Nehledě na to, že i pro malé děti, které se teprve vše učí, může být něco větší překážkou než si jako vývojáři vůbec uvědomujeme. Dokonale to tedy ukazuje nezbytnost testování aplikace cílovou skupinou, abychom zjistili jak moc je to pochopitelné pro uživatele, protože my jako vývojáři ať si to chceme přiznat nebo ne, na vše hledíme už trochu jinak, což by se dalo nazvat profesní deformací. 34

Závěr Zhodnocení splnění cílů BP Požadavky získané díky podrobnému průzkumu se podařilo splnit vcelku úspěšně. Přesto je před mou bakalářskou prací stále zkušební nasazení do reálného provozu a následné zkoumání, jak na to budou reagovat všichni členové klubu. Nezbývá než doufat, že daná aplikace naplní očekávání a bude pozitivně přijata. I kdyby se tak nakonec nestalo, tak pěvně věřím, že má bakalářská práce bude ku prospěchu, alespoň díky provedeným analýzám a průzkumům. Vlastní přínos BP Největším přínosem pro mě byla zpětná vazba od uživatelů, kteří mou bakalářskou práci testovali. Vždy je zajímavé zkoumat rozdílnosti ve vnímání stejné aplikace z pohledu vývojářů, uživatelů z cílové skupiny a naprostých laiků, které nemůžeme zařadit ani do jedné z dvou předešlých skupin. Dále pro mě byla i velkým přínosem svoboda při implementaci a tedy možnost vlastního zvážení, které volně dostupné technologie a nástroje by měli být nejvhodnější pro mou bakalářskou práci. Díky tomu jsem si mohl udělat mnohem ucelenější a plnohodnotnější obraz moderních technologií, který se při vývoji webových aplikacích využívají. 35

Literatura [1] Výukové materiály poskytované naší fakultou https://edux.fit.cvut.cz/ [2] Diskuze o bezpečnosti a hašování hesel https://wiki.php.net/rfc/password_hash [3] Manuální stránky pro Framework CodeIgniter http://ellislab.com/codeigniter [4] Video tutorial pro Framework CodeIgniter http://net.tutsplus.com/sessions/codeigniter-from-scratch/ [5] PHP Framework Benchmark testování http://phpixie.com/blog/php-framework-benchmark/ [6] PHP Framework test na využití paměti http://we-love-php.blogspot.cz/2012/10/php-framework-comparison.html [7] Manuální stránky pro jquery http://api.jquery.com/ [8] Manuální stránky pro Mapy.cz API http://api4.mapy.cz/ [9] Manuální stránky pro Boostrap Framework http://twitter.github.io/bootstrap/ 37

Příloha A Seznam použitých zkratek Tag Značka vymezují vzhled a smysl dokumentu Framework Předpřipravená softwarová struktura usnaďnující implementaci Internetová doména Jednoznačné jméno počítače nebo počítačové sítě na síti Subdoména Doména běžící pod jinou internetovou doménou Webhosting Pronajímaný prostor pro webové stránky na cizím serveru 39

Příloha B Uživatelská příručka B.1 Přihlášení Přihlášení do administrace webové aplikace se provádí na relativní adrese log/login, případně můžete zadat i relativní adresu administrace a budete automaticky na přihlašovací formulář přesměrováni. Relativní adresou se rozumí, že dané adresy skopírujete za jméno vaší domény, tedy např. za www.example.org/ Uživatelské jméno i heslo byste měli obdržet na svůj e-mail jakmile vás administrátor registruje do systému. B.2 Uživatelská sekce B.2.1 Nastavení svého účtu Ke změnám údajú na svém účtu využijte odkazy Osobní profil a Změna hesla. Pokud potřebujete změnit své přihlašovací jméno či povýšit své administrační oprávnění, tak bude nucení o to požádat nějakého z administrátorů. B.2.2 Psaní článku Psaní článku nebo jeho editace je velice intuitivní a velice podobné, jaké je k vidění v programu Microsoft Word. Pokud nevíte, co dané tlačítko dělá, tak nechte chvíli nad danou ikonkou stát svůj kurzor, načež se objeví textová vysvětlivka. Za pozornost ovšem stojí poslední ikonka (viz. B.1) s textovou vysvětlivkou Vložit konec stránky. Pomocí této ikonky určujete, co všechno 41

B. Uživatelská příručka Obrázek B.1: Zalomení článku bude zobrazeno jako náhled článku na úvodní stránce. Jinak řečeno, pokud tuto značku do článku nevložíte, tak bude celý článek k vidění i na úvodní stránce. Pokud však tuto značku vložíte do textu, tak po tuto značku bude text článku k vidění na úvodní stránce (tedy náhled článku) a celý článek se zobrazí až po kliknutí na odkaz v podobě graficky odlišeného nadpisu onoho článku. B.2.3 Editace a mazání článků Po napsání článku ho můžete následně i editovat nebo smazat. Tyto operace se nacházející pod odkazem Moje články, kde vám k orientaci pomůže datum publikování článku a jeho nadpis. B.2.4 Kontakty spoluhráčů Kontakty spoluhráčů lze logicky najít pod stejnojmenným názvem odkazu. Zde uvidíte jména hráčů, přihlašovací jméno, ale hlavně jejich e-mailovou adresu a telefonní číslo. Pokud telefonní číslo nemají udáno, tak je zobrazena nula. B.3 Rozšíření pro administrátory B.3.1 Editace a mazání článků všech uživatelů Funkcionalita identická s editací a mazání svých článků, jediný rozdíl je v tom, že administrátor může editovat i články ostatních. B.3.2 Vytvoření nového uživatele Administrátor pod odkazem Nový uživatel registruje nového uživatele a nastavuje mu práva. Po registraci se na vyplněný e-mail odešle zpráva s informací o registraci v systému a s přihlašovacími údaji. 42

B.3.3 Správa uživatelských účtů B.3. Rozšíření pro administrátory Administrátor má možnost dodatečně upravit uživatelská data, resetovat jim heslo, kde se následně vygeneruje nové a danému uživateli přijde na uvedený e-mail. V případě smazání uživatele se všechny jeho články přesunou pod jednoho z administrátorů. Všechny tyto operace se provádí pod odkazem Editace uživatelů B.3.4 Nastavení připojení k České florbalové unii Pokud chceme, aby se na naší stránce načítali aktuální informace ohledně statistik a ligové tabulky, je potřeba vyplnit ligové a týmové údaje v Cfbu nastavení. Získat data k nastavení správných parametrů bohužel už není tak banální, takže si pomůžeme názorným obrázky B.3 a B.4, kde tyto informace získat. Slovy popsáno, na stránkách České florbalové unie si přes levé menu vyhledáme naší ligu a necháme si jí načíst. Písmenko označující divizi můžete jednoduše vidět nad ligovou tabulkou, např. u soutěž mužů divize D zkopírujete z konce ono D, pokud by tam náhodou žádné písmenko uvedeno nebylo, tak by liga měla mít pouze divizi A. Kód soutěže získáme zas tak, že si rozklikneme odakaz nad ligovou tabulkou předpis soutěže načež se nám objeví možnost stažení souboru např. 3XM7.pdf. Tento název souboru (bez přípony.pdf) nám říká o kterou ligu se jedná. Tento název přepíšeme do kolonky v administraci Kód soutěže a dopíšeme za něj o jaký ročník se jedná. Tedy např. pokud probíhá ročník 2012/2013, tak celý kód soutěže bude vypadat takto 3XM72012/2013. Pro získání Id týmu je nutné kliknout na název našeho týmu v tabulce načež se nám objeví okno Profil mužstva. V adresním řádku (místo kam píšete odkaz na webové stránky) uvidíte na konci URL team_id=9335 (samozřejmě číslo vašeho týmu se bude opět pravděpodobně lišit) a právě toto číslo zkopírujete do kolonky v administraci Id týmu. Pokud jste vše zadali správně, tak se po kliknutí na tlačítko Nastavit nastavení ligy v pořádku aktualizuje. B.3.5 Nastavení kontaktu na klub Nastavení kontaktu na klub je možno pod odkazem Kontakt klubu a vyplnění údajů je opět jednoduché ovšem až na jedinou věc, kterou je správné vyplnění souřadnic x (udává vodorovnou souřadnici), y (udává svislou souřadnici). Opět si pomůžeme názorným obrázkem B.2 a zkusíme popsat slovy. Na mapy.cz zadáme do vyhledávání přesný název ulice a popisného čísla. V pravém horním rohu mapy si otevřete záložku Místa, lokality 43

B. Uživatelská příručka Obrázek B.2: Mapy.cz návod k nalezení potřebných dat a body a klikneme dole na GPS. Zobrazí se nám hodnoty v úhlech, proto klepneme 1x na dvojitou zatočenou šipku. Hodnotu zakončenou písmenkem N zkopírujeme bez písmenka a vložíme v administraci do kolonky souřadnice y, totéž uděláme se souřadnicí zakončenou písmenkem E, kterou zase vložíme do kolonky souřadnice x. Pokud souřadnice přesně nesedí, tak si můžete, za pomoci náhledu mapky, dopilovat vše k obrazu svému. 44

B.3. Rozšíření pro administrátory Obrázek B.3: cfbu.cz návod k nalezení potřebných dat v tabulce ligy Obrázek B.4: cfbu.cz návod k nalezení potřebných dat v profilu klubu 45