UNICORN COLLEGE. Katedra informačních technologií BAKALÁŘSKÁ PRÁCE. Selftest systém v ASP.NET. Autor BP: Milan Klapač

UNICORN COLLEGE

Katedra informačních technologií

BAKALÁŘSKÁ PRÁCE Selftest systém v ASP.NET Autor BP: Milan Klapač Vedoucí BP: Ing. David Hartman Ph.D. 2013 Praha

Čestné prohlášení Prohlašuji, že jsem svou bakalářskou práci na téma Selftest systém v ASP.NET vypracoval samostatně, pod vedením vedoucího bakalářské práce a s použitím výhradně odborné literatury a dalších informačních zdrojů, které jsou v práci citovány a jsou také uvedeny v seznamu literatury a použitých zdrojů. Jako autor této bakalářské práce dále prohlašuji, že v souvislosti s jejím vytvořením jsem neporušil autorská práva třetích osob a jsem si plně vědom následků porušení ustanovení § 11 a následujících autorského zákona č. 121/2000 Sb. V Praze dne 1. 5. 2013

…….…………………………… (Milan Klapač)

Poděkování Děkuji vedoucímu bakalářské práce Ing. Davidu Hartmanovi Ph.D. za účinnou metodickou, pedagogickou a odbornou pomoc a další cenné rady při zpracování mé bakalářské práce.

Selftesst systém m v ASP P.NET Self‐tesst system m in ASP P.NET

5

Abstrakt Tato práce se zabývá návrhem a vývojem testovacího systému pro výukové a školící účely poskytující automatickou zpětnou vazbu uživatelům. Systém je realizován pomocí technologie ASP.NET. Je zde ukázáno jedno z možných řešení takovéto webové aplikace a možnosti jejího použití a dalšího rozšiřování. Kromě samotného návrhu a vývoje se práce zabývá popisem a analýzou změn, které přineslo HTML5, a možnostmi a výhodami jejich využití v kombinaci s ASP.NET. První část je věnována právě HTML5 a jeho použití v ASP.NET. Druhá část se pak zabývá návrhem a popisem aplikace. Na konci druhé části se nachází popis ovládání aplikace. Klíčová slova: HTML5, ASP.NET, JSON, RGraph, webová aplikace, návrh aplikace

Abstract This paper describes the design and development of a test system for educational and training purposes providing automatic feedback to users. The system is implemented using the ASP.NET technology. One of the possible solutions for such web applications and possibilities of their use and further dissemination is shown here. In addition to the design and development, this paper deals with the description and analysis of the changes, which HTML5 brought and the opportunities and benefits of their use in combination with ASP.NET. The first part is devoted to HTML5 and its application in ASP.NET. The second part deals with the design and description of the application. At the end of the second part, there is a description of how to work with the application. Keywords: HTML5, ASP.NET, JSON, RGraph, web application, application design

6

Obsah 1. Úvod .............................................................................................................................. 11 2. Popis technologií ........................................................................................................... 13 2.1. ASP.NET ................................................................................................................... 13 2.1.1. Webforms ........................................................................................................... 13 2.1.2. MVC ................................................................................................................... 13 2.1.3. Srovnání WebForms a MVC .............................................................................. 14 2.2. JavaScript .................................................................................................................. 14 2.3. JSON ......................................................................................................................... 14 2.4. Ajax ........................................................................................................................... 14 2.5. Další pojmy použité v práci....................................................................................... 15 2.5.1. Code-behind ........................................................................................................ 15 2.5.2. ADO.NET ........................................................................................................... 15 2.5.3. Entity Framework ............................................................................................... 15 2.5.4. Session ................................................................................................................ 15 2.5.5. Cookies ............................................................................................................... 16 2.5.6. Flash .................................................................................................................... 16 2.5.7. BTS ..................................................................................................................... 16 2.5.8. Unicorn Universe ................................................................................................ 16 3. HTML5 .......................................................................................................................... 17 3.1. Historie HTML .......................................................................................................... 17 3.2. Seznámení s HTML5................................................................................................. 18 3.3. Syntaxe HTML5 ........................................................................................................ 19 3.4. Struktura HTML5 ...................................................................................................... 20 3.4.1. Prvek header ....................................................................................................... 20 3.4.2. Prvek nav ............................................................................................................ 20 3.4.3. Prvek aside ......................................................................................................... 21 7

3.4.4. Prvek article ........................................................................................................ 21 3.4.5. Prvek section ....................................................................................................... 22 3.4.6. Prvek footer ........................................................................................................ 22 3.5. Formuláře .................................................................................................................. 22 3.5.1. Nové atributy ...................................................................................................... 23 3.5.2. Nové formulářové vstupní typy a prvky ............................................................. 25 3.6. Audio/Video .............................................................................................................. 27 3.7. Canvas a SVG ........................................................................................................... 29 3.7.1. Canvas................................................................................................................. 29 3.7.2. SVG .................................................................................................................... 30 3.8. Geolokace .................................................................................................................. 31 3.9. WebWorkers .............................................................................................................. 31 3.10. Drag and Drop ......................................................................................................... 31 3.11. Offline aplikace a WebStorage................................................................................ 32 3.11.1. Offline aplikace ................................................................................................ 32 3.11.2. Web Storage...................................................................................................... 33 3.12. Ostatní nové HTML5 prvky .................................................................................... 34 3.12.1. Prvek hgroup ..................................................................................................... 34 3.12.2. Prvek figure a figcaption .................................................................................. 34 3.12.3. Prvek progress a meter...................................................................................... 35 3.12.4. Prvek mark ........................................................................................................ 35 3.12.5. Prvek time ......................................................................................................... 35 3.12.6. Prvek details...................................................................................................... 35 3.12.7. Style a atribut scope .......................................................................................... 36 3.12.8. Atribut async ..................................................................................................... 36 4. HTML5 v ASP.NET...................................................................................................... 37 4.1. Nové strukturální prvky............................................................................................. 37 8

4.2. Validátory .................................................................................................................. 37 4.3. Nové vstupní typy ..................................................................................................... 38 4.4. Drag and Drop ........................................................................................................... 38 4.5. Audio a Video ........................................................................................................... 39 4.6. Canvas ....................................................................................................................... 39 5. Návrh aplikace ............................................................................................................... 40 5.1. Zadání ........................................................................................................................ 40 5.2. Role ........................................................................................................................... 41 5.3. Funkční požadavky.................................................................................................... 41 5.4. Nefunkční požadavky ................................................................................................ 42 5.5. Use case model .......................................................................................................... 43 5.5.1. Nepřihlášený uživatel a Public/Student .............................................................. 43 5.5.2. Teacher ............................................................................................................... 44 5.5.3. Admin ................................................................................................................. 45 5.5.4. Seznam případů užití .......................................................................................... 46 5.6. High level pohled ...................................................................................................... 48 5.7. Použité technologie ................................................................................................... 49 5.7.1. Knihovny třetích stran ........................................................................................ 49 5.8. Popis komponent systému ......................................................................................... 50 5.8.1. KlapacBP – hlavní projekt .................................................................................. 51 5.8.2. KlapacBPdata – podpůrný projekt ...................................................................... 66 5.9. Databázový model ..................................................................................................... 68 5.9.1. Selftesty .............................................................................................................. 68 5.9.2. Uživatelé ............................................................................................................. 71 5.9.3. Výsledky testů .................................................................................................... 73 5.10. Podrobný popis vybraných komponent ................................................................... 74 5.10.1. Zobrazení testu.................................................................................................. 74 9

5.10.2. Vyhodnocení testu ............................................................................................ 76 5.10.3. Dynamické načítání uživatelských komponent ................................................ 76 5.10.4. Grafy ................................................................................................................. 78 5.10.5. Drag and Drop .................................................................................................. 79 5.10.6. JSON ................................................................................................................. 82 6. Ovládání systému .......................................................................................................... 84 6.1. Absolvování testu ...................................................................................................... 85 6.2. Vytvoření nové otázky .............................................................................................. 86 6.2.1. Drag and Drop .................................................................................................... 87 6.3. Vytvoření testu .......................................................................................................... 87 6.3.1. JSON ................................................................................................................... 88 6.4. Typy otázek a odpovědí ............................................................................................ 88 6.4.1. Otázky ................................................................................................................. 88 6.4.2. Odpovědi............................................................................................................. 89 7. Závěr .............................................................................................................................. 92 8. Conclusion ..................................................................................................................... 94 9. Citovaná literatura ......................................................................................................... 96 10. Seznam obrázků........................................................................................................... 98 11. Seznam kódů ............................................................................................................. 100 12. Seznam tabulek .......................................................................................................... 101 13. Seznam příloh ............................................................................................................ 102 Příloha 1 – CD ................................................................................................................. 103

10

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET

1. Úvod V posledních dvou desetiletích došlo k výraznému rozvoji informačních technologií. Téměř každá domácnost má dnes vysokorychlostní připojení k internetu. S počítači se děti setkávají už v raném věku doma, ve školách apod. Díky internetu je snadno dostupné velké množství informací, mimo jiné i široké možnosti vzdělávání. Je zde možné nalézt mnoho kurzů či aplikací pro rozšíření znalostí. Kromě tohoto i školy začínají nabízet materiály ke studiu v elektronické formě. Některé (například zahraniční MIT1 nebo z českých Masarykova univerzita či Unicorn College s. r. o.) mají velmi kvalitní elektronický systém pro podporu vzdělávání a nabízejí studentům další možnosti nabytí a procvičení znalostí. Jsou to však spíše výjimky. I když jsou materiály studentům poskytovány, chybí možnost ověřit si míru získaných znalostí. Podobná situace je i u webových portálů zabývajících se vzděláváním. Ty sice nabízejí možnost ověření znalostí pomocí různých testů, ale mnoho z těchto portálů zastarává a nevyužívá plně možností nových technologií. Tyto technologie mohou na jedné straně velmi usnadnit vývoj kvalitní aplikace (nejen) pro sebevzdělávání, na druhé straně nabídnout uživatelům bohaté funkčnosti, které by bez těchto technologií nebylo možné vůbec, či jen s obtížemi, vytvořit. Například www.HelpForEnglish.cz poskytuje velmi kvalitní materiály pro zlepšení znalostí anglického jazyka. Přestože je velká část webu zaměřena na testování znalostí, je zde jediný typ otázky, a to výběr z předpřipravených možností (otázky „ABC“). Součástí některých zadání testů jsou i audio nahrávky, ale pro jejich přehrání je potřeba mít nainstalovaný dodatečný software. Možnost řešení těchto nedostatků poskytuje HTML5. Umožňuje vytvořit, pro výuku angličtiny vhodné, přiřazování dvojic slov k sobě pouhým přetahováním objektů na stránce. Mimo jiné má i schopnost nahradit současný přehrávač audia vlastními prvky, které ke své funkci jiný software nepotřebují. Tyto výhody poskytují příjemnější práci uživatelům a zefektivňují proces sebevzdělávání. Proto se v této práci zabývám návrhem a vývojem systému pro testování znalostí, který využívá nových technologií a nabízí široké možnosti v oblasti tvorby testů. Zahrnuje více druhů otázek (audio/video, obrázky, přetahování, doplňování do textu a další), statistiky výsledků či nahrávání souborů metodou Táhni a Pusť (Drag and Drop). Tato aplikace slouží jako základní stavební kámen pro její další rozvoj dle specifických požadavků jed-

1

http://www.mit.edu/

11

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET notlivých provozovatelů, kteří o ni budou mít zájem. Snadná rozšiřitelnost (hlavně o nové typy otázek) je jednou z klíčových vlastností systému. V první části jsou popsány vybrané technologie týkající se webových aplikací. Velký důraz je kladen na HTML5. Jsou zde novinky, které přináší, a rady, jak je správně a vhodně použít. Na konci této části je pak popsána práce s HTML5 v ASP.NET. Další část se zabývá návrhem a popisem samotné aplikace. Je zde analýza požadavků, pohledy na systém a popis jeho částí. Kromě toho ukazuje příklady využití HTML5 a výhody či problémy, které to přináší. Dále jsou zde řešení problémů, které mohou při vývoji takovéto aplikace nastat. V poslední části je pak ukázáno ovládání aplikace. To má za úkol usnadnit novým uživatelům lepší orientaci v systému a popsat složitější funkčnosti, které nabízí. Zároveň slouží jako ukázka aplikace a použití implementovaných funkčností z pohledu uživatele.

12


2. Popis technologií 2.1. ASP.NET ASP.NET (Active Server Pages .NET) je technologie pro vývoj dynamických webových stránek od společnosti Microsoft (LEE, 2005 str. 1). Je součastí .NET frameworku. Název převzala z technologie ASP, která byla předchůdcem ASP.NET a sloužila k tvorbě dynamicky zpracovávaných stránek na straně serveru. I když zůstal tento koncept zachován, nelze říct, že by ASP.NET byla jen její vylepšená verze. ASP.NET těží z vlastností .NET frameworku, jako je například CLR (Common Language Runtime), díky němuž lze psát webové stránky v jakémkoliv jazyce podporujícím CLR. Lze rozdělit na dvě hlavní větve, a to na WebForms a MVC.

2.1.1. Webforms Webforms vzniklo dříve než MVC, konkrétně v roce 2002. Jeho hlavní myšlenkou je vyřešit bezestavovost HTTP protokolu. To řeší kombinací HTML a JavaScriptu a za pomoci dvou základních mechanizmů. Prvním je View state, který má za úkol uchovávat hodnoty na webové stránce persistentní, aby nedocházelo k jejich ztrátě mezi požadavky na server. Toho je docíleno uchováváním hodnot jednotlivých prvků na stránce v zakódovaném tvaru ve speciálním skrytém poli. To však samo o sobě nestačí, jelikož kvůli bezestavovosti HTTP by server neměl potřebné informace o předchozích požadavcích klienta. To řeší druhý mechanizmus zvaný Session state. Ten má naopak na starosti uchovávat na serveru potřebná data o celkovém průběhu relace. S každým požadavkem klienta je tak odeslán i identifikátor dané relace a vše potřebné je podle něj dohledáno na serveru. Díky tomu nemusí být všechna data posílána neustále a sníží se tak objem přenášených dat. Na druhou stranu však roste zátěž serveru, jelikož musí tato data uchovávat. (ASP.NET, 2012 str. 1)

2.1.2. MVC MVC je mladší alternativa WebForms a její vývoj začal v roce 2008. Umožňuje tvorbu webových aplikací podle architektury Model-View-Controller. Nepoužívá již View state a je nezávislá na JavaScriptu, který je u WebForms nezbytný k spouštění jednotlivých událostí, na kterých je založen. (ASP.NET, 2012 str. 1)

13


2.1.3. Srovnání WebForms a MVC Jak WebForms, tak MVC mají své výhody i nevýhody a hodí se pro různé typy aplikací. MVC díky rozdělení na model, view a controller usnadňuje zvládání komplexních aplikací a umožňuje snadnější vývoj ve větších týmech. Jelikož nepoužívá View state a serverové formuláře jako Webforms, mají vývojáři větší kontrolu nad chováním aplikace. Na druhou stranu, co je pro někoho výhodou, je pro jiného nevýhodou. A tak právě Webforms díky bohaté nabídce předpřipravených serverových prvků, View state a efektivní práci s daty usnadňuje vývoj webové aplikace a umožňuje například využít vlastností AJAXu i bez znalosti JavaScriptu. Je vhodný spíše pro menší týmy vývojářů, zvláště pro takzvaný Rapid Application Development přístup vývoje softwaru.

2.2. JavaScript JavaScript je programovací jazyk, který se používá na webových stránkách. Je součástí stránky a je spouštěn až na klientském počítači. Díky němu lze oživit stránky a přidat jim zajímavé funkčnosti. Nové HTML5 hojně využívá tohoto jazyka a poskytuje mu API pro další možnosti využití nových HTML5 prvků (například audio či Drag and Drop). I v samotném ASP.NET (zvláště u Webforms) je mnoho funkčností přímo závislých na JavaScriptu. Ze serverových prvků se generují klientské skripty pro validace či u tlačítek JavaScriptem volané dotazy na server.

2.3. JSON JSON (JavaScriptový objektový zápis) je způsob zápisu dat s důrazem na jejich čitelnost pro člověka i počítač. Data jsou ukládána ve tvaru klíče a hodnoty v textové formě. Používá se (mimo jiné) k serializaci objektů a jejich přenosu sítí, například ze serveru ke klientovi či naopak. Jedná se o jazykově a platformně nezávislý formát, proto je vhodný i k výměně dat mezi rozdílnými systémy. (CHOW, 2007)

2.4. Ajax Ajax (Asynchronní JavaScript a XML) je označení pro způsob vývoje webových stránek. Ty mohou být poté dynamicky modifikovány programovacím jazykem, který si vyžádá data pouze v případě, kdy je potřebuje bez nutnosti znovu načítat celý obsah stránky. (GROSS, 2006 str. 1). 14


2.5. Další pojmy použité v práci 2.5.1. Code‐behind Tento termín označuje kód ASP.NET stránky, který je od ní oddělen a nachází se v samostatném souboru. To umožňuje oddělení HTML kódu od prezentační logiky. (Microsoft, 2007)

2.5.2. ADO.NET ADO.NET (Microsoft ActiveX Data Objects .NET) představuje množinu tříd nabízejících služby pro přístup k datům a tvorbu databázových aplikací. Daty máme nyní na mysli převážně informace uložené v databázích. Ať se již jedná o data v databázích například na Microsoft SQL Serveru či data zpřístupněná přes OLE DB nebo XML. Mezi jeho přednosti patří především jednoduchý způsob použití, rychlost při zpracování a další. Stačí vytvořit spojení se serverem, s kterým budeme chtít pracovat, pomocí zvoleného adaptéru a zadaného dotazu získat z databáze data a ty pak načíst do některé z připravených konstrukcí pro práci s daty z tabulek. (BĚHÁLEK, 2007 stránky 1, kapitola 7)

2.5.3. Entity Framework Poskytuje platformu pro objektově-relační mapování, které dokáže pracovat s relačními daty jako doménově specifickými objekty a odstraňuje tak potřebu vytvářet většinu obslužného kódu pro přístup k datům. (Microsoft, 2012)

2.5.4. Session Session reprezentuje specifické spojení mezi klientským počítačem a hostujícím počítačem, které umožňuje vzájemnou komunikaci. Termín označuje množinu dat, která toto spojení umožňuje, ale také se používá pro označení času, během kterého komunikace probíhá. (Microsoft, 2010)

15


2.5.5. Cookies Cookies jsou malé soubory uložené na klientském počítači webovým serverem. Ten je používá pro identifikaci uživatele. Cookies může číst pouze server, který je do počítače uložil. (Microsoft, 2005)

