Webová aplikace pro podporu školských soutěží

Transkript

1 MASARYKOVA UNIVERZITA FAKULTA INFORMATIKY Webová aplikace pro podporu školských soutěží BAKALÁŘSKÁ PRÁCE Petr Vacek Jaro 2014 i

2 Zadání Kopie listu zadání ii

3 Prohlášení autora školního díla Kopie prohlášení autora školního díla iii

4 Prohlášení Prohlašuji, že tato práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na zdroj... Petr Vacek iv

5 Poděkování Děkuji vedoucímu mé bakalářské práce RNDr. Radku Ošlejškovi, Ph.D. za odborné vedení a pomoc při zpracování této práce. Také děkuji kolegům Petru Vítkovi a Robertu Šefrovi za cenné rady k technologiím a návrhu. Děkuji i své rodině za podporu a motivaci a rovněž členům občanského sdružení Student Cyber Games za to, že mi ukázali, jak se stane hra školou. v

6 Shrnutí Hlavním úkolem této bakalářské práce bylo připravit pro potřeby občanského sdružení Student Cyber Games webovou aplikaci představující část druhé generace jejího informačního systému, vytvořené s použitím moderního a na území ČR populárního rámce Nette pro programovací jazyk PHP a s použitím oblíbené knihovny jquery pro programovací jazyk JavaScript. vi

7 Abstract The main objective of this bachelor thesis was to prepare a web application representing a portion of second generation of information system of civil society organization Student Cyber Games, created using modern and on the territory of Czech Republic popular framework Nette for programming language PHP and using the favored library jquery for programming language JavaScript. vii

8 Klíčová slova PHP, MySQL, Nette, jquery, jquery UI, Select2, Datepicker, Timepicker, tablesorter, Highcharts, Student Cyber Games, pišqworky, Prezentiáda, školní soutěž viii

9 Obsah 1 Úvod Problémová doména Školské soutěže Student Cyber Games pišqworky Prezentiáda Informační systém SCG Další IT prostředky SCG Analýza a návrh Úprava relačního modelu Srovnání formátů MyISAM a InnoDB Hledání záznamů s neplatným cizím klíčem Odstranění záznamů s neplatným klíčem Změna formátu tabulek na InnoDB Nastavení kontroly cizích klíčů Návrh modulu Kontaktní osoba Případ užití Vypsat seznam kontaktních osob Případ užití Přidat kontaktní osobu Případ užití Upravit kontaktní osobu Případ užití Detail kontaktní osoby Relační model pro modul Kontaktní osoba Návrh modulu Činnost Případ užití Zapsat činnost Případ užití Upravit činnost Případ užití Smazat činnost Případ užití Zobrazit své činnosti Případ užití Zobrazit činnosti členů sekce Případ užití Upravit činnost člena sekce Relační model pro modul Činnost Návrh modulu Turnaj Případ užití Vytvořit turnaj Případ užití Upravit turnaj Případ užití Zobrazit detail turnaje ix

10 3.4.4 Případ užití Vytisknout soupiskuchyba! Záložka není definována Případ užití Vytvořit reportáž Případ užití Zobrazit seznam turnajů Případ užití Upravit výsledkovou listinu Případ užití Přihlásit na turnaj nový týmchyba! Záložka není definována Případ užití Přesunout tým na jiný turnajchyba! Záložka není definována Případ užití Přihlásit tým na další turnajchyba! Záložka není definována Případ užití Zobrazit seznam týmůchyba! Záložka není definována Případ užití Zobrazit detail týmuchyba! Záložka není definována Případ užití Upravit tým... Chyba! Záložka není definována Případ užití Přidat do týmu nového soutěžícíhochyba! Záložka není definována Případ užití Upravit záznam o soutěžícímchyba! Záložka není definována Případ užití Zobrazit záznam o soutěžícímchyba! Záložka není definována Relační model pro modul Turnaj Implementace Základní technologie Nette Framework... Chyba! Záložka není definována jquery jquery UI Select Datepicker Timepicker Vlastní JS pokusy tablesorter Highcharts Implementace modulu Kontaktní osobachyba! Záložka není definována. x

11 4.3 Implementace modulu Činnost... Chyba! Záložka není definována. 4.4 Implementace modulu Turnaj... Chyba! Záložka není definována. 5 Závěr xi

12 1 Úvod Každá organizace potřebuje pro naplňování svých cílů způsob, jak sdílet informace mezi jednotlivými členy. K tomuto účelu slouží informační systémy. V dnešní době existují spousty hotových řešení, která se liší v použitých technologiích a komplexitě. Jejich nasazení však má často velká úskalí. U komplexnějších variant jsou to zejména vysoké finanční náklady, zatímco levnější a méně složité implementace často postrádají funkcionalitu nutnou k uspokojení specifických potřeb. Z těchto důvodů se začínajícím podnikům, neziskovým organizacím, či obecně méně finančně zajištěným organizacím často vyplatí nechat si vytvářet svůj vlastní informační systém postupně a na míru. Požadavky každé instituce se však v průběhu času mění, o to rychleji, pokud jde o mladou a menší organizaci. Informační systémy musí změny těchto požadavků reflektovat a jejich provozovatelé jsou nuceni upravovat a udržovat zdrojový kód. Často se při těchto úpravách dbá zejména na minimalizaci nákladů, potažmo rychlost programátorovy práce, což vede především k ignorování osvědčených postupů. Z krátkodobého hlediska díky tomu sice může dojít k úspoře času, ovšem ruku v ruce s tím se kód stává delším a složitějším, což údržbu znesnadňuje. Díky tomu dlouhodobě rostou i její finanční nároky, takže časem organizace dospěje do situace, kdy se jí vyplatí přestat informační systém udržovat a začít s vývojem na novo. Taková chvíle je zároveň vhodná pro navržení nových funkcí a zohlednění připomínek, které se nasbíraly k původnímu návrhu a implementaci. Rovněž jde o příležitost k výměně technologií a využití nejnovějších návrhových vzorů ať už v uživatelském rozhraní, či v aplikační logice. Občanské sdružení Student Cyber Games, které pořádá soutěže pro žáky a studenty, je příkladem organizace v takovéto situaci. Cílem této bakalářské práce je navrhnout a vyvinout moduly pro správu kontaktních osob, turnajů a pracovních výkazů. Tyto moduly pak budou reálně nasazeny v druhé generaci informačního systému občanského sdružení Student Cyber Games. 1

