ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA ELEKTROTECHNICKÁ

Transkript

1 ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA ELEKTROTECHNICKÁ KATEDRA POČÍTAČOVÉ GRAFIKY A INTERAKCE WEBOVÁ APLIKACE PRO FOTBALOVÝ KLUB SK METEOR LIBEŘ BAKALÁŘSKÁ PRÁCE MIROSLAV PAPÍRNÍK Vedoucí práce Ing. Martin Vaňko 2014

2 Bakalářská práce -i-

3 Bakalářská práce Poděkování Chtěl bych poděkovat Ing. Martinovi Vaňkovi za vedení mé bakalářské práce, cenné rady a odborný dohled při tvorbě této práce. - iii -

4 Bakalářská práce Čestné 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 dodržování etických principů při přípravě vysokoškolských závěrečných prací. V Praze dne v-

5 Bakalářská práce Abstrakt Webová aplikace pro prezentaci a vnitřní podporu organizace je v této době velmi důležitým a silným nástrojem pro zajištění efektivního běhu. Na internetu existuje celá řada podobných aplikací, bohužel většina je zaměřena na řešení příliš konkrétních požadavků nebo naopak požadavků moc obecných. Z tohoto důvodu jsem se rozhodl vytvořit pro zadavatele novou webovou aplikaci, která bude realizována dle požadavků vlastních. Webová aplikace slouží pro prezentaci a podporu fotbalového klubu SK Meteor Libeř. S drobnými úpravami by tato aplikace mohla být použita i jinými fotbalovými kluby. Abstract Web application for presentation and internal support of corporation is very important and strong tool to ensure it's effective run. Internet is full of similar applications, but most of them are too specific or too general. That's the reason why I decided to create new application. Application completely developed according to the contracting authority's requirements. Web application is used to present and support football club SK Meteor Libeř. With minor modifications, this application should be used by other football clubs. - vii -

6 Bakalářská práce OBSAH 1 Úvod Cíl projektu Zainteresované osoby Současný stav Tvorba obsahu webové prezentace Zápasy a výsledky Fotogalerie Fórum Klubové předměty Analytická dokumentace CMS Joomla! CMS Made Simple DokuWiki PHP Framework Zend Nette Symfony CodeIgniter Technologie ukládání dat XML SQLite MySQL PostgreSQL Oracle Funkční a nefunkční požadavky Funkční požadavky Nefunkční požadavky Uživatelské role Očekávaná oprávnění uživatelů Návrh HTML a CSS JavaScript a AJAX Databáze Návrh relační databáze PHP Framework Model architektury Model View Controller Adresářová struktura aplikace Design Rozložení prvků Barvy Implementace Rozsah Části aplikace Aktuality Články Akce klubovny ix -

7 Bakalářská práce Fotogalerie Hodnocení, statistiky zápasů a hráčů Klubové předměty Uživatelé Zápasy Externí moduly Lightbox TinyMCE PHP Simple HTML Pareser Uživatelské role Databáze Design Testování Validita kódu Funkčnost v moderních prohlížečích Uživatelské testy Řešené úkoly Participanti Nalezené problémy Závěr Přílohy Seznam použité literatury...39 Seznam použitých zkratek...41 Instalační příručka...43 Obsah přiloženého DVD xi -

8 Bakalářská práce SEZNAM OBRÁZKŮ Ilustrace 1: Návrh relační databáze...18 Ilustrace 2: Struktura...20 Ilustrace 3: Návrh rozložení prvků a barev...21 Ilustrace 4: Aktualita...24 Ilustrace 5: Náhled článku...24 Ilustrace 6: Klubovna...25 Ilustrace 7: Grafické rozhraní správy uživatelů...26 Ilustrace 8: Ukázka tabulky výsledků kola...26 Ilustrace 9: Relační databáze...28 Ilustrace 10: Design na desktopovém počítači...29 Ilustrace 11: Navigace na mobilním zařízení...29 Ilustrace 12: Design stránky na mobilním zařízení...29 SEZNAM TABULEK Tabulka 1: Očekávaná oprávnění dle uživatelských rolí...15 Tabulka 2: Rozsah implementace...24 Tabulka 3: Testování prohlížečů, test č Tabulka 4: Testování prohlížečů, test č Tabulka 5: Uživatelské testování, participant Tabulka 6: Uživatelské testování, participant Tabulka 7: Uživatelské testování, participant Tabulka 8: Souhrn nalezených problémů xiii -

9 1 Úvod SK Meteor Libeř je fotbalový klub založený roku Právní formou se jedná o neziskovou organizaci sdružující osoby za účelem společných zájmů. Klub zajišťuje chod dvou svých mužstev. Obě mužstva hrají v soutěžích organizovaných okresním fotbalovým svazem. Klub má v současné době pouze jednoduchou webovou prezentaci, která slouží jako statická nabídka základních informací, které mohou být přidány pouze složitou, časově náročnou, přímou úpravou HTML kódu. Design této prezentace působí nepřehledně a nemoderně. Z těchto důvodů potřebuje klub webovou aplikaci novou. Aplikaci, která umožní přidávat obsah rychle, jednoduše a zobrazovat jej přehledně. Rozpočet této neziskové organizace nedovolí zaplatit aplikaci profesionálnímu studiu zabývajícímu se touto činností, proto oslovila mne, zda bych ji nemohl realizovat v rámci bakalářské práce. -1-

10 2 Cíl projektu Cílem bakalářské práce je realizovat webovou aplikaci pro prezentaci a vnitřní podporu organizace fotbalového klubu SK Meteor Libeř. Prioritou této práce je zajistit jednoduché a účinné publikování informací s klubem spojených. Jedná se tedy o detaily a výsledky fotbalových zápasů, články, aktuality, fotografie a prodej klubových předmětů. Webová aplikace by měla umožnit tvorbu obsahu i méně zkušeným uživatelům, proto by měla být administrace jednoduchá, přehledná a snadno použitelná. Zobrazované informace budou přehledně umístěné pomocí vhodného rozložení a to včetně zobrazení na menších zařízení jako je mobilní telefon. Webová aplikace bude validní vůči validátoru W3C a bude vhodně optimalizována pro vyhledávače. -3-