2.5.6. Flash Adobe Flash je software pro tvorbu vektorové grafiky, animací a multimediálního obsahu. Flash se používá mimo jiné pro přidání audio a video přehrávačů či interaktivního obsahu do webových stránek. Zobrazení zajišťuje Adobe Flash Player. (Adobe.com, 2012)

2.5.7. BTS BTS (Base Transceiver Station ), česky základnová převodní stanice, je vysílač a přijímač rádiových signálů (ITBiz.cz). V práci se konkrétně jedná vysílač a přijímač signálů mobilních telefonů.

2.5.8. Unicorn Universe Unicorn Universe (UU) je internetová služba provozující informační systémy založené na platformě Unicorn ES. Je určena pro řízení podniku, zaznamenávání a sdílení informací, řízení podnikových procesů, zadávání úkolů a sledování jejich plnění. (POLÁKOVÁ, 2010 str. 3)

16


3. HTML5 3.1. Historie HTML HyperText Markup Language (HTML) je značkovací jazyk určený pro tvorbu internetových stránek v systému World Wide Web (WWW). Tento jazyk vznikl před více než dvaceti lety ve švýcarském CERNu. Od té doby prodělal mnoho změn. Rozdělil se na dvě větve (HTML a XHTML) a nyní je aktuálně ve verzi HTML5, která opět spojuje tyto dvě větve do jedné. Pojďme se však podívat na samotný začátek vzniku HTML. Vše začalo v roce 1989 ve švýcarském CERNu. Tim Berners-Lee zde pracoval v oddělení správy výpočetní techniky, když dostal nápad na vytvoření portálu, kde by si mohli vědci z celého světa vyměňovat informace. Nemělo však jít pouze o poskytování informací (vědeckých prací, výsledků výzkumů apod.) ke stažení, ale tyto dokumenty měly být navzájem provázány. Čtenář jedné práce tak mohl snadno, díky provázání dokumentů, přejít na jinou práci poskytující například rozšiřující informace k danému tématu. A právě k tomuto účelu navrhl první verzi HTML. HTML bylo silně založeno na jazyku SGML (Standard Generalized Mark-up Language), což byl obecně uznávaný jazyk pro strukturování textu. V září roku 1991 rozpoutal Tim Berners-Lee po internetu diskusi o jazyce HTML, jeho budoucnosti a vývoji. O tyto nápady projevilo zájem mnoho odborníků a veřejně se tak diskutovalo o vlastnostech, které by HTML mělo mít. V roce 1992 začaly vznikat první webové prohlížeče, zatím pouze v textovém režimu. V tomtéž roce v NCSA (National Center for Supercomputer Applications) započaly práce na grafickém webovém prohlížeči Mosaic, jehož první verze byla vydána roku 1993. Objevil se zde i návrh HTML verze 2.0, která sjednocovala dosavadní zlepšení přidaná do HTML 1.0 a navíc přidala práci s formuláři. V roce 1994 byla vydána vylepšená verze prohlížeče Mosaic nazvaná Netscape. Téhož roku na scénu vstoupilo sdružení W3C (World Wide Web Consorcium), jehož cílem byl plynulý a organizovaný rozvoj internetu a HTML. Oficiální verze HTML 3.2 byla vydána roku 1996. Tato verze navíc přidala práci s tabulkami. O rok později vyšla verze 4.0, která rozšířila práci s tabulkami, formuláři a přidala rámy, kaskádové styly a skriptování. Zde se vývoj jazyka prakticky zastavil. V roce 1999 byla vydána verze 4.01, která pouze opravovala drobné chyby v předchozí specifikaci, ale nové elementy přidány nebyly. ( RAGGETT, a další, 1998) 17

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET S příchodem XML vznikla v roce 2000 další specifikace HTML, a to konkrétně XHTML ve verzi 1.0. Ta měla syntaxi odvozenou od XML, nikoliv od SGML jako původní HTML, avšak jinak se tato specifikace výrazně nelišila od HTML 4.0. W3C poté začalo pracovat na nové verzi XHTML 2.0, které měla přinést nové funkčnosti. Avšak za cenu nekompatibility s předchozími verzemi XHTML a HTML. To byl pro výrobce prohlížečů příliš radikální krok, a tak založili v roce 2004 organizaci WHATWG (The Web Hypertext Application Technology Working Group), která začala vyvíjet vlastní specifikaci (Web Applications 1.0 - dnešní HTML5). Rozštěpení vývoje HTML však nebylo žádoucí, a tak po dlouhých diskusích W3C ukončilo vývoj XHTML 2.0 a společně s WHATWG začalo v roce 2007 pracovat na HTML5. (GOLDSTEIN, a další, 2011 stránky 25,26)

3.2. Seznámení s HTML5 HTML5 je aktuálně nejnovější verzí tohoto jazyka. Tato specifikace je stále ve vývoji. První verze 5.0 by měla být dokončena roku 2014 a verze 5.1 o dva roky později. HTML5 v sobě spojuje všechny platné prvky z HTML4 a XHTML 1.0 a navíc přidává mnoho nových elementů, funkcí a API založených na skriptech. Mimo to upravuje sémantiku, aby byl web lépe čitelný lidem i strojům. HTML5 se snaží reagovat na změny v potřebách programátorů a uživatelů a umožnit tvorbu webu bez nutnosti používat další pluginy jako Flash či SilverLight. Zde je také třeba uvést, že termín „HTML5“ je často používán i pro jiné nové technologie a funkce, které však nejsou součástí HTML5 specifikace. Některé tyto funkce dříve byly jeho součástí, ale později se oddělily do samostatné větve. Existují i technologie, které nikdy nebyly součástí HTML5, přesto jsou často zahrnovány pod tento termín. Jedná se například o offline úložiště či API pro geolokaci. Pro potřeby této práce budeme i na tyto technologie odkazovat jako na HTML5. (GOLDSTEIN, a další, 2011 stránky 23,24) (W3.org, 2012) Konsorcium W3C při návrhu HTML5 postupovalo dle principů, které mají zajistit, že bude fungovat téměř na jakékoliv platformě a že bude kompatibilní se staršími prohlížeči (W3.org, 2007). To se mu zatím dle mého názoru daří, jelikož i většina přidaných funkcí funguje ve starších prohlížečích nebo alespoň nepůsobí chyby a místo nich se vykreslí prvky, které starší prohlížeče znají. Nová verze jazyka přináší nové prvky pro práci s audiem a videem, zjednodušuje sémantiku webu, zavádí nové elementy pro strukturování stránky (například section, hea18

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET der, footer, aside), prvky a API pro práci s grafikou, offline úložiště, rozšiřuje práci s formuláři a více se zaměřuje na strojové zpracování webové stránky (W3.org, 2012). V následujících podkapitolách si stručně tyto změny představíme.

3.3. Syntaxe HTML5 Jednou ze změn v HTML5 je zjednodušení zápisu vybraných elementů. Spolu s přidáním nových elementů pro strukturování stránky (viz následující kapitola Struktura HTML5) je tak kód stránky více přehledný. Cílem bylo co nejvíce zjednodušit zápis kódu při zachování kompatibility se staršími prohlížeči. Co není nutné pro správné vykreslení stránky, není v HTML5 vyžadováno. Na obrázku 1 je uvedena nejjednodušší syntaxe HTML5 dle W3C. Kód 1 - HTML5 syntaxe

Zdroj: Vlastní zpracování

Jak je z obrázku patrné, došlo především k výraznému zjednodušení deklarace typu dokument (doctype). Pro srovnání v HTML 4.01 Transitional vypadala následovně:

Transition-

Dále došlo ke zjednodušení definice znakové sady v prvku head, která byla zkrácena na nezbytné minimum. Prvek script je nyní oproštěn od nutnosti uvádět atribut type, jelikož je JavaScript nejrozšířenějším a prakticky jediným běžně používaným skriptovacím jazykem pro webové stránky. (GOLDSTEIN, a další, 2011 str. 37) Zjednodušené, respektive benevolentnější, jsou nyní i zápisy prvků a atributů. Jejich názvy mohou obsahovat malá i velká písmena a hodnoty atributů lze uvádět i bez uvozovek (ale pouze pokud neobsahují mezeru). Nepárové prvky nyní není nutné ukončovat lomítkem, dokonce i některé párové prvky toto nevyžadují (například
), avšak tuto „výhodu“ bych nedoporučoval, jelikož to může vést k nepřehlednosti kódu.

19


3.4. Struktura HTML5 Nová verze HTML vylepšuje strukturování stránky přidáním několika nových elementů. Umožňují zpřehlednit zdrojový kód, který se tak stává pro člověka čitelnějším. Navíc vzhledem k danému významu těchto elementů je kód lépe strojově zpracovatelný (mobilní prohlížeče, vyhledávací roboti). Dříve bylo potřeba pro členění stránky použít elementy
a přiřadit jim potřebné identifikátory. Z těchto
elementů však nedokázali roboti indexující stránky správně pochopit strukturu dokumentu. Díky těmto novým prvkům dokážou vyhledávače nabídnout relevantnější výsledky, jelikož správně pochopí, která část dokumentu obsahuje hlavní sdělení. Na obrázku 1 je ukázána základní struktura webu za použití nových HTML5 elementů. Obrázek 1 - Struktura webu v HTML5

Zdroj: http://interval.cz/podklady/1999-2008/hunt/1434/structure-html5.png

3.4.1. Prvek header Prvek header slouží k označení obsahu vyjadřujícího úvod či hlavičku stránky nebo sekce. Dle specifikace WHATWG (2013 str. 21) se používá pro „skupinu úvodních či navigačních

pomůcek“.

Jedná

se

tedy

o

element,

který

odpovídá

dřívějšímu

, ale s tím rozdílem, že může být na stránce použit vícekrát. Může tak sloužit nejen jako hlavní hlavička stránky, ale i pro označení úvodu kapitol, titulků článků apod.

3.4.2. Prvek nav Jak už název napovídá, prvek nav slouží k označení bloku, který obsahuje navigační odkazy. Dle doporučení WHATWG (2013 str. 11) by se měl tento prvek používat pouze pro 20

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET bloky navigací prvořadé důležitosti. Pod tím si lze představit například hlavní menu stránky. Na druhou stranu, třeba často používané odkazy v patičce na podmínky serveru, domovskou stránku apod. nemusejí být v nav elementu a je pro ně plně dostačující ohraničení prvkem footer . Z tohoto prvku mohou těžit zdravotně postižení uživatelé, kteří používají tzv. čtenáře obrazovek (screen readers). Umožňuje jim totiž identifikovat bloky obsahující navigaci a přeskočit je. Nemusejí tak například při přechodu na novou stránku opětovně poslouchat navigační odkazy. Dle této definice však není úplně jasné, které druhy odkazů patří do tohoto prvku a které by tam již být neměly. Mezi vývojáři a odborníky neexistuje shoda ani žádné univerzální pravidlo, jak toto určit. Například Ian Hickson, přední editor HTML5 specifikace u WHATWG, tento problém shrnul jednou takto: „Použijte ho tam, kde byste dříve psali class=nav“ (2009 str. 7). Nakonec jeho použití stejně záleží pouze na osobních preferencích jednotlivých vývojářů.

3.4.3. Prvek aside „Tento prvek reprezentuje část stránky, která pouze okrajově souvisí s obsahem okolo prvku aside a kterou lze považovat za oddělenou od tohoto obsahu“ (W3.org, 2011 str. 4). Dle této definice je vhodné použít prvek aside pro části obsahu, které okrajově souvisí buď s danou sekcí obsahu (například article – viz dále), anebo se vztahují obecně k dané stránce. Na druhou stranu by naopak neměly být tímto prvkem obaleny části stránky přímo související s hlavním obsahem. Mezi vhodná použití tohoto prvku patří například postranní panel, blok reklam či blok pro seskupení nav elementů.

3.4.4. Prvek article „Prvek article reprezentuje soběstačnou kompozici v dokumentu, stránce, aplikaci nebo webu, která je v principu nezávisle distribuovatelná nebo opětovně využitelná (například při publikování)“ (W3.org, 2011 str. 8). Zde jsou důležitá slova soběstačná kompozice a nezávisle distribuovatelná. Tento prvek by se měl dle definice používat pro část stránky, která tvoří samostatný a nezávislý celek. Tím může být například, z názvu vyplývající, článek, příspěvek v diskusním fóru či položka blogu. Tímto se liší od podobného prvku section, který seskupuje tematický příbuzné části obsahu.

21


3.4.5. Prvek section Dalším z nových prvků pro strukturování stránky je prvek section. Ten je dle WHATWG (2013 str. 7) definován jako prvek reprezentující obecnou sekci dokumentu nebo aplikace. Sekce v tomto kontextu znamená tematické seskupení obsahu, typicky s vlastní hlavičkou. Dále je ve specifikaci uvedeno, že by se neměl používat jako obecný kontejner, například pro vytvoření požadovaného layoutu. K tomu slouží element div. Avšak tyto definice vedly k vlně diskusí na téma vhodného použití prvku section. Mezi správná použití patří jednotlivé sekce dlouhého dokumentu (například obchodní podmínky) či seskupení článků online magazínů (sport, ekonomika, zahraniční zprávy). I sám Bruce Lawson, respektovaná autorita HTML5, připustil, že tento prvek používal nesprávně (LAWSON, 2009). Obecně lze k použití říct, že pokud existuje nějaký specifičtější prvek (nav, article apod.), je vhodnější použít ten. Dále by měl seskupovat tematicky příbuzný obsah. Pokud nejsme schopni několika slovy popsat obsah, který chceme dát do prvku section, je lepší použít jiný neutrální prvek, například div.

3.4.6. Prvek footer Tento prvek označuje zápatí stránky či určitého obsahu. Použije se tam, kde se dříve používal prvek
. Jeho pozice na stránce není však pevně definována a na jedné stránce, podobně jako u prvku header, se může vyskytovat vícekrát. Je tak vhodný i pro zobrazování autora příspěvku v diskusním fóru.

3.5. Formuláře Formuláře jsou nedílnou a velmi významnou součástí HTML. Dřívější verze HTML ale neposkytovaly některé základní funkčnosti. Formuláře v HTML5 doznaly většího množství změn a podporují nativně i funkčnosti, které dříve musely být řešeny například Java– Scriptem. Jedná se kupříkladu o podporu validací či zástupných textů polí. Proto je jejich vytváření nejen jednodušší, ale jsou i příjemnější pro uživatele. Vzhled těchto prvků je totiž vytvářen přímo prohlížečem, a tak jsou konzistentnější napříč rozdílnými stránkami. Nejdříve si představíme nové atributy formulářových prvků, poté nové druhy vstupních polí a na závěr změny ve stávajících prvcích oproti dřívějším verzím HTML.

22


3.5.1. Nové atributy S novými atributy formulářových prvků je výrazně snazší implementování některých základní vlastností, které bylo dříve nutné řešit jinými technologiemi. Prvním z nich je atribut required. 3.5.1.1. Atribut required Tento atribut označuje povinné vstupní pole. Je možné jej přiřadit všem vstupním prvkům kromě button, color, hidden a range. V případě pokusu odeslat formulář obsahující pole s tímto atributem dojde k zastavení odeslání a uživateli prohlížeč zobrazí hlášku s popisem chyby a nastaví focus na daný prvek. Na obrázku 2 je vidět, jak vypadá tato zpráva v prohlížeči Google Chrome. Obrázek 2 - HTML5 required


3.5.1.2. Atribut pattern Dalším atributem pro validace vstupů je pattern. Ten umožňuje určit regulérní výraz, který musí daný vstup splňovat, aby bylo možné považovat pole za validní. Bohužel hláška zobrazovaná prohlížečem neříká nic o formátu, který od uživatele požadujeme. Je tedy vhodné přidat atribut title s doplňujícími informacemi o požadovaném vstupu. Ten se uživateli zobrazí při najetí myší na dané pole, ale hlavně při validaci spolu se standardní hláškou, jak můžete vidět na obrázku 3. Obrázek 3 - HTML5 pattern


23

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET V HTML pak tato definice vypadá následovně (uvnitř prvku input): pattern="\S{6,10}" title="Heslo musí být dlouhé 6 až 10 znaků". “S“ označuje neprázdné znaky a čísla v rozsahu od šesti do deseti. Nakonec je důležité poznamenat, že pokud regulérní výraz není platný, bude se jeho validace ignorovat a formulář se tak odešle, ať je zadána jakákoliv hodnota. 3.5.1.3. Atribut placeholder Použití atributu placeholder jste mohli vidět již na obrázku 2. Umožňuje definovat text, který se má zobrazit v nevyplněném poli. Je vhodné jej použít jako nápovědu pro uživatele, jakou hodnotu od něj požadujeme. Hodnota placeholderu není součástí pole a při validacích je takové pole stále chápáno jako prázdné. Text se zobrazuje pouze, pokud nemá dané pole focus. To i v případě, že v daném prvku již uživatel byl, ale nic nevyplnil a zase jej opustil. 3.5.1.4. Atribut disabled Atribut disabled byl již ve starších verzích HTML, ale v HTML5 je rozšířen o možnost nastavit jej u jakéhokoliv prvku formuláře (s jedinou výjimkou, a tou je nový prvek output, pro který nemá smysl). Nově lze tak použít i pro prvek fieldset, čímž se aplikuje na všechny formulářové prvky uvnitř a ušetří tím práci s vyplňováním atributu u jednotlivých polí. Prvky s tímto atributem jsou zobrazeny šedivě a uživatel s nimi nemůže interagovat. Je však třeba mít na paměti, že se hodnoty těchto prvků neodesílají s formulářem a nejsou tak dostupné na serveru pro další zpracování. Pokud tedy potřebujete s těmito hodnotami pracovat, použijte atribut readonly. Disabled je vhodný například pro deaktivování tlačítka pro odeslání formuláře v případě, že není validně vyplněn. 3.5.1.5. Atribut readonly Podobně jako disabled znemožňuje atribut readonly editovat hodnotu pole uživatelem. Liší se ale tím, že prvek s tímto atributem může získat focus (kromě prohlížeče Google Chrome) a vypadá jako klasické povolené vstupní pole. Pouze do něj nemůže uživatel zadat hodnotu. Tato vlastnost může při špatném použití mást uživatele, jelikož nemusí být patrné, že do daného pole nic psát nemá, i když má kurzor pro psaní. Zde bych tedy preferoval přístup prohlížeče Google Chrome, který pole zobrazuje sice stejně jako povolené vstupní pole, ale bez kurzoru. Je tak zřejmější, že daná hodnota je jen pro čtení. 24

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET 3.5.1.6. Atribut autofocus Jak již název napovídá, tento atribut označuje prvek, kterému je automaticky po načtení stránky přidělen focus. Prvek s tímto atributem by měl být na stránce pouze jeden. V případě, že je na stránce prvků s tímto atributem více, liší se chování podle prohlížeče. Například Internet Explorer 10 a Mozilla Firefox 20 nastaví focus prvnímu prvku. Naopak Google Chrome se opět odlišuje a nastaví jej až poslednímu prvku s tímto atributem (testováno ve verzi 26). 3.5.1.7. Atribut form Tento atribut umožňuje sdružit formulářové prvky s formulářem, ve kterém nejsou přímo vloženy. Normální chování formuláře je, že při odeslání odešle všechny své vnořené prvky. Díky tomuto atributu lze však přiřadit k danému formuláři i prvek, který se v něm přímo nenachází. Jeho hodnota je pak odeslána spolu s formulářem. 3.5.1.8. Atribut multiple Atribut z dřívější verze HTML sloužící k zadání více hodnot do formulářového prvku se dočkal rozšíření. Původně jej šlo aplikovat pouze na prvek select. Nyní jej lze používat i ve vstupních typech file a email. Umožňuje tak vybrat uživateli více souborů či zadat více emailových adres. 3.5.1.9. Atribut list Tento atribut souvisí s novým vstupním typem, a tím je datalist. Datalist umožňuje definovat seznam hodnot, které se následně spojí se vstupním polem právě pomocí atributu list. Hodnoty v tomto seznamu obsažené pak slouží uživateli jako našeptávač při zadávání vstupu do formulářového prvku.