13 2 Problémová doména 2.1 Školské soutěže Ve školním roce 1950/1951 se na území našeho státu, tehdy ještě Československé republiky, odehrál první ročník soutěže Matematická olympiáda. Na základě jejího úspěchu později vznikly mnohé další soutěže, např. Fyzikální olympiáda (od šk. roku 1958/1959), Chemická olympiáda (od šk. r. 1964/1965), Biologická olympiáda (od šk. r. 1966/1967) a další. Přestože olympiády patří v České republice mezi nejznámější školní soutěže, existuje i řada dalších a mnohé z nich se ani netýkají předmětů na školách vyučovaných. Ministerstvo školství, mládeže a tělovýchovy jich ve školním roce 2013/2014 evidovalo celkem 134 [1]. Vzhledem k diverzitě spojené s tímto množstvím se tak o školních soutěžích dá obecně říct jen tolik, že jde o jakékoliv soutěže pro žáky či studenty, kteří v nich reprezentují svoji školu. Jak pro školy, tak pro jejich navštěvovatele má účast a potenciální výhra v soutěžích pozitivní přínos. Počet umístění na předních příčkách výsledkových listin soutěží může být brán jako metrika úspěšnosti školy. Může tedy být i užitečným propagačním prostředkem. Soutěže navíc nabízejí prostor pro rozvoj účastníků, který běžná výuka poskytnout nemůže a dokáže tak působit jako podpůrný prostředek pro výchovu či vzdělávání jedinců. Z toho mají pochopitelně prospěch i samotní účastníci, kteří se v případě vítězství mohou dále těšit zvýšené popularitě ze strany vedení i vyučujících své školy. K tomu společně s vítězstvím získají zpravidla i nějaké hodnotné ceny. Svůj úspěch pak docení také při přijímacím řízení do dalšího stupně vzdělávání, kde je častým trendem zvýhodnění úspěšných řešitelů soutěží s oborově relevantní tematikou. I přes uvedené množství soutěží se ukazuje, že je zde stále prostor pro další soutěže. Dokazuje to úspěch soutěží pořádaných občanským sdružením Student Cyber Games. 2

14 2.2 Student Cyber Games Student Cyber Games (dále jen SCG) je občanské sdružení, usilující o rozvoj volnočasových aktivit mládeže a dospělých. Oficiálně bylo založeno dne 5. listopadu 2004 a sídlí v Brně. Působí především na území České republiky a na Slovensku. Heslem sdružení je hra školou, což je přesmyčka z populárního názvu díla J. A. Komenského. Své cíle SCG naplňuje prostřednictvím pořádání soutěží pro střední a základní školy. Tyto soutěže jsou specifické svou otevřeností všem skupinám studentů a žáků, zapojením partnerů z komerční sféry, množstvím a atraktivitou cen pro vítěze, svými netradičními disciplínami i hlubším poselstvím. Jednou z nosných myšlenek sdružení je heslo studenti pro studenty. Jelikož z dnešních přibližně 50 členů SCG tvoří většinu studenti středních a vysokých škol, je toto heslo naplňováno doslova. Na druhou stranu ve srovnání s konzervativnějšími organizacemi dochází v SCG daleko častěji k odchodům, které souvisejí s ukončením studia člena a začátkem kariérního života. Tyto odchody jsou tudíž kompenzovány náborem převážně z řad přímých účastníků soutěží SCG. Došlo již dokonce i k situaci, že v čele soutěže stál přímý účastník jednoho z jejích předchozích ročníků. Protože však členové s ohledem na jejich věk nemají tolik praktických zkušeností, klade se ve sdružení silný důraz na zaškolování a vzdělávání členské základny. SCG pořádá řadu kurzů zaměřených zejména na rozvoj organizačních dovedností a projektový management. Nezřídka toto vzdělávání probíhá na individuální bázi. Díky tomu a díky faktu, že se jedná o menší komunitu, zde vznikají dlouholetá přátelství. Název Student Cyber Games napodobuje název jednoho z největších celosvětových turnajů v počítačových hrách World Cyber Games. Sdružení tento název dostalo po stejnojmenné první soutěží, která se odehrála se ve třech ročnících v letech 2003 až 2006 v počítačové hře Starcraft. Následně došlo v souvislosti s přechodem organizátorů na vysoké školy k dvouletému útlumu a soutěže v počítačových hrách od té doby sdružení nepořádá. Na podzim roku 2008 se pak odehrál první ročník soutěže pišqworky a od jara roku 2010 pořádá SCG každoročně také Prezentiádu. 3

15 2.2.1 pišqworky O vítězi této soutěže rozhoduje schopnost ve hře známé jako piškvorky. V ní proti sobě stojí dva hráči, kteří na čtvercovaném poli střídavě označují svá pole do té doby, než některý z nich dosáhne souvislé řady pěti či více symbolů ve svislém, vodorovném, nebo jednom z diagonálních směrů. Název soutěže je navržen tak, aby působil hravě a naznačoval nejen v jaké hře se soutěží, ale s užitím písmen I Q v názvu implikoval i potřebu analytického myšlení při hraní. Krom toho, že účastníci soutěže reprezentují svou školu má soutěž ještě jeden sociální rozměr. Soutěží se totiž v pětičlenných družstvech a k vítězství je třeba nejen schopnost hrát dobře piškvorky, ale i sestavit dobrý tým. Úspěch konceptu této soutěže lze zhodnotit na základě níže uvedené tabulky Prezentiáda I zde je název navržen tak, aby evokoval charakter soutěže. Tříčlenné týmy soutěžících si na soutěžní klání připraví prezentaci, kterou v pevně stanoveném časovém limitu musí před odbornou porotou doprovodit mluveným slovem. Po prezentaci dostane porota i publikum ještě prostor k položení dotazů. Téma prezentací jsou pevně daná a jsou volena jako kompromis mezi atraktivitou a potenciálním přínosem výstupu, např. Život jako prezentace, Zkouška dospělosti, Můj nový předmět, Proč (ne)jít na vysokou, Kromě grafického zpracování prezentace se hodnotí také schopnost reakce na dotazy, improvizace, týmová spolupráce, verbální a nonverbální projev nebo uchopení zvoleného tématu. Účastníci tak dostanou komplexní zpětnou vazbu ke svému projevu a odnesou si cenné poznatky, které s velkou pravděpodobností uplatní v celém dalším životě, mimo jiné pak i u maturitní či státní zkoušky. Prezentiáda pišqworky Rok Turnajů Týmů Soutěžících Turnajů Týmů Soutěžících 2008 nebylo organizováno nebylo organizováno v přípravě 4