11 3 Zainteresované osoby Zadavatel Zadavatelem projektu je fotbalový klub SK Meteor Libeř. Osoba, které projekt zadala, kontroluje a s kým jsou konzultovány potřebné detaily je člen výboru Martin Sehnoutka. Dodavatel Dodavatelem projektu je, autor projektu. Uživatelé systému Systém bude sloužit pro prezentaci a vnitřní podporu organizace. Z pohledu prezentace bude uživatelem každý návštěvník webové prezentace. Uživatel vnitřní podpory organizace bude takový člen klubu, kterému bude vytvořen uživatelský účet. -5-

12 4 Současný stav 4.1 Tvorba obsahu webové prezentace Úpravy a tvorba obsahu prezentace jsou možné pouze pomocí přímé úpravy HTML kódu. Chce-li člen výkonného výboru přidat či upravit text webové prezentace, musí tuto informaci sdělit administrátorovi systému, který příslušný text upraví. Tento proces je zbytečně složitý a někdy může trvat i několik dní. 4.2 Zápasy a výsledky Tabulky výsledků a zápasů se získávají z oficiálních stránek Fotbalové asociace České republiky (FAČR). Tabulky nejsou ukládány a proto, každé zobrazení stránky obsahující tato data způsobí i dotaz na stránky FAČR. Vzhledem k tomu, že tato data nejsou uložena, není možné zjistit starší výsledky a vzájemné bilance. 4.3 Fotogalerie Vkládání fotografií a tvorba alb je opět realizováno pouze přímou úpravou HTML kódu. Fotografie a název alba se musí zaslat administrátorovi, který fotografie nahraje na server a poté příslušnou galerii vytvoří ručně. -7-

13 KAPITOLA 4 - Současný stav 4.4 Fórum K dispozici je fórum, na které mohou registrovaní uživatelé vkládat krátké příspěvky. Bohužel poslední příspěvek tohoto fóra je starší než jeden rok a dodává webové prezentaci pocit neaktuálnosti. 4.5 Klubové předměty Současný stav webové aplikace nenabízí žádnou možnost prezentace klubových předmětů. -8-

14 5 Analytická dokumentace První část této kapitoly se zabývá analýzou dostupných technologií, které se dnes využívají pro tvorbu moderních webových aplikací. Druhá část je zaměřena na požadavky, které jsou na aplikaci kladeny ze strany zadavatele. 5.1 CMS Zkratka vychází z anglického pojmu Content Management System. Jedná se tedy o systém pro správu obsahu, v dnešní době zejména toho internetového. Umožňuje publikování článků uživatelům, kteří nemusí mít téměř žádné zkušenosti s webovými službami. Nápomocný je i expertům v oboru, neboť nemusí ztrácet čas zbytečným psaním kódu navíc. Pro CMS se někdy také používají názvy redakční či publikační systém Joomla! Bezplatný open-source systém určený k publikování na internetu. Napsaný je v jazyce PHP a využívá MySQL databázi. Dlouhá historie vývoje, široká aktivní komunita a obsáhlá kvalitní dokumentace dělají z tohoto systému druhý nejpoužívanější redakční systém na světě. Joomla! navíc využívá systém rozšíření a doplňků, které se snadno instalují a jejich počet již přesahuje URL: -9-

15 KAPITOLA 5 - Analytická dokumentace CMS Made Simple Open source redakční systém, který se zaměřuje na jednoduchost používání. Napsán v jazyce PHP s podporou MySQL databáze. CMS využívá šablonovací systém Smarty a je zaměřen na zajištění snadného vývoje. Jedná se především o jednoduché přizpůsobování témat, tvorbu rozšíření, podporuje dynamické menu, tagy a různé jazykové mutace. Ihned po instalaci podporuje poměrně dobře český jazyk. URL: DokuWiki Multiplatformní software šířený pod licencí Software GNU General Public License. Napsán v jazyce PHP a pro ukládání dat nepoužívá externí databázi, ale textové soubory. Zaměření DokuWiki je především dokumentace všeho druhu. Má jednoduchou syntaxi, která dbá na to, aby datové soubory byly čitelné i běžnými editory. URL: PHP Framework Framework je sada nástrojů a knihoven s jednoduchým rozhraním řešících časté a opakující se úlohy. Vývojář se tak může soustředit na řešení zadané úlohy, kterého dosáhne pomocí frameworku rychleji a s menším množstvím potřebného kódu Zend Robustní, objektově orientovaný framework, který je vyvíjen již od roku Šířený je jako open source pod novou BSD licencí. Na vývoji se proto podílí velká komunita uživatelů, popoháněná několika vyčleněnými programátory firmy Zend Technologies. ZF podporuje architekturu MVC a skládá se z komponent, které se používají principem use at will (použít podle potřeby). Mezi další výhody patří velmi dobrá a přehledná dokumentace, velká komunita, podpora nejmodernějších internetových technologií a jednoduché napojení známých Web 2.0 aplikací jako jsou YouTube, Google, Flickr nebo Yahoo. Přehled komponent Základní komponenty (cache, konfigurace, posílání ů, ověřování údajů) Komponenty řadiče (front controller, request a response objekty, směrovač) Komponenty pohledu (view skripty, integrace různých systémů šablon) Databázové komponenty (databázové adaptéry, dotazovací nástroje) Komponenty na správu uživatelů (autorizace, autentizace, sessions, OpenID, LDAP)