3.5.2. Nové formulářové vstupní typy a prvky V HTML5 byl také rozšířen počet typů vstupních polí formuláře. Jde o hodnoty atributu type prvku input. Oproti deseti původním je jich nyní dvacet tři. Liší se hlavně způsobem zobrazování, práce s daty a jejich validacemi. Stejně jako je snahou v celé koncepci HTML5, je i zde zachována kompatibilita se staršími prohlížeči a v případě, že jej neznají, zobrazí původní typ „text“. Nové typy si jen stručně představíme, jelikož jsou si velmi po-

25

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET dobné. Zobrazování nových typů v prohlížeči Google Chrome můžete vidět na následujícím obrázku. Obrázek 4 - Nové HTML5 formulářové prvky


Došlo tedy k rozšíření o typy: date, datetime, month, week, time, datetime-local, number, range, color, email, url, search a tel. Prvních šest polí pracuje s datem a časem a usnadňuje jeho zadávání (kromě typu time) pomocí prvku pro výběr data, který je na obrázku číslo 5. Jejich význam je patrný z názvu, jen rozdíl mezi datetime a datetime-local spočívá v zobrazení datového pásma typem datetime. Dále jste si mohli všimnout, že typ datetime nemá podporu v prohlížeči Google Chrome ani ve verzi 26. Obrázek 5 - HTML5 výběr data


Dalším zajímavým typem je color, který umožňuje vybrat barvu pomocí prvku pro výběr barvy (tzv. color picker). Posledním typem, který se více odlišuje od klasického „text“ je range, který umožňuje vybrat číslo z daného rozsahu posuvníkem. Ostatní typy se na klasickém počítači liší pouze validací daného pole. Zde bych ale přednastavené for26

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET máty jednotlivých polí označil jako nedostatečné, jak je vidět z obrázku 5, kde jsou zadány dle validátoru validní vstupy. Email je tak validován pouze na nějaký text před zavináčem a za ním. URL adresa zase může obsahovat téměř cokoliv (anebo také nic), nesmíme však vynechat „http://“. Takže uvedená adresa je validní, ale „www.seznam.cz“ neprojde. To je dle mého názoru zbytečně obtěžující pro uživatele. Uvedl jsem také, že se liší pouze validací na klasickém počítači. To je z toho důvodu, že například mobilní telefony (či tablety) mění dotykovou klávesnici dle typu pole a nabídnou tak uživateli čísla při vstupu do pole number či speciální znaky v poli URL. Kromě těchto typů přibyl i nový prvek output, který je určen pro pole zobrazující vypočtenou hodnotu uživateli, se kterou by neměl manipulovat. Je vhodné ho použít například u pole s celkovou hodnotou objednávky, které se počítá z jednotlivých cen, popřípadě slevy. Tento prvek může obsahovat atribut for označující pole, které se podílí na výpočtu výsledku prvku output.

3.6. Audio/Video Nové prvky audio a video jsou velmi významnou novinkou v HTML5. Umožňují totiž přehrávat na stránce video či zvuk bez nutnosti instalace softwaru jiných firem. Doteď bylo nutné mít nainstalován zásuvný modul v prohlížeči, který umožňoval přehrávat video určené pro daný software. Jedná se například o QuickTime, RealPlayer, Silverlight a nejvíce rozšířený Flash Player od společnosti Adobe. Nevýhodou tohoto řešení je neexistující standard pro vkládání videa a zvuku na webové stránky a nutnost instalovat dodatečný software (a kvůli neexistenci standardu nejen jeden). Dále například Flash Player má firma Adobe pod výlučnou kontrolou, což také není jistě ideální. Tuto situaci se snaží zlepšit právě HTML5, které by se mohlo stát standardem a umožňovalo by přehrávat video i audio bez softwaru jiných firem. Zatím však není situace zdaleka ideální. Problémy jsou s podporou prohlížečů. Pro video a audio na webu jsou důležité kontejnerové formáty a kodeky. Kontejner je obal obsahující veškerá nezbytná data, ze kterých se skládá soubor videa či audia. Do jednoho souboru (kontejneru) lze tak uložit například jednu stopu videa, více stop audia (například různé jazyky) a dále několik titulků. Uživatel si pak může vybrat, jakou kombinaci chce použít. Naproti tomu kodek definuje algoritmus, který je použit pro zakódování a dekódování videa či audia (odtud název kodek). Kodeky tak ukládají data do zakódované formy,

27

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET například za účelem přenosu, a poté je zpětně dekódují do podoby vhodné k zobrazení či editaci. Následující tabulka ukazuje podporu těchto formátů v jednotlivých prohlížečích: Obrázek 6 - Podpora audio/video formátů prohlížeči

Zdroj: http://www.longtailvideo.com/html5/

Jak je vidět z tabulky, nejsoudržnější skupinou jsou prohlížeče Internet Explorer, Safari, iOS a Android, které podporují MP3,MP4 a AAC. Dále Google Chrome, který přidává navíc podporu pro WebM a Vorbis. Druhou skupinou je Mozilla Firefox a Opera, které naopak podporují pouze WebM a Vorbis. Při používání audia či videa na stránce je tak potřeba brát tyto rozdíly v potaz a v ideálním případě poskytovat audio a video v různých formátech, aby jej bylo možné přehrát v co největším počtu prohlížečů. Samotné vložení audia či videa na stránku je velmi prosté. Stačí vytvořit daný prvek, nastavit cestu v atributu src a máme video na stránce. Kód pak vypadá následovně: Kód 2 - Prvek video


Controls říká prohlížeči, aby zobrazil i ovládací tlačítka pro spuštění či pozastavení daného média. V případě, že chceme video ovládat vlastními prvky, vynecháme tento atribut a nastavíme si vlastní ovládání pomocí JavaScriptu. Dále můžeme těmto prvkům nastavit atribut loop pro opakované přehrávání, autoplay pro automatické spuštění, preload pro načtení obsahu před samotným spuštěním a u videa atribut poster, který udává obrázek, který se zobrazí na místě videa před jeho spuštěním. Pro docílení kompatibility s více prohlížeči může mít každý prvek specifi-

28

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET kován několik zdrojů s různými formáty a daný prohlížeč si pak vybere ten, který umí přehrát.

3.7. Canvas a SVG 3.7.1. Canvas Canvas je nový prvek HTML5, který představuje „plátno“, na které lze pomocí JavaScriptu mimo jiné kreslit obrazce. Jeho definice je jednoduchá a specifikuje pouze velikost tohoto prvku a identifikátor. Kód 3 - Prvek canvas


Mezi značky elementu lze napsat zprávu, která se uživateli zobrazí v případě, že jeho prohlížeč canvas nepodporuje. Samotné kreslení bez použití dalších knihoven není zrovna přívětivé. I když lze vytvořit velmi pěkné prvky, je to složité a časově náročné. Například pro ukázku následující kód pouze vykreslí do plátna kružnici: Kód 4 - Canvas funkce pro vykreslení kružnice


Pro přímé vykreslování grafiky tak není moc vhodný. Na druhou stranu nám umožňuje přímo pracovat s jednotlivými pixely a umí například překreslit obrázek pixel po pixelu na plátno, kde ho lze již poměrně jednoduše upravovat. Je také možné měnit barvy a vytvářet zajímavé efekty na obrázcích (dokonce lze manipulovat s videem). Existují také specializované knihovny, díky nimž můžeme jednoduše vytvořit působivé i interaktivní prvky. Velmi povedenou knihovnou pro canvas je RGraph, která je navíc zdarma. Její použití je velmi intuitivní a jednoduché, jde pomocí ní oživit web zají29

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET mavými prvky. Tato knihovna je použita pro zobrazování grafů v přiložené aplikaci. Pro ukázku tento kód: Kód 5 - Ukázka vytvoření RGraph grafu


vykreslí na stránku tento graf: Obrázek 7 - RGraph graf


Tím samozřejmě možnosti této knihovny zdaleka nekončí. Jejich popis je ale nad rámec této práce. Pro další informace navštivte oficiální stránky2 této knihovny.

3.7.2. SVG SVG umožňuje také zobrazovat grafické prvky na stránce, tím ale podobnost s canvasem končí. SVG je zkratka pro Scalable Vector Graphic. Jedná se o formát vektorové grafiky, který pro popis vektorové grafiky používá XML. Lze ho do stránky vložit jako samostatný prvek svg nebo jej vložit do stránky pomocí prvku img, v němž se uvede odkaz na daný soubor s grafikou. Kreslení v něm je o poznání jednodušší než pomocí canvasu, avšak pro pokročilejší grafiku bych doporučil využít nějaký grafický editor podporující SVG. Pro srovnání následující (neporovnatelně kratší a srozumitelnější) kód vykresluje kružnici podobně, jako jsme si ukázali u canvasu: Kód 6 - Prvek SVG


2

http://www.rgraph.net/

30

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Jako u canvasu, i zde existují knihovny pro usnadnění práce, pomocí nichž lze dosáhnout velmi hezkých efektů i bez použití například Flashe. Jednou velmi povedenou knihovnou je D3. Její popis je však nad rámec této práce. Více informací lze o ní získat na adrese http://d3js.org/.

3.8. Geolokace Nové API umožňuje získat pozici uživatele přistupujícího na webovou stránku. To lze využít například pro cílení informací uživateli dle obchodů kolem něj, kulturních památek a podobně. Na druhou stranu, ne každý chce sdílet svou polohu, proto nás na tuto skutečnost nejdříve prohlížeč upozorní a musíme sdílení polohy pro daný web povolit. K určení místa uživatele používá tato funkce několik metod, které závisí na schopnostech daného zařízení. V případě přítomnosti modulu GPS je možné ho použít. Dále u zařízení s telefonní kartou lze získat polohu pomocí BTS stanic a v ostatních případech okolní wi-fi sítě či IP adresu uživatele.

3.9. WebWorkers WebWorkers API umožňuje spouštět na stránce více skriptů najednou na pozadí, aniž by to přímo ovlivňovalo webovou stránku. Dříve bylo možné spustit najednou pouze jeden skript. Při načítání stránky bylo potřeba počkat, až se dokončí, a poté teprve pokračovalo vykreslování dané stránky. Díky tomu je možné spouštět náročné skripty, které nepotřebují interagovat s uživatelem, na pozadí a dosáhnout tak plynulejší práce s daným webem.

3.10. Drag and Drop Nové API Drag and Drop umožňuje přetahovat objekty na stránce nebo, v kombinaci s File API, ho lze využít k efektnímu nahrávání souborů pouhým přetažením do stránky. Podobné funkcionality bylo možné dosáhnout i doposud, avšak zavedení tohoto API implementaci velmi usnadňuje. Přibyly totiž nové události, pomocí nichž je jednodušší reagovat na akce uživatele. Konkrétně to jsou dragstart, dragend, drag, drop, dragenter, dragleave a dragover. Událost dragstart je vyvolána při započetí přetahování prvku, dragend při uvolnění myši po přetahování a drag v průběhu celého přetahování. Drop je spuštěn na objektu, do kterého byl přetahovaný prvek vložen. Dragenter se spustí na prvku v případě, že na něj poprvé vstoupíme při přetahování,

31

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET dragleave naopak při opuštění tohoto prostoru. Dragover je pak probíhá po celou dobu přetahování jednoho objektu přes druhý. Díky těmto událostem lze jednoduše pomocí JavaScriptu reagovat na akce uživatele a zvýraznit tak například přetahovaný objekt nebo označit pole, do kterého je možné danou věc přetáhnout. Abychom mohli snadno zjišťovat informace o přetahovaném prvku, přibyl nový objekt dataTransfer, který přijímají všechny nové události HTML5 Drag and Drop. Tak lze přenášet s objektem i potřebné informace jako jeho identifikátor či hodnotu. Abychom umožnili přetahování prvku, musíme mu nejprve nastavit atribut draggable. Aby však bylo možné jej někam přemístit, musíme odchytit základní chování prohlížeče, které přetahování objektů přes jiné nepovoluje. To uděláme příkazem preventDefault v události dragover. Tak lze nyní přesouvat objekty přes sebe a chybí už jen zpracování při puštění objektu na jiný, a to se provede v události drop. Ukázku použití můžete vidět v kapitole 5.10.5. Drag and Drop. Samotné kódy jsou dostupné v příloze této práce.

3.11. Offline aplikace a WebStorage V poslední době roste počet webových aplikací, které mnohdy nahrazují klasické desktopové. Není tak neobvyklé používat online emailového klienta, správu úkolů, ale i třeba grafický editor. S tím roste i potřeba pracovat s těmito aplikacemi v případě, že zrovna nemáme připojení k internetu. A to je nyní možné díky technologiím HTML5.

3.11.1. Offline aplikace První z nich jsou samotné offline aplikace. Ty umožňují uložit obsah webu (HTML soubory, CSS i třeba JavaScript) na klientský počítač a přistupovat k němu i v případě, že je uživatel mimo dosah internetového připojení. Lze tak například přistupovat k emailovému klientovi cestou do práce a psát si koncepty mailů či poznámek. Ty se pak synchronizují při příjezdu do práce. To je další dobrá vlastnost této technologie. Pokud dojde ke změně na stránce, tak se soubory u uživatele při připojení k dané aplikaci automaticky aktualizují. Nyní si jen stručně popíšeme, jak to celé funguje. Prvním krokem je vytvoření souboru cache.manifest. Je to textový soubor, kde jsou uvedeny soubory, které mají být dostupné offline. Mohl by vypadat například takto:

32

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Kód 7 - Cache.manifest


V první části definujeme soubory, které budou dostupné bez internetového připojené a naopak v druhé část „NETWORK“ jsou uvedeny soubory, které budou vždy nahrávány pouze ze serveru. V tomto případě jde o všechny kromě uvedených v první části. Označení verze je pouze komentářem a prohlížeč si jej nebude všímat. Je tam ale důležitý nejen z důvodu značení změn. Pokud totiž dojde v aplikaci ke změně, potřebujeme, aby se tyto úpravy projevily i v aktualizaci souborů u klienta. To prohlížeč pozná tak, že dojde ke změně souboru cache.manifest. Samozřejmě může jít o jakoukoliv změnu a nemusí se jednat o číslování verze. Lze například udávat datum a čas poslední úpravy. Tím dojde ke změně v tomto souboru a prohlížeč si vše stáhne znovu aktuální. Dalším krokem je nastavit webový server, aby uměl správně obsluhovat soubor manifest. To se udělá tak, že se na serveru nastaví správný obsahový typ (text/cache-manifest) pro tento soubor. Jako poslední je třeba uvést na webové stránce soubor manifestu. To se provede přidáním atributu manifest k prvku HTML s odkazem na náš soubor. Nyní je webová stránka dostupná i bez internetového připojení – konkrétně tedy části uvedené v manifestu. Aby nedocházelo k nechtěnému ukládání většího počtu webů u klientů, zobrazují některé prohlížeče (na rozdíl od geolokace nepovinně) výzvu, zda chceme danou stránku zpřístupnit online. S používání offline aplikací souvisí i následující API Web Storage

3.11.2. Web Storage Toto API slouží k ukládání jednoduchých dat lokálně na počítači (či jiném zařízení) uživatele. Je tak vhodné použít například k uložení dat pro offline aplikace. Umožňuje uložit až 5 MB dat, čímž se výrazně liší od Cookies, které mají maximální velikost 4 KB. Web Storage úložišť jsou dva druhy. Oba ukládají data ve tvaru klíč a hodnota. Liší se však v dostupnosti uložených dat. První - relační - umožňuje pracovat s daty pro jedno okno prohlížeče či pro jednu záložku. Pokud uživatel otevře stejnou stránku ve dvou ok33

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET nech, bude mít každé vlastní relační úložiště. Tento typ ukládá data pouze po dobu trvání relace, tzn. se zavřením daného okna či záložky jsou tato data smazána. Druhým typem je místní úložiště, které umožňuje uložit data trvale u uživatele a v případě, že opět otevře daný web, budou tato data k dispozici. Zde je důležité poznamenat, že data jsou přístupná pouze z webu, ze kterého byla uložena, a jiné stránky k nim tak nemají přístup. Bohužel ne všechna data lze uložit v tomto tvaru, pak přijdou na řadu úložiště ve stylu relačních databází. Tím je například WebSQL nebo IndexedDB. Bohužel WebSQL, který byl udržován konsorciem W3C, byl ukončen kvůli nezájmu o tuto technologii ze strany vývojářů, kteří dávají přednost SQLite (W3.org, 2010). IndexedDB je vyvíjena pod křídly Mozilly a podpora této technologie je (i přes více než dvouletý vývoj) velmi omezená. V současné době je podporována (asynchronní API) pouze prohlížeči Mozilla Firefox 16+, Google Chrome 24+ a Internet Explorer 10. (Mozilla Developer Network, 2013)

