VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra elektrotechniky a informatiky Obor Aplikovaná informatika. Webové stránky pro fotbalový klub

VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra elektrotechniky a informatiky Obor Aplikovaná informatika

We b o v é s t r á n k y p ro f o t b a l o v ý k l u b F C S p a r t a k Ve l k á B í t e š bakalářská práce

Autor: Jiří Jelínek Vedoucí práce: PaedDr. František Smrčka, Ph.D. Jihlava 2013

Anotace Cílem této práce bylo vytvoření internetových stránek pro fotbalový klub FC Spartak Velká Bíteš. V úvodní části práce je seznámení s daným problémem, vymezením cílů, rešerší řešení a použitými technologiemi. Další částí práce je analýza řešeného problému a popis implementace. Poslední část se zabývá testováním aplikace a srovnáním s již existujícími řešeními. Celá webová aplikace byla vytvořena v jazyce PHP s pomocí frameworku Nette. Dále používá databázový systém MySQL.

Klíčová slova Fotbal, webová aplikace, PHP, Nette, MySQL

Abstract The goal of my bachelor thesis is to create a website for the football team FC Spartak Velká Bíteš. In the first part of the thesis, the given problem is introduced, targets are set, and research of solutions and used technologies are presented. In the next part of the thesis the solved problem is analysed and the implementation described. The last part deals with testing of the application and comparison with already existing solutions. The whole web application is created in the PHP language using the Nette framework. It also uses the database system MySQL.

Key words Soccer, web application, PHP, Nette, MySQL

Prohlašuji, že předložená bakalářská práce je původní a zpracoval/a jsem ji samostatně. Prohlašuji, že citace použitých pramenů je úplná, že jsem v práci neporušil/a autorská práva (ve smyslu zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů, v platném znění, dále též „AZ“). Souhlasím s umístěním bakalářské práce v knihovně VŠPJ a s jejím užitím k výuce nebo k vlastní vnitřní potřebě VŠPJ. Byl/a jsem seznámen s tím, že na mou bakalářskou práci se plně vztahuje AZ, zejména § 60 (školní dílo). Beru na vědomí, že VŠPJ má právo na uzavření licenční smlouvy o užití mé bakalářské práce a prohlašuji, že s o u h l a s í m s případným užitím mé bakalářské práce (prodej, zapůjčení apod.). Jsem si vědom/a toho, že užít své bakalářské práce či poskytnout licenci k jejímu využití mohu jen se souhlasem VŠPJ, která má právo ode mne požadovat přiměřený příspěvek na úhradu nákladů, vynaložených vysokou školou na vytvoření díla (až do jejich skutečné výše), z výdělku dosaženého v souvislosti s užitím díla či poskytnutí licence. V Jihlavě dne 28. května 2013

............................................... Podpis

Poděkování Na tomto místě bych rád poděkoval svému vedoucímu práce PaedDr. Františku Smrčkovi, Ph.D. za možnost vytvářet práci pod jeho vedením.

Obsah 1

Úvod.......................................................................................................................... 8

2

Popis a cíle řešeného problému .............................................................................. 10

3

2.1

Seznámení s problémem .................................................................................. 10

2.2

Vymezení cílů a požadavků ............................................................................. 10

Rešerše možných řešení .......................................................................................... 12 3.1

Joomla .............................................................................................................. 12

3.1.1 3.2

Wordpress ........................................................................................................ 13

3.2.1

4

League manager ........................................................................................ 13

3.3

Drupal ............................................................................................................... 14

3.4

Zhodnocení rešeršních řešení ........................................................................... 14

Použité technologie a frameworky ......................................................................... 15 4.1

5

Joomleague ............................................................................................... 12

Framework Nette .............................................................................................. 15

4.1.1

Model-View-Controller ............................................................................ 15

4.1.2

Controller (Presenter) ............................................................................... 16

4.1.3

Formuláře .................................................................................................. 16

4.1.4

Šablonovací systém Latte ......................................................................... 17

4.1.5

Makra ........................................................................................................ 17

4.1.6

Ajax a Nette .............................................................................................. 18

4.1.7

Databáze.................................................................................................... 18

4.2

Less .................................................................................................................. 18

4.3

Twitter Bootstrap ............................................................................................. 19

4.3.1

Responzivní webdesign ............................................................................ 19

4.3.2

Javascriptové komponenty ........................................................................ 20

4.4

GIT ................................................................................................................... 21

4.5

Popis vývojových prostředí .............................................................................. 21

4.5.1

Netbeans IDE 7.2.1 ................................................................................... 21

4.5.2

MySQL Workbench 5.2 CE...................................................................... 22

4.5.3

GIT Tortoise ............................................................................................. 22

Analýza řešeného problému.................................................................................... 23 5.1

Funkcionalita systému ...................................................................................... 23

5.2

Datový model ................................................................................................... 25

5.2.1

Rozpis zápasů ........................................................................................... 25

5.2.2

Informace o zápasu ................................................................................... 26

5.2.3

Soupiska hráčů .......................................................................................... 27

6

Popis implementace ................................................................................................ 28 6.1

Implementace databáze .................................................................................... 28

6.1.1 6.2

Autentizace uživatele ................................................................................ 30

6.2.2

Generování rozpisu zápasů ....................................................................... 32

9

Úvodní stránka webu........................................................................................ 34

6.3.1

Layout webu ............................................................................................. 35

6.3.2

Tvorba responzivního webu...................................................................... 35

6.3.3

Kniha návštěv s použitím Ajaxu ............................................................... 37

6.4

8

Administrace webu........................................................................................... 30

6.2.1 6.3

7

Výsledná podoba implementace databáze ................................................ 29

Uživatelská příručka......................................................................................... 39

6.4.1

Vytvoření článku....................................................................................... 39

6.4.2

Přidání novinky ......................................................................................... 40

6.4.3

Zápasy ....................................................................................................... 40

6.4.4

Hráči a soupisky........................................................................................ 40

6.4.5

Fotogalerie ................................................................................................ 41

Testování ................................................................................................................. 42 7.1

Funkčnost aplikace ........................................................................................... 42

7.2

Dodržování norem ............................................................................................ 42

7.3

Srovnání s existujícími řešeními ...................................................................... 42

Závěr ....................................................................................................................... 44 8.1

Splnění cílů....................................................................................................... 44

8.2

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

8.3

Možnosti rozšíření práce .................................................................................. 45

Seznam použité literatury ....................................................................................... 46

Seznam obrázků .............................................................................................................. 47 Seznam použitých zkratek .............................................................................................. 48 Přílohy............................................................................................................................. 49 1

Obsah přiloženého CD ............................................................................................ 49