16 PHP Framework Zpracování formulářů (tvorba, konfigurace, zpracování, upload souborů, CAPTCHA) Internacionalizace a lokalizace (překlad textů, měna, jednotky) Vyhledávání (Lucene) Tvorba PDF dokumentů (generování) AJAX (DOJO Toolkit, JQuery) Komponenty pro webové služby (YouTube, Google, Yahoo, Amazon, Aksimet, Flickr) Komponenty pro komunikaci (HTTP, SOAP rozhraní, XML-RPC) Ostatní komponenty (ladění, zpracování URI) URL: Nette Nástroj vytvořený v PHP5, dominující především svojí rychlostí a důrazem na bezpečnost. Čistý objektový návrh, výkon, bezpečnost a bezkonkurenční ladící nástroje z něj dělají jeden z nejpoužívanějších frameworků v ČR. Nette Framework je šířen jako svobodný software, aby ho mohl používat kdokoliv. Můžete si vybrat, zda vám lépe vyhovuje licence New BSD nebo GNU General Public License (GPL). Podporuje systém snadno použitelných rozšíření, většinu moderních technologií a koncepcí jako jsou AJAX, SEO, MVC, Web 2.0, cool URL. URL: Symfony Framework určený pro vývoj webových aplikací PHP5, dodržující architekturu MVC. Vznikl původně pod názvem Sensio Framework jako odnož projektu Mojavi3-DEV. Z velké části je inspirován ostatními frameworky. Vývoj je sponzorován francouzskou firmou Sensio Labs. Symfony je šířen jako open source pod MIT licencí. URL: CodeIgniter Open source framework dodržující architekturu MVC, vyvíjený americkou společností EllisLabs společně s rozsáhlou internetovou komunitou. CodeIgniter je malý, jednoduchý a velmi rychlý. Z těchto vlastností je zřejmé, že není vhodný pro větší projekty. URL:

17 KAPITOLA 5 - Analytická dokumentace 5.3 Technologie ukládání dat XML Extensible Markup Language (zkráceně XML, česky rozšiřitelný značkovací jazyk) je obecný značkovací jazyk, který byl vyvinut a standardizován W3C. Slouží pro ukládání, výměnu a publikování informací u kterých popisuje strukturu z hlediska věcného obsahu. Hlavní výhodou je čitelnost téměř v každém textovém editoru a je podporován širokou škálou nástrojů a programovacích jazyků SQLite3 Relační databázový multiplatformní systém napsaný v jazyce C obsažený v relativně malé knihovně. Šířen pod licencí Public domain. Každá databáze je uložena jako samostatný soubor na disku, kde se data ukládají jako jednoduché primární klíče pomocí hashovací tabulky. Tento princip umožňuje velmi rychlé operace s databází MySQL Relační databázový systém fungující na principu server-klient. Šířen pomocí dvojího licencování, je k dispozici jak pod bezplatnou licencí GPL, tak pod komerční placenou licencí. MySQL je multiplatformní databáze komunikující pomocí dotazovacího jazyka SQL. Díky svému výkonu a volné šiřitelnosti je v současné době jedním z nejpoužívanějších databázových systémů PostgreSQL Objektově-relační databázový systém vydávaný pod PostgreSQL licencí, jedná se tedy o freeware a open source software. Vyvíjen je především pro unixové systémy komunitou vývojářů a firem. Plně podporuje cizí klíče, spojování tabulek, pohledy, triggery a uložené funkce. PostgreSQL obsahuje možnosti ukládání dat pomocí B+, B- stromů, hashování, GiST a GiN. Systém má též implementovanou širokou škálu nativních datových typů jako jsou geometrické tvary, IPv4 a IPv6 adresy, MAC adresy, XML podporující Xpath dotazy Oracle Objektově-relační databázový systém z dílny firmy Oracle, šířen a prodáván jako komerční software. Nejnovější verze Oracle Database 12c ve standardní licenci bez časového omezení stojí přibližně Kč za uživatele, kde je minimální počet uživatelů pět. Oracle disponuje vysokým výkonem, zabezpečením, je multiplatformní a podporuje automatizované úkoly. URL:

18 Funkční a nefunkční požadavky 5.4 Funkční a nefunkční požadavky Funkční požadavky Aktuality Systém bude umožňovat vytvářet, upravovat a odstraňovat aktuality. Aktuality jsou zde myšleny jako krátké textové zprávy s délkou nepřesahující 255 znaků. Články Systém bude umožňovat vytvářet, upravovat a odstraňovat články. Články jsou zde myšleny jako zprávy s délkou až znaků a jedním obrázkem. Akce klubovny Systém bude umožňovat vytvářet, upravovat a odstraňovat články, které budou označeny jako akce klubovny. Tyto akce budou viditelné s datem konání v části pro klubovnu určenou. Fotogalerie Systém bude umožňovat vkládání nových fotografií a jejich členění do alb. Systém bude dále umožňovat upravovat a odstraňovat tyto fotografie a alba. Hodnocení zápasů a hráčů Systém bude umožňovat vytvářet, upravovat a mazat hodnocení zápasů, výkonů mužstev a výkonů jednotlivých hráčů. Klubové předměty Systém bude umožňovat vytvářet, upravovat a odstraňovat klubové předměty. Systém bude dále umožňovat provést objednávku tohoto zboží. Statistiky zápasů a hráčů Systém bude automaticky vytvářet statistiky zápasů, výkonů mužstev i jednotlivých hráčů. Uživatelé Systém bude umožňovat vytvářet, upravovat a odstraňovat uživatele. Systém bude dále umožňovat měnit uživatelské role. Zápasy Systém bude automaticky načítat zápasy, výsledky, tabulky obou soutěží a tabulky střelců