3.12. Ostatní nové HTML5 prvky 3.12.1. Prvek hgroup Nový prvek hgroup usnadňuje členění dokumentu tím, že umožňuje seskupovat nadpisy do skupin. Pokud jsme dříve chtěli vytvořit nadpis první úrovně a k němu přidat podtitulek druhé úrovně, vytvořil se v osnově dokumentu další uzel. To mohl být problém, pokud jsme chtěli poté přidávat například nadpisy jednotlivých kategorií. Ty se pak nevhodně zařadily do podsekce vytvořené podtitulkem. Nebylo to však chtěné chování a jeho řešení nebylo dříve snadné při zachování celistvosti stránky. Ano, bylo možné vytvořit podtitulek jako nějaký nezávislý prvek, třeba pro odstavec. Tím se ale narušila sémantika stránky, jelikož webové prohlížeče pak toto nevyhodnotí jako podnadpis. A zde je právě vhodné použít nový prvek hgroup, který určuje seskupené nadpisy, které se pak chovají jako jeden uzel.

3.12.2. Prvek figure a figcaption Tyto dva prvky spolu úzce souvisí a opět slouží k lepší sémantice webové stránky. Dle specifikace W3C jde o prvek, který „specifikuje samostatný prvek, který má vztah k hlavnímu obsahu, ale jehož odstranění by nemělo mít vliv na význam dokumentu.“ Je dobré tedy tento prvek používat pro anotace obrázků, diagramů, výpisu kódů a podobně. 34

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Pokud by ale daný dokument postrádal bez objektu, který chceme obalit prvkem figure, smysl, není to vhodný kandidát pro tento prvek. Figcaption pak slouží k označení popisku pro daný objekt ve figure.

3.12.3. Prvek progress a meter Další dvojice prvků, která má mnoho společného. Oba slouží k popisu dat, která něco měří. Pokud je předem známo minimum a maximum, je vhodné použít prvek meter. Takovou situací je například výsledek testu, který má minimálně nula a maximálně plný počet bodů. Naproti tomu, pro případ, že nejsou určeny hranice procesu, je určen prvek progress. Příkladem jeho použití je (kromě, z názvu vyplývající, měření nějakého procesu) měření věku obyvatel. I když tato hodnota nemůže dosahovat nekonečných hodnot, pevně daná maximální hodnota zde není.

3.12.4. Prvek mark Prvek mark je určen pro zvýraznění textu. Je vhodný například v případě implementace vyhledávání na stránce či v aplikaci k označení kusů textu obsahujících hledaný výraz uživatele.

3.12.5. Prvek time Tento nový prvek opět přispívá k lepší čitelnosti stránek pro strojové zpracování. Zatímco lidé pochopí datum i ze slovního vyjádření (například 14 dní po Vánocích), stroje to nemají tak jednoduché. A právě pro ně je určen tento prvek. Umožňuje například vyhledávači číst tato data a lépe přizpůsobit nalezené výsledky vašim požadavkům. Jeho použití je velmi široké, a pokud jej budou autoři stránek používat, přispěje to k většímu komfortu uživatelů jejich stránek. Má však několik důležitých omezení na případy, kdy by se naopak používat neměl. Jde o události neurčitého data (např. letos v létě) a dále data před naším letopočtem.

3.12.6. Prvek details Jak již název napovídá, slouží tento prvek k označení nějakého detailu, podrobnosti k dané věci. Pomocí něj je možné lehce vytvořit dříve ne přímo snadný webový prvek, a to rozbalitelný box, který obsahuje základní informace. Podrobnější jsou skryty a zobrazeny uživateli až v případě jeho zájmu o detail rozbalením daného prvku. 35


3.12.7. Style a atribut scope Hojně používaný prvek style se dočkal rozšíření o užitečný atribut scope. Pokud definujeme tento atribut, aplikuje se daný styl pouze na rodičovský prvek a na všechny dceřiné prvky. Tak lze vytvářet specifické styly pouze pro určité části dokumentu.

3.12.8. Atribut async Nový atribut async určuje, že má prohlížeč daný skript načítat asynchronně. To je vhodné u skriptů, které trvají delší dobu a přitom nejsou přímo nutné pro načtení stránky. Díky tomu je uživateli stránka zobrazena rychleji a nečeká na dokončení skriptu, jak by tomu bylo v případě, kdyby nebyl tento atribut použit.

36


4. HTML5 v ASP.NET V této kapitole jsou shrnuty zkušenosti s HTML5 v ASP.NET 4.5. Jsou zde popsané implementované prvky HTML5 v Selftest systému a výhody či problémy, které implementace přinesla. Není zde podrobný popis jejich funkce. Ten je uveden v kapitole 5 - Návrh aplikace. Funkčnost prvků byla testována v prohlížečích Internet Explorer 9 a 10, Mozilla Firefox 20 a Google Chrome 26. Celkově má .NET Framework (od verze 4.0) velmi dobrou podporu HTML5. Žádné větší problémy jsem při práci s HTML5 v ASP.NET nezaznamenal. U některých prvků chybí jejich serverový ekvivalent, který by například práci s audiem a videem usnadnil, ale tento nedostatek teď již nebrání v jeho používání. Druhá drobnost, na kterou jsem narazil, se týká nových validátorů (viz dále). U nich neumí ASP.NET podle atributu CauseValidation tyto validátory povolovat či ignorovat. Řešení je sice snadné, ale přímá podpora zde chybí.

4.1. Nové strukturální prvky Při tvorbě stránek byly použity nové strukturální prvky, které umožňují lepší čitelnost pro člověka i snadnější strojové zpracování. Zde jsem se nesetkal s žádnými problémy. ASP.NET nové prvky bez problému rozpoznalo a ani testované prohlížeče neměly se zobrazením těchto prvků problém.

4.2. Validátory Další novinkou, kterou jsem v aplikaci použil, jsou HTML5 validace. Ty přinášejí do samotného HTML vítanou novinku, avšak díky kvalitním vestavěným validátorům v ASP.NET nepřinášejí výraznější zlepšení či ulehčení práce. Výhoda plyne hlavně pro uživatele, který se při jejich používání bude na různých stránkách setkávat se stejnými styly chybových hlášek. Jejich použití je také velmi omezené, jelikož obsahují jen základní validace, které nejsou dostačující pro složitější případy. Tento problém mají samozřejmě i vestavěné validátory ASP.NET. Ty ale navíc obsahují i přizpůsobitelný validátor CustomValidator, díky němuž lze implementovat prakticky jakoukoliv validaci. Zde jsme omezeni pouze možnostmi .NET frameworku a použitého jazyka.

37

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Samotné ASP.NET s validacemi pracovat umí a nové atributy bez problémů rozpozná. Jediný problém má s atributem required, u kterého požaduje definovat hodnotu, což neodpovídá specifikaci HTML5. Avšak i bez ní vše funguje. Při implementaci validátorů jsem narazil pouze na jeden menší problém, který by bylo v dalších verzí dobré vyřešit. ASP.NET totiž neumí samo generovat potřebný JavaScript kód pro tlačítka, která mají nastaveno, že nemají spouštět validace. Problém tak může nastat v případě, že uživatel chce daný formulář například zrušit a vrátit se na předchozí stránku. Zde ho totiž HTML5 validace nepustí. Řešení je sice jednoduché, ale přímá podpora by rozhodně usnadňovala jejich použití. Tento problém lze obejít přidáním funkce k danému prvku (například tlačítku), která na straně klienta zruší validaci přidáním atributu novalidate do hlavního prvku form. Následující kód ukazuje tuto funkci a její navázání k tlačítku. Je však škoda, že podobné řešení nepoužívá samotné ASP.NET při nastavení atributu CauseValidation. Kód 8 - Novalidate funkce


4.3. Nové vstupní typy Nové vstupní typy úzce souvisí s předchozí částí o validátorech. Různé typy mají přednastaveny rozdílné validace (jak je popsáno v 3.5.2 Nové formulářové vstupní typy). Zde jsem nezaznamenal žádný problém s jejich používáním v ASP.NET. Naopak vyskytly se problémy s jejich podporou v prohlížečích. Například Google Chrome 26 neumí zobrazit nový typ datetime.

4.4. Drag and Drop Jelikož jde o API, které se hlavně používá ve spojení s JavaScriptem, je jeho velká část prováděna u klienta. Proto zde není moc, co by mohlo ASP.NET ovlivnit. Jedinou věcí je, jak dostat data, které Drag and Drop změnilo, zpět na server. Tato část může přinést menší komplikace, ale netýká se pouze Drag and Drop, ale obecně manipulace se stránkou pomocí JavaScriptu. V přiložené aplikaci je toto řešeno skrytým polem a JavaScriptovou funkcí, 38

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET která před odesláním formuláře na server zjistí, co bylo změněno a tyto změny zapíše do skrytého pole (identifikátory přesunutých objektů a objektů, do kterých byly přesunuty). To je jedno z mnoha možných řešení. Například u nahrávání souborů pomocí Drag and Drop lze využít AJAX a odeslat potřebné informace na server samostatně. I tato možnost je v aplikaci ukázána.

4.5. Audio a Video Možnosti práce s audiem a videem jsou v ASP.NET omezenější. Respektive jsou dostupné veškeré HTML5 funkčnosti, avšak ASP.NET zde nepřináší žádnou výhodu, jelikož pro ně zatím neposkytuje serverové komponenty. Ale práce s HTML variantou je bezproblémová a s atributy problém nemá. Pokud by však v další verzi poskytoval i serverové komponenty pro práci s audiem a videem, velmi by to usnadnilo práci s nimi.

4.6. Canvas Zde je situace podobná jako u prvků audio a video. Použití canvasu v ASP.NET se neliší od jeho použití na klasické HTML stránce. Problémy s jeho implementací nejsou, avšak ASP.NET zde nenabízí žádné výhody navíc. Je však nutno podotknout, že kvůli jeho povaze, kdy představuje pouze místo pro kreslení pomocí JavaScriptu, není ani moc, co by mohl ASP.NET nabídnout. Naopak u audia a videa by serverové prvky usnadnily jejich používání a implementaci.

39


5. Návrh aplikace 5.1. Zadání Cílem projektu je vytvořit aplikaci, která bude umožňovat absolvování testů s okamžitou zpětnou vazbou. Jednotlivé výsledky si bude moct uživatel zpětně procházet v takové formě, v jaké absolvoval daný test. Kromě samotného absolvování testů bude aplikace umožňovat správu a vytváření testů a otázek. Ty bude možné vytvářet přímo v aplikaci vestavěným editorem. Aplikace bude obsahovat několik typů otázek a odpovědí a bude snadno rozšiřitelná o další typy. V této části bude možné nahrávat multimediální soubory na server. Kromě samotné správy testů bude možné prohlížet si jednotlivé testy a exportovat je ve formátu JSON. V tomto formátu bude možné testy do systému i vkládat. Do této sekce budou mít přístup pouze oprávnění uživatelé. Další část bude určena administrátorovi systému, který bude moci spravovat uživatele a soubory na serveru. Přístup k aplikaci bude možný přes webový prohlížeč.

40


5.2. Role Přístup do systému je umožněn na základě rolí, které definují práva na jednotlivé funkčnosti systému. Jejich přehled spolu s popisem je uveden v následující tabulce. Tabulka 1 - Role v systému

Role

Popis

Nepřihlášený Nepřihlášený uživatel aplikace. Nemá vstup do testovací sekce. uživatel Veřejný uživatel systému mající nejmenší práva. Tato role je určena pro

Public

anonymní uživatele registrované přes webový formulář. Je určena pro absolvování veřejných testů. Student

Student je určen pro neanonymní uživatele systému, kteří mohou absolvovat testy. Oddělení od role public je zde z důvodu flexibility systému a umožňuje tak poskytovat studentům například prémiové testy, které pro uživatele public nejsou dostupné.

Teacher

Role určená pro uživatele, kteří mohou vytvářet a spravovat testy a otázky v aplikaci. Administrátor aplikace mající přístup do všech sekcí a, na rozdíl od ostat-

Admin

ních, do správy uživatelů a souborů. Zdroj: Vlastní zpracování

Role Public má v současné implementaci stejná práva jako Student, je zde ale připravena pro případ, že by systém byl použit pro vnitřní potřeby společnosti, avšak některé funkčnosti například poskytoval veřejně všem uživatelům, kteří se registrují do systému.

5.3. Funkční požadavky Tato sekce se zabývá identifikovanými funkčními požadavky na Selftest systém. Jejich přehled s popisem je uveden v následující tabulce. Tabulka 2 - Funkčnosti systému

Název

Popis

Vyhledání testu dle Uživatel vyhledá v systému testy dle zadaných parametrů. Ty jsou parametrů

mu poté zobrazeny.

Absolvování testů

Uživatel si zobrazí vybraný test a vyplní jej.

Vyhodnocení testu

Vyplněný test je opraven a opravená verze se zobrazí zpět uživateli.

41

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Historie výsledků

Veškeré výsledky testů se ukládají a uživatel tak má přístup k historii jím řešených testů a výsledkům těchto testů.

Vytváření testů

Systém umožňuje vytvářet test zabudovaným editorem. Otázky lze přidat nové či vybrat z již existujících. Vytvořené testy je možné upravovat včetně přidávání či odebírání

Úprava testů

otázek. Vytváření otázek

Systém umožňuje vytvořit novou otázku zabudovaným editorem.

Typy otázek

Systém podporuje více typů otázek a odpovědí.

Úprava otázek

Již vytvořené otázky lze upravovat.

Statistiky testu

U každého testu lze zobrazit souhrnné statistiky úspěšnosti řešitelů daného testu.

Registrace uživate- Přes registrační formulář se může uživatel zaregistrovat do systému. le Správa uživatelů

Je možné vytvářet či editovat uživatele aplikace.

Správa souborů na Lze procházet soubory nahrané uživateli na server a případně je mazat.

serveru Import

a

export Testy je možné importovat či exportovat pomocí formátu JSON.

testů Zdroj: Vlastní zpracování

5.4. Nefunkční požadavky Kromě samotných funkčních požadavků jsou na systém kladeny i další nefunkční požadavky. Hlavním z nich je Univerzálnost řešení. Systém musí být navrhnut tak, aby byl dostatečně univerzální a měl široké možnosti využití a dalšího rozšiřování dle specifických potřeb jednotlivých zájemců o tento systém. Přehled všech nefunkčních požadavků je v následující tabulce. Tabulka 3 - Nefunkční požadavky

Název

Popis

Dostupnost prostřednictvím internetu Systém bude dostupný pomocí internetu a webového prohlížeče. Zabezpečený "role based" přístup

Pro přístup do systému bude nutné přihlášení. Každý uživatel bude obsazen do definované role.

42

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Systém bude navrhnut jako univerzální aplikace pro

Univerzálnost řešení

Selftesty a bude připraven na další rozšiřování. Zdroj: Vlastní zpracování

5.5. Use case model V této sekci je představen model Případů užití (Use case model). Jednotlivé role obsahují práva na veškeré funkčnosti rodičovské role. Pro lepší přehlednost je tento model rozdělen podle rolí. Popis veškerých případů užití je uveden pod diagramy jednotlivých rolí v tabulkách s čísly 4 a 5 - Seznam případů užití.

5.5.1. Nepřihlášený uživatel a Public/Student Schéma případu užití rolí Nepřihlášený uživatel, Public a Student zachycuje následující obrázek. Obrázek 8 - UC model Public a Student


Nepřihlášený uživatel se může registrovat do systému a poté získá roli Public. Pokud již účet má, může se přihlásit. Uživatelé v rolích Public a Student tak mohou v systému vyhledávat testy, absolvovat je a dále si procházet historii výsledků jimi řešených testů. 43


5.5.2. Teacher Teacher může, kromě předchozích funkčností, primárně vytvářet a spravovat testy v systému. Přehled případů užití je uveden na následujícím obrázku. Obrázek 9 - UC model Teacher


44


5.5.3. Admin Admin představuje administrátora systému. Kromě práv přechozích rolí má navíc práva spravovat uživatele, soubory a předměty v systému. Je jedinou rolí, která má vstup do administrátorské sekce. Obrázek 10 - UC model Admin


45


5.5.4. Seznam případů užití

Tabulka 4 - Seznam případů užití - první část

Kód

Název

Popis

Aktéři

Login

Systém umožňuje přihlásit registrovaného

Public, Student,

uživatele.

Teacher, Admin

Do systému je možné se registrovat přes

Nepřihlášený

registrační formulář.

uživatel

Vyhledání tes-

Uživatel zadá parametry hledaného testu

Public, Student,

tů

(v případě nezadání jsou vyhledány všechny

Teacher, Admin

UC UC1 UC2 UC3

Registrace

testy v systému) a systém zobrazí nalezené testy odpovídající parametrům. UC4 UC5

Zobrazení testu Uživateli je vybraný test zobrazen

Public, Student,

k vyplnění

k vyplnění.

Teacher, Admin

Vyhodnocení

Po vyplnění testu a odeslání je tento test

Public, Student,

testu

vyhodnocen a zobrazen uživateli v opravené

Teacher, Admin

formě. UC6 UC7

Zobrazení vý-

Zobrazí uživateli opravenou formu právě

Public, Student,

sledku testu

absolvovaného testu.

Teacher, Admin

Seznam vý-

Zobrazí uživateli seznam již absolvovaných

Public, Student,

sledků testů

testů a umožní mu zobrazit výsledek jednot-

Teacher, Admin

livých testů. A to i v případě, že tyto testy nejsou již dostupné pro absolvování. UC8

UC9

Zobrazení dří-

Zobrazí uživateli dříve absolvovaný test

Public, Student,

ve absolvova-

v opravené formě s hodnotami, které uživa-

Teacher, Admin

ného testu

tel zadal při vyplňování.

Vytvoření

Uživatel vybere typ otázky, typ odpovědí,

otázky

vyplní potřebná data a nová otázka se uloží. Zdroj: Vlastní zpracování

46

Teacher, Admin

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Tabulka 5 - Seznam případů užití - druhá část

Kód

Název

Popis

Aktéři

Editace otázky

Vybraná otázka se načte v módu pro úpravy,

Teacher, Admin

UC UC10

kde lze měnit počet odpovědí, typ otázky i odpovědí a jejich hodnoty. UC11

Seznam otázek Seznam otázek v systému. Slouží k výběru

Teacher, Admin

otázek do testu či pro výběr otázky k editaci. UC12

Vytvoření tes-

Vytvoří nový test. Uživatel zadá údaje testu,

tu

vybere otázky a uloží daný test. Otázky lze

Teacher, Admin

vybrat ze seznamu otázek nebo přidat nové. UC13

Editace testu

Vybraný test se načte v editačním módu, kde

Teacher, Admin

lze měnit údaje testu a přidávat či odebírat otázky. UC14 UC15 UC16 UC17 UC18 UC19

Seznam testů

Seznam testů v systému. Tyto testy lze edi-

pro správu