1 Úvod Fotbal je světovým fenoménem a nejpopulárnější sportem na této planetě, podobnou a možná ještě silnější pozici si na konci minulého století vybojovali také informační technologie. Obě tyto odvětví se stali nedílnou součástí mého života. Proto, když jsem byl osloven s nabídkou vytvoření nového webu pro fotbalový oddíl, kterého jsem sám členem, neváhal jsem a zvolil si tvorbu těchto stránek jako téma mojí bakalářské práce. Náš fotbalový klub – FC Spartak Velká Bíteš je malým fotbalovým klubem s velmi bohatou historií a celou řadou úspěchů. Byl založen v roce 1932 a minulý rok tak úspěšně oslavil již své osmdesáté narozeniny. Je největším sportovním klubem v bítešském mikroregionu a má více než 150 aktivních členů. Náš klub sdružuje několik týmů v různých věkových kategoriích, od přípravek a žáčků, až po dospělé muže. Ti jsou zároveň vlajkovou lodí celého klubu a aktuálně hrají nejvyšší fotbalovou soutěž v kraji – Krajský přebor Vysočina. Pro tak malé město jakým Velká Bíteš je, účast v tak vysoké soutěži je určitě velkým úspěchem. Dávno pryč jsou doby, kdy každý fotbalový fanoušek spěchal v pondělí ráno do trafiky pro noviny, aby se dozvěděl výsledky víkendových zápasů na fotbalových trávnících. V dnešní době plné mobilních technologií, kdy se informace šíří neuvěřitelnou rychlostí, chtějí mít všichni ty nejaktuálnější informace a to co možná nejrychleji. Internet je v tomto případě naprosto ideálním nástrojem. Informovat širokou veřejnost, ale i hráče byl pak hlavní motivací na vznik prvních webových stránek, kterých jsem byl autorem. Vůbec první verze internetových stránek našeho klubu vznikly v roce 2005, jednalo se o naprosto amatérské stránky napsané v editoru webových stránek Front Page, což byl můj první kontakt se světem webových technologií. Ale i přesto se jednalo o jedny z prvních webových stránek fotbalových klubů na Vysočině. Velice záhy si web získal velice silné postavení a velký počet návštěvníků. Okolo roku 2009 začali být stránky nedostačující a přešlo se na systém správy obsahu. Byl použit v té době možná nejoblíbenější český systém PhpRS. Webové stránky v té době byly, co se oblíbenosti týče na svém vrcholu. Od té doby uběhli webové technologie obrovský kus cesty, ale stránky jakoby zamrzli. Toto byl hlavní impuls pro vytvoření nových stránek, které by byli moderní a zajímavé pro fanoušky, ale také partnery našeho klubu. 8

Pro tvorbu webových stránek jsme si vybrali jazyk PHP, který je stále nejrozšířenějším programovacím jazykem pro webové stránky. Dalším důvodem výběru PHP je, že budeme moci použít známý český framework Nette, který velice usnadní práci s rutinními úlohami a zrychlí celý vývoj aplikace. Framework se navíc prakticky sám postará o zabezpečení celé aplikace proti potencionálním útokům. Nedílnou součástí webových stránek a vedle obsahu nejdůležitějším prvkem je vzhled jejich samotných. Stránky budou nakódované v značkovacím jazyku HTML5 s využitím CSS3. Pro větší programátorské pohodlí budou stránky kódovány v šablonovacím systému Latte, který je součástí frameworku Nette. Pro snažší tvorbu kaskádových stylů (CSS) budu používat preprocesor Less společně s CSS knihovnou Twitter Bootstrap.

9

2 Popis a cíle řešeného problému 2.1 Seznámení s problémem Aktuální web našeho fotbalového oddílu se ukázal jako velice nedostačující, proto se výbor klubu rozhodl zapracovat na vytvoření nové webové prezentace, která by dostatečně reprezentovala klub a byla dobrou vizitkou i například pro partnery klubu. Jako autor všech dosavadních verzí webů jsem byl osloven s žádostí na vytvoření nové verze webu. Vzniklo tak téma pro moji bakalářskou práci.

2.2 Vymezení cílů a požadavků Cílem této práce je vytvoření internetových stránek pro fotbalový klub. Hlavní funkcí webu bude nabízet návštěvníkům aktuální informace z dění v klubu. To vše by měl návštěvník naleznout na moderním webu, s intuitivní a snadnou orientací. Každý návštěvník webu bude mít možnost pročítat aktuální články nebo novinky jednotlivých týmů klubu, prohlížet informace z odehraných zápasů nebo datumy a časy nejbližších zápasů. V rámci interakce s klubem budou mít návštěvníci možnost přispívat do diskuzního fóra. V neposlední řadě na webu najde různé fotogalerie týkající se klubu. Základem práce bude vytvoření jednoduché administrace pro správu obsahu. Vstup do administrace bude ošetřen uživatelským jménem a heslem pro každého administrátora. Základem administrace bude správa novinek a článků. Dále aplikace bude spravovat jednotlivé zápasy všech mužstev v klubu od přípravek až po muže. Aplikace bude umět jednoduše generovat též rozpisy. U jednotlivých zápasů se budou shromažďovat informace o datumu a času konání zápasu, jeho výsledku s komentářem. Další části administrace bude správa jednotlivých hráčů společně s umístěním jednotlivých hráčů na soupisku mužstva pro danou sezónu. Poslední částí administrace bude vytvoření fotogalerie. Web bude navržen pro správu dat pouze jednoho klubu, ovšem databáze bude navržena tak, aby v budoucnu mohlo případně dojít k rozšíření aplikace o ukládání statistik také ostatních klubů. Pro běžného návštěvníka bude vytvořena pěkná a moderní hlavní stránka. Důležitou funkcí bude přizpůsobení vzhledu stránky pro jednotlivá zařízení, jako jsou stolní 10

počítače, notebooky, ale také mobilní telefony nebo tablety. Tedy vytvoření tzv. responzivního designu webu.

11

3 Rešerše možných řešení Na českém trhu se nachází několik firem zabývající se tvorbou webových stránek přímo pro sportovní kluby. Náklady na pořízení takového řešení jsou ovšem pro amatérský sportovní klub naprosto neúnosné. Naskýtá se tedy možnost jít cestou open-source řešení. Systémy přímo pro sportovní kluby neexistují, musíme se tedy zaměřit na známé redakční systémy pro správu obsahu (CMS) jako je například Drupal, Joomla nebo Wordpress. V posledních letech klub používal ke správě obsahu redakční systém PhpRS, který se postupně stal zcela nedostatečným a zastaralým.

3.1 Joomla Joomla se řadí k jedněm z nejpopulárnějších Open Source redakčních systémů (angl. zkratka CMS) vůbec. Je licencována pod GNU General Public License. Milióny webů využívají Joomla. Používají ji jednotlivci, malé a střední podniky i velké organizace po celém světě. Joomla jim umožňuje snadno vytvořit a vybudovat řadu webových stránek a webových aplikací.[1]

Obrázek 1 : Logo Joomla zdroj: www.joomlahostings.net

Tento systém je velice propracovaný a má celou řadu funkcí již v základním balíku. Uživateli umožní například vkladát a upravovat články, jednotlivé stránky nebo spravovat šablony. Vzhledem k našim nárokům na aplikaci jsou tyto funkce nedostačující a budeme potřebovat nějaké rozšíření. Jedním z možných je Joomleague.

3.1.1 Joomleague Joomleague je zdarma dostupné rozšíření pro CMS Joomla!, které rozšíří systém o správu sportovních lig. Jedná se o robustní rozšíření, určené spíš pro uchovávání dat celých soutěží než pro jednotlivé kluby. Joomleague je sice zdarma, ale na druhou 12

stranu její vývoj je celkem pomalý, aktuální verze rozšíření nejsou dostupné pro nejnovější verze systému Joomla. Tento systém umožňuje tedy vytvářet jednotlivé ligy, v nich můžeme spravovat jednotlivé kluby a hráče. U jednotlivých zápasů můžeme ukládat sestavy a námi nadefinované statistiky. Systém poté automaticky generuje tabulky soutěží. Na první pohled se jedná o řešení přesně podle našich představ, ovšem pokud půjdeme více do hloubky, pak zjistíme, že tento systém by úplně nevyhovoval našim požadavkům. Hlavním důvodem proč jsme nezvolili toto řešení je jeho složitost. Sám jsem měl problémy se v spletitém systému orientovat a trvalo dlouhou dobu, než jsem zjistil jak s ním pracovat. Pokud vezmeme v potaz to, že na naše stránky budou zadávat údaje lidé, kteří nejsou technicky moc nadaní, vychází mi, že tento systém nemůže být použit v praxi. Dalším důvodem je fakt, že nepotřebujeme ukládat veškeré údaje o jednotlivých soutěžích nebo absence možnosti řazení do různých věkových kategorií.