16 2.3 Informační systém SCG V roce 2008 před prvním ročníkem pišqworek si SCG začalo vyvíjet svůj informační systém. Jeho hlavním účelem byla evidence přihlášek do soutěže a umožnění komunikace sdružení s účastníky prostřednictvím jednoduchého systému pro správu obsahu. Později přišly požadavky na další funkcionality, které by organizačnímu týmu usnadnily práci na projektu. Dnes tak systém obsahuje následující části: - Řízení uživatelských účtů - Správa multimédií (novinky, galerie, tiskové zprávy) - Evidence škol - Hromadná korespondence - Účetní systém - Správa pracovních výkazů - Správa kontaktních osob (pedagogičtí pracovníci a aktivní studenti) - Evidence turnajů Jako programovací jazyk bylo zvoleno PHP pro svou v té době nejsnadnější dostupnost, jak z hlediska nabídky poskytovatelů webhostingu, tak z hlediska ceny. Ze stejných důvodů byla zvolena MySQL databáze jako úložiště. Celý projekt je provozován na hostingu Savana.cz. Pro usnadnění vývoje byl použit tehdy nový Zend Framework 1.5. Na projektu původně spolupracovalo pět vývojářů a po skončení vývoje byl udržován 2 lidmi. 2.4 Další IT prostředky SCG Pro interní komunikaci používá sdružení diskusní fórum phpbb, pro externí komunikaci je používána ová doména scg.cz. Jako ového klienta využívají členové hostingem nabízené aplikace Roundcube a Icewarp. Pro tvorbu a sdílení dokumentů jsou běžně používány Google dokumenty, či Office365. IT tým sdružení používá Trello jako tiketovací systém a pro zadávání úkolů. Ke správě verzi používá verzovací systém Subversion. 5

17 3 Analýza a návrh Přestavba celého informačního systému SCG by byla natolik náročná, že by přesahovala standardní rozsah bakalářské práce. Na základě porady s vedoucím práce a vedením sdružení proto byly zvoleny 3 části, viz obrázek č. 1. Jednotlivé moduly budou podrobněji dekomponovány dále v textu. Obrázek č. 1 - Diagram případů užití vyvíjeného systému Hlavní požadavky sdružení byly: 1) minimalizace finančních nákladů na údržbu starého systému 2) zachování historických dat 3) možnost provést přechod ze staré verze informačního systému na novou implementaci prakticky okamžitě Při návrhu jsem bral rovněž v potaz, že systém mohou používat pouze autentizovaní uživatelé a že je určen pro zařízení s velkým displejem, nikoliv na mobilní zařízení. Vzhledem k tomu, že byly v rámci bakalářské práce připravovány pouze vybrané moduly a sdružení by bez ostatních částí původního systému nebylo schopné běžného provozu, bylo nutné umožnit provoz starého systému. Sdružení však zároveň chtělo mít možnost ihned nasadit nově vyvinuté moduly, aby mohly být otestovány v reálném prostředí. 6

18 Změny v návrhu relačního modelu spojené s vývojem nových modulů by si vyžádaly úpravy ve starém systému, což by bylo v rozporu s hlavními požadavky. Z výše uvedených důvodů byly mé možnosti v oblasti změny relačního modelu značně omezené. Relační model pro všechny tři moduly je zobrazen na obrázku č. 2. Databázový návrh používá pro primární a cizí klíče doporučenou konvenci. Primární klíče jsou (mimo vazební tabulky) tvořeny jedním sloupcem s názvem ve tvaru {název tabulky}_id. Cizí klíče jsou rovněž jednosloupcové, končí řetězcem _id a v absolutní většině případů začínají názvem tabulky, na kterou se odkazují. Obrázek č. 2 - ER diagram pro všechny vyvíjené moduly 7

19 3.1 Úprava relačního modelu Jednou z mála úprav relačního modelu, která byla proveditelná, bylo zavedení kontroly existence záznamů, na které se jiný záznam odkazuje prostřednictvím cizího klíče. Původní verze relačního modelu z roku 2008 byla implementována ve formátu MyISAM, což byl výchozí formát ve verzi databáze MySQL, kterou tehdy poskytoval webhosting. Jednou z vlastností formátu MyISAM je, že v databázi s tímto formátem neprobíhají ve výchozím stavu výše uvedené kontroly. Tento fakt nebyl vývojáři původního systému reflektován a společně s nedostatky v implementaci původního informačního systému, zejména pak ve funkcích pro mazání záznamů, vedl k nekonzistenci databáze. Opakování tohoto problému se dá v tabulkách formátu MyISAM předejít s využitím TRIGGER událostí. Další možností je změnit tabulky do formátu InnoDB, kde probíhají kontroly cizích klíčů nativně Srovnání formátů MyISAM a InnoDB MyISAM a InnoDB jsou formáty datového úložiště v databázovém systému MySQL. Oba formáty vznikly s důrazem na jiné potřeby, mají proto odlišné vlastnosti, které se v různých situacích hodí méně, nebo více [2]. Formát MyISAM je vyvinut s hlavním důrazem na efektivitu využití úložného prostoru. Tento formát nepodporuje transakce, ani cizí klíče. Tabulky jsou v MyISAM zamykány celé. Zatímco v MyISAM byla podpora fulltextového vyhledávání již dříve, InnoDB tuto možnost zavádí od MySQL verze vydané v prosinci 2011 [6]. Formát InnoDB je vyvinut s důrazem na transakční zpracování, nepřekvapí tedy plná transakční podpora. Ruku v ruce s tím jde snadnější obnovení z chyb. K zamykání dochází v InnoDB po řádcích, což přináší daleko lepší možnosti paralelního zpracování. InnoDB také podporuje cizí klíče. Od MySQL vydané v červenci 2010 je InnoDB výchozím formátem úložiště [6]. Pro tuto bakalářskou práci byly nejdůležitějšími faktory podpora cizích klíčů a transakcí a proto bylo pro formát datového úložiště zvoleno InnoDB. 8