tovat či je zobrazit spolu se statistikami.

Zobrazení sta-

Zobrazí vybraný test se správnými odpo-

tistik testu

věďmi a statistikami úspěšností testu.

Import testu z

Z formátu JSON lze nahrát do systému nový

JSON

test.

Export testu

Vybraný test je možné stáhnout ve formátu

do JSON

JSON.

Správa uživa-

Umožňuje vytvářet či editovat uživatele sys-

telů

tému.

Správa soubo-

Umožňuje prohlížet či mazat soubory nahra-

rů

né uživateli. Zdroj: Vlastní zpracování

47

Teacher, Admin Teacher, Admin Teacher, Admin Teacher, Admin Admin Admin

Bakalářská práce Seelftest systéém v ASP.N NET Seelf-test system in ASP.NET

5 5.6. High level poh hled N Následující obrázek o znáázorňuje zákkladní struk kturu aplikacce. Slouží ppro první seeznámení see syystémem a pochopení p jeho základnních princip pů. Obrázek 111 - High leveel pohled na systém

Zd droj: Vlastní zpracování z

Hlavnní částí systtému jsou ttesty. Ty see skládají z otázek a kkaždá otázkaa ze zadáníí a odpovědí. Otázky O i od dpovědi moohou být rů ůzného typu u a lze je ssvobodně kombinovat. k . N Nejsou tedy pevně dan né dvojice ttypů otázek k a odpověědí. Každý test patří k nějakémuu přředmětu a kategorii. k Uživatel U v rooli Student může tyto testy řešit a procházeet si historiii výýsledků. Roole Teacher má naopakk práva na vytváření v a správu s testůů a otázek. Kromě K tohoo si může prohhlížet statistiiky úspěšnoosti jednotliivých testů. To je možnné využít hned několi-kaa způsoby. Z těchto výsledků v lzee totiž jedn nak zjistit znalosti dan ané látky mezi m řešitelii (vvhodné napřříklad ve šk kole) či ohoddnotit kvaliitu testu. Po oslední část aplikace je určena rolii A Admin, kteráá má na starrosti správuu uživatelů a souborů na n serveru. JJde o soubo ory nahranéé roolí Teacher pro p použití v testech (nnapříklad au udio nahrávk ky pro posleech).

48 8


5.7. Použité technologie Selftest systém je realizován pomocí technologie ASP.NET Webforms. Ta usnadňuje vývoj aplikace a řeší a automatizuje mnoho procesů, o které se tedy vývojář nemusí starat. Pro uložení dat je použit databázový software Microsoft SQL Server 2012. Aplikace využívá objektově-relační mapování objektů pomocí LINQ To SQL tříd. Dále jsou použity rozšiřující knihovny, konkrétně RGraph pro vykreslování HTML5 grafů a JSON.NET pro práci s formátem JSON. Celá aplikace se skládá ze dvou projektů. První, KlapacBP, se stará o vzhled aplikace a o veškerou logiku. Druhý projekt, KlapacBPdata, má na starosti přístup k databázi. V následující části jsou blíže popsány jednotlivé projekty a jejich komponenty.

5.7.1. Knihovny třetích stran Aplikace v současné době používá dvě externí knihovny. První je RGraph pro vykreslování grafů a druhá, JSON.NET, slouží k usnadnění práce s formátem JSON. 5.7.1.1. RGraph RGraph je zdarma dostupná knihovna (i pro komerční použití), která nabízí jednoduché funkce pro vykreslování grafů do HTML5 prvku canvas. Knihovna je pod licencí Creative Commons Attribute. Ta jen přikazuje při použití v aplikaci uvést odkaz na oficiální stránky RGraph knihovny. Knihovnu lze stáhnout na oficiálních stránkách tvůrce, které jsou na adrese: http://www.rgraph.net/. 5.7.1.2. JSON.NET JSON.NET je knihovna poskytující pokročilé funkce při práci s formátem JSON v .NET frameworku. Knihovna je pod licencí MIT a v použité aplikaci by toto mělo být zmíněno. Knihovnu lze získat na této adrese: http://james.newtonking.com/projects/json-net.aspx.

49


5.8. Popis komponent systému Obrázek 12 - Struktura aplikace


Aplikace je rozdělena na dva projekty (KlapacBP a KlapacBPdata). KlapacBPdata má na starosti přístup k databázi. O vše ostatní se stará KlapacBP.

50


5.8.1. KlapacBP – hlavní projekt Obrázek 13 - Adresářová struktura projektu KlapacBP


Tento projekt má na starosti veškerou logiku aplikace a jediné, o co se nestará, je přístup k databázi. Ten je řešený projektem KlapacBPdata. Dá se rozdělit do čtyř hlavních částí, konkrétně na Administraci uživatelů, Administraci Selftestů, Login a registrace a nakonec 51

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET samotné Selftesty. Dále obsahuje knihovny pro vykreslování HTML5 grafů RGraph, složky pro multimediální soubory testů, soubory pro úpravu vzhledu aplikace a složku obsahující soubory MasterPage. 5.8.1.1. Administration Tato složka slouží pro seskupení stránek a tříd přístupných roli Admin. Jsou zde komponenty pro správu souborů a uživatelů v systému. Obrázek 14 - Administration


CreateUser.aspx

Obsahuje formulář pro vytvoření nového uživatele. Předává vyplněné informace třídě UserDB k dalšímu zpracování. Používá třídu PasswordMethods k zašifrování zadaného hesla. EditUser.aspx

Obsahuje formulář pro editaci uživatelských údajů. Předává vyplněné informace třídě UserDB k dalšímu zpracování. Používá třídu PasswordMethods k zašifrování zadaného hesla. FileAdministration.aspx

Umožňuje zobrazit seznam souborů na serveru nahraných uživateli. Pro každý soubor je možné zobrazit si jeho náhled (náhled obrázku či spustit audio/video soubor) či jej smazat. Overview.aspx

Základní stránka při vstupu do administrace. Obsahuje tabulku s uživateli systému a jejich údaji.

52

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Web.Config

Zde jsou definována přístupová práva do této sekce. Jediná role Admin sem má přístup. 5.8.1.2. Login Login obsahuje třídy a webové stránky pro obsluhu přihlašování a registraci uživatelů. Obrázek 15 - Přihlášení


Login.aspx

Zde je přihlašovací formulář aplikace. Lze sem přejít odkazem z menu anebo je sem automaticky přesměrován uživatel, který nemá dostatečná práva na vstup do dané sekce (nepřihlášený uživatel či uživatel s nedostatečnými právy). Používá třídu FormsAuthenticationExtended pro přihlášení uživatele a třídu PasswordMethods pro získání hashe hesla zadaného uživatelem. Registration.aspx

Obsahuje formulář pro registraci nového uživatele. Tomuto uživateli je po úspěšné registraci automaticky přiřazena role Public. Data zadaná uživatelem předá třídě UserDB pro uložení do databáze. Používá třídu PasswordMethods pro získání hashe hesla zadaného uživatelem. PasswordMethods.cs

Tato třída obsahuje metody pro porovnání dvou hashů hesel a pro získání hashe z vstupního textu.

53

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET FormsAuthenticationExtended.cs

Tato třída rozšiřuje možnosti zabudované formulářové autentizace o podporu rolí. Ta není v základní implementaci dostupná. 5.8.1.3. Storage Složka slouží pro ukládání multimediálních souborů nahrávaných uživateli na server. Do databáze jsou ukládány cesty k těmto souborům. Soubory jsou rozděleny automaticky dle typu na obrázky, audio a video. 5.8.1.4. MasterPages Tato složka seskupuje použité “master page“ soubory, aby byly dostupné na jednom místě. Hlavním souborem je Global.master, který obsahuje hlavičku stránky, formulář a styly. Kromě nich je zde definováno i horní menu aplikace, které je stejné pro všechny sekce. O postranní menu se starají až podřízené soubory. Díky tomu lze snadno definovat rozdílná postranní menu dle specifických potřeb jednotlivých sekcí aplikace. MessagesBL.cs

Tato třída se stará o vytváření a zobrazování zpráv uživateli. Každá stránka obsahuje nahoře panel, do kterého jsou tyto zprávy vkládány. Definuje tři typy zpráv, a to chybu, varování a informaci. Dle typu je daná zpráva nastylována a umožňuje lépe vystihnout závažnost sdělení. 5.8.1.5. RGraph Zde jsou rozšiřující knihovny pro vykreslování HTML5 grafů. 5.8.1.6. Styles Tato složka obsahuje definice stylů a další potřebné soubory, jako jsou obrázky ovládacích prvků či knihovny jQuery.

54

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET 5.8.1.7. Selftests Obrázek 16 - Selftesty


Složka Selftests obsahuje stránky a komponenty, které mají na starosti veškeré věci týkající se testů a jejich částí. Dělí se na tři hlavní části. Základní část slouží k zobrazování a řešení testů. Další část má na starosti správu testů. Poslední část tvoří komponenty jednotlivých typů otázek a odpovědí. Každé části je věnován vlastní pododdíl. Tady je popsána první část. Web.config

Zde jsou definována přístupová práva do této sekce. Všichni přihlášení uživatelé mají přístup do této sekce. TestControlRenderer.cs

Třída TestControlRenderer je jednou z hlavní částí Selftest systému. Jako parametr přijímá objekty otázek testu a vrací zpět HTML prvky vhodné pro zobrazení na stránce. Ty však sama nevytváří, ale předává jednotlivé otázky a odpovědi uživatelským komponentám, které mají daný typ na starosti. Jejím úkolem je vybrat správné komponenty pro dané otázky a odpovědi. Jelikož zprostředkovává veškerou komunikaci mezi aplikací a uživatelskými komponentami (kromě editace – ta je kvůli specifickým požadavkům ve vlastní komponentě), slouží jako hlavní místo pro rozšíření aplikace o další typy otázek a odpovědí. Pokud tedy chceme aplikaci rozšířit o další typ, vytvoříme pro něj komponentu a v této třídě pouze přidáme cestu ke komponentě. Pro možnost vytváření těchto otázek vestavěným editorem je navíc potřeba přidat cestu k novému typu v uživatelské komponentě EditQuestionUC. Žádný další zásah do aplikace není nutný a je možné tento typ v aplikaci ihned používat.

55

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET SelfTestEvalutaion.aspx

Na této stránce je uživateli zobrazeno vyhodnocení testu po jeho absolvování. Jednotlivé prvky na stránce jsou předány třídě TestControlRenderer, která je dále předá odpovědným komponentám. Ty z nich získají vstupy uživatele, aktualizují objekty otázek a odpovědí a vygenerují nové prvky otázek a odpovědí obsahující opravené hodnoty a CSS třídy pro stylizaci správných a špatných odpovědí. Ty jsou pak zobrazeny uživateli. Kromě toho je zde HTML5 graf ukazující na stupnici počet získaných bodů v testu. Ten je implementován pomocí RGraph knihoven a data jsou mu předávána ve formátu JSON. Stupnice se mění dle maximálního počtu bodů daného testu. Obrázek 17 - HTML5 graf - body testu


SelfTestHistoryView.aspx

Tato stránka slouží k zobrazení výsledku dříve řešeného testu. Dle identifikátoru testu, který se předává parametrem v URL adrese, je z databáze načten daný test. Seznam otázek je poté předán třídě TestControlRenderer, která vytvoří potřebné HTML prvky a vrátí je volající metodě (této stránce). Tyto prvky jsou následně vloženy do stránky a zobrazeny uživateli. Otázky a odpovědi jsou zobrazeny v opravené formě a mají zakázána všechna vstupní pole. Test tak lze pouze prohlížet přesně v té formě, v jaké byl uživateli zobrazen při prvním vyhodnocení testu. SelfTestView.aspx

SelfTestView.aspx slouží k zobrazení testu ve formě k vyplnění uživatelem. Dle identifikátoru testu, který se předává parametrem v URL adrese, je z databáze načten daný test. Seznam otázek je poté předán třídě TestControlRenderer, která vytvoří potřebné HTML prvky a vrátí je volající metodě (této stránce). Tyto prvky jsou poté vloženy do stránky a zobrazeny uživateli.

56

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET St‐overview.aspx

Tato stránka obsahuje seznam výsledků testů řešených uživatelem. Je zde možné tyto výsledky filtrovat či řadit. Každá položka výsledku obsahuje tlačítko pro zobrazení detailu výsledku. V tom případě dojde k přesměrování na stránku SelfTestHistoryView.aspx. TestSearch.aspx

Zde je seznam dostupných testů v aplikaci. Testy je možné filtrovat dle předmětů a kategorií a řadit je dle jednotlivých sloupců. Každý test obsahuje tlačítko pro spuštění daného testu, čímž dojde k přesměrování na stránku SelfTestView.aspx. 5.8.1.8. St‐administration Obrázek 18 - St-administration


St-administration seskupuje soubory sloužící ke správě testů a otázek. Práva na vstup sem mají pouze role Teacher a Admin.

57

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 19 - Administrace testů - provázání stránek


Web.config

Zde jsou definována přístupová práva do této sekce. Práva na vstup mají role Teacher a Admin. AddQuestion.aspx

AddQuestion.aspx slouží k vytváření nových otázek a jejich odpovědí. Do této stránky je dynamicky vkládána uživatelská komponenta EditQuestionUC, která slouží pro výběr typů otázek a odpovědí a předává tyto volby uživatele jednotlivým odpovědným komponentám. Jedna komponenta EditQuestionUC představuje soubor jedné otázky a jejích odpovědí. Více o této komponentě pojednává příslušný pododdíl. Dále se zde nachází prvek pro nahrávání souborů na server pomocí techniky “Táhni a Pusť“ (Drag and Drop). Tomuto prvku je věnována samostatná sekce v podkapitole 5.10. Podrobný popis vybraných komponent.

58

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 20 - Drag and Drop nahrávání souborů


Jednotlivé vyplněné hodnoty uživatele jsou předány třídě SelfTestDB, která se dále stará o jejich uložení do databáze. Po uložení otázek je uživatel přesměrován buď na seznam otázek, anebo, pokud sem uživatel přišel přes editaci testu, zpět na upravovaný test. V druhém případě jsou nově vytvořené otázky automaticky přidruženy k danému testu. AddQuestionConfirm.aspx

Na této stránce jsou zobrazeny nově vytvořené otázky. Je zde vidět jejich náhled tak, jak budou zobrazeny v testu a navíc jsou předvyplněné správné odpovědi pro poslední kontrolu. V případě, že uživatel chce otázku upravit, může přímo na této stránce pomocí odkazu u každé z nich přejít na stránku pro její úpravu (EditQuestion.aspx). CreateTest.aspx

CreateTest.aspx slouží k vytváření a úpravě testů. Kromě samotných údajů testu (název, počet bodů, kategorie apod.) je zde i seznam otázek daného testu ve formě odpovídající zobrazení v testu. Každá otázka má předvyplněné správné odpovědi. O to se opět stará třída TestControlRenderer. Uživatel může do testu přidat otázky výběrem z již existujících (na stránce QuestionList.aspx) nebo vytvořit nové (na stránce AddQuestion.aspx). Případně lze na této stránce importovat test z formátu JSON. DragAndDropUpload.aspx

Zde je hlavní logika pro nahrávání souborů na server. Z jednotlivých komponent pro nahrávání jsou sem pomocí AJAXu posílány požadavky na uložení souboru na server. Je zde definováno omezení formátů a maximální velikost souboru. Pokud je nastavena v konfiguračním souboru aplikace, je tato hodnota brána odtud. Pokud definována není, je použita přednastavená hodnota v tomto souboru (aktuálně 100MB). Tomuto prvku je věnována samostatná sekce v podkapitole 5.10. Podrobný popis vybraných komponent.

59

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET EditQuestion.aspx

Tato stránka slouží pro úpravy otázek. Využívá komponenty EditQuestionUC, který poskytuje základní vizuální rozhraní pro načtení daného typu otázky a odpovědí. Změny provedené v otázce jsou předány třídě SelfTestDB, která změny uloží do databáze a provede aktualizaci testů obsahujících tyto otázky (v případě změny bodového ohodnocení otázky je potřeba tyto změny promítnout do celkového počtu bodů jednotlivých testů). EditQuestionConfirm.aspx

Zde je zobrazena upravovaná otázka pro následnou kontrolu. Pokud by uživatel chtěl provést další změnu, může se vrátit do editace. QuestionList.aspx

Na této stránce je seznam otázek v systému. Otázky je možné filtrovat dle předmětů a kategorií či je řadit dle jednotlivých hodnot. Odtud je možné přejít k editaci jednotlivých otázek, přidávat nové či je mazat. St‐admin‐overview.aspx

Zde je uveden seznam všech testů v systému (včetně nepublikovaných). Testy lze filtrovat dle různých kritérií a řadit je dle jednotlivých hodnot. Dále je možné zobrazit statistiky testu (dojde k přesměrování na TestStatisticsView.aspx) nebo upravit vybraný test (pomocí CreateTest.aspx). TestStatisticsView.aspx

Na stránce TestStatisticsView.apsx je zobrazen vybraný test s předvyplněnými otázkami. Slouží k prohlédnutí detailu testu. Dále se zde nachází souhrnný graf úspěšností řešitelů testu. Data pro graf jsou získána z databáze historie, kde jsou evidovány jednotlivé výsledky řešitelů daného testu.

60

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 21 - HTML5 graf - Úspěšnost řešitelů testu


5.8.1.9. StUserControls Obrázek 22 - Uživatelské komponenty


V této složce jsou uživatelské komponenty, které mají na starosti vykreslování a editaci otázek a odpovědí testu. Ve složce Questions se nacházejí komponenty otázek, v Answers komponenty odpovědí a v Others je komponenta, která se v aplikaci používá pro vytváření a editaci otázek (viz dále). Kromě nich je zde soubor tříd UserControlsExtended.cs, kde jsou abstraktní třídy, které poskytují rozhraní pro práci s komponentami otázek a odpovědí. Hlavní, UserControlExtended, dědí od třídy UserControl. Ta je poté dále rozšířena dvěma větvemi. První, UserControlQuestionExtended, poskytuje metody pro práci s komponentami otázek a druhá, UserControlAnswerExtended, naopak definuje metody pro práci s komponentami odpovědí. Diagram můžete vidět na následujícím obrázku. Jednotlivé komponenty jsou popsány v samostatných podkapitolách pod diagramem.

61

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 23 - StUserControls popis vztahů