19 KAPITOLA 5 - Analytická dokumentace Nefunkční požadavky Bezpečnost Obsah webové aplikace budou smět měnit pouze přihlášení uživatelé s dostatečnými právy. Rozšiřitelnost Systém bude navržen, tak aby mohl být v budoucnosti snadno rozšířen. Základem této rozšiřitelnosti je dodržení architektury MVC (nebo MVP). Spolehlivost Minimální doba do výpadku systému bude 4 týdny. 5.5 Uživatelské role Admin Administrátor webové aplikace. Předseda Předseda fotbalového klubu a zároveň člen výboru. Editor Osoba, které byla pověřena výborem klubu ke správě obsahu webové aplikace. Správce klubovny Správce klubovny, který se stará o provoz kantýny. Guest Běžný návštěvník webové prezentace

20 Očekávaná oprávnění uživatelů 5.6 Očekávaná oprávnění uživatelů Admin Předseda Editor Správce klubovny Guest Aktuality Články Klubovna Fanshop Fotogalerie Uživatelé Sponzoři Zápasy Tabulka 1: Očekávaná oprávnění dle uživatelských rolí

21 6 Návrh Tato kapitola slouží jako doporučený návrh implementace projektu. Zabývá se volbou vhodných technologií a jak tyto technologie využít. 6.1 HTML a CSS Webová aplikace bude vytvořena pomocí poslední verze jazyka HTML5 (HyperText Markup Language). HTML5 bude ve webové aplikaci velmi užitečné při manipulaci s galerií. Stylování vizuální podoby bude realizováno pomocí kaskádových stylů CSS s využitím nových vlastností verze CSS JavaScript a AJAX Hlavní výhoda JavaScriptu je že běží na straně klienta a nezatěžuje server. V projektu bude použit jak pro přesun některých operací ze strany serveru ke klientovi (validace formulářů), ale tak i k usnadnění práce uživatele (našeptávač vyhledávání). Uživatel může mít podporu JavaScriptu vypnutou, proto vše musí správně fungovat i bez něj. AJAX (Asynchronous JavaScript and XML) slouží k asynchronní komunikaci klienta se serverem. Pokud je potřeba změnit pouze část stránky, může toho být docíleno pomocí AJAXu a nemusí se obnovovat celá stránka. Zbytečné obnovování nejen uživatele zpomaluje, ale také ztrácí orientaci a musí znovu hledat vyžádanou část

22 KAPITOLA 6 - Návrh 6.3 Databáze Technologie pro ukládání dat byla vybrána pro svou rozšířenost databáze MySQL Návrh relační databáze Ilustrace 1: Návrh relační databáze 6.4 PHP Framework Pro projekt byl vybrán framework Nette, protože je v ČR velmi rozšířený. Zend Framework je na menší projekty tohoto typu příliš robustní, první načtení prezentace pomalé a má slabší podporou českého jazyka. Hlavní výhody Nette Framework Excelentní šablonovací systém Latte, podpora HTML5, AJAXu a SEO, bezkonkurenční ladící nástroje, čistý objektový návrh, efektivní databázová vrstva, kvalitní dokumentace, vysoká úroveň zabezpečení, aktivní komunita v ČR

23 Model architektury 6.5 Model architektury Webová aplikace bude dle požadavků na rozšiřitelnost dodržovat softwarovou architekturu Model-View-Presenter (MVP). MVP je softwarová architektura, která odděluje u aplikací s grafickým rozhraním kód obsluhy od kódu aplikační logiky a od kódu zobrazujícího data. Tím se aplikace zpřehledňuje, usnadňuje budoucí vývoj a umožňuje oddělené testování jednotlivých částí Model Model je datová a hlavně funkční vrstva aplikace. Obsahuje aplikační logiku, spravuje si svůj vnitřní stav a ven nabízí pevně dané rozhraní. Voláním funkcí tohoto rozhraní můžeme zjišťovat či měnit jeho stav. Model nemá žádné informace o view ani kontroléru. Navrhované modely: ArticleModel Model určený pro práci s aktualitami a články. ClubModel Model určený pro klubovnu. GalerieModel Model určený pro fotografie a alba. PersonModel Model určený pro správu osob. ProductModel Modul určený pro e-shop. SponsorsModel Modul pro správu sponzorů. TymyModel Modul pro správu týmů a zápasů View View je vrstva starající se o zobrazování výsledků požadavků. Vytváří výsledný HTML dokument z dat předaných kontrolérem. Většinou využívá šablonovací systém, který toto generování vykonává. Nette Framework disponuje vlastním šablonovací systém Latte. Tento systém pomocí maker a helperů výrazně zjednodušuje práci a zároveň zabezpečuje výstup před zranitelnostmi Controller Controller je řadič, který se stará o zpracování požadavků uživatele. Volá příslušnou aplikační logiku a poté předá data view k vykreslení. Obdobou kontrolérů v Nette Framework jsou presentery a proto se nejedná o více známou architekturu MVC, ale právě MVP. Vzhledem k rozdělení aplikace na veřejnou a privátní část budou i presentery rozděleny. Pro privátní část bude vytvořen zvláštní modul AdminModule. Presentery v tomto modulu budou přístupny pouze přihlášeným uživatelům s dostatečnými právy. Práva uživatelů budou řešena pomocí seznamu pro řízení přístupu (ACL). Presentery které nebudou v tomto modulu budou přístupny všem návštěvníkům a uživatelům webové aplikace