3.2 Wordpress Je stejně jako Joomla oblíbený Open-source redakční systém. V základním balíku funkcí se tyto dva asi nejoblíbenější redakční systémy moc neliší. Ani toto není systém, který by přímo vyhovoval naším požadavkům na fotbalový web, ale i tento systém obsahuje rozšíření (plugin) pro správu sportovních lig.

Obrázek 2: Logo Wordpress zdroj: blog.blueboard.cz

3.2.1 League manager Narozdíl od rozšíření JoomLeague pro Joomlu jedná se o velice jednoduchou a přehlednou aplikaci. I v tomto případě se jedná o systém, který ukládá data o celých soutěžích a následně generuje jejich tabulky. Zásadním nedostatkem této aplikace je absence jakékoliv možnosti správy hráčů. Tato aplikace pracuje pouze v rámci výsledků 13

týmu a neumužňuje uchovávat jiné statistiky nebo soupisky mužstev. Z tohoto důvodu je implementace tohoto řešení nemožná.

3.3 Drupal Poslední z větších systémů nese název Drupal. Stejně jako dva předchozí systémy i tento má velice podobnou škálu funkcí. Tento systém ve svém základu obsahuje jen velmi málo funkcí a pro větší projekty je nutné přidat do projektu různé rozšíření a moduly. Bohužel mezi nimi nenajdeme žádný na správu sportovních soutěží. Z tohoto důvodu je tedy Drupal v tomto případě nepoužitelný.

Obrázek 3 logo Drupal zdroj: www.klusik.cz

3.4 Zhodnocení rešeršních řešení Na internetu se objevila řada možných open source řešení, ale ani jedno z nich nebylo natolik dobré, aby se dalo použít pro naše konkrétní zadání. Proto jsem se rozhodl jít cestou samostatného vývoje aplikace.

14

4 Použité technologie a frameworky 4.1 Framework Nette Nette je český open source PHP Framework, který se v poslední době těší velké oblibě a masivnímu nárůstu uživatelů. Je určen pro verzi PHP 5.0 a vyšší, aktuální verze je Nette 2.10, ale systém je neustále vyvíjen početnou programátorskou komunitou. Mezi jeho hlavní přednosti patří výborné zabezpečení aplikace, šablonovací systém, snadná implementace formulářů a také kvalitní podpora technologie Ajax. Vzhledem k narůstající oblibě vzniká také velký počet různých rozšíření a doplňků, které ušetří programátorovi spoustu času.

Obrázek 4: Logo Nette.

4.1.1 Model-View-Controller V roce 1979 přišel Trygve Reenskaug s novou architekturou pro vývoj interaktivních aplikací. V jeho návrhu byly aplikace rozdělené na tři typy komponent: modely, pohledy a řadiče. [2] Tuto architekturu používá právě Nette, ovšem s jedním malým detailem místo slova Controller se někde objevuje slovo Presenter. Proto se občas uvadí, že Nette je postavené na architektuře MVP (Model-View-Presenter). Obrovskou výhodou této architektury objevíme v momentě práce v týmu, kdy například kodér a programátor mohou pracovat v jeden moment na jedné aplikaci nezávisle na sobě. 4.1.1.1 Model Tato vrstva obstarává veškerou manipulaci s daty aplikace. Řídí celou aplikační logiku aplikace. 15

4.1.1.2 View Jedinou funkcí této vrstvy je vykreslit požadovaný obsah do okna webového prohlížeče. Nette framework k této činnosti používá vlastní šablonovací systém Latte.

4.1.2 Controller (Presenter) Je vlastně řadič aplikace, který celou aplikaci řídí. Přijímá požadavky uživatele, které následně předává danému modelu aplikační logiky. Následně žádá o vykreslení dat na obrazovku.

Obrázek 5: Model MVP.

4.1.3

Formuláře

Nette nabízí výbornou podporu formulářů. Základem je zabezpečení samotných formulářů například proti útokům Cross script scripting (XSS) nebo Cross-site request forgery (CSRF). Dále ověří validnost formuláře, jak přímo na straně serveru tak i pomocí Javascriptu. Validační pravidla navíc nemusíme psát pro obě možnosti samostatně, ale pouze v PHP, o vše se následně postará Nette. Velice snadná je také následná obsluha získaných dat. Ukázka formuláře: $form = new Form(); $form->addText('login','Uživatelské jméno') ->setRequired('Zadejte Vaše uživatelské jméno'); $form->addText('email','Zadejte Váš E-mail') ->addRule(Form::EMAIL,'Zadejte e-mail ve správném tvaru');

16

$form->addPassword('password', 'Zadejte heslo') ->setRequired('Zadejte prosím heslo') ->addRule(Form::MIN_LENGTH,'Heslo musí mít minimálně %d znaků',6); $form->addPassword('checkPassword','Zadejte heslo pro ověření') ->setRequired('Zadejte ověřovací heslo') ->addRule(Form::EQUAL, 'Hesla se neshodují', $form['password']); $form->addSubmit('send', 'Ulož');

4.1.4

Šablonovací systém Latte

Vlastní vykreslení webové stránky probíhá právě na úrovni šablon. Kromě velice pohodlné práce, nám framework také nabízí zabezpečení proti bezpečnostním dírám Cross Site Scripting (XSS) automatickým escapováním obsahu, tzn. převedení speciálních znaků na jiné bezpečné sekvence. Latte makro pracuje s klasickým značkovacím jazykem HTML v kombinaci s Latte makry dostáváme velice silný nástroj pro kódování webu.

4.1.5 Makra Díky makrům můžeme v šabloně vypisovat data předané presenterem a různě s daty pracovat. Makra nám umožní vytvářet základní podmínky a cykly. V kombinaci s helpery můžeme snadno upravovat podobu výstupu jako převedení textu na velká písmena, formátování datumu nebo čísla. Silným nástrojem je také dědičnost šablon, kdy si z několika různých šablon můžeme poskládat výslednou stránkou. Ukázka výpisu článků {foreach $articles as $article} {/foreach}

17

4.1.6 Ajax a Nette Pokud chce běžná webová aplikace komunikovat se serverem, musí kvůli tomu zobrazit novou stránku. To je velmi nepraktické v případě, kdy chceme na server odeslat pouze nějaká data nebo změnit jen malý kousek stránky. Technologie Ajax nám dovoluje se serverem asynchronně komunikovat bez obnovení stránky pomocí JavaScriptu. [3] Nette na tento moderní prvek myslí a uživateli poskytuje možnost výstřižků neboli snippetů. Ty uživatel definuje v šabloně klíčovým slovem <snippet>, po provedení nadefinované akce presenter vykreslí pouze daný snippet.

4.1.7 Databáze Framework Nette mimo jiné nabízí i vrstvu pro práci s databází. Základem je třída Nette\Database\Connection, která je postavená na extenzi PDO. Tato třída namapuje celou databázi a uživatel s databází může pracovat jako s objekty. Díky podpoře cizých klíčů je navíc spojování tabulek velice jednoduché, namísto složitých SQL dotazů zavoláním metody ref odkážeme na cizí klíč. Nette navíc striktně nelpí na používání zabudované databázové vrstvy a lze k ní celkem jednoduše připojit jiné ORM například Dibi nebo Doctrine.

4.2 Less Less je preprocesor pro kaskádové styly, který spatřil světlo světa v roce 2009. CSS preprocesor je nástroj, který vám ze zdrojového kódu zapsaného ve vlastní syntaxi vygeneruje CSS pro prohlížeč. Mezi nejznámější patří SASS, LESS a Stylus. [4] V případě složitějších webových stránek, kdy se začne objevovat složitější syntaxe a stránky začnou nabývat na objemu se právě Less stane velice šikovným pomocníkem, který pomáhá k lepší orientaci v kódu a jeho udržovatelnosti. Výhody Lessu oproti CSS 