5.8.1.10. StUserControls – Questions Zde se nacházejí uživatelské komponenty otázek. V přiložené aplikaci jsou v současné době tři. Pro klasickou otázku, kde je pouze samotný text, slouží komponenta SimpleTextQuest.ascx. Další dvě jsou velmi podobné. TextAndAudioQuest.ascx navíc umožňuje k textu přidat audio a TextAndVideoQuest.ascx video. Obrázek 24 - Otázka s audiem + odpověď - doplňování do textu


62

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET 5.8.1.11. StUserControls – Answers V této složce jsou uloženy komponenty odpovědí. Ty mohou být libovolně kombinovány s komponentami otázek a lze tak vytvářet potřebné dvojice. AbcSingleChoiceAns.ascx

Tento typ umožňuje vytvářet a zobrazovat odpovědi s jednou správnou možností. Více než jednu možnost zaškrtnout nelze. Obrázek 25 - Komponenta odpovědi - jedna možnost - text


AbcPictureAns.ascx

Tento typ je podobný předchozímu, ale umožňuje zobrazit u variant odpovědí namísto textu obrázek. Obrázek 26 - Komponenta odpovědi - jedna možnost - obrázek


AbcMultipleChoiceAns.ascx

Tato komponenta umožňuje zaškrtnout více odpovědí a hodí se tak především pro typy otázek, na které je možnost více správných odpovědí (žádná až všechny).

63

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 27 - Komponenta odpovědi - více možností


DragAndDropAns.ascx

HTML5 přineslo mimo jiné možnost přetahovat objekty na stránce a toho plně využívá tento typ odpovědí. Lze tak například přiřazovat slovíčka k sobě, spojovat dvojice vět, anebo, jak je ukázáno na obrázku, snadno implementovat jinak složité otázky. V tomto případě jde o rozřazování odpovědí do kategorií. To by s klasickými odpověďmi typu ABC nebylo jednoduše možné. Obrázek 28 - Komponenta odpovědi - Drag and Drop


Zrovna u tohoto typu vidím velký potenciál v možnostech rozšiřování či upravování. Například by jej šlo zkombinovat s následujícím doplňováním do textu a přiřazovat tak předem dané pojmy na svá místa. Takový typ by se využil například při výuce jazyků. Ale nejen tam. Bylo by možné přiřazovat role v procesu vývoje softwaru na místa, za která jsou tyto role zodpovědné. Možností je jistě více a záleží jen na konkrétním zaměření výsledného systému.

64

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET TextFillAns.ascx

Posledním typem odpovědi v aplikaci je doplňování do textu. Ten je vhodný například při kombinaci s audiem pro doplňování do textu z poslechu. Obrázek 29 - Komponenta odpovědi - doplňování do textu


5.8.1.12. StUserControls – Other V této složce se nachází komponenta EditQuestionUC.ascx. Ta poskytuje uživatelské rozhraní pro vytváření a editaci otázek a předává zadaná data odpovědným komponentám. Následující obrázek pomůže pochopit její funkci. Obrázek 30 - Komponenta pro vytváření a editaci otázek


Hlavní část je „Typ otázky“ a „Typ odpovědi“. Zde uživatel zadá požadovaný typ a podle něj tato komponenta načte odpovídající komponentu otázky či odpovědi. Dle vnitřní logiky vybraného typu otázky či odpovědi dojde k zobrazení vstupních polí pro zadání otázky či odpovědí. O to se stará již samotná komponenta daného typu. EditUserUC.ascx jen definuje místo, kam se má daný typ zobrazit. 65

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Vytváří celistvý objekt otázky a odpovědi, se kterým lze dynamicky pracovat. Při změně jednoho typu (otázky či odpovědi) dojde k překreslení objektu, přičemž ostatní zadaná data zůstanou zachována. Pokud vybraný typ poskytuje stejné vstupní prvky, tak i tato data se nemění. Například při změně z typu odpovědi „text“ na typ „obrázek“ není co zachovávat, ale při změně z typu „ABC - jedna možnost“ na „ABC - více možností“ lze již zadané odpovědi převést do nového typu. Další výhodou je možnost dynamicky vkládat do stránky více těchto komponent. Toho je využito v aplikaci. Pokud uživatel vytváří otázky, může si těchto komponent do stránky přidat několik a vytvořit tak najednou více otázek. Ty lze poté odeslat a uložit až všechny hromadně.

5.8.2. KlapacBPdata – podpůrný projekt Obrázek 31 - Struktura projektu KlapacBPdata


Tento projekt zajišťuje přístup k databázi. O ten se starají tři soubory tříd. Uživatele má na starosti soubor tříd UsersDB.cs. Pro dotazy ohledně testů je zde soubor SelfTestDB.cs a soubor ResultDB.cs má na starosti databázi výsledků testů. Soubor tříd CustomExceptions.cs obsahuje vlastní výjimky použité v aplikaci.

66

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 32 - Adresářová struktura projektu KlapacBPdata


Jak si můžete z obrázku všimnout, aplikace obsahuje dva soubory DBML, které představují objektově-relační mapování objektů aplikace do databáze. Konkrétně pomocí LINQ To SQL tříd. Dvě definice jsou zde kvůli možnému (a doporučenému) oddělení databáze testů od databáze historie. I když je v současné implementaci použita pouze jedna databáze, toto rozdělení v aplikaci umožňuje snadno tyto databáze oddělit. V systému se pak pouze nadefinuje nová cesta k databázi pro KlapacBPResults.dbml. Naopak současné řešení pomocí jedné databáze umožňuje snadno otestovat (a případně rozšiřovat) toto řešení za použití zdarma dostupných webhostingů. Ty totiž většinou bez poplatků poskytují pouze jednu databázi. SelfTestComplex

SelfTestComplex je soubor tříd, který se v systému používá pro snadnější práci s testy. Rozšiřuje třídy Selftest, Question a Answer a seskupuje otázky k testu. Dále eviduje výsledek testu, odpovědi zadané uživatelem a počet bodů. V konstruktoru třídy SelftestComplex je předán jako parametr objekt Selftest. Tato třída pak automaticky vyhledá otázky daného testu a přidruží je k tomuto testu. Díky tomu lze snadno v systému pracovat s testem jako s celkem. ResSelfTestComplex

ResSelfTestComplex je soubor tříd, který převádí objekt SelfTestComplex na typ pro uložení do databáze výsledků testů a naopak.

67


5.9. Databázový model V této podkapitole je představen databázový model pro SelfTest systém. Jelikož aplikace používá ADO.NET Entity Framework, jsou z tohoto modelu patrné i vazby mezi třídami aplikace. Databázi lze rozdělit na tři celky. Prvním celkem jsou tabulky potřebné pro objekty selftestů. Druhý celek tvoří tabulky pro uložení uživatelů systému a poslední celek tvoří tabulky potřebné pro uložení výsledků testů. V současné implementaci aplikace je použita jedna databáze, avšak je plně připravena na oddělení databáze testů od databáze výsledků testů. To je vhodné hlavně v případě růstu aplikace a rozšíření části zabývající se analýzami výsledků.

5.9.1. Selftesty První celek slouží k ukládání testů a dalších přidružených dat. Hlavní tabulky jsou Selftests, Questions a Answers, které přímo reprezentují jednotlivé entity testu. Dále jsou zde uloženy předměty, kategorie předmětů, typy otázek a odpovědí a vazební tabulka mezi testy a otázkami. Model databáze je uveden na následující stránce.

68

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 33 - Databázový model SelfTests


69

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET 5.9.1.1. Answers Do této tabulky jsou ukládány jednotlivé odpovědi otázek. Je navrhnuta s ohledem na univerzálnost aplikace a umožňuje tak uložit rozličné typy otázek. Všechny typy odpovědí jsou ukládány společně v této tabulce. To bylo zvoleno z důvodu výkonu, přehlednosti a v neposlední řadě kvůli univerzálnosti tohoto řešení. Pokud by byla totiž každá odpověď uložena ve vlastní tabulce, bylo by obtížnější rozšiřování aplikace o nové typy. Druhým důvodem bylo snížení výkonu zapříčiněné spojováním velkého množství tabulek v případě práce s testem či otázkami. Každý typ odpovědi používá sloupce, které jsou pro jeho implementaci nutné, zbývající nechá prázdné. Jaké sloupce náleží kterému typu má na starosti odpovědná komponenta daného typu v aplikaci. 5.9.1.2. AnswerType Zde jsou uloženy jednotlivé typy otázek. V případě rozšíření aplikace o nový typ se sem pouze zapíše jeho název. Žádná změna v databázi není nutná. Pokud tedy nejde o velmi specifický typ otázky, který nejde uložit do předpřipravené tabulky Answers. V takovém případě je nutné tuto tabulku rozšířit. Avšak pro základní typy otázek je navrhnutá struktura dostačující. 5.9.1.3. Question Tato tabulka slouží k uložení otázek testu. Je zde použit stejný princip jako u odpovědí. Jsou sem tedy ukládány všechny typy otázek pohromadě. To je, jak již bylo řečeno u tabulky Answers, z výkonnostních důvodů a kvůli snadnější implementaci nových typů otázek. U otázky se eviduje i číslo verze, které je s každou úpravou navýšeno. To slouží pro databázi historie k odlišení změn v dané otázce. Databáze testů eviduje vždy pouze nejnovější verzi. 5.9.1.4. QuestionType V tabulce QuestionType jsou uloženy typy otázek. V případě přidání nového typu je nutné ho sem uložit, aby s ním bylo možné dále pracovat. 5.9.1.5. Subject Zde jsou ukládány jednotlivé předměty. Ty jsou poté přiřazovány testům a otázkám pro jejich kategorizaci. Každý test a otázka musí mít povinně předmět. 70

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET 5.9.1.6. SubjectCategory Kategorie předmětu představuje podrobnější členění testů a otázek. Každá kategorie patří určitému předmětu a není tak možné přiřadit testu či otázce kategorii z jiného předmětu, než do kterého daný objekt patří. V současné implementaci jde o nepovinný údaj a lze tak vytvářet i testy či otázky bez kategorie. 5.9.1.7. SelfTest Zde jsou ukládány jednotlivé objekty testů. Obsahuje základní informace o testu a pro zlepšení výkonu aplikace je zde uveden počet bodů testu. Ten je sice možné dopočítat z otázek testu, avšak v takovém případě dochází k dalším dotazům do databáze a například v případě zobrazení seznamu testů dochází k nárůstu zátěže databáze. Sloupec test_version slouží k evidenci čísla verze testu. To se používá k odlišení jednotlivých verzí v databázi historie. V případě úpravy testu je tedy uživateli při prohlížení jím řešených testů vždy zobrazena odpovídající verze. V databázi testů je však uložena vždy pouze nejnovější verze. 5.9.1.8. Selftest_Question Vazební tabulka mezi testy a otázkami. Díky ní mohou být otázky přiřazeny více testům.

5.9.2. Uživatelé Obrázek 34 - Databázový model Users


71

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Jak již název napovídá, tabulky v této části slouží k uchovávání uživatelů systému. Jsou zde ukládány potřebné údaje o uživatelích a jejich role v systému. 5.9.2.1. Users Tabulka Users slouží k uložení objektu uživatele. Obsahuje jeho údaje hash hesla. Ten není generován pouze ze samotného hesla, ale z kombinace hesla a uživatelského jména. To zvyšuje bezpečnost uložených hesel a v případě úniku těchto údajů ztěžuje zjištění hesel uživatelů. 5.9.2.2. Roles Role definují práva v systému. Každý uživatel musí mít právě jednu roli.

72


5.9.3. Výsledky testů Obrázek 35 - Databázový model Results


73

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Databáze výsledků testů obsahuje stejné tabulky a stejná data jako hlavní databáze testů, avšak přidává k nim další tři, které slouží pro uložení jednotlivých výsledků. Navíc eviduje jednotlivé verze testů a otázek. Jelikož jsou zde uložena veškerá data z databáze testů, může sloužit i jako záloha pro případ ztráty dat v hlavní databázi. 5.9.3.1. TestResultItem Zde je ukládán objekt obsahující výsledek absolvovaného testu. Obsahuje odkaz na řešení testu (v určité verzi) a na uživatele, který daný test řešil. Kromě toho obsahuje počet získaných bodů v testu a datum řešení. 5.9.3.2. QuestionResultItem Tato tabulka je zde primárně pro zlepšení výkonu v případě analýz výsledků. I bez ní by bylo možné získat počet bodů z objektu AnswerResultItem, avšak v tom případě by musela být daná otázka opět vyhodnocena, kvůli čemuž by opětovné získání počtu bodů bylo výkonnostně náročné. 5.9.3.3. AnswerResultItem Zde jsou ukládány odpovědi uživatele na jednotlivé otázky.

5.10. Podrobný popis vybraných komponent V této kapitole jsou podrobněji popsány složitější či implementačně zajímavé komponenty systému. Konkrétně je zde popsán postup při zobrazování testu, použití RGraph knihovny pro vykreslení grafů, práce s audiem a videem, použití Drag and Drop a export a import testů ve formátu JSON.

5.10.1. Zobrazení testu Zobrazení testu či jednotlivých otázek je důležitá a často používaná funkčnost aplikace. Celý proces zobrazení otázky byl navrhnut tak, aby byl snadno rozšiřitelný o další typy otázek a odpovědí bez nutnosti větších zásahů do systému. Ten si zde popíšeme i s návodem, jak přidat nový typ do systému.

74

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 36 - Proces zobrazení testu na stránce


V případě, že chce uživatel zobrazit test, tak je nejdříve objekt testu nalezen v databázi. Z něj se poté vytvoří nová instance třídy SelftestComplex, která slouží pro snadnější práci s testem v systému. Sdružuje v sobě totiž otázky testu a jejich odpovědi. Dále přidává ostatní atributy, jako jsou získané body za test či jednotlivé hodnoty, které uživatel do testu zadal. Seznam otázek je poté předán třídě TestControlRenderer, která se centrálně stará o výběr odpovědných komponent pro jednotlivé typy otázek a odpovědí. Pomocí ASP.NET metody LoadControl() načte novou instanci komponenty otázky a předá jí objekt otázky. Ta si z něj načte potřebná data pro následné vytvoření HTML prvků. Zavoláním metody RenderControl() provede tato komponenta vygenerování kódu pro zobrazení otázky a celý jej obalí do prvku Panel, který poté vrátí třídě TestControlRenderer. Následně je stejným způsobem vygenerován seznam panelů pro jednotlivé odpovědi dané otázky. Poté je seznam všech vygenerovaných prvků vrácen stránce, která je pouze zobra75

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET zí. Kromě něj je vrácen i seznam instancí jednotlivých komponent, který se udržuje pro další práci s testem. Tím je například jeho vyhodnocení. Veškerá logika jednotlivých typů otázek a odpovědí je přímo v daných komponentách. Díky tomu lze snadno přidávat další komponenty do systému. Stačí pouze vytvořit pro daný typ objektu komponentu a nadefinovat potřebné metody. Poté je tento typ přidán do třídy TestControlRenderer, která má na starosti volání jednotlivých komponent.

5.10.2. Vyhodnocení testu Vyhodnocení testu probíhá podobným způsobem jako výše popsané zobrazení testu. Máme v tuto chvíli již ale seznam instancí jednotlivých komponent. Odpadá tedy jejich vytváření a naplnění daty. Pro každou komponentu otázky nalezneme na stránce odpovídající panel této otázky (podle identifikátoru). Z něj daná komponenta pomocí vnitřní logiky získá vstupy uživatele a provede vyhodnocení otázky. Dále spočítá počet bodů a označí špatné a správné odpovědi. Poté je opět zavolána metoda pro zobrazení, v tomto případě RenderEvaluatedControl(), která vygeneruje HTML prvky pro zobrazení vyhodnocených odpovědí. To se liší tím, že jednotlivá vstupní pole jsou pouze pro čtení a navíc jsou přidány CSS třídy pro odlišení špatných a správných odpovědí. Poté jsou vygenerované prvky zobrazeny na stránce uživateli.

5.10.3. Dynamické načítání uživatelských komponent V aplikaci se často používá dynamické generování uživatelských komponent za běhu aplikace a jejich vkládání do stránky z code-behind. Díky tomu lze pružně reagovat na vstupy uživatele a přizpůsobit jim obsah stránky. Například pokud uživatel edituje otázku a změní její typ, celá komponenta se ihned překreslí do tvaru odpovídající novému typu. Avšak vkládání komponent za běhu aplikace sebou přináší i mnohá úskalí, se kterými jsem se při tvorbě této aplikace setkal. Překvapilo mě, že podobné problémy řešilo již mnoho lidí (např. na oficiálních fórech ASP.NET), avšak většinou na ně nenalezli jednoznačné řešení. Samotné načtení uživatelské komponenty není nijak složité, jak ukazuje následující kód. Kód 9 - Načtení uživatelské komponenty


76

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Problém, který jsem řešil, se týká uchovávání hodnot v těchto komponentách. Při příštím dotazu na server jsou tyto komponenty ztraceny a s nimi i data v nich. Základním řešením je tyto komponenty při každém načtení stránky opět vygenerovat. Pokud budou mít stejné identifikátory, hodnoty uloženy ve View State se do nich opět vloží. Tím ale není celý problém vyřešen. Další problém nastane, když chceme na hodnoty v těchto komponentách reagovat. V aplikaci jde třeba o případ, kdy uživatel vybere předmět a podle něj mu chceme zobrazit jeho kategorie. Anebo jiná situace, kdy podle zadaného typu otázky chceme načíst odpovídající komponentu. Když v určité části životního cyklu tuto komponentu načteme, nemáme v této části přístup k její hodnotě a nelze na ni tak reagovat. Tudíž nemůžeme ve stejném cyklu vložit komponentu, která je na této hodnotě závislá. Celý životní cyklus stránky lze z pohledu komponent rozdělit na tři části. První část je do OnInit(). Pokud zde načteme komponentu, bude její hodnota dostupná v druhé části, a to v PageLoad(). Pokud v PageLoad() načteme komponentu, bude její hodnota dostupná v PreRender(). A pokud načteme komponentu v PreRender(), nebude její hodnota dostupná a neobjeví se na stránce. Nejvýhodnější je tedy načítat komponenty vždy co nejdříve, a to v OnInit() části. Ani to ale není bezproblémové. V této části totiž ještě nejsou načteny hodnoty z View State a nelze tak jednoduše přistupovat k hodnotám prvků na stránce. Nevím, co vlastně máme načítat, když nemáme žádné informace o hodnotách zadaných uživatelem. To lze řešit uchováváním potřebných hodnot jinak než ve View State, například v Session nebo v Cookies. V aplikaci je použito skryté pole, ve kterém jsou uloženy potřebné hodnoty. Tato data lze v OnInit() získat přímo z objektu Request, jak je vidět na následujícím kódu: Kód 10 - Získání hodnoty prvku v OnInit() stránky