20 3.1.2 Hledání záznamů s neplatným cizím klíčem Nejprve bylo potřeba zjistit, ve kterých tabulkách mají být cizí klíče. Pokud není k dispozici dokumentace, ale databáze používá doporučené konvence, je možné to zjistit i s pomocí dotazu. SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = "test" AND column_name LIKE "%_id" AND column_name!= CONCAT(table_name, "_id"); MySQL dotaz č. 1 - Nalezení sloupců reprezentujících cizí klíč v databázi test Víme-li, který sloupec reprezentuje cizí klíč, můžeme zjistit, zda se některý z řádků v tomto sloupci neodkazuje na neexistující řádek v jiné tabulce. SELECT * FROM test.turnaj WHERE skola_id NOT IN (SELECT skola_id FROM skola); MySQL dotaz č. 2 - Nalezení řádků tabulky turnaj, které se odkazují na neexistující řádky tabulky škola v databázi test Můžeme využít i samotný databázový systém a vygenerovat podobný dotaz pro každý cizí klíč s pomocí funkcí pro zřetězení (CONCAT), podřetězec (SUBSTRING) a délku řetězce (LENGTH). 9

21 SELECT CONCAT( "SELECT * FROM ", table_schema, ".", table_name, " WHERE ", column_name, " NOT IN (SELECT ", column_name, " FROM ", table_schema, ".", SUBSTR(column_name,1, LENGTH(column_name)-3), ");" ) FROM information_schema.columns WHERE table_schema = "test" AND column_name LIKE "%_id" AND column_name!= CONCAT(table_name, "_id"); MySQL dotaz č. 3 - Vygenerování dotazů na všechny řádky s neplatnými odkazy v databázi test Odstranění záznamů s neplatným klíčem Neplatných odkazů v databázi nebylo vzhledem k celkovému počtu řádků v databázi mnoho. Protože jedním z požadavků sdružení bylo zachování historických dat a zároveň existovaly zálohy databáze, byly po poradě s vedením sdružení některé řádky obnoveny a zbývající méně relevantní smazány. Pokud by neexistoval způsob jak řádky s neplatným odkazem opravit, dala by se situace vyřešit smazáním všech. Dotazy, kterými by se tohoto docílilo, by měly podobný tvar jako dotaz č. 3 se záměnou řetězce SELECT * za řetězec DELETE. Je však třeba mít na paměti, že každé mazání může mít za následek zneplatnění dalších záznamů. Dotazy je tak nutné spouštět opakovaně do té doby, dokud bude celá jejich série mazat nějaké řádky. Jakmile se počet řádků přestane měnit, databáze bude v konzistentním stavu (z hlediska cizích klíčů). 10

22 3.1.4 Změna formátu tabulek na InnoDB Změnit formát tabulek lze snadno dotazem typu ALTER. ALTER TABLE test.turnaj ENGINE=InnoDB; MySQL dotaz č. 4 - Nastavení formátu InnoDB tabulce turnaj v databázi test I v tomto případě lze dotazy vygenerovat pro všechny tabulky v databázi SELECT CONCAT( "ALTER TABLE ", table_schema, ".", table_name, " ENGINE=InnoDB;" ) FROM information_schema.tables WHERE table_schema = "test"; MySQL dotaz č. 5 - Vygenerování dotazů pro změnu formátu všech tabulek v databázi test na InnoDB Nastavení kontroly cizích klíčů Nyní je ještě potřeba nastavit tabulky tak, aby se ke sloupcům, reprezentujícím cizí klíč, správně chovaly. ALTER TABLE test.turnaj ADD FOREIGN KEY (skola_id) REFERENCES skola(skola_id); MySQL dotaz č. 6 - Přidání cizího klíče skola_id v tabulce turnaj, odkazující na sloupec škola_id v tabulce škola v databázi test 11

23 SELECT CONCAT( "ALTER TABLE ", table_schema, ".", table_name, " ADD FOREIGN KEY (", column_name, ") REFERENCES ", SUBSTR(column_name,1, LENGTH(column_name)-3), "(", column_name, ");" ) FROM information_schema.columns WHERE table_schema = "test" AND column_name LIKE "%_id" AND column_name!= CONCAT(table_name, "_id"); MySQL dotaz č. 7 - Vygenerování dotazů na přidání relevantních cizích klíčů všem tabulkám v databázi test 12

24 3.2 Návrh modulu Kontaktní osoba Modul Kontaktní osoba slouží ke správě a prezentaci kontaktních informací relevantních osob, např. zaměstnanců a vyučujících škol, či aktivních studentů a pomocných organizátorů z jejich řad. Uložené informace jsou členy sdružení využívány k organizačním účelům, případně slouží jako vstup pro část informačního systému zaměřenou na hromadnou korespondenci. Obrázek č. 3 - Diagram případů užití modulu Kontaktní osoba Jediným aktérem vystupujícím v tomto modulu je autentizovaný uživatel s oprávněním využívat modul kontaktní osoba. Vzhledem ke zkušenostem, které popisuji v úvodu kapitoly 3 a protože nebyl příliš frekventovaně užíván, byl z návrhu odebrán případ užití pro mazání záznamů. Pokud je nutné záznam smazat v situaci, kterou upravuje zákon o ochraně osobních údajů, k čemuž zatím historicky nedošlo, je možné požádat IT sekci sdružení o ruční smazání prostřednictvím dotazu do databáze Případ užití Vypsat seznam kontaktních osob Jedná se o hromadný výpis z databáze kontaktních osob. V původním systému nebylo možné kontaktní osoby filtrovat, což znesnadňovalo hledání a znamenalo nutnost vypsat kontaktní osoby všechny. V databázi se vyskytují tisíce kontaktních osob, takže jejich hromadný výpis také způsoboval problémy s internetovým prohlížečem. Proto byla přidána možnost filtrace. 13