24 KAPITOLA 6 - Návrh Navrhovaná struktura presenterů: AdminModule Bez modulu AktualityPresenter BasePresenter AuthPresenter FanshopPresenter BasePresenter GaleriePresenter ClankyPresenter HomepagePresenter FanshopPresenter NovinkyPresenter GaleriePresenter TymyPresenter KlubovnaPresenter SponzoriPresenter UzivatelePresenter ZapasyPresenter 6.6 Adresářová struktura aplikace Adresářová struktura je odvozena od doporučené struktury, která je uvedena v dokumentaci Nette Framework. app/ - Adresář webové aplikace. app/adminmodule/ - Modul určený pro privátní část aplikace. Obsahuje složku presenters pro prezentery privátní části a složku templates, která je určena pro šablony (views) této části aplikace. app/components/ - Vykreslitelné komponenty. app/config/ - Konfigurační soubory. app/libs/ - Externí knihovny. app/model/ - Třídy modelové vrstvy. app/presenters Třídy presenterů veřejné části. app/templates/ - Šablony veřejné části aplikace. log/ - Chybové logy. temp/ - Dočasné soubory. tests/ - Adresář pro jednotkové testy. vendor/ - Knihovny Nette. Ilustrace 2: Struktura www/ - Místní kořenový adresář webu. Pouze tento adresář je dostupný z internetu

25 Design 6.7 Design Rozložení prvků Zadavatele nejvíce oslovil dvousloupcový layout s hlavním obsahem umístěným v levé části. V pravém sloupci by měly být dodatečné informace, které nemusí být přímo spjaty s obsahem levé části. Navigace bude umístěná nad těmito sloupci s horizontálním umístěním odkazů. V této části se bude také nacházet logo klubu. Webová prezentace bude dobře zobrazitelná i na zařízeních s menším displejem. Toho bude docíleno použitím responzivního web designu. Pravý sloupec se zařadí pod levý a tak vznikne jednoduchý jednosloupcový layout Barvy Barvy webové prezentace musí být stejné jako barvy klubové. Klubové barvy jsou bílá, modrá a červená. Ilustrace 3: Návrh rozložení prvků a barev

26 Implementace 7 Implementace Projekt je implementovaný pomocí jazyků PHP za použití Nette Frameworku a HTML5. Popis zobrazení stránek zajišťují kaskádové styly CSS3. Interakci některých prvků GUI a validaci formulářů obstarává JavaScript. Projekt slouží k prezentaci a vnitřní podpoře fotbalového klubu SK Meteor Libeř. Implementace probíhala dle návrhu aplikace. Některé části aplikace však nebyly realizovány. V následující podkapitole je uvedeno které části a z jakého důvodu

27 KAPITOLA 7 - Implementace 7.1 Rozsah Implementováno Neimplementováno Změněno Aktuality Hodnocení zápasů a hráčů Klubové předmety Články Statistiky zápasů a hráčů Akce klubovny Fotogalerie Uživatelé Zápasy Tabulka 2: Rozsah implementace 7.2 Části aplikace Aktuality Aktualita je podle funkčních požadavků krátká textová zpráva, jejíž délka nepřesahuje 255 znaků. Tyto zprávy jsou zobrazeny v sekci NOVINKY a na hlavní stránce. Výhoda takových aktualit je v rychlé tvorbě a slouží pro sdělení krátkých informací. Pro vytvoření aktuality stačí v administraci aplikace vyplnit dvě textová pole a potvrdit publikování. Ilustrace 4: Aktualita Články Článek je velmi podobný aktualitě s tím rozdílem, že délka jeho textu může být výrazně delší a může být obohacen obrázkem. Zobrazují se také v sekci NOVINKY a na hlavní stránce. Zde jsou rozkliknutelné pro detailní výpis obsahu celého článku. V detailu článku je vidět obrázek v plné velikosti a celý text. Ilustrace 5: Náhled článku

28 Části aplikace Správa článků je realizována pomocí jednoduchého webového formuláře. Formulář obsahuje textové pole pro název článku, výběr obrázku z lokálního disku a pole pro samotný text. Text je tvořen za pomoci WYSIWYG editoru TinyMCE a tím umožňuje jednoduché úpravy všem uživatelům Akce klubovny Slouží k informaci návštěvníků jaké akce klubovna pořádá. Jedná se o speciální případ článků, které mají navíc informaci data a času pořádání akce. Zobrazují se tedy stejně jako články a aktuality v sekci NOVINKY a na hlavní straně. Navíc se akce zobrazují v kalendáři klubovny, který je vhodně umístěn v pravém sloupci. Vypisují se pouze akce s datem konání dnes a později. Ilustrace 6: Klubovna Fotogalerie Fotogalerie umožňuje členění fotografií do alb. Nahrávání je realizováno pomocí HTML5 a jeho formulářové vlastnosti nahrát na server více souborů najednou. Zobrazování fotografií je řešeno použitím jquery pluginu lightbox Hodnocení, statistiky zápasů a hráčů Pro zadavatele nebyla tato část důležitá. Vzhledem k její složitosti a rozsahu byla po vzájemné dohodě vynechána. Snadná rozšiřitelnosti aplikace umožňuje, aby byla tato část dodělána v budoucnosti Klubové předměty Prodej klubových předmětů měl být realizován pomocí e-shopu. Klub však prodává předmětů velmi málo a proto bylo zbytečné tvořit celý internetový obchod. Představenstvu šlo především o to, aby informovali své fanoušky jaké předměty a za jakou cenu nabízí. Tato část byla proto změněna z internetového obchodu na systém, který informuje fanoušky jaké předměty klub nabízí a jakou cestou si je mohou zakoupit Uživatelé Část webové aplikace pro správu uživatelů je dostupná pouze přihlášeným uživatelům