Při návrhu aplikace či stránky bychom měli na toto omezení myslet a v případě potřeby načítat závisle na sobě více komponent je potřeba uchovávat potřebná data jinak než ve View State.

77


5.10.4. Grafy Pro vykreslování grafů je použita knihovna RGraph3, která je zdarma pro komerční i nekomerční použití pod licencí Creative Commons Attribute. Ta jen přikazuje při použití v aplikaci uvést odkaz na oficiální stránky RGraph knihovny. Její použití však výrazně usnadňuje vytváření HTML5 grafů. Tato knihovna používá pro zobrazení grafů prvek Canvas. Na jejích stránkách je také bohatá dokumentace knihovny i s ukázkami použití. V této aplikaci jsou grafy použity pro souhrnné zobrazení úspěšností řešitelů testu a pro zobrazení počtu získaných bodů testu. Použití si ukážeme na grafu zobrazujícím počet bodů získaných v testu. Ten můžete vidět na obrázku 38. Obrázek 37 - RGraph graf


Pro vykreslení tohoto grafu je potřeba JavaScriptová funkce, kde je graf definován a jsou mu předána data. Ta je ukázána zde: Kód 11 - JavaScriptová funkce pro zobrazení grafu


První část získává data ze serveru. Kód GetGraphData, který se nachází v codebehind dané stránky, je uveden na následujícím obrázku a vrací data ve formátu JSON. Druhá část funkce je již samotné definování grafu. New Rgraph.Meter vytvoří objekt grafu. Prvním parametrem je identifikátor prvku Canvas na stránce, kam bude daný prvek vykreslen. Další parametry určují minimální hodnotu na stupnici, maximální hodnotu

3

Webové stránky: http://www.rgraph.net/

78

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET a poslední je hodnota, na kterou bude ukazovat graf. Pomocí metody Set()se dají v grafu nastavovat další parametry. V tomto případě jsou definovány barvy pro části od minima do 50 %, poté do 70 % a nakonec pro zbytek grafu. RGrapg.Effects.Fuel.Grow() přidá grafu efekt při zobrazení. Konkrétně tento zapříčiní, že při načtení grafu je ručička na minimu a plynule se přesune na zadanou hodnotu. Kód 12 - Kód získávající data pro graf


Jak je z uvedených kódů patrné, použití této knihovny je snadné a velmi intuitivní. A díky připraveným metodám a vlastnostem lze jednoduše grafy upravovat dle svých potřeb. Pokud bychom chtěli podobný graf nakreslit bez pomoci této knihovny, byl by kód výrazně delší a složitější. Pro další informace o této knihovně doporučuji navštívit její oficiální stránky4.

5.10.5. Drag and Drop Drag and Drop (Táhni a Pusť) je v aplikaci použita hned dvakrát. První implementace slouží k přetahování slov v testu. Umožňuje přetahováním přiřazovat slova k sobě. To je vhodné například pro procvičování slovíček cizího jazyka. Druhá implementace umožňuje přetažením souborů na stránku nahrát tyto soubory na server. Nejdříve si ukážeme prosté přetahování objektů, které je pro první seznámení vhodnější. 5.10.5.1. Přetahování objektů na stránce Přetahování objektů na stránce je použito k přiřazování dvojic slov k sobě. Základ tvoří následující dvě JavaScriptové funkce.

4

http://www.rgraph.net/

79

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Kód 13 - Drag and Drop funkce


První, dragPhrase, nastavuje identifikátor přetahovaného prvku do objektu dataTransfer, který slouží pro uchovávání dat o přetahovaných objektech. Naopak druhá funkce tato data získává a provádí vložení přetahovaného prvku do objektu, do kterého byl přetažen. Nyní je potřeba tyto funkce přiřadit jednotlivým objektům. Prvek, který chceme přetahovat, musí mít nastaven atribut draggable, který umožní jeho přetahování. Dále mu nastavíme funkci dragPhrase v atributu ondragstart. Poté je potřeba nastavit objekt, který může přetahované prvky přijímat. Tomu přiřadíme funkci dropPhrase do atributu ondrop. Nakonec je potřeba zabránit výchozímu chování, které neumožňuje prvky přijímat. Toho lze docílit dvěma způsoby. Buď použijeme metodu preventDefault knihovny jQuery, nebo jednotlivým prvků nastavíme do atributů ondragover a ondragenter funkci, která bude vracet hodnotu false. Zde je použit druhý případ a použití pomocí knihovny jQuery je ukázáno u nahrávání souborů v následující podkapitole. V našem případě by jednotlivé prvky vypadaly následovně: Kód 14 - Prvky pro Drag and Drop


Nyní již lze prvek phrase1 přesunout do prvku dropbox1. To ale samo o sobě nestačí, jelikož pro další zpracování je potřeba odeslat tato data na server. Zde přichází část, která může v ASP.NET Webforms přinést komplikace. Jelikož došlo ke změně prvků u klienta, server o nich neví (konkrétně View State) a při dalším požadavku na server by byla tato změna ztracena. Proto je nutné tuto změnu ještě před odesláním stránky někam uložit. V aplikaci byl pro uložení zvolen serverový prvek HiddenField. Do něj jsou ukládány identifikátory objektů, do kterých byl prvek přetažen, a hodnota přetahovaného prvku. Jednotlivé dvojice jsou odděleny znakem „|“. Zde je ukázána funkce použitá v aplikaci: 80

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Kód 15 - jQuery funkce pro zápis přesunutých prvků do skrytého pole


Tato funkce iteruje přes všechny objekty otázky (protože na stránce může být několik otázek využívajících Drag and Drop). Každá otázka obsahuje vlastní HiddenField. Díky této funkci je každý HiddenField naplněn daty o příslušné otázce. Formát řetězce, který se ukládá, vypadá následovně (objekt, kam je prvek přesunut, a hodnota prvku): dropBox1:first|dropBox2:second K této hodnotě pak lze na serveru přistupovat přes hodnotu prvku HiddenField. V aplikaci se tímto způsobem opravují otázky. Identifikátor objektu, který přijímá přesouvané prvky, určuje objekt odpovědi a hodnota prvku odpověď. Ta se pak porovná se správnou odpovědí a následně se určí, zda byla dvojice přiřazena správně či nikoliv. 5.10.5.2. Drag and Drop nahrávání souborů Druhým využitím Drag and Drop je nahrávání souborů na server. To se od předchozího případu liší tím, že máme na stránce definován pouze prvek, který objekty přijímá. Přesouvané prvky žádné definovány nejsou, protože jde o soubory, které budou do prohlížeče teprve přetaženy. Základní funkce, která se stará o odeslání souboru na server vypadá takto: Kód 16 - Drag and Drop nahrávání souborů – klientská část


81

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Jde o základní verzi, která obsahuje jen to nejnutnější pro nahrání souboru. V aplikaci je tato funkce rozšířena o validace a různé grafické efekty. Celá verze je případně uvedena ve zdrojových kódech v příloze. Je zde také ukázáno použití metody preventDefault, která ruší výchozí chování prohlížeče a umožňuje zpracovat nahraný soubor. Jinak by se tento soubor pokusil prohlížeč přímo zobrazit na stránce. Poté je soubor pomocí XMLHttpRequest odeslán na server, kde je následně uložen. Adresa určuje, na kterou stránku bude tento soubor odeslán, respektive jaká stránka se má o jeho nahrání postarat. Funkce na serveru pak může vypadat následovně: Kód 17 - Drag and Drop nahrávání souborů – klientská část


Zde se získá jméno souboru, vygeneruje se cesta, kam se má soubor uložit a následně je tam uložen. Jde opět o nejjednodušší verzi bez zobrazování výsledku či validací a slouží pro základní pochopení fungování. Rozšířená verze je ve zdrojových kódech v příloze.

5.10.6. JSON Aplikace je připravena na výměnu dat s ostatními systémy (či jen prostý import/export souborů) pomocí formátu JSON. Pro usnadnění práce s ním byla v aplikaci použita knihovna JSON.NET, která nabízí pokročilejší funkce než samotný .NET Framework. Ukážeme si zde základní použití, konkrétně serializaci objektu a poté jeho následnou deserializaci. Následující kód převede objekt v aplikaci do formátu JSON. Dané funkci stačí pouze předat jí objekt, který chceme serializovat, a to je vše. Nastavení formátování (Formatting.Indented) je nepovinný údaj určující, jak bude výstup formátován. Tato volba přispívá k lepší čitelnosti výsledného dokumentu, ale zvětšuje jeho velikost. Volba tedy záleží na účelu, který má exportovaný objekt plnit. 82

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Kód 18 - Serializace pomocí JSON.NET


Při serializaci může dojít k problému s kruhovou referencí. Ta nastává tehdy, když objekty, které chceme převést, na sebe vzájemně odkazují. V takovém případě skončí serializace chybou. Toto je častý jev při použití Entity frameworku, kde jsou objekty většinou provázané. Uvedu příklad z přiložené aplikace. Máme objekt Test, který má určitý předmět. Zároveň obsahuje otázky. Avšak každá otázka má také předmět. Při pokusu o serializaci testu dojde k výše zmíněné chybě. Jelikož ale objekt Předmět serializovat nechceme, je vhodné odkaz na něj vynechat, čímž se zbavíme kruhové reference. Toho lze docílit přidáním atributu JsonIgnore k jednotlivým vlastnostem či atributům třídy, které nechceme serializovat. To v našem případě nelze lehce provést. Proto je nejlepší převést tyto objekty na jiné, na Entity frameworku nezávislé. Zde dobře poslouží anonymní typy. Z objektů vybereme pouze ty atributy, které chceme exportovat, jak je vidět na následujícím příkladu. Poté ho lze jednoduše serializovat. Kód 19 - Anonymní typ pro JSON


Tím máme test úspěšně převeden do formátu JSON a lze s ním již nakládat dle potřeb. Nyní si ukážeme druhou část, a to deserializaci takového objektu. Ta je také jednoduchá a skládá se opět pouze z jednoho příkazu, který lze vidět na následujícím kódu. Kód 20 - Deserializace pomocí JSON.NET


Při převodu na uvedený typ je použit konstruktor dané třídy. Pokud není žádný označen atributem JsonConstructor, použije se ten, pro který má převáděný objekt odpovídající parametry. Pro složitější objekty bych doporučil mít vlastní konstruktor pro převod z JSON, jelikož to umožní lépe jej přizpůsobit potřebám deserializace a vyhnout se případným chybám v tomto procesu.

83

Bakalářská práce Seelftest systéém v ASP.N NET Seelf-test system in ASP.NET

6 6. Ovládá ání systému V této kapitoole je ukázáno ovládánní systému a slouží tak pro snadněj ější orientacci v aplikacii užživatelem. Základní Z ro ozložení apllikace je vid dět na násleedujícím obbrázku. Vprravo nahořee jee menu, kteeré slouží pro přesun m mezi sekcem mi Hlavní stránka, Teesty a nakonec Správaa teestů. Menu dané d sekce je pak na llevé straně stránky. To o slouží proo navigaci mezi m částmii vyybrané sekcce. Obráázek 38 - Zák kladní rozložeení

Z Zdroj: Vlastníí zpracování

Část Testy T je urččena běžným m uživatelů ům. Je zde možné m vyhleedávat testy y v systémuu a tyto testy absolvovat. Každý te st je autom maticky oprraven a užiivateli jsou zobrazenyy ovém stavu,, spprávné odpoovědi. Dále je zde možžné prohlížeet si historii řešených ttestů v tako v jjakém je užživatel absolvoval. Správva testů slou uží uživateelům, kteří mají práva manipulovvat s testy a otázkami.. M Mohou si je zde z procházzet, editovatt či vytvářett nové. V tééto části se ttesty i otázk ky zobrazu-jí v předvypllněné forměě (obsahují již správnéé odpovědi)), aby to ussnadnilo jejich správu.. U každého teestu jsou nav víc evidováány statistiky y úspěšnosttí jeho řešiteelů. Posleddní část slouží pro adm ministraci sy ystému. Do ní se uživaatel dostane přes odkazz v patičce stráánky. Pro přřístup musí být v roli Admin. A Lze zde spravoovat uživateele, vytvářett noové předměěty a kategorrie či prochházet souborry nahrané uživateli u na server. V nássledujících podkapitolá p ách je dále popsáno p ovlládání aplikkace ve vyb braných slo-žiitějších případech s ukáázkami stránnek.

84 4


6.1. Absolvování testu Ze seznamu testů si uživatel vybere test, který chce spustit (v sekci Testy v tabulce podobné jako na obrázku 39). Tento test je poté uživateli zobrazen k vyplnění, jak je vidět na následujícím obrázku. Po zodpovězení otázek lze test odeslat k vyhodnocení stisknutím tlačítka „Vyhodnotit“ ve spodní části stránky. Poté je uživateli zobrazen opravený test a zobrazeny získané body. Odpovědi jsou graficky rozlišeny dle jejich správnosti. U špatných odpovědí lze po najetí na ně zobrazit správnou odpověď. Obrázek 39 - Vyplnění testu


Následující obrázek ukazuje vyhodnocený test. Zde si uživatel může prohlédnout své odpovědi a u těch špatných se podívat, jaká je správná odpověď.

85

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 40 - Vyhodnocený test


6.2. Vytvoření nové otázky V části Správa testů je možné přidávat nové otázky. Na formulář pro jejich vytváření se lze dostat z menu nebo přes editaci testu. Poté je potřeba vybrat typ otázky a odpovědi. Formulář se automaticky upraví dle vybraného typu. Kromě samotného vyplnění zadání otázky a odpovědí lze dále specifikovat předmět a kategorii, do které bude otázka patřit, a v neposlední řadě počet bodů. Dále zde můžeme nahrávat soubory na server. To je popsáno v samostatné sekci pod obrázkem. Vyplněnou otázku je možné uložit, čímž dojde k přesměrování na stránku, kde jsou vytvořené otázky zobrazeny pro kontrolu. Otázky se ale nemusí vytvářet po jedné. Při stisknutí tlačítka „Nová otázka“ ve spodní části stránky dojde k přidání dalšího objektu pro vytvoření otázky.

86

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 41 - Vytvoření nové otázky


6.2.1. Drag and Drop Tato stránka umožňuje nahrávat multimediální soubory na server. To lze provést jednoduše přetažením souboru na obdélník v pravém horním rohu (s textem „Přetáhněte sem pro nahrání“). Pokud má nahrávaný soubor povolený formát a nepřesahuje maximální povolenou velikost, dojde k jeho nahrání na server. O průběhu tohoto procesu je uživatel průběžně informován. Po úspěšném nahrání jde soubor ihned přiřadit k otázce (ale není to nutné).

6.3. Vytvoření testu Po kliknutí na odkaz „Vytvořit test“ je uživatel přesměrován na stránku s formulářem umožňující vytvoření nového testu. V horní části se zadávají údaje o testu (název, popis, body apod.). Pod tímto popisem se nachází seznam otázek testu. Otázky je možné do testu přidat výběrem z již existujících, anebo vytvořit nové. Při tvorbě nových otázek je uživatel přesměrován na stránku AddQuestion.aspx, kde je vytvoří. Po jejich uložení je přesměrován zpět na editovaný test, kterému jsou nové otázky automaticky přiřazeny. Kliknutím na tlačítko „Uložit test“ dojde k jeho finálnímu uložení do databáze a publikování. To znamená, že bude viditelný v seznamu testů. Do té doby je rozpracovaný test přístupný pouze přes správu testů.

87

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 42 - Vytvoření nové otázky


6.3.1. JSON Test lze také importovat ze souboru ve formátu JSON. Pokud importovaný test již v systému existuje, dojde k jeho zobrazení v editačním módu. Pokud ne, načtou se jeho hodnoty do editačního formuláře včetně otázek. Ty jsou testu automaticky přiřazeny.

6.4. Typy otázek a odpovědí 6.4.1. Otázky V aplikaci jsou v současné době tři typy otázek. Prvním je text. Další dva typy přidávají možnost přiřadit k zadání audio a video. To je velmi vhodné pro cvičení poslechu například při výuce cizích jazyků. Přehrávání je řešeno pomocí HTML5 a nepotřebuje tak dodatečný software. Obrázek 43 - Otázka s audiem + odpověď - doplňování do textu


88


6.4.2. Odpovědi Odpovědi je možné libovolně kombinovat s typy otázek. Nejsou tedy předem dané dvojice a záleží jen na uživateli, jaké kombinace zvolí. 6.4.2.1. ABC – jedna odpověď správná Obrázek 44 - Odpověď - ABC jedna správná odpověď


Odpovědi jsou zobrazeny uživateli, přičemž právě jedna možnost je správná. Tento typ má široké možnosti využití, ale nehodí se pro všechny druhy otázek (viz dále). 6.4.2.2. ABC – jedna odpověď správná – obrázky Ne vše jde vyjádřit slovy, a proto umí aplikace zobrazovat u možností místo textu obrázky. To je vhodné zejména pro poznávací otázky jako na následujícím obrázku. Obrázek 45 - Odpověď - ABC jedna odpověď správná - obrázky


Jelikož je možné na obrázcích zobrazit prakticky cokoliv, lze je využít pro matematické rovnice, grafy či vyobrazení různých situací (například řešení křižovatek v autoškole). 6.4.2.3. ABC – více správných odpovědí Aplikace počítá i s potřebou vytvářet otázky, na které je více správných odpovědí (anebo žádná). Tento typ může nahradit otázky, kde bychom jinak museli pro každou odpověď 89

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET tvořit samostatné zadání. Kromě toho je vhodný pro specifické případy, kdy není jedna možnost dostačující. Příklad použití je ukázán na obrázku 46. Další vhodné použití je pro otázky, kdy potřebujeme získat odpovědi typu ano/ne (či pravda/nepravda). Takové zadání pak může znít třeba: „Dle poslechu/textu určete, zda jsou následující tvrzení pravdivá.“ Pokud bychom měli k dispozici jen přechozí typ s jednou možností, museli bychom pro každé tvrzení vytvářet samostatnou otázku. Obrázek 46 - Odpověď - ABC více správných odpovědí


6.4.2.4. Přetahování slov Zajímavým typem odpovědi je přetahování slov. To je umožněno novými funkcemi HTML5. Lze například přiřazovat slovíčka k sobě, spojovat dvojice vět, anebo, jak je ukázáno na obrázku, snadno implementovat jinak složité otázky. V tomto případě jde o rozřazování odpovědí do kategorií. To by s klasickými odpověďmi typu ABC nebylo jednoduše možné. Obrázek 47 - Odpověď - přetahování slov