umožňuje používat proměnné



vnořené definice o

jednoduší práce s potomky selektorů 18



mixiny o

velice podobné funkcím v klasickém programování

o jednoduše nadefinujeme pravidlo a můžeme ho libovolně používat v definicích selektorů, navíc umožňuje předávat i libovolné množství parametrů 

matematické výrazy o umožňuje provádět základní matematické funkce (sčítání, odčítání, ale také složitější funkce jako sinus, cosinus a mnoho dalších)

4.3 Twitter Bootstrap Tato knihovna pro webové aplikace vzniknula s cílem urychlit práci webovým kodérům a sjednotit jejich postupy. Bootstrap je plně podporován technologiemi HTML5 a CSS3, pro plné využití všech dostupných funkcí je dobré využít i sadu JavaScriptových knihoven. Tento framework za kodéra řeší spoustu věcí například rozdílné vykreslování webu u různých typů internetových prohlížečů. Vývojářům poskytuje nadefinované styly pro základní HTML prvky, jako jsou typografie, formuláře nebo tabulky. Bootstrap obsahuje také předdefinované části webu, jako jsou menu, drobečková navigace, stránkovač nebo výstražné zprávy.

4.3.1 Responzivní webdesign Twitter Bootstrap je určen nejen pro weby s pevně danou šířkou, ale také pro tzv. responzivní weby. Responzivní weby, jsou takové weby, které se přizpůsobují zařízení, na kterém jsou zobrazovány jako napříkad telefony, tablety nebo širokoúhlé displeje. Pomocí gridů, tedy pomyslných mřížek lehce vytvoříme schéma pro naši stránku. Jedinou podmínkou je, aby součet hodnot jednotlivých mřížek byl u pevně dané šířky webu 9, u responzivních pak 12.

19



Obrázek 6 Ukázka rozložení stránky v Twitter Bootstrap

4.3.2 Javascriptové komponenty Protože JavaScript se již stal nedílnou součástí webových stránek, tak pozadu nezůstal ani tento framework. Sadou komponent částečně nahrazuje známou knihovnu JQuery UI. Bootstrap nepřináší žádné revoluční novinky, ale na jednom místě nabízí standardní funkce moderního webu. Kódem na pár řádků si tak můžeme lehce vytvořit carousel článků, tedy hodně používaný prvek na moderních webech, kdy se hlavní články prolínají na jednom místě webu. Snadno můžeme také vytvářet různá modální okna nebo záložkové navigace. Bootstrap je vyborný nástroj, který se neustále vyvíjí a bude určitě dobré pro každého, kdo se zabývá webovými technologiemi pozorně sledovat jeho vývoj.

20

4.4 GIT GIT je rychlý, škálovatelný, distribuovaný systém pro správu verzí s neobyčejně bohatou sadou příkazů.[5] Autorem je Linus Torvalds, který ho vytvářel jako správce verzí pro vývoj jádra Linuxu. Postupně se ovšem z GITu stal hlavně pro jeho jednoduchost jeden z nejrozšířenějších verzovacích systémů vůbec. Pro správu samotné aplikace je nutné nejprve vytvořit repozitář. Tento repozitář pak bude sledovat změny v jednotlivých souborech. Důležité je průběžně ukládat části práce pomocí tzv. commitů. Pro postupný vývoj lze použit větvení, to nám umožní pracovat například rozšíření aplikace, aniž bychom přišli o dosud funkční verzi aplikace. Hlavní myšlenkou je ovšem možnost paralelního vývoje aplikace více uživateli. Git nám indexací zabrání, aby například jeden programátor přepsal kód druhému programátorovi. Celý repozitář je poté nahrán na nějakém serveru, kde je možné nastavit samozřejmě různé možnosti přístupů. Je běžné, že open-source aplikace jako například Nette má svůj repozitář, který je umístěný přímo na oficiálním serveru systému GitHubu. Do vývoje aplikace se pak může zapojit prakticky každý.

4.5 Popis vývojových prostředí 4.5.1 Netbeans IDE 7.2.1 Open-source vývojové prostředí vznikající pod hlavičkou firmy Sun, na vývoji se podílí široká skupina vývojářů z celého světa. Toto moderní vývojové prostředí napsané v jazyku Java umožňuje psát, překládat a ladit programy v širokém spektru programovacích jazyků (Java, C++, PHP a další). Do programu Netbeans je možné nahrát také celou řadu rozšíření z široké nabídky na webových stránkách programu. Mezi nimi nechybí také rozšíření pro framework Nette. Ten přidá do systému podporu pro šablonovací systém Latte, snadnou tvorbu presenterů a pohledů. Jedná se o rozšíření, které tak usnadní a urychlí vývoj celé aplikace.

21

4.5.2

MySQL Workbench 5.2 CE

Společnost Oracle vyvinula tento nástroj pro návrh databáze. Program obsahuje grafické rozhraní pro tvorbu tabulek a jejich relací. Velice intuitivní je vytváření schémat ER Diagramu. Program navíc obsahuje možnost vzdáleného administrování databáze. Je tedy schopný nahradit velice rožšířený PHP MyAdmin.

4.5.3 GIT Tortoise Protože je Git napsaný pro Linux, obsluha tohoto programu byla původně možná pouze přes příkazovou řádku. Ovšem uživatelům operačního systému Windows nejsou na práci

s příkazovou řádkou příliš zvyklí. Vznikla celá řada GUI nástrojů.

Nejpropracovanějším z nich je práve Tortoise. Neobsahuje všechny funkce, které umožňuje příkazová řádka, ale pro základní práci a verzování je naprosto dostačující.

22

5 Analýza řešeného problému Vytváření této webové aplikace předcházela důkladná analýza, z které vyplynul návrh na řešení.

5.1 Funkcionalita systému Celá aplikace bude rozdělena na dvě části - uživatelskou a administrátorskou. Do první uživatelské části budou mít přístup všichni uživatelé bez omezení. Do administrátorské části budou mít přístup pouze autorizovaní uživatelé přes administrátorské rozhraní po zadání uživatelského jména a hesla. Všichni administrátoři budou mít stejná uživatelská práva, která budou prakticky neomezená. Budou moci vkládat, editovat a mazat všechny záznamy. Systém bude ukládat data o zápasech, hráčích a administrátorech. Systém bude mimo jiné umožňovat vkládání článků, novinek a fotogalerií. O jednotlivých administrátorech budeme uchovávat tyto data: jméno a příjmení, e-mail a hlavně přihlašovací údaje, tedy přihlašovací jméno a heslo. Heslo bude šifrované z důvodu zabezpečení a ochrany celého systému. Všechny údaje, včetně uživatelského jména či hesla, si každý uživatel může libovolně měnit. Základem systému bude správa utkání mužstev v našem klubu. U jednotlivých zápasů budeme chtít shromažďovat následující informace: datum a začátek utkání, domácí a hostující tým. V případě, že naše mužstvo bude hostujícím týmem, budeme uvádět také odjezd k utkání. Pokud se bude jednat o mistrovský zápas, budeme chtít také zaznamenat kolikátým hracím kolem soutěže je. V pozdější fázi po odehrání zápasu se budou do systému zadávat statistické údaje a to sice poločasový a celkový výsledek klání, včetně krátkého slovního popisu. Dále se budou ukládat záznamy o tom, kdo z našeho týmu v utkání nastoupil a také střelci našich branek. U statistik utkání budeme sledovat nejen, kdo nastoupil, ale také na jakém postu a zaznamenávat budeme též možná střídání. Utkání se budou dělit podle kategorií týmů, soutěže a také ročníku dané soutěže. Dalším opěrným bodem systému bude správa hráčů. Ke každému našemu týmu v našem klubu budeme chtít zaznamenávat soupisku družstva. U jednotlivých hráčů budeme zaznamenávat jméno a příjmení, datum narození, pozici na hřišti a také jeho fotografii. Budeme zohledňovat různá fakta a to sice, že jeden hráč může být na soupisce více 23