29 KAPITOLA 7 - Implementace s dostatečnými oprávněními. Umožňuje vytvořit nového, upravit a odstranit již existujícího uživatele. Ilustrace 7: Grafické rozhraní správy uživatelů Zápasy Jedna z nejdůležitějších částí aplikace. Stará se o data fotbalových zápasů a soutěže. Přesnější specifikace dat je uvedena v následujícím seznamu. Los zápasů soutěže. Výsledky zápasů. Tabulky pořadí mužstev. Tabulky střelců soutěže. Data jsou pro potřeby aplikace získávána automaticky z oficiálního webu FAČR. Zpracování dat je implementováno pomocí externí knihovny PHP Simple HTML Parser, která vybere potřebné údaje a uloží je do databáze. Uložení dat do vlastní databáze je výhodné nejen pro možné statistiky, ale také se tím zmenšuje počet HTTP požadavků na web FAČR. Ilustrace 8: Ukázka tabulky výsledků kola

30 Externí moduly 7.3 Externí moduly Aplikace využívá 3 externí moduly, které byly zmíněny v předchozí podkapitole. Moduly usnadňují a zpřehledňují práci uživatelům webové aplikace Lightbox Externí modul určený pro zobrazovaní obrázků. Pomocí JavaScriptové knihovny jquery a CSS zobrazí obrázek téměř přes celou webovou stránku a své okolí zatemní. Uživatel se tak může plně soustředit na sledování tohoto multimediálního obsahu a není rušen ostatními prvky webu. Lightbox také umožňuje jednoduché přecházení mezi obrázky v rámci společné skupiny, v tomto projektu v rámci alba fotogalerie. Lightbox je dostupný pod licencí Creative Commons Attribution 2.5, obsah této licence říká, že je dostupný zdarma jak pro osobní účely, tak i pro účely komerční. URL: TinyMCE TinyMCE je jednou z nejpoužívanějších WYSIWYG komponent pro zadávání a úpravu textů do webových formulářů. Vylepšuje HTML tag textarea o WYSIWYG editor, je multiplatformní a je napsaný v jazyce JavaScript. Jedná se open source, vydávaný pod licencí LGPL. URL: PHP Simple HTML Pareser HTML DOM parser napsaný v jazyce PHP5+ je určen k snadné manipulaci s HTML soubory. Podporuje parsování nevalidních HTML. Usnadňuje získávání obsahu pomocí jednoduchého a objektového přístupu. URL: Uživatelské role Na základě analýzy aplikace byly vytvořeny tyto uživatelské role: Administrátor (admin) Předseda (predseda) Editor (editor) Správce klubovny (club) Návštěvník (guest)

31 KAPITOLA 7 - Implementace 7.5 Databáze Relační databáze je implementována pomocí databázového systému MySQL. Vzhledem k návrhu aplikace bylo vypuštěno několik tabulek. Jedná se především o tabulky určené k hodnocení zápasů a hráčů. Tato část aplikace nebyla realizována. Jako další chybí tabulka objednávek zboží. Systém klubových předmětů byl změněn jak popisuje kapitola Klubové předměty. Naopak přibylo několik tabulek pro globální nastavení, akce klubovny, sezóny, soutěže, sponsory a otevírací dobu klubovny. Všechny tabulky jsou typu InnoDB, kódování textových řetězců je UTF-8 a porovnání hodnot využívá utf8_czech_ci, českou znakovou sadu nerozlišující velikost písmen. Ilustrace 9: Relační databáze

32 Design 7.6 Design Design webové prezentace byl vytvořen tak, aby splňoval veškeré požadavky zadavatele. Tyto požadavky jsou uvedeny v kapitole 6.7, která se zabývá návrhem designu. Následující obrázky zobrazují finální design aplikace a rozdíl jeho zobrazení na desktopovém počítači a mobilním zařízení. Rozdílný design je zajištěn pomocí různých CSS souborů, které využívají dotazy na média. Ilustrace 10: Design na desktopovém počítači Ilustrace 12: Design stránky na mobilním zařízení Ilustrace 11: Navigace na mobilním zařízení

33 8 Testování Testování je nedílnou součástí vývoje každé aplikace. Zkoumá kvalitu testované aplikace a její případné chyby. V tomto projektu bylo testování zaměřeno na tři různé sekce. Validitu zdrojového kódu, korektní funkčnost v nejpoužívanějších prohlížečích a použitelnost běžnými uživateli. 8.1 Validita kódu Validita generovaných HTML kódů byla testována průběžně během implementace každé části aplikace. Pro validaci byl použit W3C validátor dostupný na adrese Po ukončení vývoje byly všechny stránky webové aplikace naposledy zkontrolovány. Kontrola dopadla velmi dobře. Validací neprošla pouze jediná stránka, obsahující kontakty a přesněji element vložené Google mapy. Bohužel s tímto problémem nemohu nic dělat. CSS soubory byly také kontrolovány validátorem W3C, který je dostupný z webové stránky Vytvořené styly prošly bez jediné chyby, bohužel se chyby objevili ve stylech externích modulů. Validita kódu je velmi důležitá pro roboty vyhledávačů a SEO. Proto je silně doporučeno mít zdrojový kód validní

34 KAPITOLA 8 - Testování 8.2 Funkčnost v moderních prohlížečích Prohlížečů webových stránek existují v dnešní době desítky. Některé zobrazují různé prvky velmi podobně, jiné zase odlišně. Odlišnost zobrazení a někdy i funkčnosti je hlavním důvodem tohoto testování. Pro testování byli vybrány 3 nejpoužívanější prohlížeče v nejaktuálnější verzi pro desktopové počítače. Vybrané prohlížeče: Google Chrome Firefox Internet Explorer Technika testování Aplikace byla postupně spuštěna ve všech zmíněných prohlížečích. Všechny stránky webové prezentace byly prohlédnuty zda se vše zobrazuje a funguje správně. Posléze bylo vyzkoušeno administrační prostředí několika různými úkony. Zařízení Laptop s displejem 14" o rozlišení 1280 x 800 pixelů. Operační systém Ubuntu 14.04, 32 bit Prohlížeče Google Chrome ( ), Firefox (29.0) Nalezené problémy Žádný problém nebyl nalezen. Tabulka 3: Testování prohlížečů, test č. 1 Zařízení Desktopový počítač s XX" displejem o rozlišení XX pixelů. Operační systém Windows XP SP3, 32 bit Prohlížeče IE ( ), Firefox (29.0.1) Nalezené problémy IE 8 nepodporuje HTML5, špatné zobrazení. Automaticky přidává obrázkům rámeček. Tabulka 4: Testování prohlížečů, test č. 2 Oprava nalezených problémů Přidána podpora HTML5 pomocí projektu HTML5Shiv. JavaScriptové řešení umožňující stylovat v prohlížeči IE8 i elementy které nezná. URL: Problém s rámečky obrázků byl vyřešen jednoduchou úpravou CSS pravidla