90

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET V případě chybného přiřazení jsou při opravě ponechány zadané hodnoty, ale jsou označeny červenou barvou. Správná odpověď se zobrazí po najetí na chybně zadanou volbu. 6.4.2.5. Doplňování do textu Posledním typem odpovědi v aplikaci je doplňování do textu. Ten je vhodný například při kombinaci s audiem při výuce cizích jazyků. Uživatelé si tak procvičují poslech a zároveň i psaní daných slov. Obrázek 48 - Odpověď - doplňování do textu


Pokud uživatel odpoví nesprávně, označí se zadaná hodnota červenou barvou a po najetí kurzorem na ni se zobrazí správná odpověď.

91


7. Závěr V práci jsem představil novinky, které přináší HTML5 a příklady jejich použití. U některých nových prvků dochází k nejasnostem ohledně jejich správného použití. Ani samotní tvůrci specifikace nejsou v jednotlivých případech jednotní. U těchto prvků jsem uvedl doporučení, která pomohou v rozhodování, který prvek pro dané situace správně zvolit. Problémy se týkají hlavně nových strukturálních prvků (nav, aside, article, section a další), ale i například prvků figure a figcaption. Dále jsem ukázal, jak se s HTML5 pracuje v ASP.NET a jaké výhody i úskalí to přináší. U jednotlivých prvků je uvedeno jejich možné využití a řešení problémů, které mohou při jejich implementaci nastat. Je zde popsáno (mimo jiné) Drag and Drop či použití audia a videa. Obecně má .NET framework (od verze 4.0) velmi dobrou podporu HTML5. Některé funkce chybí (např. serverové prvky pro audio a video) či se nechovají úplně korektně (atribut required), ale vzhledem k stálému vývoji a změnám v HTML5 specifikaci je to pochopitelné. Lze očekávat, že v dalších verzích .NET frameworku bude práce s HTML5 opět vylepšena a bude zlepšena podpora jednotlivých elementů. Jedním z hlavních cílů práce byl návrh a tvorba aplikace pro školící účely. Ta splnila všechna zadaná kritéria a může nyní sloužit jako základní stavební kámen pro další rozvíjení a přizpůsobování specifickým požadavkům jejích budoucích provozovatelů. Aplikace umožňuje absolvovat testy s okamžitou zpětnou vazbou. Výsledky se uchovávají a je možné si je zpětně procházet či je použít k statistikám a žebříčkům. Testy lze v aplikaci přímo vytvářet zabudovaným editorem. Ten obsahuje i prvek pro nahrávání multimediálních souborů na server, které se poté použijí v otázkách (obrázky a audio/video soubory). Aplikace byla navržena s důrazem na snadnou rozšiřitelnost (především o nové typy otázek a využití výsledků řešitelů). Některá rozšíření jsou v práci ukázána (další typy otázek, využití statistik, rozdělení testů na veřejné a dostupné pouze pro vnitřní účely), avšak záleží jen na potřebách jednotlivých zájemců, které vlastnosti od aplikace vyžadují. Při návrhu aplikace byly brány v potaz i první konkrétní požadavky, a to od vysoké školy Unicorn College s. r. o. Tím požadavkem byla připravenost aplikace na možnost výměny dat pomocí formátu JSON. To by umožnilo propojit ji s interním systémem školy, kterým je Unicorn Universe. Vzhledem k rostoucí popularitě JSON je tato implementovaná schopnost aplikace přínosem i pro ostatní potencionální zájemce.

92

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Výhody této aplikace spočívají ve snadné rozšiřitelnosti a ve vlastnostech, které jí přináší kombinace HTML5 a ASP.NET. Poskytuje uživatelům jednotnější vzhled (HTML5 validace) a nabízí nové funkčnosti bez nutnosti používat jiné programy než webový prohlížeč. Kromě nových funkčností přináší i výhody některým již existujícím, které však do této doby vyžadovaly další software. Pomocí HTML5 lze vytvářet otázky s audiem či videem bez potřeby použít například Flash. Drag and Drop zase umožňuje vytvářet interaktivní otázky nebo nabídnout nahrávání souborů jejich přetažením na stránku. Díky novým strukturálním prvkům je aplikace lépe strojově čitelná a vyhledávače tak mohou poskytovat relevantnější výsledky. Je i lépe přístupná lidem s handicapem, kteří používají speciální software pro zpracování obsahu stránek. Kromě toho je i lépe strojově čitelná a vývojáři zase mohou těžit z výhod, které přináší ASP.NET. Těmi jsou usnadnění vývoje, bohatý výběr z předpřipravených prvků či možnost výběru z více programovacích jazyků. Myslím si, že se HTML5 a ASP.NET dobře doplňují, a tuto kombinaci bych rozhodně doporučil pro tvorbu nové webové stránky či aplikace.

93


8. Conclusion In the thesis, I have introduced the innovations brought by HTML5 and examples for their applications. In some of the new features there are some doubts regarding their correct application. Even authors of the specifications do not have the same opinion. In these features I mentioned recommendations that can help in deciding which feature to choose for given situations. The problems primarily concern new structural features (nav, aside, article, section and others) but also the features of figure and figcaption. I also showed how to work with HTML5 in ASP.NET and what benefits and difficulties can be caused. For individual features their possible application and solutions of the problems that can occur during their application are stated. Drag and Drop or use of audio and video are described here (among others). Generally, .NET framework (starting with 4.0 version) has a very good support of HTML5. Some functions are missing (e.g. server features for audio and video) or do not behave quite correctly (an attribute required) but with regard to continuous development and changes in HTML5 specification, we can understand it. We can expect that work with HTML5 will be improved again and support of individual elements will be improved in the next versions of .NET framework. One of the main aims of the thesis was the proposal and creation of application for training purposes. It met all the set criteria and now it can be used as the base for further development and adaptation to specific requirements of its future operators. The application allows carrying out tests with immediate feedback. The results are kept and can be looked through retrospectively or used for statistics and lists. Tests can be created directly in the application by an integrated editor. The editor contains also a feature for recording multimedia files to the server, which are then used in questions (images and audio/video files). The application was designed with emphasis on easy extension (especially for new types of questions and usage of investigators' results). Some extensions are shown in the thesis (other types of questions, application of statistics, and division of tests into public ones and those accessible for internal purposes only), however, it depends only on individual interested parties' needs, which attributes they require from the application. When designing the application, the first specific requirements - requirements by Unicorn College s. r. o. were taken into consideration. The requirement was readiness of the application for possible data exchange using the format of JSON. This would allow interconnecting it with 94

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET the internal school system, which is Unicorn Universe. With regard to growing popularity of JSON, this implemented capacity of the application is a benefit for other potential interested parties too. Benefits of the application consist in easy extension and in the characteristics that are brought by the combination of HTML5 and ASP.NET. It provides the users with more integrated appearance (HTML5 validation) and offers new functionalities without any need to use other programs, only a web browser. Besides new functionalities, it brings also benefits to some of the existing ones that, however, had required other software until then. Using HTML5 we can create images with audio or video without using for example Flash. Drag and Drop allows creation of interactive images or offer of recording files by moving them to page. Owing to new structural features, the application is better readable by the computer, so the browsers can provide more relevant results. It is also better accessible for handicapped people who use special software for processing content of the pages. Moreover, it is better readable by computer and developers can profit from the benefits brought by ASP.NET. They are facilitation of development, wide choice from the features prepared in advance or possible choice from more programming languages. I think that HTML5 and ASP.NET complement each other and I would certainly recommend this combination for creating a new web page or application.

95


9. Citovaná literatura RAGGETT, Dave, a další. 1998. [Online] 1998. [Citace: 12. 3 2013.] http://www.w3.org/People/Raggett/book4/ch02.html. ISBN 0-201-17805-2. Adobe.com. 2012. Adobe Flash Professional. Adobe.com. [Online] 2012. [Citace: 1. 4 2013.] http://www.adobe.com/products/flash.html?promoid=DINMN. ASP.NET. 2012. ASP.NET MVC Overview. asp.net. [Online] 2012. [Citace: 10. 2 2013.] http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview. —. 2012. What is Webforms. asp.net. [Online] 2012. [Citace: 10. 3 2013.] http://www.asp.net/web-forms/what-is-web-forms. BĚHÁLEK, Marek. 2007. ADO.NET. Technická univerzita Ostrava - Fakulta informatiky. [Online] 2007. http://www.cs.vsb.cz/behalek/vyuka/pcsharp/text/ch07s01.html. Bishopová, Judith. 2010. C# - návrhové vzory. Brno : ZONER software a.s., 2010. ISBN: 978-80-7413-076-2. EVJEN, Bill, HANSELMAN, Scott a RADE, Devon. ASP.NET 3.5 v jazycích C# a Visual Basic. Praha : Computer Press. ISBN 978-80-251-2069-9. GOLDSTEIN, Alexis, LAZARIS, Louis a WEYL, Estelle. 2011. HTML5 a CSS3 pro webové designéry. Brno : ZONER software, a.s., 2011. ISBN: 978-80-7413-166-0. GROSS, Christian. 2006. Ajax and REST Recipes: A Problem-Solution Approach. místo neznámé : Apress, 2006. ISBN: 1-59059-734-6. HICKSON, Ian. 2009. Semantic navigation with the nav element. HTML5Doctor.com. [Online] 15. 7 2009. [Citace: 10. 3 2013.] http://html5doctor.com/nav-element/#comment213. CHOW, Shu-Wai. 2007. PHP Web 2.0 Mashup Projects. místo neznámé : Packt Publishing Ltd., 2007. ITBiz.cz. BTS. ITBiz. [Online] [Citace: 20. 3 2013.] http://www.itbiz.cz/slovnik/telekomunikace/bts. LAWSON, Bruce. 2009. The section element. HTML5Doctor. [Online] 11. 9 2009. [Citace: 15. 3 2013.] http://html5doctor.com/the-section-element/. LEE, Wei-Meng. 2005. What Is ASP.NET. Windows Dev Center. [Online] 2005. [Citace: 21. 3 2013.] http://www.windowsdevcenter.com/pub/a/dotnet/2005/09/19/what-is-aspnet.html. 96

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET MCWHERTER, Jeff a HALL, Ben. 2009. Testing ASP.NET Web Applications. místo neznámé : John Wiley & Sons, 2009. ISBN: 978-0470496640. Microsoft. 2012. Entity Framework. Microsoft Developer Network. [Online] 2012. [Citace: 11. 2 2013.] http://msdn.microsoft.com/en-us/data/ef.aspx. —. 2007. INFO: ASP.NET Code-Behind Model Overview. Microsoft Support. [Online] 23. 2 2007. [Citace: 10. 3 2013.] http://support.microsoft.com/kb/303247. —. 2005. Microsoft.com Cookies FAQ. Microsoft. [Online] 2005. http://www.microsoft.com/info/cookies.mspx. —. 2010. Sessions and session time-outs in a workbook in the browser. Microsoft Office. [Online] 2010. [Citace: 11. 2 2013.] http://office.microsoft.com/en-us/sharepoint-serverhelp/sessions-and-session-time-outs-in-a-workbook-in-the-browser-HA010377130.aspx. Mozilla Developer Network. 2013. IndexedDB. Mozilla Developer Network. [Online] 2013. [Citace: 5. 3 2013.] https://developer.mozilla.org/en-US/docs/IndexedDB. POLÁKOVÁ, Petra. 2010. Unicorn ES Platform. unicornuniverse.eu. [Online] 3. 3 2010. [Citace: 2. 4 2013.] https://uu.unicornuniverse.eu/ues/sesm?SessFree=ues:UCLBT:UEP10W.CZ/LEC02/PORTAL:43347149116042281. W3.org. 2007. HTML Design Principles. W3C. [Online] 26. 11 2007. [Citace: 2. 3 2013.] http://www.w3.org/TR/html-design-principles/. —. 2011. HTML5. W3C. [Online] 2011. [Citace: 1. 3 2013.] http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-section-element. —. 2012. HTML5 - A vocabulary and associated APIs for HTML and XHTML. W3C.org. [Online] 17. 12 2012. [Citace: 4. 3 2013.] http://www.w3.org/TR/html5/. —. 2010. Web SQL Database. W3C. [Online] 18. 11 2010. [Citace: 5. 3 2013.] http://www.w3.org/TR/webdatabase/. WHATWG. 2013. HTML - Living Standard. Whatwg.org. [Online] 15. 3 2013. [Citace: 2. 3 2013.] http://www.whatwg.org/specs/web-apps/currentwork/multipage/sections.html#the-header-element.

97


10. Seznam obrázků Obrázek 1 - Struktura webu v HTML5 ................................................................................ 20 Obrázek 2 - HTML5 required .............................................................................................. 23 Obrázek 3 - HTML5 pattern ................................................................................................ 23 Obrázek 4 - Nové HTML5 formulářové prvky ................................................................... 26 Obrázek 5 - HTML5 výběr data .......................................................................................... 26 Obrázek 6 - Podpora audio/video formátů prohlížeči ......................................................... 28 Obrázek 7 - RGraph graf ..................................................................................................... 30 Obrázek 9 - UC model Public a Student .............................................................................. 43 Obrázek 10 - UC model Teacher ......................................................................................... 44 Obrázek 11 - UC model Admin ........................................................................................... 45 Obrázek 12 - High level pohled na systém .......................................................................... 48 Obrázek 13 - Struktura aplikace .......................................................................................... 50 Obrázek 14 - Adresářová struktura projektu KlapacBP ...................................................... 51 Obrázek 15 - Administration ............................................................................................... 52 Obrázek 16 - Přihlášení........................................................................................................ 53 Obrázek 17 - Selftesty.......................................................................................................... 55 Obrázek 18 - HTML5 graf - body testu ............................................................................... 56 Obrázek 19 - St-administration ............................................................................................ 57 Obrázek 20 - Administrace testů - provázání stránek .......................................................... 58 Obrázek 21 - Drag and Drop nahrávání souborů ................................................................. 59 Obrázek 22 - HTML5 graf - Úspěšnost řešitelů testu .......................................................... 61 Obrázek 23 - Uživatelské komponenty ................................................................................ 61 Obrázek 24 - StUserControls popis vztahů.......................................................................... 62 Obrázek 25 - Otázka s audiem + odpověď - doplňování do textu ....................................... 62 Obrázek 26 - Komponenta odpovědi - jedna možnost - text ............................................... 63 Obrázek 27 - Komponenta odpovědi - jedna možnost - obrázek ........................................ 63 Obrázek 28 - Komponenta odpovědi - více možností ......................................................... 64 Obrázek 29 - Komponenta odpovědi - Drag and Drop ........................................................ 64 Obrázek 30 - Komponenta odpovědi - doplňování do textu ................................................ 65 Obrázek 31 - Komponenta pro vytváření a editaci otázek................................................... 65 Obrázek 32 - Struktura projektu KlapacBPdata .................................................................. 66 98

Bakalářská práce Selftest systém v ASP.NET Self-test system in ASP.NET Obrázek 33 - Adresářová struktura projektu KlapacBPdata ................................................ 67 Obrázek 34 - Databázový model SelfTests.......................................................................... 69 Obrázek 35 - Databázový model Users ............................................................................... 71 Obrázek 36 - Databázový model Results ............................................................................. 73 Obrázek 37 - Proces zobrazení testu na stránce ................................................................... 75 Obrázek 38 - RGraph graf ................................................................................................... 78 Obrázek 39 - Základní rozložení ......................................................................................... 84 Obrázek 40 - Vyplnění testu ................................................................................................ 85 Obrázek 41 - Vyhodnocený test........................................................................................... 86 Obrázek 42 - Vytvoření nové otázky ................................................................................... 87 Obrázek 43 - Vytvoření nové otázky ................................................................................... 88 Obrázek 44 - Otázka s audiem + odpověď - doplňování do textu ....................................... 88 Obrázek 45 - Odpověď - ABC jedna správná odpověď ...................................................... 89 Obrázek 46 - Odpověď - ABC jedna odpověď správná - obrázky ...................................... 89 Obrázek 47 - Odpověď - ABC více správných odpovědí .................................................... 90 Obrázek 48 - Odpověď - přetahování slov .......................................................................... 90 Obrázek 49 - Odpověď - doplňování do textu ..................................................................... 91

99


11. Seznam kódů Kód 1 - HTML5 syntaxe ...................................................................................................... 19 Kód 2 - Prvek video ............................................................................................................. 28 Kód 3 - Prvek canvas ........................................................................................................... 29 Kód 4 - Canvas funkce pro vykreslení kružnice .................................................................. 29 Kód 5 - Ukázka vytvoření RGraph grafu............................................................................. 30 Kód 6 - Prvek SVG .............................................................................................................. 30 Kód 7 - Cache.manifest ....................................................................................................... 33 Kód 8 - Novalidate funkce ................................................................................................... 38 Kód 9 - Načtení uživatelské komponenty ............................................................................ 76 Kód 10 - Získání hodnoty prvku v OnInit() stránky ............................................................ 77 Kód 11 - JavaScriptová funkce pro zobrazení grafu............................................................ 78 Kód 12 - Kód získávající data pro graf ............................................................................... 79 Kód 13 - Drag and Drop funkce .......................................................................................... 80 Kód 14 - Prvky pro Drag and Drop ..................................................................................... 80 Kód 15 - jQuery funkce pro zápis přesunutých prvků do skrytého pole ............................. 81 Kód 16 - Drag and Drop nahrávání souborů – klientská část .............................................. 81 Kód 17 - Drag and Drop nahrávání souborů – klientská část .............................................. 82 Kód 18 - Serializace pomocí JSON.NET ............................................................................ 83 Kód 19 - Anonymní typ pro JSON ...................................................................................... 83 Kód 20 - Deserializace pomocí JSON.NET ........................................................................ 83

100


12. Seznam tabulek Tabulka 1 - Role v systému ................................................................................................. 41 Tabulka 2 - Funkčnosti systému .......................................................................................... 41 Tabulka 3 - Nefunkční požadavky ....................................................................................... 42 Tabulka 4 - Seznam případů užití - první část ..................................................................... 46 Tabulka 5 - Seznam případů užití - druhá část .................................................................... 47

101


13. Seznam příloh 1. CD obsahující zdrojové kódy aplikace, diagramy z kapitoly 5 a elektronickou verzi této práce

102


Příloha 1 – CD CD obsahuje zdrojové kódy SelfTest aplikace, zakládací skripty databáze a elektronickou verzi této práce v PDF. Dále se zde nacházejí diagramy z kapitoly 5 a návod na spuštění/nasazení aplikace.

103

UNICORN COLLEGE. Katedra informačních technologií BAKALÁŘSKÁ PRÁCE. Selftest systém v ASP.NET. Autor BP: Milan Klapač

Recommend Documents