25 3.2.2 Případ užití Přidat kontaktní osobu Pomocí této akce může uživatel do databáze vložit novou kontaktní osobu a všechny informace o ní: křestní jméno, prostřední jméno, příjmení, tituly před a za jménem, pohlaví, na jaké škole a v jaké pozici působí, kontaktní informace jako , telefon, ICQ, Skype. Je také možné ke kontaktní osobě připsat poznámku a označit ji jako primární pro účely komunikace s její školou. Protože různé soutěže mohou mít na jedné škole na starosti různí vyučující (typicky pišqworky mají na starosti vyučující přírodovědných předmětů a Prezentiádu vyučující humanitních předmětů), je zde také možnost zvolit typy soutěží, které jsou pro kontaktní osobu relevantní. Návrh je převzat z pův. sys Případ užití Upravit kontaktní osobu Tento případ užití slouží k úpravě uvedených informací (viz případ užití Přidat kontaktní osobu). Oproti původní verzi byla také přidána možnost změnit školu kontaktní osoby Případ užití Detail kontaktní osoby Prostřednictvím této akce si může uživatel zobrazit všechny informace vedené o kontaktní osobě. Kromě informací vypsaných v případě užití Přidat kontaktní osobu jsou zde také vypsány všechny soutěžní týmy, pro něž je zobrazený záznam kontaktní osobou. Návrh je převzat z původního systému Relační model pro modul Kontaktní osoba Na obrázku č. 4 je znázorněn relační model pro modul Kontaktní osoba. Obrázek č. 4 - ER diagram modulu kontaktní osoba (zjednodušeno) 14

26 3.3 Návrh modulu Činnost Ve starém informačním systému byla obdoba tohoto modulu implementována v létě roku Jakožto spoluautor původního návrhu a autor původní implementace jsem si byl vědom nedostatků obojího a tyto informace jsem využil při vytváření modulu nového. Hlavním cílem tohoto modulu je zachytit časovou náročnost projektů a dílčích aktivit spojených s jejich organizací. Tyto informace jsou následně využívány pro vytváření mzdových výměrů a plánování dalších projektů. Tento modul je navržen s ohledem na organizaci práce v občanském sdružení. Jednotliví členové sdružení se mohou podílet na více projektech, které se mohou v čase prolínat. Mohou také působit na různých pozicích a v různých sekcích organizačního týmu (např. IT, public relations, obchod, atd.) a to i v jednom projektu. V tomto modulu vystupují dva aktéři. Vedoucí je uživatel, který má oprávnění k nějaké sekci některého projektu. Uživatel je jakýkoliv další autentizovaný uživatel systému. Uživatelé i Vedoucí si zaznamenávají počet minut, který v daný den obětovali určité projektové činnosti. Vedoucí tyto záznamy spravuje a využívá jich pro řízení své sekce. Obrázek č. 5 - Diagram případů užití modulu Činnost 15

27 3.3.1 Případ užití Zapsat činnost Člen organizačního týmu s pomocí tohoto případu užití zaznamenává vykonanou činnost. Eviduje se pod jakým projektem a sekcí byla činnost vykonána, datum, počet odpracovaných minut, název vykonávané činnosti a volitelný popis podrobností. Činnosti je možné zapisovat i zpětně. Ve srovnání se starým informačním systémem již nebude možné zapisovat činnost pod projekt, který byl ukončen, nebo naopak v den, který ještě nenastal Případ užití Upravit činnost Tento případ užití postihuje situace, kdy je potřeba záznam editovat. Při vyplňování vkládacího formuláře totiž může dojít k uživatelské chybě nebo může člen po zápisu ještě tentýž den v zaznamenané činnosti pokračovat. Podobně jako v případě užití Zapsat činnost není v novém návrhu možné upravovat činnost již skončeného projektu Případ užití Smazat činnost Své záznamy může člen SCG mazat, v případě, že ještě nebyl ukončen projekt, pod kterým byla činnost zapsána Případ užití Zobrazit své činnosti Jedná se o přehled všech vypsaných činností. Nově je možné činnosti filtrovat podle sekcí a daného časového intervalu. Další inovací v tomto případě užití je grafické znázornění vybraných dat. Členovi bude zobrazen koláčový graf zachycující poměr součtů minut, zaznamenaných ve zvolených sekcích. Dále bude zobrazen spojnicový graf rozložení časové zátěže ve zvoleném intervalu Případ užití Zobrazit činnosti členů sekce Tento případ užití umožňuje vedoucímu sekce zkontrolovat, zda členové sekce zapisují činnosti a případně jak postupuje práce sekce na jednotlivých dílčích úkolech. Většina mezd je určena úkolově, vedoucí tak tohoto případu užití může využít při poměřování podílu jednotlivých členů na splnění úkolu. I v tomto případě užití se počítá s grafickým výstupem, jak je navržen v případě užití Zobrazit své činnosti. Navíc uvidí vedoucí koláčový graf znázorňující rozdělení zátěže mezi jednotlivé členy. 16

28 3.3.6 Případ užití Upravit činnost člena sekce V personálním složení členů SCG, potažmo projektových týmů dochází k častým obměnám. Vlivem nezkušenosti členů, nebo nedopatřením dochází v záznamech k chybám. Tento případ užití umožňuje vedoucímu sekce, pod kterou zaznamenaná činnost spadá, změnit její popis, nebo záznam přiřadit k jiné sekci Relační model pro modul Činnost Na obrázku č. 6 je znázorněn relační model pro modul Činnost. Obrázek č. 6 - ER diagram modulu Činnost (zjednodušeno) 17