35 Uživatelské testy 8.3 Uživatelské testy Pomocí uživatelského testování použitelnosti se zjišťuje jakým problémům čelí skuteční uživatelé aplikace. Testování odhalí jakým problémům uživatelé čelí, které prvky jim nejsou srozumitelné a zda se dokáží v aplikaci dobře orientovat. Pro testování byli vybráni 3 participanti z různých věkových skupin. Jedná se o skupiny, které patří mezi potenciální návštěvníky webová aplikace Řešené úkoly Zjistit výsledek posledního zápasu A mužstva. Zjistit aktuální umístění B mužstva. Najít informace o detailech konkrétní akce pořádané klubovnou. Zobrazit fotografie A mužstva. Prohlédnout sekci novinek Participanti Participant 1 Věk 22 let Zkušenosti s PC Denní práce s PC i internetem. Velmi pokročilé. Nalezené problémy Participant postrádá odkaz zpět v detailu alba fotogalerie. Participant nepoznal, že akce klubovny jsou odkazy. Tabulka 5: Uživatelské testování, participant 1 Participant 2 Věk 50 let Zkušenosti s PC Denní práce s PC i internetem. Střední. Nalezené problémy Participantovi přijde nepřehledné jaké položky jsou v sekci novinek rozkliknutelné a které ne. Tabulka 6: Uživatelské testování, participant

36 KAPITOLA 8 - Testování Participant 3 Věk 27 let Zkušenosti s PC Denní práce s PC i internetem. Mírně pokročilé. Nalezené problémy Participantovi se nepodařilo nalézt veškeré informace o akci pořádané klubovnou. Tabulka 7: Uživatelské testování, participant Číslo Nalezené problémy Popis problému Závažnost problému 1 V kalendáři akcí klubovny není zřejmé že se jedná o odkaz. Střední 2 Sekce novinek obsahuje 3 různé typy článků. Není jasné které lze rozkliknout a které ne. Střední 3 Chybí odkaz zpět v detailu alba fotogalerie. Nízská Tabulka 8: Souhrn nalezených problémů Doporučení pro odstranění problémů 1. Dle konvence webových odkazů označit text podtržením. 2. Odlišit graficky které články lze rozkliknout a které ne. 3. Přidat odkaz zpět

37 9 Závěr Cílem projektu bylo vytvořit webovou aplikaci pro prezentaci a vnitřní podporu organizace fotbalového klubu SK Meteor Libeř. Zadavatel vyjádřil své požadavky, které na aplikaci měl a veškerý další postup se těchto požadavků držel. Vývoj aplikace a jejích částí byl průběžně konzultován a vždy bylo zadavateli vyhověno. V projektu byly analyzovány technologie vhodné pro tvorbu webových aplikací. Zkoumány byly vlastnosti, výhody i nevýhody těchto technologií. Na základě této analýzy bylo k realizaci vybráno HTML5, CSS3, JavaScript, PHP5+ za použití Nette Framework a MySQL databáze. Implementace proběhla bez větších problémů. Jediný problém byl v části aplikace určené pro hodnocení a statistiky zápasů a hráčů. Tato část webové aplikace byla pro svou komplexnost a časovou náročnost po domluvě se zadavatelem zrušena. Projekt byl pro mě velkým přínosem. Naučil jsem se pracovat s Nette Frameworkem, který je dnes velmi často využívaný a zadavateli pracovních příležitostí v oblasti webových aplikací často požadovaný. Jsem rád, že jsem tento projekt mohl realizovat v rámci své bakalářské práce a myslím si, že dopadl dobře. V nejbližší budoucnosti bude projekt nasazen do ostrého provozu. Projekt může být dále rozšiřován například o neimplementované hodnocení a statistiky zápasů či hráčů od kterých muselo být bohužel upuštěno. Pokud by aplikaci měly využívat i jiné kluby musel by být vytvořen instalační proces, který by nastavil design prezentace, správné jméno klubu a URL adresu soutěže na webu FAČR, která slouží k získávání dat o zápasech

38 Přílohy