týmů. Například jeden hráč může nastupovat za A mužstvo i B mužstvo nebo starší žák může být též na soupisce dorostenců. Zároveň v jedné sezoně může hráč figurovat na soupisce jednoho mužstva a v další už ne, tedy soupisky se liší ročník od ročníku. To je případ hlavně u mládežnických týmů, kdy hráči se s vyšším věkem dostávají také do vyšších věkových kategorií, tedy v jedné sezoně je na soupisce mladších žáků a v další už na soupisce starších žáků. Podstatnou částí každého systému na správu obsahu jsou články a novinky. U článků budeme chtít zaznamenávat typická data jako je titulek, podtitulek, úvod neboli perex a poté samotný obsah článků, dále pak budeme chtít vybrat z fotogalerie obrázek k uvedenému článku. Článek navíc budeme moci provázat s jednotlivým zápasem. Po rozkliknutí článků se nám poté zobrazí informace o výsledku zápasu, sestava našeho mužstva, potažmo střelci branek. Stejně tak bude možnost provázání článků s některou z fotogalerií. U jednotlivých článků bude možnost nastavení viditelnosti. Tedy pokud ho chceme zobrazit na hlavní stránce, případně ve slideshow (tedy části stránky, kde se dynamicky mění jednotlivé články). Článku se bude moci nastavit také vyšší priorita a zařídit tak, aby se článek zobrazil na vyšší pozici i pokud je staršího data. Do systému budeme chtít také zakomponovat novinky. Půjde o krátké zprávy, které jsou důležité, ale nemají tak dlouhý obsah, aby vydali za samotný článek. Poslední částí systému je fotogalerie. Bude se jednat o úplně jednoduchý systém fotogalerie. Administrátor bude mít možnost založit fotogalerii s libovolným názvem a popisem. Do této galerie pak bude možné nahrávat samotné fotografie, například ze zápasů. Jediným požadavkem bude, aby se případné fotografie s větším rozlišením zmenšili na menší formát, Protože nechceme na server nahrávat fotografie, které mají několik megabytů. Běžný uživatel stránek bude mít jedinou možnost jak nějakým způsobem měnit obsah webu a to sice v návštěvní knize. Návštěvní kniha bude naprosto jednoduchá. Uživatel zadá svoje jméno nebo přezdívku, e-mail a poté vzkaz, který následně odešle. Vzkaz se následně objeví v návštěvní knize.

24

5.2

Datový model

Cílem datového modelování je navrhnout kvalitní datovou strukturu pro konkrétní aplikaci a databázový systém, který bude tato aplikace využívat k uložení dat.[6] Návrhu datového modelu je potřeba věnovat zvláštní pozornost, jakékoliv změny v návrhu databáze by mohli znamenat komplikace v již hotovém zdrojovém kódu a nutnost jeho opravy. Špatně navržený datový model by poté mohl mít za důsledek například špatnou plynulost celé aplikace. Z důvodu vysokého počtu entit si následující modelování rozdělíme na drobnější podproblémy.

5.2.1 Rozpis zápasů Entita Zápas slouží pro evidenci všech zápasů v systému. Klíčem této entity je id, dále entita obsahuje atributy datum, začátek, kolo a výsledek. Entita Zápas je ve vztahu s entitou Tým, tento vztah nazveme „hraje” a tento vztah je povinný, protože zápas hrají vždy dva týmy proti sobě, kardinalita tohoto vztahu je tedy M:N. Identifikačním klíčem entity Tým je id, dalšími atributy této entity jsou název, krátký název a logo. Každý zápas je odehrán v rámci nějaké sezony. Vzniká nám tak nový entitní vztah mezi entitami Zápas a Sezona a tento vztah se bude jmenovat „přiřazen”. Tento vztah má kardinalitu N:1, protože v jedné soutěži může existovat více sezon, zároveň je tento vztah povinný. Entita Sezona bude mít kromě identifikačního klíče id, jediný atribut a to atribut s ročníkem soutěže. Entita Soutěž bude mít klíč id a další atribut s názvem soutěže. Všechny soutěže se hrají v rámci některé věkové kategorie (například soutěž mužů). Proto je entita Soutěž ve vztahu s entitou Kategorie s názvem vztahu „omezena“. Jelikož soutěží v rámci jedné kategorie může být v systému více je kardinalita toho vztahu N:1. Každá soutěž musí spadat pod nějakou kategorii, ale naopak kategorie může existovat bez závislosti na soutěži. V tomto vztahu je tedy povinná pouze entita Soutěž.

25

Obrázek 7: ER diagram rozpis zápasů

5.2.2 Informace o zápasu V tomto podproblému opět narazíme na entitu Zápas, kterou jsme si již popsali výše. Tato entita je poté hned ve třech vztazích s entitami Sestava, Střelci a Střídání. Protože mají tyto tři entity společné atributy minuta, hráč a tým vytvoříme z těchto entit ISA hierachii. ISA hierachie je proces obdobný dědičnosti v objektovém programování. Nyní k jednotlivým vztahům, první podtyp entity Událost má název Sestava. Entita Sestava je slabým entitním typem, protože není identifikován pouze pomocí svých atributů, ale také atributů entity Zápas. Protože ke každému zápasu můžeme přiřadit až dvě sestavy a každý zápas má jinou sestavu, jsou tyto dvě entity ve vztahu M:N. V tomto vztahu je povinnou entitou pouze entita Zápas, protože každá sestava musí patřit k nějakému zápasu, naopak zápas může existovat i bez sestavy. Sestava je tedy ve vztahu nepovinná. Další entita s názvem Střelci se prakticky nelíší od předchozí. Také má ve vztahu s entitou Zápas kardinalitu M:N. Protože zápas nemusí mít svého střelce, ale pokud střelce má, musí patřit k nějakému zápasu. V tomto vztahu je tak povinná pouze entita Zápas. Jedinou změnou oproti dvoum předchozím u entity Střídání je další atribut střídající hráč. Jinak je vše stejné, kardinalita vztahu je v tomto případě opět M:N, protože v různých zápasech může dojít k několika střídáním. Entita Zápas může existovat i v případě, že nejsou žádné střídání, entita Střídání je tedy nepovinná. 26

Obrázek 8: ER diagram informace o zápasu

5.2.3 Soupiska hráčů Posledním řešeným podproblémem je soupiska hráčů. První entita Hráč má identifikační klíč id, dalšími atributy jsou jméno, příjmení, datum narození, foto hráče a pozice. Tato entita je ve vztahu s entitou Soupiska, která je slabým entitním typem a obsahuje jediný vlastní atribut sezona. Tyto dvě entity jsou ve vztahu s názvem „umístěn“. Parcialita vztahu je nepovinná, jak hráč, tak i soupiska můžou existovat nezávisle na sobě. Kardinalita vztahu je M:N, hráč může být na více soupiskách. Soupisky samozřejmě obsahují více než jednoho hráče. Entita Soupiska je navíc ještě ve vztahu s entitou Tým, tato entita již byla popsána výše. Pro tento vztah jsme zvolili název „patří“. Kardinalita vztahu je 1:N: Každá soupiska patří jen jednomu týmu, ale každý tým může mít více soupisek. Tým může existovat bez soupisky a proto je v tomto vztahu entita Soupiska nepovinná.