29 3.4 Návrh modulu Turnaj Protože pořádání soutěží je hlavní aktivitou sdružení SCG, je tento modul pro informační systém zcela klíčový. Hlavním smyslem modulu je evidence turnajů a všech souvisejících organizačních záležitostí. Na rozdíl od původní verze nový návrh nepočítá s případem užití pro mazání turnajů, podobně jako v případě modulu kontaktní osoba. Kromě zkušeností, které popisuji v úvodu kapitoly 3, se k tomuto rozhodnutí váže ještě zkušenost, kterou podrobně rozeberu v podsekci Obrázek č. 7 - Diagram případů užití modulu Turnaj Jediným zde vystupujícím aktérem je organizátor turnaje Případ užití Vytvořit turnaj Uvedený případ užití pokrývá potřebu vytvořit nový turnaj. Každý turnaj má právě jednoho hlavního organizátora. Tím může být kdokoliv z řad uživatelů informačního systému. Soutěžní projekty mohou mít více turnajových úrovní, například celostátní, krajskou, aj. Každý turnaj pak patří pouze do jedné úrovně. Dále se eviduje pořadatelská škola, kde se turnaj uskuteční, následně datum a čas konání turnaje, maximální počet týmů (kapacita) turnaje, počet do dalšího kola postupujících týmů, případně dodatečné textové informace. Návrh je převzat z původního systému. 18

30 3.4.2 Případ užití Upravit turnaj Při plánování projektu dochází často k situaci, kdy se změní datum turnaje, pořadatelská škola, nebo i organizátor turnaje. Pak je potřeba tento případ užití. Mimo informace vyjmenované v případě užití Vytvořit turnaj je také možné změnit stav turnaje. Ten je důležitý pro interakci s webovými stránkami soutěží, kde se pomocí stavu turnaje řídí zobrazované informace. Například přihlašování týmů na turnaj může probíhat, pouze pokud je ve stavu Otevřen. Naopak pokud je ve stavu Uzavřen, není možné se přihlašovat. Výsledky turnaje by měly být zobrazovány teprve tehdy, je-li turnaj ve stavu Odehraný. Návrh je převzat z původního systému. Novinkou oproti předešlé verzi je stav Zrušen. Vzhledem k absenci tohoto stavu dříve organizátoři mazali turnaje, které byly zrušeny z důvodu nedostatečného zájmu, ač jinak byly organizačně zajištěny. Protože dochází v organizačním týmu k neustálým obměnám a v informačním systému nezbyla žádná informace o předchozím pokusu uspořádat v určitém místě turnaj, výše uvedeným způsobem se např. v okresu Tachov připravoval turnaj čtyři roky po sobě Případ užití Zobrazit detail turnaje Tímto případem užití je realizována možnost zobrazit si informace o již vytvořeném turnaji. Je zde také uvedena soupiska týmů, případně i jejich pořadí, je-li vyplněno. Návrh je převzat z původního systému Případ užití Vytvořit reportáž Tento případ užití vytvoří reportáž ve formě záznamu v tabulce novinky a příslušné vazby. Následně pokračuje případem užití Vytvořit novinku, který bude součástí návrhu modulu Novinka, který není předmětem této bakalářské práce. Návrh je převzat z původního systému Případ užití Zobrazit seznam turnajů Návrh tohoto případu užití byl v původní verzi informačního systému několikrát upravován, takže při realizaci bakalářské práce jsem nenarazil na nedostatky. Případ užití byl proto převzat. Slouží pro vyhledávání mezi turnaji a jako rozcestník pro realizaci případu užití Zobrazit detail turnaje. 19

31 3.4.6 Případ užití Upravit výsledkovou listinu Účelem tohoto případu použití je zadat pořadí soutěžních týmů. Počítá se i s možností, že na některých pozicích není umístění jednoznačné. Dá se tedy docílit i rozsahu v pořadí, např místo". Návrh je převzat z původního systému Relační model pro modul Turnaj Na obrázku č. 8 je znázorněn relační model modulu Turnaj. Obrázek č. 8 - ER diagram modulu Turnaj (zjednodušeno) 20

32 4 Implementace 4.1 Základní technologie Bakalářská práce byla implementována v programovacím jazyku PHP 5.3 a jako úložiště je používán databázový systém MySQL 5.5 Ani v jedné z těchto technologií nebyla možnost volby. V případě databáze tak tomu bylo kvůli požadavku sdružení na zachování historických dat z předchozí verze (viz. kapitola 3), která byla provozována ve stejné databázi. V případě programovacího jazyka se zase jednalo o ústupek s ohledem na znalosti ostatních členů IT týmu sdružení, kteří se zapojují do vývoje jiných částí systému, či údržby. Volba však byla možná v oblasti webového rámce pro usnadnění vývoje v PHP. Předchozí verze systému používala Zend Framework 1.5 a nabízela se tedy možnost využít jeho novější verzi Zend Framework 2 (dále jen ZF2). Tyto dvě verze však byly na tolik rozdílné, že přechod na ZF2 neposkytoval žádné výhody oproti přechodu na jiný rámec. Z řady možností byl tedy nakonec zvolen Nette Framework 2 (dále jen Nette) a to hned z několika důvodů. Některé části rámce Nette totiž byly používány v předchozí verzi, zejména pak Nette\Diagnostics\Debugger neboli tzv. laděnka. Členové IT týmu měli s tímto rámcem také zkušenosti z jiných projektů. Dalším důvodem byla vysoká přístupnost pro případné posily vývojářského týmu. Nette má velice dobrou dokumentaci a to navíc i v českém jazyce. Popularitu Nette potvrdila i anketa mezi posluchači kurzu PV219 Seminář webdesignu. To vše je pro sdružení výhodné, neboť bude mít v budoucnu možnost najmout i mladší vývojáře, kteří mají nižší finanční nároky. Pro usnadnění vývoje klientské strany byla použita sada kaskádových stylů Pure. Jako programovací jazyk pro klientskou stranu byl zvolen zatím stále dominantní JavaScript, pro zjednodušení práce s ním knihovna jquery. Při tvorbě uživatelského rozhraní bylo rovněž využito prvku Datepicker z jquery UI, jeho rozšíření Timepicker a dalších prvků stavících na jquery jako jsou Select2 a tablesorter. Pro tvorbu grafů v modulu Činnost bylo využito knihovny Highcharts. 21