39 Seznam použité literatury [1] BÖHMER, Marian. Zend Framework: programujeme webové aplikace v PHP. Vyd. 1. Brno: Computer Press, 2010, 416 s. ISBN [2] CASTRO, Elizabeth a Bruce HYSLOP. HTML5 a CSS3: názorný průvodce tvorbou WWW stránek. 1. vyd. Brno: Computer Press, 2012, 439 s. ISBN [3] CASTRO, Elizabeth. HTML, XHTML a CSS: názorný průvodce tvorbou WWW stránek. Vyd. 1. Brno: Computer Press, 2007, 438 s. ISBN [4] CMS Made Simple: Content Management System [online]. [cit ]. Dostupné z: [5] CodeIgniter: EllisLab [online]. [cit ]. Dostupné z: [6] DokuWiki [online]. [cit ]. Dostupné z: [7] DOMES, Martin. SEO: jednoduše. Vyd. 1. Brno: Computer Press, 2011, 141 s. Naučte se za víkend (Computer Press). ISBN [8] FORD, Andrew. Apache 2: pocket reference. Sebastopol: O'Reilly, 2008, XII, 195 s. ISBN [9] HOGAN, Brian P. HTML5 a CSS3: výukový kurz webového vývojáře. Vyd. 1. Brno: Computer Press, 2011, 272 s. ISBN [10] Joomla! [online]. [cit ]. Dostupné z: [11] KRUG, Steve. Nenuťte uživatele přemýšlet!: praktický průvodce testováním a opravou chyb použitelnosti [sic] webu. Vyd. 1. Brno: Computer Press, 2010, 165 s. ISBN [12] LACKO, Ľuboslav. Ajax: hotová řešení. Vyd. 1. Překlad Michal Brůha. Brno: Computer Press, 2008, 269 s. ISBN [13] LAVIN, Peter. PHP - objektově orientované: koncepty, techniky a kód. 1. vyd. Praha: Grada, 2009, 211 s. ISBN [14] LEISS, Oliver a Jasmin SCHMIDT. PHP v praxi: pro začátečníky a mírně pokročilé. 1. vyd. Praha: Grada, 2010, 242 s. Průvodce (Grada). ISBN

40 PRÍLOHA Seznam použité literatury [15] LUBBERS, Peter, Brian ALBERS a Frank SALIM. HTML5: programujeme moderní webové aplikace. Vyd. 1. Brno: Computer Press, 2011, 304 s. ISBN [16] MCNEIL, Patrick. Inspirativní webdesign: průvodce nejlepšími tématy, trendy a styly. Vyd. 1. Brno: Computer Press, 2011, 263 s. ISBN [17] NĚMEC, Petr. GIMP 2.8: podrobná uživatelská příručka pro začínající grafiky. 1. vyd. Brno: Computer Press, 2013, 272 s. ISBN [18] Nette Framework: Dokumentace [online]. [cit ]. Dostupné z: [19] Oracle Database 12c. [online]. [cit ]. Dostupné z: [20] PECINOVSKÝ, Rudolf. Návrhové vzory. Vyd. 1. Brno: Computer Press, 2007, 527 s. ISBN [21] ROSENBROCK, Eric a Eric FILSON. Linux, Apache, MySQL a PHP: instalace a konfigurace prostředí pro pokročilé webové aplikace. 1 vyd. Překlad Karel Voráček. Praha: Grada, 2005, 344 s. ISBN [22] SCHNEIDER, Robert D. MySQL: oficiální průvodce tvorbou, správou a laděním databází. Praha: Grada Publishing, 2006, 372 s. ISBN [23] Symfony: High Performance PHP Framework [online]. [cit ]. Dostupné z: [24] W3Schools Online Web Tutorials [online]. [cit ]. Dostupné z: [25] WYKE-SMITH, Charles. CSS: využijte kaskádové styly naplno!. Vyd. 1. Brno: Computer Press, 2006, 253 s. ISBN [26] Zend Framework [online]. [cit ]. Dostupné z:

41 Seznam použitých zkratek ACL - Access Control List AJAX - Asynchronous JavaScript and XML BSD - Berkeley Software Distribution CAPTCHA - Completely Automated Public Turing test to tell Computers and Humans Apart CMS - Content Management System, systém pro správu obsahu CSS - Cascading Style Sheets, kaskádové styly ČR - Česká republika FAČR - Fotbalová asociace České republiky GNU - GNU's Not Unix GUI - Graphical User Interface HTML - HyperText Markup Language, značkovací jazyk pro hypertext HTTP - Hypertext Transfer Protocol IE - Internet Explorer IPv4 - Internet Protocol version 4 IPv6 - Internet Protocol version 6 LDAP - Lightweight Directory Access Protocol LGPL - GNU Lesser General Public License MAC - Media Access Control MIT - Massachusetts Institute of Technology MVC - Model-View-Controller MVP - Model-View-Presenter PC - Personal Computer PDF - Portable Document Format PHP - PHP: Hypertext Preprocessor RPC - Remote Procedure Call SEO - Search Engine Optimization SK - Sportovní klub SOAP - Simple Object Access Protocol SP3 - Service Pack 3 SQL - Structured Query Language, strukturovaný dotazovací jazyk URI - Uniform Resource Identifier URL - Uniform Resource Locator

42 PRÍLOHA Seznam použitých zkratek UTF-8 - UCS Transformation Format, způsob kódování řetězců znaků W3C - World Wide Web Consortium WYSIWYG - What You See Is What You Get, editor webového obsahu XML - Extensible Markup Language

43 Instalační příručka Požadavky Webový server s podporou PHP verze nebo vyšší Aktivovaný mod_rewrite MySQL databáze 1) DATABÁZE Otevřete svůj oblíbený nástroj pro správu MySQL databáze (např. phpmyadmin). Zvolte možnost Import a vyberte soubor install-db.sql, který se nachází na přiloženém DVD ve složce database. Potvrďte provedení skriptu. Skript automaticky vytvoří databázi, tabulky a naplní je daty. 2) APLIKACE Obsah složky application zkopírujte do kořenového adresáře Vašeho webového serveru. Upozornění: Složka www musí být jediná složka, která je dostupná z webového prohlížeče. Ostatní složky obsahují citlivé údaje. 3) NASTAVENÍ Otevřete soubor config.local.neon, který se nachází ve složce app/config a upravte zde přístupové údaje databáze. Změny souboru uložte a otevřete aplikaci ve svém oblíbeném prohlížeči. Přístupové informace do administrační části: admin@info.cz Password: admin

44 PRÍLOHA Obsah přiloženého DVD Obsah přiloženého DVD /text text práce v různých formátech s přiloženými ilustracemi /application adresář s webovou aplikací /database SQL skript pro vytvoření databáze /documentation dokumentace