Obrázek 9: ER diagram soupiska hráčů

27

6 Popis implementace 6.1 Implementace databáze Tato kapitola detailněji popisuje samotnou implementaci aplikace. Podrobněji se zaměříme na popis zajímavých částí aplikace a jejich funkcí. Součástí této kapitoly je také jednoduchá nápověda pro užívání aplikace. K implementaci databáze budeme používat databázi MySQL. Databázový systém MySQL je největším hráčem na trhu s otevřeným zdrojovým kódem. Téměř všechny společnosti nabízející webový prostor nabízejí zároveň přístup do databází MySQL.[7] Vzhledem k faktu že naše databáze bude pracovat se spoustou cizích klíčů, použijeme jako úložiště databáze formát InnoDB. Na rozdíl od dalšího úložiště MyIsam nabízí naše zvolené úložiště nejen podporu cizích klíčů, ale také například podporu transakcí. Další důležitým nastavením je volba znakové sady, v našem případě budeme používat znakovou sadu UTF-8. Celý návrh databáze (viz. Obr. 10) byl vytvořen v programu MySQL Workbench, ze kterého je velice snadné vygenerovat skript pro vytvoření databáze. Tento skript si můžete prohlédnout na přiloženém CD.

28

6.1.1 Výsledná podoba implementace databáze

Obrázek 10: Návrh MySQL databáze

29

6.2 Administrace webu V této části se zaměříme na popis administrace webu. Do administrace se dostaneme jednoduše zadáním adresy ve formátu např. http://nášweb.cz/admin.

6.2.1 Autentizace uživatele Díky frameworku Nette si vytvoříme velice jednoduše část webu pouze pro přihlášené uživatele. Budeme k tomu využívat službu s názvem User. Nejprve v základním presenteru DefaultPresenter ověříme, zda je uživatel přihlášen. if(!$this->getUser()->isLoggedIn()) { $this->redirect('Sign:'); }

Pokud uživatel není přihlášen, bude aplikace přesměrována na presenter s přihlašovacím formulářem. Tento presenter s názvem SignPresenter vytváří formulář pro autentizaci uživatele. Dále tento formulář také spracuje a pokusí se přihlásit uživatele. Pokud proběhne vše v pořádku, uživatel se přihlásí v pořádku do systému. Přihlášení probíhá pomocí uživatelského jména a hesla. $this->getUser()->login($values->login,$values->password);

Metoda login poté zavolá námi vytvořený autentikátor. Autentikátor je jednoduchá třída mající jedinou metodu authenticate(). Jejím úkolem je buď vrátit tzv. identitu nebo vyhodit výjimku Nette\Security\AuthenticationException. [8]

30

/** * zajistuje autentifikaci uzivalele * @return Nette\Security\Identity * @throws Nette\Security\AuthenticationException */ public function authenticate(array $credentials) { list($username, $password) = $credentials; $row = $this->database->table('user')->where('login', $username) ->fetch(); if (!$row) { throw new Security\AuthenticationException ('Uživatelské jméno nebylo nalezeno', self::IDENTITY_NOT_FOUND); } if ($row->password !== $this->calculateHash($password, $row>password)) { throw new Security\AuthenticationException('Heslo nebylo zadáno správně', self::INVALID_CREDENTIAL); }

unset($row->password); return new Security\Identity($row->id_user, NULL, $row->toArray()); }

Zabezpečení všech částí administrace proti neautentizovaným uživatelům docílíme jednoduše dědičností presenterů. Všechny presentery v administraci musí být potomky základního presenteru DefaultPresenter.

31

6.2.2 Generování rozpisu zápasů Důležitou součástí administrace je jistě generování zápasů. Každý tým má svůj rozpis zápasů pro snadné a rychlé generování budeme chtít vytvořit formulář, kde zadáme tým, pro který rozpis vytváříme a následně soutěž v rámci rozpisu týmu. Následně budeme zadávat datum a čas zápasu, případný odjezd na zápas, místo utkání a soupeře. Protože formulář bude obsahovat více utkání, budeme chtít jednotlivé zápasy přidávat dynamicky. Nejedná se o standardní formulářový požadavek, ovšem Nette na tuto alternativu myslí. Pomocí rozšíření o Replikátor formulářových kontejnerů Nette $form/addDynamic od Filipa Procházky můžeme snadno vytvořit takovýto formulář. V Nette je možné formulář skládat z menších celků. Tyto celky se nazývají kontejnery a tohoto faktu využijeme právě v tomto případě, kdy se budou tyto kontejnery, dalo by se říct „podformuláře“, dynamicky přidávat nebo odebírat. Použití replikátoru v ukázce: $dates = $form->addDynamic('match', function (Container $container) { $container->addText('date','datum a čas') ->setRequired('Vyplňte datum a čas'); $container->addText('departure','odjezd'); $container->addSelect('team_2', 'soupeř', $this->teams) ->setAttribute('class','radio'); $container->addRadioList('place', 'místo', array(1=>'doma',0=>'venku')); $container->addText('round','kolo') ->addCondition(Form::FILLED) ->addRule(Form::INTEGER,'Kolo musí být číslo');

$container->addSubmit('delete', 'smaž zápas') ->addRemoveOnClick()

32

->setAttribute('class','btn-danger'); },1);

Tato část kódu nám tedy umožní vložit neomezený počet utkání do rozpisu zápasů. Samozřejmě budeme potřebovat data vložená do formuláře zpracovat a přidat do databáze. Práce s kontejnery není vůbec složitá, což dokazuje i následující ukázka zdrojového kódu. $values = $button->form->values; foreach($values->match as $match) { if($match->place==1){ $home_team = $values->team_1 $away_team = $match->team_2; }else{ $home_team = $match->team_2; $away_team = $values->team_1; }

$data[] = array( "id_season" => $values->id_season, "id_home_team" => $home_team, "id_away_team" => $away_team, "date" => $match->date, "departure" => $match->departure, "round" => $match->round); }

V poli data budu mít tedy všechny data určená pro uložení do databáze přesně podle schématu naší databáze. Zavoláním jedné metody poté data jednoduše uložíme. $this->matchRepository->save($data); 33

Následně můžeme vytvořené zápasy dále spravovat, přidávat k nim výsledky nebo sestavy.

Obrázek 11: Ukázka generování rozpisu zápasů

6.3 Úvodní stránka webu Úvodní stránka webu neboli home page je první stránka, kterou uživatel po zadání URL adresy uvidí. Základem kvalitního webu je samozřejmě obsah, ale neméně důležitým prvkem je samotný vzhled aplikace. Cílem této práce bylo vytvoření přehledného webu s intuitivním ovládáním. Navíc podle průzkumů bude od roku 2014 navštěvovat internetové stránky více jak 50% uživatelů z mobilních telefonů, je tedy nutné náš web na tuto skutečnost připravit a vytvořit responzivní web.

34

6.3.1 Layout webu Rozložení webu neboli layout byl inspirován stránkami profesionálních českých fotbalových klubů. V hlavičce je logo klubu, název a rok založení klubu. Hned pod ním v hlavičce najdeme menu. Hlavní stránka dále obsahuje tzv. carousel článků. Pod ním web nabízí přehled nejbližších zápasů, krátké novinky a také další články.

Obrázek 12 Náhled úvodní stránky

6.3.2 Tvorba responzivního webu Náš web bude responzivní, základem responzivního webu je rozpoznání zařízení, kterým na web přistupujeme. Pro takovéto rozpoznání máme hned několik možností. Kaskádové styly nabízejí díky funkci media queries možnost rozpoznání velikosti obrazovky zařízení, na kterém se web zobrazuje. @media screen and (max-width: 480px) { /** CSS pro mobilní zařízení */ }