33 4.1.1 jquery jquery je knihovna v jazyku JavaScript, která usnadňuje práci s objektovým modelem HTML stránky. Základem knihovny je objekt jquery, který je možno volat konstruktorem jquery(), nebo častěji $(). Tomuto konstruktoru lze předat vstupní argument, ať už se jedná o odkaz na objekt, nebo o textový řetězec. V případě, že se jedná o odkaz na objekt, chová se objekt jquery jako obálka nad tímto objektem a umožňuje s ním manipulovat prostřednictvím svých mnohých metod. Jedná-li se o textový řetězec, hovoříme o takzvaném selektoru. Objekt jquery při zadání selektoru prochází objektový model HTML dokumentu a hledá prvky, které by zadanému selektoru odpovídaly. Množina platných selektorů dává dohromady vlastní pseudojazyk, s jehož pomocí je možné vyjádřit i poměrně komplikovaný dotaz, viz ukázka. $('section *[id^="a"] + div.klass'); Ukázka kódu č. 1 - Vyhledá všechny prvky <div> třídy klass, které v dokumentu následují po jakémkoliv prvku, jehož atribut id začíná znakem a a který je umístěn v prvku <section> Mimo to nabízí jquery také sofistikované metody pro řízení událostí. Obalovanému prvku lze metodami on() a off() nastavit, případně zrušit obsluhovač (handler). Metodou one() lze nastavit obsluhovač, který zpracuje právě jednu událost a vypne se. S pomocí metody live() se obsluhovač naváže nejen na každý prvek, který odpovídá selektoru v době provedení metody, ale i na ty, které v dokumentu teprve vzniknou. Zrušit obsluhovače vytvořené metodou live() lze metodou die(). Objekt jquery může být snadno rozšířen o další metody. To představuje způsob, jak mohou na základě jquery vznikat různé prvky uživatelského rozhraní a využívat selektorů a metod pro řízení událostí. Knihovna jquery je dostupná zdarma pod MIT licencí na domovské stránce na adrese 22

34 4.2 Uživatelské rozhraní Možnosti tvorby HTML dokumentů a způsob jejich interpretace webovými prohlížeči se odvíjí od standardů v této oblasti a to ať už od standardů stávajících, tak od těch teprve vznikajících. Proces standardizace je však velmi náročný a zdlouhavý, proto může pojmout jen určitou část návrhů a konvencí. Pozornost je tedy věnována zejména nejmarkantnějším problémům a některé pro komunitu webových vývojářů méně podstatné prvky se tak nevyvíjejí. Některé prvky byly standardy naposledy upraveny již před více než 10 lety a odpovídají tehdejším potřebám. Z pohledu dnešních uživatelů však jejich výchozí vzhled a funkcionalita nemusí být optimální. Weboví vývojáři však mohou takovýmto situacím předcházet s využitím kaskádových stylů a programovacího jazyka JavaScript. Dále uvádím soupis prvků, založených na knihovně jquery pro jazyk JavaScript, které jsem ve své práci použil pro zlepšení uživatelského rozhraní jquery UI jquery UI je balík s interaktivními prvky, animacemi, styly a dalšími nástroji užitečnými k obohacení uživatelského rozhraní internetového prohlížeče. Již z názvu je patrné, že je tento balík založen na knihovně jquery. Jedním z interaktivních prvků v tomto balíku je také Datepicker, který svým vzhledem připomíná kalendář (viz obrázek) a obsahuje tlačítka, s jejichž pomocí lze do libovolného prvku vložit zvolené datum. Obrázek č. 9 - Formulářový prvek <input type= text > s navázaným prvkem Datepicker 23

35 Zadat datum lze s prvkem Datepicker pomocí jediného kliknutí, což je pro uživatele daleko přirozenější, než ruční vypisování. K tomuto prvku existuje i česká lokalizace. Chování prvku Datepicker je možné parametrizovat celou řadou proměnných a tak například nastavit formátování uživatelem zvoleného data. Z těchto důvodů je v práci využíván ve všech formulářích, kde je od uživatele požadováno datum. Zajímavé na jquery UI je, že je možné stáhnout si verzi s libovolnou kombinací prvků a vynechat tak nepotřebné součásti tohoto balíku. Stejně jako jquery je i jquery UI k dispozici zdarma pod MIT licencí. Domovská stránka jquery UI je na adrese Timepicker Mimo datum je v některých formulářích třeba zadat také čas. Sám o sobě s tím prvek Datepicker nepočítá. Je však možné jej rozšířit o prvek Timepicker a zadávat tak datum i čas. Nebo je možné tento prvek použít samostatně pro zadávání času. Kromě knihovny jquery potřebuje Timepicker ke svému chodu také balík jquery UI s prvkem Slider, který používá pro svou grafickou reprezentaci (viz obrázek). Obrázek č Prvek Timepicker I Timepicker je k dispozici zdarma pod MIT licencí. Domovská stránka tohoto doplňku je na adrese 24

36 4.2.3 tablesorter Webová aplikace, která vznikla v rámci této bakalářské práce, implementuje několik případů užití, kdy je třeba zobrazit hromadný výpis řádků z databáze. Proto je ve velké míře využíváno tabulkových HTML prvků. Právě ty se však již vice než 10 let příliš nevyvíjí. tablesorter je doplněk využívající jquery, který umožňuje navázat ovládací prvky do záhlaví správně formátovaných tabulek. S pomocí těchto ovládacích prvků lze tabulky řadit dle jednoho i více sloupců. tablesorter si umí sám zjistit, zda jsou hodnoty ve sloupci textový řetězec nebo číselná hodnota a s ohledem na tuto skutečnost pak řadí jednotlivé řádky tabulky. Tento doplněk je dostupný zdarma pod MIT licencí či GPL licencí. Domovská stránka tohoto doplňku je na adrese: Select2 Select2 je doplněk, jehož hlavním cílem je, jak název napovídá, náhrada formulářového prvku <select>. Je postaven na knihovně jquery a přizpůsoben pro případy, kdy je k dispozici velké množství voleb <option>, neboť mění prvek <select> na vyhledávací políčko. Pod tímto políčkem, je-li aktivní, se zobrazují volby <option>. V momentě, kdy je do políčka zadán nějaký textový řetězec, jsou ze zobrazovaných voleb odfiltrovány ty, které zadaný řetězec neobsahují a ve zbývajících volbách je podtržen zadaný řetězec (viz obrázek). Select2 nabízí i podporu pro dynamické načítání voleb <option> pomocí asynchronního volání AJAX. Obrázek č Vyhledávání v Select2 poli Region Prvek Select2 je dostupný pod licencemi Apache Software Foundation License 2.0 a GPL 2.0 na domovské stránce 25