35

Další možností je pomocí hlaviček odesílaných internetovým prohlížečem. Pomocí User-agent stringu a také http hlaviček můžeme zjistit typ zařízení na straně serveru. K ulehčení detekce použijeme skript Mobile-detect šířený pod licencí MIT. Ukázka detekce zařízení v presenteru. public function startup(){ parent::startup(); $detect = new \Mobile_Detect(); $this->isMobile = $detect->isMobile(); }

V našem případě budeme používat oba tyto styly, protože je nevhodné zatěžovat mobilní telefony carouselem článků. Proto, když zjistíme, že se na web připojujeme přes mobilní telefon, zajistíme načítání článků již na úrovni serveru. Detekci zařízení přes kaskádové styly používáme také a tato detekce je s použitím knihovny Twitter Bootstrap velice snadná. Každému objektu můžeme přiřadit třídu například hidden-phone, tato třída poté prvek skryje pro všechny mobilní zařízení.

Telefony

Tablety

767px a méně

979px až 768px

.visible-phone

Viditelné

Skryté

Skryté

.visible-tablet

Skryté

Viditelné

Skryté

.visible-desktop

Skryté

Skryté

Viditelné

.hidden-phone

Skryté

Viditelné

Viditelné

.hidden-tablet

Viditelné

Skryté

Viditelné

.hidden-desktop

Viditelné

Viditelné

Skryté

Třída

Počítače

Tabulka 1: Přehled tříd responzivního webu Twitter Bootstrap

36

Obrázek 13: Náhled webu na mobilním telefonu

6.3.3 Kniha návštěv s použitím Ajaxu Klub bude chtít mít od návštěvníků webu také nějakou zpětnou vazbu, proto bude na stránkách jednoduchá kniha návštěv. Právě na této knize návštěv budeme demonstrovat, jak funguje framework Nette dohromady s technologií Ajax. Nejprve vytvoříme formulář pro odeslání vzkazu do knihy. public function createComponentPostGuestbook() { $form = new Form(); $form->setRenderer(new BootstrapRenderer()) ->getElementPrototype()->class('ajax'); /** JEDNOTLIVÉ PRVKY FORMULÁŘE **/ return $form; }

37

Nejdůležitější je nastavit metodou getElementPrototype formuláři třídu ajax. Do šablony je nutné přidat javascript na podporu Ajaxu, použijeme nette.ajax.js od Jakuba Dobeše a následně skript inicializujeme. Kód v šabloně bude vypadat zhruba takto. {snippet postGuestbook} {control postGuestbook} {if count($posts)==0} {else} {foreach $posts as $post} // vypsání jednotlivých příspěvků {/foreach} {/if} {/snippet}

Nakonec už musíme pouze zpracovat samotný formulář. public function postGuestbookSubmitted(Form $form) { $values = $form->getValues(TRUE); $values['date'] = new \DateTime(); $this->guestbookRepository->save($values);

$this->flashMessage('Příspěvek byl přidán'); if($this->isAjax()) { $this->invalidateControl('flashMessages'); $this->invalidateControl('postGuestbook'); $form->setValues(array(), TRUE); }

38

else { $this->redirect('this'); } }

Indikujeme způsob odeslání formuláře, pokud byl formulář odeslán pomocí Ajaxu, necháme obnovit pouze snippety se zprávou o odeslání a s výpisem příspěvků.

6.4 Uživatelská příručka Další částí této kapitoly je stručná uživatelská příručka pro popis práce s aplikací.

Obrázek 14: Ukázka administrace webu

Po přihlášení se dostaneme na hlavní stránku webu. V pravém horním rohu se nachází jméno přihlášeného uživatele a také tlačítko pro odhlášení ze systému.

6.4.1 Vytvoření článku V nabídce zvolíme články a následně vybereme možnost Přidej článek. Povinně musíme zadat titulek článku, úvod článku a také obrázek ke článku. Kromě způsobu vydání článku můžeme k zápasu také přiřadit zápas týmu nebo fotogalerii.

39

Vytvořený článek můžeme editovat v sekci nabídky Články – Výpis článků. Vybereme přidaný článek a jednoduše článek upravíme, stejně jak kdybychom vytvářeli nový. Ve stejné sekci můžeme článek také smazat.

6.4.2 Přidání novinky Novinku přidáme jednoduše v sekci Novinky. Všechny novinky najdeme hned pod formulářem pro přidávání. V nabídce můžeme vybrat smazání nebo úpravu novinky.

6.4.3 Zápasy Zápasy do rozpisu přidáváme v sekci Zápasy – Generuj rozpis týmu. Před vkládáním je nutné mít v databázi vložené týmy a sezony soutěže. Tým do databáze vložíme v sekci Týmy a zápasy pod odkazem Týmy, sezony poté ve stejné sekci pod odkazem Přidej soutěž. V přidávání zápasů nejdříve zvolíme tým, pro který budeme rozpis vytvářet a soutěž, pro kterou budeme rozpis vytvářet. Dále už pouze vybereme datum, soupeře a místo zápasu. Případně také odjezd a soutěžní kolo zápasu. Takhle můžeme vložit libovolný počet zápasů, kliknutí na tlačítko Přidat zápas(y) přidáme zápasy do databáze. V nabídce Zápasy- Seznam zápasů najdeme výpis všech zápasů, v této nabídce je můžeme jednotlivě upravovat, přidávat k nim statistiky nebo je též mazat. Kliknutím na odkaz editace u konkrétního zápasu, můžeme změnit již zadané údaje jako datum apod. nebo také přidat výsledek či komentář k zápasu. V záložce sestava a statistiky poté můžeme k zápasu přidat sestavu, střídání a střelce branek. Tyto statistické údaje vybíráme jednoduše ze select boxu, na výběr jsou hráči přidaní na soupisce.

6.4.4 Hráči a soupisky Hráče do databáze přidáme v nabídce Hráči pod odkazem hráči. Do formuláře zadáme jméno, příjmení, případně datum narození, fotografii a vybereme pozici hráče. Pod formulářem poté najdeme všechny přidané hráče. Hráče poté můžeme přidat na jednotlivé soupisky. Soupisky jsou vždy generované pro jednotlivé sezony soutěže. Tyto soupisky najdeme v sekci Soupisky. Po kliknutí na odkaz sezona u ročníku soutěže se dostaneme na přehled soupisky. V první části vydíme tabulku se všemi hráči na soupisce s možností odstranění hráče ze soupisky.

40

Pod touto tabulkou nalezneme formulář s hráči, kteří ještě na soupisce nejsou s možností zaškrtnutí libovolného počtu hráčů a následného přidání na soupisku.

6.4.5 Fotogalerie Jednoduchou fotogalerii najdeme v sekci galerie. Zde nejdříve vytvoříme jednotlivé fotogalerie, zadáme název, případně její popis a následně ji vytvoříme. V nabídce všech galerií vybereme ikonku upravit a dostaneme se do úprav jednotlivých fotografií v galerii. Zde můžeme přidávat jednotlivé fotografie včetně popisu nebo tyto fotografie případně mazat.

41

7 Testování 7.1 Funkčnost aplikace Celá aplikace byla testována již během vývoje lokálně na počítači, kde byla aplikace vyvíjena a také přímo na serveru, kde aplikace následně poběží. Aplikace ovšem neběžela na „ostré“ doméně, ale pouze na speciálně vytvořené, do které měli přístup pouze vybraní členové oddílu, kteří se tak také podíleli na testování aplikace a hlásili chyby a navrhovali možná vylepšení. Celá aplikace byla testována hned v několika internetových prohlížečích: Google Chrome, Mozilla Firefox, Opera a také Internet Explorer. K testování jak se web chová v různých typech zařízení, bylo použito rozšíření Responsive Design View pro prohlížeč Mozilla Firefox. Kromě testování na standardních zařízení, jako je stolní počítač nebo notebook, byla aplikace také testována na různých typech „chytrých“ telefonů.

7.2 Dodržování norem Kód webových stránek, který má být přívětivý k vyhledávačům, by měl být validní. Měl by odpovídat specifikaci jazyka HTML, kterou používáme. Ostatně validita kódu webových stránek je samozřejmostí také vzhledem k návštěvníkům našeho webu. Validní kód, by měl zajistit, že prohlížeč stránku správně zobrazí a správně zobrazenou ji pak uvidí uživatelé. [9] O validitě zdrojového kódu rozhodují standardy konsorcia W3C a pro zjištění validity stránek se používá validátor. Jeden takový validátor nabízí přímo W3C a najdeme ho na adrese http://validator.w3.org. Validace stránek byla ověřena právě pomocí tohoto validátoru.

7.3 Srovnání s existujícími řešeními Podařilo se vytvořit aplikaci podle zadaných cílů. Aplikace byla již během svého vývoje testována lidmi z klubu a po vysvětlení jak se systémem pracovat, nebyl problém pro nové uživatele orientace v administraci. Toto je hlavní výhodou oproti systému

42

Joomleague. Navíc administrátoři v systému můžou lehce upravovat jednotlivé zápasy a nemusí spravovat výsledky ostatních týmů a mohou se soustředit pouze na svůj tým. Velice kladně bylo také hodnoceno možnost spravování soupisek týmů, tedy možnost, která se nám nedostávala v aplikaci League Manager systému Wordpress. Celkově tak vznikla aplikace ušitá přesně na míru našemu klubu, která se jednoznačně jeví jako momentálně nejlepší existující řešení.

43

8 Závěr 8.1 Splnění cílů Cílem této práce bylo vytvoření internetových stránek pro fotbalový klub, které poskytnou návštěvníkům aktuální informace o dění v klubu. Kromě webových stránek samotných, byla vytvořena také přehledná administrace pro správu článků, novinek, zápasů a soupisek jednotlivých klubů. V rozsahu funkcí této administrace bylo dbáno na časové možnosti administrátorů webů. Grafický návrh administrace byl zaměřen především na co největší jednoduchost. Celá aplikace byla naprogramována v PHP 5, prostřednictvím frameworku Nette a běžící na databázovém systému MySQL. Pro responzivní webdesign byla použita knihovna Twitter Bootstrap. Návrh hlavní stránky a jeho rozložení byl inspirován weby profesionálních českých klubů. Všechny cíle této bakalářské práce byly beze zbytku splněny. Protože se o weby fotbalových klubů zajímám delší dobu, jsem přesvědčený, že pokud se bude web doplňovat aktuálními informacemi, bude se jednat o špičkový web amatérského fotbalového klubu s potencionálem stát se nejlepším fotbalovým webem na Vysočině. Celá aplikace je plně validní podle standardů koncorsia W3C a přizpůsobená pro různá zařízení mimo jiné například mobilní telefony.

8.2 Problémy a jejich řešení Největším problémem při tvorbě aplikace byl návrh databáze, aby odpovídal přesně zadaným požadavkům a byla možnost snadného rozšíření webu i databáze do budoucna. Dalším problémem při implemenataci bylo vyřešení správy statistik o utkání, konkrétně sestava, střelci branek a střídání. Nakonec jsem se rozhodl vyřešit tento problém ukládáním údajů do tří různých databázových tabulek. A na straně administrace byl tento problém vyřešen použitím rozšíření pro Nette s názvem AddDynamic.

44

8.3 Možnosti rozšíření práce Do budoucna se nabízí řada vylepšení, například správa výsledků také u zápasů soupeřů a následné generování tabulek. Databáze je na tuto možnost již připravena, problém je pouze v časové náročnosti na správu takového webu. Další možností na vylepšení je vytvoření části webu, kam by měli možnost přistupovat pouze členové oddílu. Na tomto místě by se řešili pouze interní záležitosti klubu, které by neměli vidět běžní návštěvníci webu.

45

9 Seznam použité literatury [1] Co je Joomla!?. Joomla portál [online]. 2012 [cit. 2013-05-10]. Dostupné z: http://www.joomlaportal.cz/index.php/clanky-a-novinky/zaciname-s-cms-joomla/493bart [2] RUBY Sam, THOMAS David, HANSSON David Heinemeier. Ruby on Rails: průvodce agilním vývojem webových aplikací. Vyd. 1. Brno: Computer Press, 2011, 488 s. ISBN 978-80-251-3647-8. [3] VRÁNA, Jakub. 1001 tipů a triků pro PHP. Vyd. 1. Brno: Computer Press, 2010, 456 s. ISBN 978-80-251-2940-1. [4] GRUDL, David. SASS, LESS, STYLUS NEBO ČISTÉ CSS? (1). In: PHP Fashion [online]. 9.4.2012. 2012 [cit. 2013-04-24]. Dostupné z: http://phpfashion.com/sass-lessstylus-nebo-ciste-css-1 [5]

Git(1)

Manual

Page

[online].

2013

[cit.

2013-05-08].

Dostupné

z:

https://www.kernel.org/pub/software/scm/git/docs/ [6] WebML - datové modelování. In: ZELENKA, Petr. Interval.cz [online]. 2004 [cit. 2013-05-08]. Dostupné z: http://interval.cz/clanky/webml-datove-modelovani/ [7] GUTMANS, Andi. Mistrovství v PHP 5. Vyd. 2. Brno: Computer Press, 2007, 655 s. ISBN 978-80-251-1519-0. [8] Přihlašování & oprávnění uživatelů. In: Nette Framework [online]. [cit. 2013-0515]. Dostupné z: http://doc.nette.org/cs/security [9] DOMES, Martin. SEO: jednoduše. Vyd. 1. Brno: Computer Press, 2011, 141 s. Naučte se za víkend (Computer Press). ISBN 978-80-251-3456-6.]

46

Seznam obrázků Obrázek 1 : Logo Joomla ............................................................................................... 12 Obrázek 2: Logo Wordpress ........................................................................................... 13 Obrázek 3 logo Drupal ................................................................................................... 14 Obrázek 4: Logo Nette. ................................................................................................... 15 Obrázek 5: Model MVP. ................................................................................................. 16 Obrázek 6 Ukázka rozložení stránky v Twitter Bootstrap .............................................. 20 Obrázek 7: ER diagram rozpis zápasů ............................................................................ 26 Obrázek 8: ER diagram informace o zápasu .................................................................. 27 Obrázek 9: ER diagram soupiska hráčů .......................................................................... 27 Obrázek 10: Návrh MySQL databáze ............................................................................. 29 Obrázek 11: Ukázka generování rozpisu zápasů ............................................................ 34 Obrázek 12 Náhled úvodní stránky ................................................................................ 35 Obrázek 13: Náhled webu na mobilním telefonu ........................................................... 37 Obrázek 14: Ukázka administrace webu ........................................................................ 39

47

Seznam použitých zkratek CMS – Content Managment system CSS - Cascading Style Sheets HTML - HyperText Markup Language IDE - Integrated Development Environment ORM - Object-relational mapping PDO – PHP Data Object PHP - Hypertext Preprocessor SQL - Structured Query Language URL- Uniform Resource Locator W3C - World Wide Web Consortium

48

Přílohy 1 Obsah přiloženého CD Na přiloženém CD se v kořenovém adresáři tyto soubory a adresáře 

Web (soubor s celým webem, včetně zkušebních dat)



DB.sql (soubor se zálohou databáze, včetně zkušebních dat)



Návod.txt (Návod na instalaci aplikace)

49