37 4.2.5 Highcharts Do návrhu modulu Činnost jsem zakomponoval i grafický výstup z dat zobrazených v případě užití Zobrazit své činnosti. Jakým způsobem jsou tyto grafy implementovány, znázorňuje níže uvedený obrázek. Pro generování těchto grafů jsem využil knihovnu Highcharts. Hlavní výhodou této knihovny je jednoduchost, pokrytí nejobvyklejších typů grafů, perfektní dokumentace, a rozsáhlé možnosti parametrizace. Obrázek č Ukázka grafů generovaných s užitím knihovny Highcharts v případě užití Zobrazit své činnosti v modulu Činnost Highcharts je komerční knihovna, která je však zdarma dostupná pro neziskové organizace, kterou občanské sdružení Student Cyber Games je. Domovská stránka knihovny je na adrese Jako alternativa by se dala využít například knihovna D3, dostupná zdarma pod BSD licencí na domovské stránce na adrese Ta je však koncipována spíše jako rámec pro vývoj grafických reprezentací dat a její použití by na rozdíl od Highcharts vyžadovalo hlubší porozumění Vlastní jquery prvky Mimo výše uvedené knihovny, prvky a doplňky jsem při implementaci bakalářské práce vytvořil také dva vlastní prvky, založené na jquery. K prvkům typu <select>, u kterých je možné zvolit více možností, lze s prvkem multiselectmanipulator přidat tlačítka pro výběr všech nebo žádné z možností. Prvek columnhider přidává nad tabulku menu, s jehož pomocí je možné skrýt jednotlivé sloupce u správně formátovaných (ve stejném smyslu jako u prvku tablesorter) tabulek. 26

38 5 Závěr V úvodní kapitole byla popsána problematika pořádání školních soutěží z hlediska informačního zázemí. Následovalo podrobné seznámení s problémovou doménou a organizační strukturou občanského sdružení Student Cyber Games, která byla popsána v kapitole 2. Na základě požadavků od vedení sdružení bylo dále postupováno v analýze a návrhu. Nejužitečnějším zdrojem pro analýzu byla starší verze informačního systému sdružení. Z tohoto informačního systému byly po poradě s vedoucím práce a vedením sdružení vybrány 3 části, kterými se práce dále zabývala. Nejprve byly popsány požadavky sdružení a poté databázový model, kde byly objeveny kritické nedostatky v oblasti práce s cizími klíči. Tyto nedostatky byly odstraněny postupem popsaným v sekci 3.1. Další úpravy relačního modelu nebylo možné provést, neboť by vedly k nefunkčnosti původní verze informačního systému, což bylo v rozporu s požadavky sdružení. Po seznámení se strukturou databáze a její úpravou bylo pokračováno návrhem 3 modulů zabezpečujících funkcionalitu zvolených 3 částí. Moduly byly navrženy s použitím diagramu případů užití, podrobného textového popisu jednotlivých případů užití a entitně relačních diagramů, které jsou zaznamenány v sekcích 3.2, 3.3 a 3.4. V kapitole 4 byly popsány použité technologie a způsob, jakým jich bylo využito při vlastní implementaci, ať už se jednalo o serverovou stranu s užitím PHP a rámce Nette, tak klientskou stranu s užitím jazyka JavaScript společně s knihovnou jquery a na něm postavených prvků uživatelského rozhraní. Moduly byly nasazeny do testovacího prostředí sdružení Student Cyber Games a v blízké době budou nasazeny do produkčního prostředí, kde budou otestovány v plném provozu. 27

39 Literatura [1] Věstník MŠMT ČR [online]. Praha: Ministerstvo školství, mládeže a tělovýchovy, 2013, 40 s., srpen 2013[cit ]. Dostupné z: [2] GILMORE, Jason W. Velká kniha PHP 5 MySQL: kompendium znalostí pro začátečníky i profesionály. Vyd. 1. Brno: Zoner Press, ISBN x. [3] ARLOW, Jim a Ila NEUSTADT. UML 2 a unifikovaný proces vývoje aplikací: objektově orientovaná analýza a návrh prakticky. Brno: Computer Press, s. ISBN [4] PHP 5 CMS framework developmentexpert insight and practical guidance to create an efficient, flexible and robust web oriented framework. Edited by Martin Brampton. 2nd ed. Birmingham, UK: Packt Pub., viii, 397. ISBN [5] MACÁK, Jakub. Lezecký portál [online]. Masarykova univerzita, Fakulta informatiky, 2013, [cit ]. Dostupné z: Bakalářská práce. Masarykova univerzita, Fakulta informatiky. Vedoucí práce RNDr. Jaroslav Ráček, Ph.D. [6] MySQL 5.5 Reference Manual. ORACLE CORPORATION. MySQL :: MySQL 5.5 Reference Manual [online]. 1997, 2014 [cit ]. Dostupné z: [7] FLANAGAN, David. JavaScript: the definitive guide. 6th ed. Sebastopol, CA: O'Reilly, 2011, xvi, 1078 p. ISBN

40 Přílohy Soubor Bp.zip - Zdrojový kód implementovaných modulů - MySQL dotazy pro vytvoření testovací databáze - Běhové prostředí Apache HTTP server 2.2 s modulem PHP Pokyny k instalaci 29