Univerzita Hradec Králové · PDF fileThe second chapter introduces tools used to...
75
Univerzita Hradec Králové Fakulta informatiky a managementu Katedra informačních technologií Vývoj moderních webových aplikací na platformě .NET Bakalářská práce Autor: Tomáš Falta Studijní obor: Aplikovaná informatika Vedoucí práce: Ing. Jiří Štěpánek Hradec Králové duben 2017
Transcript of Univerzita Hradec Králové · PDF fileThe second chapter introduces tools used to...
Univerzita Hradec Králové
Fakulta informatiky a managementu
Katedra informačních technologií
Vývoj moderních webových aplikací na platformě .NET
Bakalářská práce
Autor: Tomáš Falta Studijní obor: Aplikovaná informatika
Vedoucí práce: Ing. Jiří Štěpánek
Hradec Králové duben 2017
Prohlášení:
Prohlašuji, že jsem bakalářskou práci zpracoval samostatně a s použitím uvedené
literatury.
V Hradci Králové dne 18.4.2017
Tomáš Falta
Poděkování:
Rád bych poděkoval vedoucímu bakalářské práce Ing. Jiřímu Štěpánkovi za vedení
práce a odborné rady. Mé poděkování zároveň patří přítelkyni a rodině za jejich podporu.
Anotace
Cílem práce je prozkoumat platformu .NET a seznámit čtenáře s technologiemi, které jsou
nejčastěji používané při vývoji moderních webových aplikací. Na této platformě existuje
více způsobů vývoje webových aplikací. První část práce se věnuje popisu dvou
nejpoužívanějších, nicméně velmi odlišných architektur webových aplikací, které jsou
vzájemně porovnány. V další kapitole jsou představeny nástroje pro přístup k datům.
Dále teoretická část práce obsahuje popis technologií používaných k vývoji moderního
a optimalizovaného uživatelského prostředí webových aplikací a vývojové nástroje pro
platformu .NET. Součástí práce je znovupoužitelná ukázková webová aplikace, ve které
jsou implementovány vybrané technologie popsané v teoretické části práce. Tato aplikace
je nakonec v praktické části popsána několika příklady.
Annotation
Title: The Development of Modern Web Application on the .NET
Framework
The aim of this bachelor thesis is to explore the .NET platform and inform the readers
about technologies that are most often used in development of modern web applications.
This platform facilitates multiple approches towards developing web-based applications.
The first part of this thesis introduces the two most popular, yet still very different,
application architectures and compares them with each other. The second chapter
introduces tools used to access data. The theoretical part further introduces technologies
used in the development of optimized user interface of web-based applications and the
development tools for the .NET platform. The thesis also includes a reusable web-based
application, in which selected technologies introduced in the theoretical part are
implemented. This application is then described in the practical part of the thesis with
several examples.
Obsah
1 Úvod ............................................................................................................................................................ 1
2 Cíl práce..................................................................................................................................................... 2
3 Technologie Microsoft ASP.NET ...................................................................................................... 3
3.1 Platforma .NET ............................................................................................................................... 3
3.2 ASP.NET ............................................................................................................................................ 4
3.2.1 Historie ..................................................................................................................................... 4
3.2.2 ASP.NET Core ......................................................................................................................... 5
3.2.3 Současnost ............................................................................................................................... 7
3.3 ASP.NET WebForms ..................................................................................................................... 7
3.3.1 Životní cyklus stránky ......................................................................................................... 8
3.3.2 Výhody a nevýhody ............................................................................................................ 10
3.4 ASP.NET MVC ................................................................................................................................ 12
3.4.1 Struktura aplikace .............................................................................................................. 12
3.4.2 Výhody a nevýhody ............................................................................................................ 14
3.5 ASP.NET Web API ........................................................................................................................ 15
3.5.1 Použití ..................................................................................................................................... 16
4 Inversion of Control a Dependency Injection ........................................................................... 18
4.1 Autofac ............................................................................................................................................. 19
5 Přístup k datům.................................................................................................................................... 21
5.1 ADO.NET ......................................................................................................................................... 21
5.2 Entity Framework ....................................................................................................................... 22
5.2.1 Entity Framework Core .................................................................................................... 22
5.2.2 Základní komponenty ....................................................................................................... 23
5.3 NHibernate ..................................................................................................................................... 24
6 Klientská funkcionalita ..................................................................................................................... 26
6.1 SignalR ............................................................................................................................................. 26
6.1.1 Ukázka použití ..................................................................................................................... 27
6.2 CSS Frameworky .......................................................................................................................... 29
6.2.1 Twitter Bootstrap ............................................................................................................... 29
6.2.2 Další CSS frameworky ....................................................................................................... 31
6.3 JavaScriptové frameworky ...................................................................................................... 31
6.3.1 TypeScript ............................................................................................................................. 32
6.4 DotVVM ........................................................................................................................................... 32
6.5 Bundling a minifikace souborů .............................................................................................. 34
6.6 UI komponenty třetích stran................................................................................................... 35
6.6.1 Komponenty Syncfusion .................................................................................................. 36
7 Vývojové nástroje ................................................................................................................................ 38
7.1 Visual Studio .................................................................................................................................. 38
7.2 Visual Studio Code ...................................................................................................................... 39
7.3 NuGet Package Manager ........................................................................................................... 40
7.4 Užitečné doplňky a rozšíření .................................................................................................. 41
7.4.1 Resharper .............................................................................................................................. 41
7.4.2 Web Essentials ..................................................................................................................... 42
8 Praktické použití .................................................................................................................................. 43
8.1 Aplikační vrstva – přístup k datům ...................................................................................... 43
8.1.1 ADO.NET ................................................................................................................................. 45
8.1.2 Entity Framework .............................................................................................................. 47
8.1.3 NHibernate ............................................................................................................................ 49
8.2 Prezentační vrstva ...................................................................................................................... 50
8.2.1 ASP.NET WebForms .......................................................................................................... 51
8.2.2 ASP.NET MVC ....................................................................................................................... 54
9 Porovnání použitých technologií .................................................................................................. 57
9.1 Nástroje pro přístup k datům ................................................................................................. 57
9.2 Prezentační vrstva ...................................................................................................................... 57
10 Závěr ..................................................................................................................................................... 59
11 Seznam použité literatury ............................................................................................................ 61
Seznam obrázků
Obrázek 1 - Architektura .NET Frameworku [1] ................................................................................ 3
Obrázek 2 - Hierarchie ASP.NET 4 a ASP.NET Core [6] ................................................................... 6
Obrázek 3 - Životní cyklus WebForms stránky [8] .......................................................................... 10
Obrázek 4 - Interakce mezi MVC komponentami [10] ................................................................... 13
Obrázek 5 - Struktura ASP.NET MVC projektu [Zdroj: autor] ....................................................... 14
Obrázek 6 - Schéma ASP.NET WebAPI [12] ........................................................................................ 16
Obrázek 7 - Šablona administrace AdminLTE [26] ......................................................................... 30
Obrázek 8 - Ukázka webové aplikace sestavené pomocí komponent DevExpress pro
ASP.NET WebForms [32] ........................................................................................................................... 36
Obrázek 9 - Komponenta Grid z balíku komponent Syncfusion [34] ....................................... 37
Obrázek 10 - Ukázka prostředí IDE Visual Studio [35] .................................................................. 39
Obrázek 11 – Ukázka prostředí Visual Studio Code [36] .............................................................. 40
Obrázek 12 - Ukázka rozšíření Web Essentials [40] ....................................................................... 42
Obrázek 13 - Struktura ukázkové aplikace [Zdroj: autor] ............................................................ 43
Obrázek 14 - Struktura projektu nástroje Entity Framework [Zdroj: autor] ........................ 44
Seznam tabulek
Tabulka 1 – Seznam verzí a změn v .NET Frameworku a ASP.NET důležitých pro webové
aplikace [3] ........................................................................................................................................................ 5
1
1 Úvod
Webové aplikace prošly za poslední dvě dekády velmi rozsáhlým vývojem.
Setkáváme se s nimi denně při procházení Internetu a staly se součástí našich životů.
S neustálým rozvojem cloudových technologií stále více společností přenáší
své stávající aplikace na webové technologie. Jedná se o logický krok, který
je výhodný jak pro uživatele, tak vývojáře aplikací. Pro uživatele je přístup
do webové aplikace mnohem snazší než stahování a instalace klientského
programu. Zároveň odpadá starost s aktualizacemi a aplikace je dostupná
z jakéhokoli zařízení, které má přístup k Internetu. Webové rozhraní sice
v některých směrech omezuje možnosti a funkce klienta, nicméně tato omezení
se velmi rychlým vývojem technologií postupně překonávají. I přesto,
že se technologie pro vytváření obsahu Internetu neustále velkou rychlostí vyvíjejí,
zůstává Internet překvapivě téměř neměnný. Způsob přenosu informací ze serveru
na klienta stále používá velmi jednoduchý protokol, který se od začátku Internetu
téměř nezměnil. Jednou ze společností, která velmi intenzivně vyvíjí nové
technologie webových aplikací je Microsoft. Díky tomu, že nabízí profesionální
a prověřené vývojářské nástroje, dlouhodobou podporu i kvalitně zpracovanou
dokumentaci, jsou tyto technologie oblíbené u samostatných vývojářů na volné noze
i velkých softwarových společností.
2
2 Cíl práce
Cílem této práce je prozkoumat a popsat technologie pro vývoj webových aplikací
společnosti Microsoft. Základním pilířem zde bude .NET Framework a technologie,
které jej využívají. Budou popsány frameworky pro tvorbu webových aplikací
a nástroje pro přístup k datům uložených v relační databázi. Zároveň budou
představeny moderní technologie pro tvorbu dynamického uživatelského rozhraní
i jeho optimalizaci. V další částí budou popsány vývojové nástroje, které lze
pro tvorbu aplikací na této platformě využít a užitečné doplňky do těchto nástrojů.
V praktické části bude vytvořena znovupoužitelná ukázková aplikace, ve které
budou použity vybrané technologie popisované v teoretické části. Zejména se bude
jednat o ty, které jsou založené na .NET Frameworku pro tvorbu uživatelského
rozhraní a technologie pro přístup k datům v relační databázi. Cílem této aplikace
je představit rozdíly jednotlivých technologií. Každá z nich bude obsahovat vlastní
projekt, který bude snadné využít pro tvorbu vlastní aplikace.
3
3 Technologie Microsoft ASP.NET
3.1 Platforma .NET
.NET (dot net) je platforma, kterou vyvinula společnost Microsoft. Jejím cílem
je zjednodušit tvorbu aplikací a současně zpřehlednit jejich zdrojové kódy.
V neposlední řadě pak také zjednodušit správu softwarových instalací
na konkrétním počítači. Architektura platformy je rozdělná do několika vrstev,
které jsou naznačeny v Obrázek 1.
Obrázek 1 - Architektura .NET Frameworku [1]
Na nejnižší úrovni platformy .NET se nachází operační systém. Nad ním je Common
Language Runtime neboli CLR. Ten zajišťuje základní infrastrukturu, na které
je framework postaven. Zdrojové kódy aplikace v libovolném programovacím
jazyce podporujícím CLR nejsou kompilovány přímo do nativního kódu, ale do kódu
jazyka CIL (Common Intermediate Language, dříve označený jako MSIL – Microsoft
Intermediate Language). Smyslem tohoto jazyka je zjednodušit přenášení kódu mezi
různými platformami. Tento kód se poté pomocí Just-In-Time kompilátoru přeloží
do strojového (nativního) kódu dané platformy.
4
Nad CLR je poté dále implementováno několik hierarchicky umístěných knihoven.
První z nich je Base Class Library (BCL). BCL je rozsáhlá knihovna tříd,
které poskytují rozhraní pro řízení aplikace. Dělí se na více než sto jmenných
prostorů a obsahuje velké množství běžných funkcí pro čtení a zápis souborů,
ošetřování výjimek, globalizaci aplikací, síťovou komunikaci, práci s vlákny, reflexi
a mnoho dalších. Následující vrstva obsahuje knihovnu ADO.NET & XML.
Ta se využívá pro přístup k datům v relačních databázích nebo datových zdrojích
ve formátu XML nebo jiných formátech. Nad těmito knihovnami leží vrstvy ASP.NET
a Windows Forms. Pro vývoj aplikací v .NET Frameworku lze využít libovolný jazyk
kompatibilní s CLR. Patří mezi ně např. C#, VB.NET, L#, C#Prolog, F#, JScript .NET
a další [2].
3.2 ASP.NET
ASP.NET je rychle se rozvíjející platforma společnosti Microsoft, která nabízí několik
přístupů k vývoji dynamických webových aplikací. Jedná se o součást
.NET Frameworku, ve kterém získává oporu pro většinu své funkcionality.
3.2.1 Historie
Jedná se o jeden z prvních frameworků pro webové aplikace. Název vychází
z technologie ASP („Active Server Pages“), což byla první skriptovací platforma
společnosti Microsoft, která zpracovávala data na straně serveru a vytvářela
HTML stránky. Původní ASP, nyní pojmenované jako „Classic ASP“, dovolovalo
vývojářům používat VBScript jako skriptovací jazyk v HTML stránce. Nicméně oba
jazyky se prolínaly v jednom souboru, což vedlo k velice nepřehlednému a složitému
kódu.
První verze ASP.NET 1.0 byla vydána počátkem roku 2002 jako komponenta nově
představeného .NET Frameworku. Byl považován jako důležité vylepšení,
protože oproti ostatním dostupným frameworkům dovoloval mnohem čistší
oddělení kódu vykonávajícího aplikační logiku od značkovacího jazyka. Součástí
vydání bylo také vývojové prostředí Visual Studio .NET. S každým novým vydáním
.NET Frameworku přibývají zároveň do ASP.NET nové funkce a vylepšení.
5
Datum Verze Funkce Verze Visual Studia
Leden 2002 1.0 • První verze ASP.NET, vydána společně s první verzí .NET Frameworku
Visual Studio .NET
Duben 2003 1.1 • Ovládací prvky pro mobilní zařízení • Automatická validace vstupů
2003
Listopad 2005
2.0 • Nové komponenty (GridView, FormView) • Nová technika pro přístup k datům (SqlDataSource,
ObjectDataSource) • Master pages, témata, přihlašovací komponenty • Podpora pro 64-bitové procesory
2005
Listopad 2006
3.0 • WPF, WCF, WF, CardSpace -
Listopad 2007
3.5 • Nové komponenty (ListView, DataPager) • ASP.NET AJAX • LINQ • Dynamic data
2008
Duben 2010 4 • Rozšíření base class libraries • MEF, DLR, code contracts
2010
Srpen 2012 4.5 • Podpora HTML5 formulářů • Unobtrusive JavaScript validace • Asynchronní moduly a handlery
2012
Říjen 2013 4.5.1 • Web API 2 • MVC 5 • Entity Framework 6 • Signal R • OWIN
2013
Květen 2014 4.5.2 • Nové možnosti k naplánování asynchronních úkolů na pozadí
• Vyšší spolehlivost metod upravujících HTTP hlavičky
-
Květen 2015 4.6 • Podpora HTTP/2 ve Windows 10 • Rozšíření asynchronních metod v API
2015
Tabulka 1 – Seznam verzí a změn v .NET Frameworku a ASP.NET důležitých pro webové aplikace [3]
V roce 2008 Microsoft představil nový framework, který podporuje rozdílný přístup
pro vytváření webových aplikací: ASP.NET MVC. MVC je zkratkou architektonického
vzoru Model-View-Controller, který nabízí lepší rozdělení mezi uživatelským
rozhraním a aplikační logikou a ASP.NET MVC je jeho implementací. Původní
framework se stal známý jako WebForms [4].
3.2.2 ASP.NET Core
ASP.NET Core je přelomovou novinkou v dosavadní historii platformy. Jedná
se o nový open-source multiplatformní framework pro vytváření moderních
6
cloudových aplikací připojených k Internetu, jako jsou webové aplikace, IoT aplikace
a backend pro mobilní aplikace.
Novinka souvisí s představením nového .NET Core. Po více než 15 letech vývoje
.NET Frameworku byla změněna celá filosofie. Jedná se o úplně novou implementaci
frameworku, který je modulární a umožňuje běh na různých platformách. Veškeré
zdrojové kódy jsou veřejně přístupné na GitHubu a každý uživatel se může aktivně
zapojit do jeho vývoje. Zároveň je k dispozici velmi rozsáhlá a kvalitně zpracovaná
dokumentace. Aplikace postavené na ASP.NET Core mohou používat jak původní
plnohodnotný .NET Framework, tak nový .NET Core. Během vývoje došlo k několika
přejmenování, první veřejný název byl ASP.NET vNext, dále ASP.NET 5 až došlo
k finálnímu pojmenování ASP.NET Core [5].
Mezi hlavní přínosy nového frameworku patří nový koncept a změna architektury.
Byl navržen jako optimalizovaný framework pro aplikace, které jsou nasazovány
do cloudu nebo běží ve vlastním prostředí. Skládá se z modulárních komponent
s minimální režií, vývoj aplikace je tedy velmi flexibilní. ASP.NET Core je zároveň
multiplatformní, aplikace lze vyvíjet a spouštět na Windows, Mac a Linuxu.
Obrázek 2 - Hierarchie ASP.NET 4 a ASP.NET Core [6]
7
3.2.3 Současnost
Samotný .NET Framework je aktuálně v přelomovém období. Microsoft stále vedle
nového .NET Core pracuje i na původním .NET Frameworku. Je tedy možné aplikace
vyvíjet jak ve stávající verzi 4.6.2, tak na novém .NET Core. Ten však stále provází
problémy nové platformy. Mezi ně patří především malá uživatelská základna
a slabá podpora z projektů třetích stran. Další z problémů je menší podpora
ze strany provozovatelů hostingových služeb. Nicméně toto období bude brzy
překlenuto a díky úsilí, které Microsoft do .NET Core vkládá, se brzy stane
plnohodnotným nástupcem .NET Frameworku.
3.3 ASP.NET WebForms
Jak již z názvu vyplývá, jedná se o technologii zaměřenou především na tvorbu
webových formulářů. Cílem bylo přiblížit vývoj webových aplikací vývojářům
zvyklým na rozdílné technologie desktopových aplikací (WinForms). Výsledkem
je svým způsobem unikátní přístup k vývoji webových aplikací. Zdrojový kód
stránek je zde rozdělen na dvě části – vzhled aplikace a aplikační logiku.
První částí stránky je mark-up (.aspx) soubor, který obsahuje HTML kód společně
s ovládacími prvky aplikace nazývanými web controls. Ovládací prvek musí být
doplněný o jedinečný identifikátor (ID) a atribut runat=“server“. Tímto
atributem může být označen běžný HTML tag a každý takto označený prvek je poté
dostupný jako instance příslušné třídy.
Code-behind soubor je třída obsahující aplikační logiku stránky. V závislosti
na použitém programovacím jazyce má koncovku .cs pro C# nebo .vb pro VB.NET.
Code-behind je partial třída, která je rozdělena na dva soubory. První z nich
se nazývá „designer“ a obsahuje vlastnosti příslušných datových typů všech web-
controls obsažených v mark-up souboru. Tento soubor je automaticky vygenerován
při změně v mark-up souboru. Druhý ze souborů již obsahuje veškerou aplikační
logiku. Například struktura stránky s názvem „Detail“ je: Detail.aspx,
Detail.aspx.cs a Detail.aspx.designer.cs. Díky tomu, že code-behind
je partial třída, lze ve vlastním kódu stránky pracovat s ovládacími prvky aplikace,
naplňovat je daty, nastavovat atributy, ošetřovat události nebo prvky dynamicky
generovat plně objektovým modelem.
8
Zásadní funkcí je zde PostBack. Jedná se o událost vyvolanou v ovládacím prvku
aplikace. Například při kliknutí na tlačítko (událost OnClick) nebo změně stavu
checkboxu (událost OnCheckedChanged) se zavolá speciální JavaScriptový kód,
který na pozadí odešle POST požadavek na tuto stránku. K požadavku zároveň
připojí i informace o ovládacím prvku a jeho stavu (např. na checkboxu
s identifikátorem ShowDetail byla vyvolána událost OnCheckedChanged).
Serverová část následně zpracuje požadavek a v code-behind třídě vyvolá
příslušnou událost, kterou již lze obsloužit. Důležité je, že i při PostBacku jsou
dostupné veškeré ovládací prvky na stránce a jejich vlastnosti. Tudíž lze například
při obsluze události ShowDetail_OnCheckedChanged zjistit či nastavit aktuální
stav tohoto checkboxu a dle jeho stavu přizpůsobit další logiku aplikace. ASP.NET
poté zajistí odeslání odpovědi zpět na klientské zařízení a zařídí překreslení celé
stránky nebo jen její části bez toho, aby tuto změnu uživatel zaznamenal.
Tato funkcionalita by se neobešla bez jedné další zásadní techniky,
kterou je ViewState. Ten pomocí skrytých formulářových polí umožňuje přenášet
stav jednotlivých web controls na stránce společně s jejich hodnotami.
Tyto informace jsou ve ViewState uchovávány napříč requesty mezi klientem
a serverem.
Spojením těchto dvou technik tak Microsoft do značné míry zajistil odstínění
webové aplikace od principu request-reply i bezstavovosti protokolu HTTP a vývoj
velmi přiblížil desktopovým aplikacím.
3.3.1 Životní cyklus stránky
K vytvoření stránky se podobně jako u WinForms aplikací používá posloupnost
událostí potřebná pro běh webového formuláře a řízení jeho stavu.
Z Obrázek 3 je patrné, že cyklus událostí je velice komplikovaný. Během
jednotlivých událostí mohou být volané další metody. V závislosti na druhu události
jsou dostupné pouze některé možnosti a vlastnosti. Pro vývojáře
je nejpodstatnějších několik událostí vyvolávaných na stránce a v ovládacích
prvcích.
9
1. První událostí je Init, která stránku nastaví do stavu popsaného v mark-up
souboru. Zároveň zde proběhne kontrola dat ve ViewState. Událost Page_Init
poté umožňuje upravit stav stránky.
2. Další událostí je Load. Ta umožňuje kontrolu, jestli se jedná o první načtení
stránky nebo byla odeslána sama sebou (PostBack). V případě PostBacku
zároveň zjišťuje, jaký ovládací prvek tuto událost vyvolal. V metodě
Page_Load se provádí většina aplikační logiky stránek, jako je načítání
datových zdrojů nebo nastavování vlastností komponent.
3. Pokud byla stránka načtena pomocí PostBacku, vyvolá se příslušná událost
prvku. Může se jednat například o klik na tlačítko či událost CheckedChanged
při změně stavu check boxu. Dojde k zaznamenání změn a stránka se zobrazí
znovu v již aktualizované podobě.
4. Následuje samotné vykreslení stránky. Stavové hodnoty ViewState jsou
zahrnuty do stránky jako skrytá pole. ASP.NET je při dalším zavolání může
zpracovat a tím obnovit stránku do předchozího stavu.
5. Poslední vyvolanou událostí je Page_Unload. Po vykreslení stránky je tato
událost obvykle používaná pro ukončení kódu a logování. Následně
se provede Dispose třídy reprezentující stránku, která je zároveň vymazána
z paměti serveru [7].
10
Obrázek 3 - Životní cyklus WebForms stránky [8]
3.3.2 Výhody a nevýhody
Stáří této technologie a částečné zastínění základních principů webových technik
však s sebou přineslo několik výhod i nevýhod.
11
Mezi výhody lze zařadit:
• Komponenty – technologie WebForms obsahuje množství pokročilých
znovupoužitelných Drag&Drop komponent, které velmi zrychlují vývoj
aplikace. Jedná se například o GridView (tabulku), u které je již
implementováno stránkování, řazení sloupců, formátování textu či editace
řádků. Mezi další komponenty se řadí Repeater, ListBox, CheckBoxList
a další.
• Stavovost – odstínění webového prostředí je obecně pokládáno za výhodu
i nevýhodu. Vývojář nepotřebuje znát detailní mechanismus stránek,
technologie se sama stará o vykreslování a překreslování stránek
i vyvolávání serverových událostí.
• Dospělost – technologie je dostupná od roku 2002, existuje nepřeberné
množství informací, návodů, vyřešených problémů, ale i komponent třetích
stran.
Avšak WebForms obsahují několik zásadních nevýhod:
• Velikost ViewState – při velkém počtu ovládacích prvků na stránce mohou
data ve skrytém poli ViewState nabývat i stovek kilobajtů dat, které se při
každém požadavku odesílají na server a zpět, což velmi zpomaluje rychlost
reakce na požadavek a zatěžuje provoz.
• Pouze částečná kontrola nad vygenerovaným HTML – komponenty samy
generují HTML kód, který pro danou situaci nemusí být vhodný a vývojář
do něj nemůže zasáhnout.
• Životní cyklus stránek – posloupnost událostí generujících stránku může být
velmi komplikovaná a je náchylná na chyby.
• Omezená možnost testování – při návrhu technologie nebylo počítáno
s automatizovaným testováním stránek, proto je testování komplikované.
• Oddělení prezentační a aplikační logiky není dokonalé a v některých
případech je nutné přidávat aplikační logiku i do mark-upu stránky.
• Budoucnost – vzhledem k tomu, že nový ASP.NET Core nebude technologii
WebForms podporovat se vývoj stává neperspektivní.
12
3.4 ASP.NET MVC
Model-View-Controller, zkráceně MVC, je velmi populární architektonický vzor
používaný při návrhu softwaru, zejména webových aplikací. Výraz MVC se používá
přibližně od roku 1970, kde byl ve společnosti Xerox PARC navržený jako způsob
organizace prvních GUI komponent. Tento koncept se v aplikacích používá dodnes.
Interakce s MVC aplikací kopírují přirozený cyklus uživatelských akcí. Uživatel
vykoná nějakou akci, aplikace při odpovědi změní datový model a vrátí
aktualizovanou obrazovku uživateli. Tento cyklus se stále opakuje, což přesně
zapadá do principu webových aplikací, které jsou přenášeny a doručovány pomocí
řady HTTP požadavků a odpovědí. Webové aplikace vyžadují kombinaci různých
technologií (HTML, aplikační kód, databáze atd.) a obvykle jsou rozdělené
do různých částí. Kombinace těchto částí lze přirozeně přenést na koncept MVC.
ASP.NET MVC je open-source implementací tohoto architektonického vzoru.
Microsoft jej představil na přelomu roku 2007 a 2008 jako alternativu k technologii
WebForms. Framework nabízí snadnou rozšiřitelnost, pokročilé možnosti
testování, důslednou kontrolu nad vygenerovaným HTML kódem
i HTTP komunikací, výkonný routovací systém nebo moderní API. Zároveň využívá
nové funkcionality .NET Frameworku, jako je podpora asynchronních metod,
anonymních a dynamických datových typů nebo jazyka LINQ.
Framework je implementován jako řada nezávislých komponent, mezi které patří
routovací systém, View engine nebo Controller factory. Umožňuje jednoduše
nahradit tyto základní komponenty vlastní implementací. V MVC frameworku lze
zvolit tři různé možnosti pro každou komponentu. Lze ponechat výchozí
implementaci komponenty, která dostačuje pro většinu aplikací, nebo lze původní
třídu přetížit a vylepšit požadované metody. Třetí variantou je výchozí třídu
nahradit vlastní implementací rozhraní nebo abstraktní třídy [9].
3.4.1 Struktura aplikace
MVC aplikace je složena ze tří různých částí.
13
• Model, který obsahuje nebo reprezentuje data, se kterými uživatel pracuje.
Může se jednat o jednoduchý View Model reprezentující pouze data
přenášená mezi View a Controller nebo o doménový model aplikace.
• View, jež se používá k vykreslení některé části Modelu jako uživatelského
rozhraní.
• Controller, který zpracovává příchozí požadavky, provádí operace na Modelu
a vybírá View, které se vykreslí uživateli.
V ASP.NET MVC je Controller třída poděděná z třídy
System.Web.Mvc.Controller. Každá veřejná metoda v Controlleru se nazývá
Action method a je asociována s URL definovanou v routovacím systému ASP.NET.
Při zaslání požadavku na server je URL požadavku přirazena k Action method
v Controlleru. Vybraná metoda je následně vykoná operace s Modelem a vybere
View, které se vykresli uživateli. Interakce mezi Controllerem, Modelem a View jsou
znázorněny na Obrázek 4.
Obrázek 4 - Interakce mezi MVC komponentami [10]
Framework ASP.NET MVC používá View engine. Jedná se o komponentu
odpovědnou za vykreslení View a jeho odeslání prohlížeči. Ve výchozím nastavení
aplikace využívá View engine Razor, případně je možné využít View engine třetích
stran nebo implementovat vlastní. Soubor View má koncovku .cshtml, jedná
se o soubor HTML rozšířený o syntaxi jazyka Razor.
Model je běžná nebo doménová třída aplikace obsahující požadované vlastnosti,
které jsou potřebné k vykreslení View.
14
Obrázek 5 - Struktura ASP.NET MVC projektu [Zdroj: autor]
3.4.2 Výhody a nevýhody
Architektonický vzor MVC i samotný framework ASP.NET MVC obsahují množství
výhod, které je nutné pochopit. Každá část MVC architektury je přesně definovaná
a nezávislá, využívá se principu oddělení zodpovědností (Separation of Concerns
– SoC). Data, se kterými se pracuje jsou uložena pouze v Modelu, logika
pro zobrazování dat je umístěna pouze ve View a kód, který zpracovává uživatelské
požadavky a vstupy je obsažen pouze v Controlleru. Toto rozdělení je základní
výhodou celého MVC vzoru.
První výhodou je škálování ve smyslu rozšiřování komplexnosti aplikace
a flexibilita. Změny nebo rozšiřování částí aplikace jsou díky rozdělení jednotlivých
komponent velmi rychlé a jednoduché i v rozsáhlých aplikacích. Zároveň
je velmi snadné se přizpůsobovat požadavkům v průběhu vývoje a úprav aplikace.
Další výhodou je jednotkové testování. Moduly MVC frameworku je velmi
jednoduché automaticky testovat za pomocí nástrojů obsažených ve Visual Studiu
nebo nástrojů třetích stran.
Pro začátečníky bývá složitější pochopit základní principy MVC a oddělení jeho
komponent. Při nesprávném použití jsou aplikace velmi složité a porušují základní
15
logiku architektonického vzoru. Technologie zároveň není vhodná pro menší
aplikace. Několik nevýhod má ASP.NET MVC v porovnání se starší technologií
WebForms. WebForms obsahují Drag&Drop elementy s živým náhledem vzhledu
stránek, čímž hlavně začátečníkům zjednodušují práci a přehled ve stránce. Další
z nevýhod je absence komplexnějších uživatelských komponent. Framework,
respektive jeho View engine Razor, obsahuje pouze základní HTML helpery
(metody, které vygenerují požadovanou HTML syntaxi) pro vytvoření základních
formulářových polí, jako je TextBox nebo Button. Nicméně nenabízí nástroje
pro vytvoření komplexnějších formulářů nebo komponent. Pro asynchronní
komunikaci mezi prohlížečem a serverem je nutné využít nástroje a knihovny
třetích stran, např. knihovnu jQuery, případně front-endové frameworky jako
Angular, React nebo Knockout. Další alternativou je použití již existujících
komponent jiných autorů. Microsoft sice zveřejnil knihovnu MicrosoftMvcAjax
pro zjednodušení práce s asynchronními požadavky, nicméně od jejího zveřejnění
v roce 2013 nebyla aktualizována a obsahuje pouze část funkcionality potřebné
pro vytvoření asynchronních dotazů [9].
3.5 ASP.NET Web API
ASP.NET Web API (Application Programming Interface) je framework určený
pro snadné vytvoření aplikačního rozhraní, které je přístupné pomocí HTTP metod.
Web API může být přístupné pro množství HTTP klientů, mezi které patří
prohlížeče, mobilní zařízení nebo zařízení internetu věcí. Zároveň využívá výhod
webové infrastruktury, mezi které patří cachování dat nebo komprese dat.
Následuje takzvané RESTful (Representational state transfer) schéma a využívá
HTTP metod GET, POST, PUT a DELETE.
Framework je velmi inspirován konceptem technologie ASP.NET MVC. Byl postaven
s podobnou úrovní abstrakce, s MVC zároveň sdílí velkou část infrastruktury
a funckionality. Vývojáři pracující s ASP.NET MVC rozeznají mnoho podobných
implementací komponent, jako jsou controllery, akce, filtry apod. Framework
ASP.NET Web API může být integrován do MVC aplikace nebo implementován
jako samostatná aplikace. Dvě základní komponenty jsou Model a Controller.
Controller je poděděn z třídy ApiController, jednotlivé metody implementované
16
v Controlleru navrací konkrétní datový typ. Model je jednoduchá třída,
která odpovídá struktuře přenášených dat. ASP.NET se na pozadí sám stará
o serializaci a deserializaci dat do komunikačního formátu. Primárním formátem
pro přenos dat je JSON, ale je možné použít XML, BSON nebo jiné formáty.
Framework dále přidává snadnou možnost práce s autentizací, autorizací
nebo routováním požadavků. Schéma aplikace je patrné z Obrázek 6. Klient pošle
HTTP požadavek webové aplikaci. Routovací systém frameworku vybere
požadovaný Controller a podle názvu a definované HTTP metody zavolá akci
v Controlleru. V této akci se obvykle provede čtení nebo zápis do datové vrstvy
aplikace a požadované operace s Modelem. Model se dále serializuje
do požadovaného formátu a odešle HTTP odpovědí na klientské zařízení [11].
Obrázek 6 - Schéma ASP.NET WebAPI [12]
3.5.1 Použití
Následující část kódu představuje dvě třídy (modely) Employee, Department
a API controller DepartmentsController. Tento controller obsahuje metodu Get,
která navrací instanci třídy Department.
public class Employee { public string Name { get; set; } }
17
public class Department { public string Name { get; set; } public Employee Manager { get; set; } } public class DepartmentsController : ApiController { public Department Get(int id) { Department sales = new Department() { Name = "Sales" }; Employee alice = new Employee() { Name = "Alice" }; sales.Manager = alice; return sales; } }
URI (Uniform Resource Identifier – „jednotný identifikátor zdroje“) je definován
REST schématem /Departments/Get/id. Po spuštění aplikace a zavolání metody
server ve výchozím nastavení vrátí následující data serializovaná do formátu JSON:
{"Name":"Sales","Manager":{"Name":"Alice"}} [13].
18
4 Inversion of Control a Dependency Injection
Inversion of Control (zkráceně IoC), je návrhový vzor objektově orientovaného
programování umožňující uvolnění vazeb mezi svázanými komponentami.
Při běžné implementaci se vytváření třídy, které pak využívají další třídy. Touto
implementací jsou však třídy pevně svázány a jakákoli změna závislé třídy znamená
úpravy kódu. Inversion of Control umožňuje uvolnění těchto vazeb. Aplikace
při použití tohoto návrhového vzoru není monolitická, ale je sadou komponent,
které implementují požadované rozhraní. Každá komponenta je nezávislá na svém
okolí a lze ji jednoduše upravit nebo vyměnit. Základem návrhového vzoru je práce
s rozhraním, v kódu by se téměř nemělo vyskytovat vytváření instancí tříd. Tyto
instance jsou dodávány mimo kód třídy. Vytváření instancí je delegováno
na takzvaný IoC kontejner, ve kterém jsou definovány implementace jednotlivých
rozhraní. Dependency Injection (DI), v českém překladu vkládání závislostí,
je konkrétní technika využití návrhového vzoru Inversion of Control. Dependency
Injection pak obsahuje několik způsobů, jak do třídy dodávat instance vnějších tříd.
Nejčastěji se využívá tzv. Constructor Injection. Tento způsob spočívá v tom,
že třídy, do nichž se vkládají instance vnějších tříd mají vytvořený paremetrický
konstruktor. IoC kontejner zjistí parametry konstruktoru a jejich datové typy, podle
definice vytvoří instance těchto tříd a vytvoří instanci požadované třídy
s instancemi vnějších tříd. Dalším způsobem vkládání tříd je Setter Injection
nebo Interface Injection.
Inversion of Control má několik zásadních výhod. Menší závislosti zdrojového kódu
umožňuje jednodušší tvorbu i údržbu jednotlivých komponent. Explicitně
definované závislosti dále zjednodušují orientaci v těchto závislostech. Definice
IoC kontejneru se ve většině případů konfiguruje mimo hlavní zdrojový kód,
komponenty lze tedy nejen snadno vyměnit, ale i použít v jiných programech.
S výhodami však přináší i několik nevýhod. IoC je nevhodný pro malé a jednoduché
aplikace, do který přináší zbytečnou komplikaci zdrojového kódu. Pro vývojáře,
kteří tento návrhový vzor neznají, je velmi těžké se ve zdrojovém kódu orientovat.
Pro .NET Framework a ASP.NET je k dispozici škála IoC kontejnerů.
Mezi nejznámější a nejpoužívanější se řadí Castle Windsor, Ninject, Unity
19
nebo Autofac. Jednotlivé nástroje se liší v rozsáhlosti, rychlosti i způsobu použití.
Zajímavostí je, že nový ASP.NET Core již v základní implementaci obsahuje
IoC kontejner, pro základní použití této techniky tedy nebude nutné instalovat
projekty třetích stran [14].
4.1 Autofac
V následující ukázce je představen IoC kontejner Autofac. Jedná se o pokročilý
nástroj, který lze použít nejen na samotném .NET Frameworku, ale i na novém
.NET Core nebo ve Universal Windows apps. Zároveň podporuje webové
technologie ASP.NET WebForms, MVC i ASP.NET Core. Navíc obsahuje množství
rozšiřujících modulů, například moduly pro integraci do ASP.NET WebApi
nebo SignalR. Nástroj zároveň nabízí velmi dobrou dokumentaci i silnou komunitu.
Obsahuje také mnoho pokročilých možností pro definování životnosti instancí,
hromadnou registraci tříd nebo integraci logovacích frameworků. Je dostupný
pomocí NuGet Package Manageru. Poslední stabilní verze 4.5.0. byla vydána
5. dubna 2017. Autofac je open source pod MIT licencí, lze jej tedy využít zdarma
i pro komerční aplikace.
Konfigurace se provádí při startu aplikace v souboru global.asax v metodě
Application_Start(). Pro konfiguraci se používá takzvaná Fluent syntaxe jazyka
C#. Definice jednotlivých tříd probíhá pomocí metod třídy ContainerBuilder.
Následující zdrojový kód představuje konfiguraci IoC kontejneru pro ASP.NET MVC
aplikaci. Na prvním řádku se provede vytvoření instance třídy ContainerBuilder,
dále se zaregistrují Controllery aplikace. Následuje zaregistrování třídy
PdfService jako implementace rozhraní IPdfService. Zároveň se nastaví
životnost instance InstancePerLifetimeScope, kdy je instance vytvořena
po dobu požadavku na server. Posledním krokem je sestavení kontejneru.
protected void Application_Start() {
var builder = new ContainerBuilder(); builder.RegisterControllers(typeof(MvcApplication).Assembly); builder.RegisterType<PdfService>().As<IPdfService>().InstancePerLifetimeScope(); var container = builder.Build();
20
DependencyResolver.SetResolver(new AutofacDependencyResolver(container)); }
V konstruktoru Controlleru je definován parametr pdfService. AutoFac
při vytvoření instance toho Controlleru automaticky předá vytvořenou instanci
třídy PdfService definovanou v konfiguraci [15].
private readonly IPdfService _pdfService; public CustomersController(IPdfService pdfService) {
_pdfService = pdfService; }
21
5 Přístup k datům
Při vývoji webové aplikace s použitím objektově orientovaného programovacího
jazyka se běžně využívají relační databáze. Nicméně obě technologie jsou založeny
na úplně jiném konceptu práce s daty a pro jejich propojení je potřeba
implementovat vrstvu, která zajistí převod dat z datových typů aplikace do relační
databáze.
Tuto vrstvu může vývojář aplikace implementovat ručně nebo lze využít
již existujících nástrojů objektově-relačního mapování. ORM nástroje zajistí
komunikaci a přenos dat s databázovým systémem, čímž odstíní vývojáře
od nutnosti používat relační model a při implementaci aplikace může využít čistě
objektově orientovaný přístup. V prostředí Microsoft .NET existují desítky
ORM nástrojů, některé z nich jsou již neaktivní. Mezi největší ORM nástroje v .NET
patří Entity Framework a NHibernate.
5.1 ADO.NET
Knihovna ADO.NET je jedna ze základních komponent .NET Frameworku,
která obsahuje technologie pro přístup k datům. Společně s databázemi nabízí
technologie pro přístup k datům uloženým ve formátu XML a dalším hierarchicky
uloženým datům.
K připojení knihovna využívá poskytovatele dat (Data providers), kteří umožňují
vykonání příkazů a získání výsledků nad různými databázemi. Mezi primárně
podporovanou databázi patří Microsoft SQL Server. Dále je možné doinstalovat
poskytovatele třetích stran používající připojení pomocí ODBC nebo OLE DB,
například pro databázi MySQL, Oracle, DB2 a mnoho dalších.
Pro uložení dat do paměti aplikace používá objekt DataSet, který je složený
z tabulek (DataTable). Tabulka obsahuje řádky (DataRow) a sloupce
(DataColumn) odpovídající struktuře dotázané databáze. Z tohoto způsobu uložení
dat vyplývá nevýhoda knihovny ADO.NET, kterou je „plochý“ pohled na data uložená
v řádcích a sloupcích, stejně jako v relační databázi [16].
22
5.2 Entity Framework
ADO.NET Entity Framework je open-source ORM nástroj vyvíjený jako rozšíření
knihovny ADO.NET společností Microsoft. Jeho první verze byla vydána v srpnu
2008 a vývojáři byla ostře kritizována. Od této doby vývoj Entity Frameworku však
velmi pokročil a aktuálně je nejrozšířenějším nástrojem objektově-relačního
mapování pro .NET Framework, který Microsoft doporučuje pro všechny moderní
aplikace komunikující s relační databází. Díky velmi kvalitní oficiální dokumentaci
na MSDN, množství návodů a specializovaných webů je jeho naučení snadné i pro
začátečníky. K dispozici je Entity Frameworku ve verzi 6.1.3, která vyšla
10. března 2015. Jedná se o stabilní, prověřenou verzi. V následujících kapitolách
i v praktické části práce je popsána a použita právě tato verze. Instalace do projektu
je možná pomocí NuGet Package Manageru, kde je po dlouhou dobu zároveň
nejstahovanějším balíčkem [17].
5.2.1 Entity Framework Core
Novinkou představenou společně s ASP.NET Core je Entity Framework Core. Tento
nástroj je vyvíjen se stejnou filosofií jako celý framework .NET Core. Je taktéž
multiplatformní a snadno rozšiřitelný. Jeho zdrojové kódy jsou přístupné
na GitHubu a každý se může zapojit do jeho vývoje. V porovnání s původním Entity
Frameworkem 6.x přináší mnoho vylepšení a nových funkcí. Nicméně implementace
nástroje je nová, takže jej Microsoft označuje spíše jako první verzi nového
produktu.
Entity Framework Core využívá zkušenosti z předchozí verze a zůstala v něm
zachována většina důležitých API metod, tudíž vývojáři přecházející z předchozích
verzí budou mít přechod usnadněný. I přesto je EF Core postaven na kompletně
nové sadě komponent. To znamená, že automaticky nepřenáší veškerou
funkcionalitu z Entity Frameworku 6. Některé funkce, jako je lazy loading
nebo connection resiliency, ještě nejsou v nástroji implementovány, ale budou
doplněny v budoucích verzích. Méně využívané funkce v EF Core implementovány
nebudou. Nové, snadno rozšiřitelné jádro navíc dovoluje přidat některé nové funkce,
například alternativní klíče nebo smíšené provádění dotazů pomocí LINQ mezi
klientem a databází.
23
EF Core bude zároveň v nejbližší době možné použít i pro Universal Windows Apps,
bude možné jej tedy používat i v aplikacích distribuovaných přes Windows Store
pro všechny platformy. Spolu s tím přinese podporu nerelačních databází
jako Azure Table Storage a Redis [18].
5.2.2 Základní komponenty
Pro interakci vývojáře s Entity Frameworkem je základním prvkem třída
DbContext. Slouží pro načítání a ukládání objektů z/do databáze uložených
v kolekcích DbSet, zajišťuje informace o připojených objektech a zároveň poskytuje
rozhraní pro práci s databází. Prostřednictvím kontextu lze načítat, přidávat,
upravovat a mazat konkrétní business objekty. Entity Framework se následně
postará o konverzi příkazu do databáze.
Entity Framework nabízí čtyři různé způsoby tvorby:
• Model First: Vytvoří prázdný konceptuální model a podle něho je vytvořena
databáze a zároveň je vygenerován zdrojový kód tříd.
• Database First: Podle existující databáze je vygenerován konceptuální model,
který je možné následně upravovat. Zdrojový kód tříd je vygenerován podle
modelu.
• Code First: Vytvoří prázdný Code First model a po vytvoření POCO (Plain Old
CLR Object) tříd lze podle modelu vygenerovat databázi.
• Code First From Database: Vytvoří Code First model založený na existující
databázi a vygeneruje POCO třídy.
K dotazování využívá populární rozšíření LINQ, který je také součástí
.NET Frameworku od verze 3.5 a umožňuje jednodušší způsob dotazování, tvorbu,
třídění, propojování a vyhledávání jakýchkoli dat. Výsledky dotazu implementují
rozhraní IEnumerable<T>.
Pro načítání dat z databáze lze využít Eager Loading (horlivé načítání), Lazy Loading
(líné načítání), explicitní načtení z DbContext nebo vlastní SQL dotaz. Eager
Loading při tvorbě dotazu načítá připojené entity jako součást jednoho dotazu.
Využívá metodu Include implementovanou rozhraním IQueryable. Lazy Loading
je jedna z důležitých funkcí Entity Frameworku. Nenačítá připojené entity ihned
24
při prvním dotazu, ale až po jejich vyžádání, čímž v některých případech může
výrazně vylepšit výkon aplikace. Explicitní načítání lze využít jako ruční ekvivalent
vypnutého Lazy Loadingu. Na instanci připojené entity je možné zavolat metodu
Load, která provede dotaz do databáze [17].
Nástroj je podrobněji použit a popsán v praktické části práce.
5.3 NHibernate
NHibernate je open-source ORM nástroj pro platformu Microsoft .NET. Vznikl
portací projektu Hibernate ORM vyvinutého v Javě, který byl zveřejněn v roce
2001. Několik let oba projekty spravovala společnost JBOSS, Inc. (nyní část
společnosti Red Hat), nicméně od roku 2006 je NHibernate spravovaný aktivní
komunitou, díky které se NHibernate stal velmi dospělým projektem a stále se vyvíjí.
O nástroji bylo napsáno množství knih a díky velké podpoře vývojářů existuje
i několik Google Groups a webových stránek.
Aktuálně je dostupná verze 4.1.1, která byla vydána 2. února 2017. Primární
databází je Microsoft SQL Server, dále je možné použití databáze Microsoft Access,
Oracle, DB2, SQLite a další.
Ve výchozí instalaci neobsahuje nástroj pro vytvoření mapování podle existující
databáze. Pro menší projekty není problém implementovat mapování ručně,
pro větší projekty s množstvím tabulek se doporučuje použít programy třetích
stran. Při ručním mapování tabulek na třídy je nutné vytvořit mapovací soubory
ve formátu XML s koncovkou .hbm.xml. S rostoucím počtem entit a mapovacích
souborů se však projekt stává velmi nepřehledný. Mapování v XML souborech
se neověřuje při kompilaci, je tedy při úpravách velmi náchylné na chyby a překlepy
ze strany vývojáře. Alternativou je využití open-source doplňku Fluent NHibernate,
ve kterém lze mapování implementovat přímo ve zdrojovém kódu. Zároveň
umožňuje ze zdrojového kódu konfigurovat i samotný NHibernate. Tento doplněk
je použit v ukázkové aplikaci. Nástroj umožňuje na základě konfigurace a mapování
entit spustit příkazy pro vytvoření nebo aktualizaci databázového schématu.
K tomuto účelu se používá třída SchemaUpdate ve jmenném prostoru
NHibernate.Tool.
25
Pro interakci vývojáře s NHibernate se využívá objekt Session, který udržuje
kolekci objektů a zároveň nabízí metody pro práci s databází. Pro dotazování lze
využít jazyk HQL (Hibernate Query Language) za použití rozhraní IQuery,
který je podobný jazyku SQL a umožňuje použít funkce jako spojování tabulek,
agregační funkce, vyhledávání v řetězcích, řazení, volání procedur. HQL umožňuje
načíst jen vybrané vlastnosti entity, čímž urychlí dotazy. Zároveň má ve výchozím
nastavení zapnutý Lazy Loading, čímž urychlí načítání entit z databáze. Alternativně
lze pro dotazování zvolit sestavování dotazu podle kritérií (skládání pomocí
různých metod) rozhraním ICriteria. Od verze 3 je k dispozici poskytovatel
k dotazování pomocí jazyka LINQ, který podporuje většinu operací. V porovnání
funkčnosti s Entity Frameworkem však nepředstavuje ideální formu dotazování.
Další alternativou je vytvoření vlastního SQL dotazu.
Pro NHibernate existuje množství doplňků a rozšíření. Je k dispozici např. rozšíření
Entity Developer ORM Designer for NHibernate. To umožňuje vytvořit NHibernate
model pomocí grafického uživatelského rozhraní a následně podle něj vytvořit
nebo aktualizovat databázi. Zároveň nabízí i zpětné vytvoření nebo aktualizaci
modelu z databáze [19].
Nástroj je podrobněji použit a popsán v praktické části práce.
26
6 Klientská funkcionalita
6.1 SignalR
ASP.NET SignalR je knihovna pro ASP.NET vývojáře, která zjednodušuje vývoj
webové funkcionality komunikující v reálném čase. SignalR umožňuje
obousměrnou komunikaci mezi serverem a klientem. Server může okamžitě
odesílat obsah na všechny připojené klienty, jakmile se stanou dostupní. SignalR
podporuje technologii Web Sockets a obsahuje zpětně kompatibilní techniky pro
starší prohlížeče [20].
SignalR byl původně vlastní projekt dvou členů týmu pracujícího na ASP.NET,
ale nyní je to oficiálně integrovaný produkt mezi webové technologie společnosti
Microsoft. Jako mnoho podobných technologií je kompletně open-source
zpřístupněný pod Apache 2.0 licencí. Zároveň využívá plné podpory ze strany
Microsoftu. Zdrojové kódy frameworku a příbuzné projekty jsou přístupné
na GitHubu.
Základní myšlenkou frameworku je izolace vývojáře od nízko úrovňových detailů
síťové komunikace. Toto odstínění vytváří dojem trvale otevřeného spojení.
Pro dosažení tohoto cíle SignalR využívá komponenty specifické pro oba konce
komunikace, které mezi nimi zajistí zasílání a příjem zpráv v reálném čase. SignalR
je odpovědný za výběr nejvíce efektivní techniky dostupné na klientském zařízení
i serveru (Long Polling, Forever Frame, Websockets, …) a tyto techniky využívá
pro vytvoření a nepřetržité udržení spojení. Zároveň v případě potřeby automaticky
řídí odpojení nebo obnovu spojení. Vývojář vidí pouze permanentně otevřené
spojení a SignalR zajistí, že vše na pozadí funguje správně. V tomto frameworku
se toto spojení často nazývá virtuální trvalé spojení. Rozhodnutí, jaká technika
se pro komunikaci použije, se provádí v počáteční fázi komunikace mezi klientem
a serverem, která se nazývá negotiation (vyjednávání). Zároveň je možné vynutit
použití specifické přenosové technologie za použití klientských knihoven.
SignalR zároveň obsahuje messaging bus, sběrnici zpráv, která umožňuje řídit
přenos dat. To znamená, že server je schopný sledovat klienty a detekovat jejich
připojování a odpojování. Zároveň obsahuje mechanismy pro jednoduché odeslání
zpráv všem nebo části klientů, automaticky řešit problémy týkající se komunikace
27
(např. rozdílné rychlosti, latence, chyby, …) a zajištění doručení zpráv. Navíc
obsahuje knihovny na klientské straně, které dovolují číst data ze služeb různých
aplikací, řídit konec virtuálního spojení a asynchronně přijímat nebo odesílat
data [21].
6.1.1 Ukázka použití
Nejsnazší instalace SignalR do projektu je pomocí NuGet Package Manageru.
Aktuálně je dostupná verze 2.2.1 vydaná dne 18. července 2016, která je zároveň
popsána v této práci. Při instalaci se do projektu připojí potřebné knihovny,
nakopíruje se knihovna jQuery a JavaScriptové soubory pro klientskou část
komunikace. Následující ukázka zdrojového kódu představuje jednoduchou
chatovací aplikaci na principu hubu, kde klient odešle zprávu na server, server
ji zpracuje a odešle na všechny připojené klienty. V prvním kroku je nutné vytvořit
třídu Startup s metodou Configuration(IAppBuilder app). Tato metoda se volá
při startu aplikace, provede se v ní inicializace SignalR voláním metody
app.MapSignalR(). Druhým, a zároveň posledním krokem v serverové části
aplikace je vytvoření třídy ChatHub. Tato třída, poděděná z třídy Hub, reaguje
na zavolání metody Send(string sName, string sMessage), přijatá data
v parametrech zpracuje a metodou Clients.All.broadcastMessage(sName,
sMessage) je odešle všem připojeným klientům. V serverové části se nachází
dvě třídy:
Startup.cs:
using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRTest.Startup))] namespace SignalRTest { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } } }
ChatHub.cs:
using System; using System.Web; using Microsoft.AspNet.SignalR;
28
namespace SignalRChat { public class ChatHub : Hub { public void Send(string sName, string sMessage) { Clients.All.broadcastMessage(sName, sMessage); } } }
V klientské části aplikace se nachází jednoduchá HTML stránka. Do ní je nutné
připojit tři JavaScriptové soubory knihovny jQuery a SignalR v závislosti
na používaných verzích. Třetí soubor na adrese "signalr/hubs" je automaticky
generovaný serverovou částí aplikace, obsahuje informace o serverových třídách
(v tomto případě o třídě ChatHub a její metodě Send) a umožňuje jejich volání.
<script src="Scripts/jquery-1.6.4.min.js" ></script> <script src="Scripts/jquery.signalR-2.2.1.min.js"></script> <script src="signalr/hubs"></script>
Ve stránce je dále vložený jednoduchý JavaScript, který zajišťuje odeslání a přijímání
zpráv:
<script type="text/javascript"> $(function () { var chat = $.connection.chatHub; chat.client.broadcastMessage = function (name, message) { $('#list').append('<li>' + name + ':' + message + '</li>'); }; $.connection.hub.start().done(function () { $('#sendmessage').click(function () { chat.server.send('testovací jméno', 'testovací zpráva'); }); }); }); </script>
První řádek JavaScriptu deklaruje proměnnou chat a naplní ji referencí na třídu
chatHub v serverové části aplikace. V další části kódu je vytvořena funkce, kterou
volá server v případě odeslání zprávy klientům. Script zpracuje přijatá data
a naformátované je připojí do HTML seznamu s identifikátorem list. Třetí a poslední
část kódu je funkce, která se zavolá při odeslání zprávy na server. Odeslání
se provádí při kliku na tlačítko s identifikátorem sendmessage. V této ukázce
se odesílají pouze data „testovací jméno“ a „testovací zpráva“ [22].
29
6.2 CSS Frameworky
S rozvojem webových aplikací a jazyka HTML se zároveň masivně vyvíjí i kaskádové
styly. Rozšířily se v rozsahu, hloubce i složitosti. Sledování veškerých novinek
v CSS je velmi těžké, a když se vezmou v úvahu rozlišné chování prohlížečů
v počítačích, mobilních zařízeních, operačních systémech, IoT zařízeních,
je prakticky nemožné držet krok s probíhajícími změnami.
Použití CSS frameworku může velmi urychlit vývoj nového designu. Kvalitní
framework pomůže zlepšit celkovou funkčnost a výkon celého webu či aplikace.
Zároveň může být přínosem pro celkovou user experience aplikace nebo webové
stránky [23].
6.2.1 Twitter Bootstrap
Twitter Bootstrap, známý pod zkráceným názvem Bootstrap, je jeden
z nejpopulárnějších open source CSS frameworků. Krátce po zveřejnění se stal
nejpopulárnějším projektem na GitHubu a postupem času se stal natolik populární,
že Microsoft oznámil jeho integraci do šablon webových aplikací ve Visual
Studiu 2013.
Jedním z hlavních důvodů, proč se CSS frameworky společně s Bootstrapem staly
natolik populární je ten, že dovoluje vývojářům vytvořit hezky vypadající stránky
s relativně malým množstvím námahy. Bootstrap zároveň nabízí bohatý ekosystém
šablon, komponent třetích stran nástrojů a velmi aktivní komunitu.
Použití Bootstrapu v ASP.NET projektu je praktický krok, stará se o typografii,
vzhled formulářů, komponenty uživatelského prostředí a dovoluje vývojářům
soustředit se na podstatné věci. Z tohoto pohledu se jedná o neocenitelný nástroj
nejen pro menší vývojářské týmy, které tím pádem nepotřebují vlastního grafika.
Bootstrap je aktuálně dostupný ve verzi 3.3.7 vydané 25. července 2016. V této verzi
představil přístup Mobile-first, díky kterému jsou všechny stránky automaticky
responzivní a optimalizované pro zařízení s menší obrazovkou [24].
Pro instalaci do ASP.NET projektu je doporučována instalace pomocí NuGet Package
Manager, který zároveň kontroluje nové verze balíčků a umožňuje velmi
jednoduchou aktualizaci nebo odinstalaci z projektu. Zároveň řeší závislosti
na dalších balíčcích, v tomto případě závislost na knihovně jQuery. Na platformě
30
ASP.NET je pro Bootstrap k dispozici velké množství knihoven a doplňků třetích
stran, které velmi zjednodušují tvorbu uživatelského rozhraní. Patří mezi
ně například knihovny TwitterBootstrapMVC nebo FluentBootstrap,
které za pomocí Fluent metod umožňují jednoduše vytvořit Bootstrap komponenty
bez znalosti CSS tříd frameworku. Následující část kódu View technologie
ASP.NET MVC demonstruje vytvoření jednoduchého přihlašovacího formuláře
s použitím knihovny TwitterBootstrapMVC [25].
@using (var f = Html.Bootstrap().Begin(new
Form().LabelWidthMd(2).LabelWidthSm(3)))
{
@f.FormGroup().TextBoxFor(m => m.Email)
@f.FormGroup().TextBoxFor(m => m.Password)
@f.FormGroup().CheckBoxFor(m => m.RememberMe)
@f.FormGroup().CustomControls(Html.Bootstrap().SubmitButton())
}
Nezávisle na používané technologii je k dispozici velké množství připravených
uživatelských rozhraní, ať už placených nebo dostupných zdarma. Příkladem
je šablona administrace AdminLTE od Almsaeed Studio, která používá Bootstrap
a je dostupná v NuGet Package Manageru.
Obrázek 7 - Šablona administrace AdminLTE [26]
31
6.2.2 Další CSS frameworky
Bootstrap není jediným zástupcem CSS frameworků. K dispozici jsou desítky dalších
a velmi rozdílných frameworků. Liší se v rozsáhlosti, velikosti zdrojového kódu,
uživatelské podpoře i účelu. Mezi zajímavé CSS frameworky patří Pure.css,
který je rozložen do několika modulů. Jeho nespornou výhodou je velikost
minifikovaného kódu, která je v aktuální verzi 0.6.2 pouze 3,8 KB. I přesto nabízí
plnou podporu pro vytvoření responzivní šablony webových stránek a jejich menu,
tabulek, formulářů či tlačítek. Dalším zástupcem frameworků je Semantic UI. Jedná
se o rozsáhlejší nástroj pro tvorbu složitějšího uživatelského rozhraní. Jak je z názvu
patrné, jeho hlavním cílem je zápis formátovacích tříd v přirozenějším jazyce.
Zároveň nabízí i pokročilé moduly jako dropdown, checkboxy nebo modální okna
s intuitivním JavaScriptovým API. Dalšími CSS frameworky jsou například
Foundation, který nabízí zároveň podporu pro tvorbu responzivních emailů, Kube,
Titan a mnoho dalších [27].
6.3 JavaScriptové frameworky
Při tvorbě moderních webových aplikací se klade velký důraz na uživatelské
rozhraní. Cílem je co nejvíce uživateli zpříjemnit používání aplikace, proto se velmi
často používají dynamicky načítané komponenty za pomoci JavaScriptu. Mezi
prohlížeči však existují drobné nekompatibility nebo rozdíly v podporovaných
příkazech tohoto jazyka a jejich ošetřování je velmi pracné. Zároveň programování
v samotném JavaScriptu je v běžných úkolech zbytečně zdlouhavé a složité.
JavaScriptové frameworky slouží k ulehčení práce a programování v JavaScriptu.
Eliminují problémy JavaScriptu a zároveň nabízí vyšší míru abstrakce, díky které
je snadné se orientovat v rozsáhlém kódu. Mezi nejznámější a nejpoužívanější patří
knihovna jQuery. Velmi usnadňuje obsluhu událostí, animace, asynchronní
dotazování nebo manipulaci s objektovým modelem dokumentu. Mezi populární
JavaScriptové frameworky patří Angular, React, Knockout nebo Node.JS.
Microsoft pro platformu ASP.NET aktuálně nenabízí technologie pro vytvoření
dynamického uživatelského prostředí, pro tyto účely je nutné využít technologie
třetích stran.
32
6.3.1 TypeScript
V souvislosti s jazykem JavaScript a dynamickým uživatelským rozhraním
webových aplikací nabízí Microsoft open-source programovací jazyk TypeScript.
Jedná se o nadstavbu jazyka JavaScript, kód jazyka TypeScript se kompiluje
do JavaScriptu. Rozšiřuje JavaScript o podporu statického typování a další vlastnosti
objektově orientovaného programování, např. třídy, rozhraní, výčtové typy,
generika, výchozí hodnoty parametrů a mnoho dalších. Je navržený pro vývoj
rozsáhlých aplikací, často se používá pro zjednodušení a zpřehlednění kódu
v kombinaci s JavaScriptovými knihovnami a frameworky. Samotný jazyk
je nezávislý na používané technologii, k dispozici jsou doplňky do velkého počtu
používaných vývojových nástrojů, mezi které patří nejen Visual Studio a Visual
Studio Code, ale i IntelliJ IDEA, Eclipse, NetBeans a mnoho dalších. Následující
zdrojový kód obsahuje definici třídy User s textovou vlastností name,
konstruktorem a vytvoření instance této třídy pomocí TypeScriptu [28].
class User { name: string; constructor(username: string) { this.name = username; } } let user = new User("Petr");
6.4 DotVVM
DotVVM je nový open-source framework pro webové aplikace vytvořený českou
společností Riganti. První verze byla představena v roce 2015, zdrojové kódy jsou
veřejně přístupné na GitHubu. Slouží pro jednoduchou a rychlou tvorbu moderního
uživatelského prostředí na platformě ASP.NET MVC.
Microsoftem doporučovaná varianta při tvorbě nové webové aplikace na platformě
.NET je použití ASP.NET MVC nebo ASP.NET WebAPI v kombinaci s klientským
frameworkem, jako je React, Angular nebo Knockout. Každý z těchto frameworků
je nicméně velmi rozdílný a pro kombinaci s ASP.NET neexistuje mnoho hotových
řešení. Zároveň se celý vývojářský tým musí učit nové technologie a v případě vývoje
rozsáhlého informačního systému je nutné vytvářet i vlastní infrastrukturu.
DotVVM zajišťuje komunikaci mezi klientským zařízením a serverem, validace,
33
formátování data a času a nabízí množství již vytvořených komponent. Pro jeho
použití není nutné znát různé JavaScriptové knihovny, frameworky nebo nástroje.
Většinu klientské části aplikace lze vytvořit pouze pomocí C#, HTML a CSS. Jedná
se o částečnou náhradu technologie ASP.NET WebForms pro moderní webové
aplikace. Na pozadí využívá knihovnu Knockout a jeho návrhový vzor MVVM.
Obsahuje méně než 50 kB JavaScriptového kódu. Zároveň podporuje původní
.NET Framework 4.5 i nový .NET Core. K frameworku je zároveň pro usnadnění
práce k dispozici doplněk do Visual Studia a placené rozšíření s komponentami
pro CSS framework Bootstrap.
Použití frameworku je velmi jednoduché a intuitivní, což je patrné i z následující
ukázky zdrojového kontaktního formuláře. První část je ViewModel, jednoduchá
třída v jazyce C# s dvěma vlastnostmi a metodou Submit:
public class ContactFormViewModel { public string Name { get; set; } public string Email { get; set; } public string Submit () { ContactService.Submit(Name, Email); } }
Druhou částí je View v jazyce HTML, které obsahuje DotVVM komponenty TextBox
a Button. Toto View se pak nazývá DOTHTML:
@viewModel Dotvvm.ContactFormViewModel, Dotvvm <div class="form-control"> <dot:TextBox Text="{value: Name}" /> </div> <div class="form-control"> <dot:TextBox Text="{value: Email}" /> </div> <div class="button-bar"> <dot:Button Text="Submit" Click="{command: Submit()}" /> </div>
DotVVM automaticky přeloží <dot: komponenty na odpovídající značky jazyka
HTML a hodnoty nebo příkazy přeloží do výrazů knihovny KnockoutJS. Knihovna
je poté sama naplní požadovanými vlastnostmi. Příkazy {command: } jsou
přeloženy do JavaScriptu, který volá interní funkce dotvvm.postBack. Tato interní
funkce poté automaticky zavolá serverovou metodu ve ViewModelu. DotVVM dále
34
nabízí rozsáhlou funkcionalitu pro globalizaci a lokalizaci, klientské validace,
autorizaci nebo zabezpečení aplikace [29].
6.5 Bundling a minifikace souborů
Bundling neboli balíčkování je funkcionalita přímo podporována platfomou
ASP.NET. Dovoluje významně snížit čas potřebný pro načtení stránky redukováním
počtu dotazů na server. Používá se pro rychlejší načítání CSS a JavaScriptových
souborů. Princip spočívá v slučování drobných souborů do jednoho souboru –
bundle. Snížením počtu dotazů je stránka načtena rychleji. Použití bundlingu
je velmi jednoduché. Následující část kódu ukazuje vytvoření bundle
CSS frameworku Bootstrap a tématu. Definice balíčků se provádí při startu aplikace
v metodě Application_Start v souboru Global.asax.
void Application_Start(object sender, EventArgs e) { BundleConfig.RegisterBundles(BundleTable.Bundles); } public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Content/bootstrap").Include( "~/Content/bootstrap.min.css", "~/Content/bootstrap-theme.min.css")); } }
Takto vytvořený bundle lze poté jednoduše použít v klientské části aplikace
v závislosti na použitém frameworku. První příklad ukazuje syntaxi jazyka Razor
v MVC aplikaci, druhý syntaxi používanou ve WebForms aplikaci.
@Styles.Render("~/Content/bootstrap") <%: Styles.Render("~/Content/bootstrap") %>
Pro vytváření JavaScriptových balíčků se místo objektu StyleBundle používá
ScriptBundle a pro vypsání balíčků metoda Scripts.Render(). Při vytváření
balíčků je možné použít soubory uložené v síti CDN.
Minifikace je proces, při kterém se z HTML, CSS a JavaScriptových souborů
odstraňují přebytečná data, která nejsou potřebná pro strojové zpracování. Jedná
se o mezery, nové řádky, komentáře a někdy i oddělovače příkazů. Tyto znaky jsou
35
potřebné pouze pro snadné čtení kódu, ale nejsou potřebné pro běh aplikace.
Odstraněním těchto dat se zmenší velikost souborů, které je potřebné posílat
na klientské zařízení. Minifikaci lze nastavit společně s nastavením balíčků
vlastností BundleTable.EnableOptimizations = true; [30].
6.6 UI komponenty třetích stran
Při vývoji větších aplikací a informačních systémů je v některých případech
praktickým a logickým krokem použití již existujících komponent třetích stran.
S jejich dobrou znalostí rapidně snižují čas potřebný pro implementaci stále
se opakujících součástí aplikací. Na trhu existuje velká škála tvůrců komponent,
kteří je nabízí zdarma, pod open-source licencí nebo v placené variantě. Mezi
největší a nejznámější společnosti, které nabízí placené komponenty s kvalitní
podporou, se řadí Telerik, DevExpress, SyncFusion a další. Společnosti většinou
nabízí velké balíky komponent určené pro různé technologie, jako jsou ASP.NET
WebForms, ASP.NET MVC, WinForms a SinglePage aplikace. V oblasti ASP.NET patří
mezi nejpoužívanější komponenty v první řadě Grid (tabulka), který je hlavně
v oblasti informačních systémů velmi využívaný, a tudíž je tu snaha o co největší
znovupoužitelnost. Gridy velmi často bývají rozšířené o filtrování, řazení, změnu
pozice a viditelnosti sloupců, responzivitu, stránkování, editaci, seskupování
či export dat. Velmi často jsou zároveň optimalizované pro práci s velkým
množstvím dat. Mezi další komponenty se pak řadí rich text editory, kontingenční
tabulky, modální okna, navigační menu a spousta dalších. Součástí komponent
mohou být i technologie pro tvorbu a generování reportů. Může se jednat o grafy,
exporty dat do různých formátů (pdf, doc, xls) či tiskové šablony [31].
36
Obrázek 8 - Ukázka webové aplikace sestavené pomocí komponent DevExpress pro ASP.NET WebForms [32]
6.6.1 Komponenty Syncfusion
Syncfusion je jedna ze společností, která nabízí komplexní sadu komponent
pro .NET a JavaScript. Po vzoru Community licence pro IDE Visual Studio
poskytované společnosti Microsoft uvolnil Syncfusion své komponenty zdarma pro
vývojáře na volné noze nebo až pro pět vývojářů ve společnosti s menším ročním
výnosem než 1 milion dolarů. Jejich použití je možné i pro komerční účely. Balík
mimo jiné obsahuje komponenty určené pro webové aplikace na platformě .NET.
Podporují technologie ASP.NET WebForms i ASP.NET MVC. Navíc již nabízí podporu
nového .NET Core. Komponenty pro obě technologie jsou ve většině případů
ekvivalentní. V balíku jsou zároveň obsaženy komponenty využívající pouze
HTML5 a JavaScript, které lze použít nezávisle na technologii. Instalace do projektu
je možná pomocí NuGet Package Manageru, Syncfusion pro NuGet nabízí vlastní
zdroj balíčků [33].
Z následující ukázky zdrojového kódu Gridu (tabulky) pro technologii ASP.NET MVC
je patrné, že použití komponent je velmi jednoduché. První částí je Controller,
který načte data z datového zdroje a připojí je k dynamické vlastnosti ViewBag.
public class GridController : Controller {
public ActionResult Default() {
37
var DataSource = new NorthwindDataContext().OrdersViews.ToList(); ViewBag.datasource = DataSource; return View();
} }
Druhou částí ukázky je View, ve které je pomocí Fluent syntaxe definovaný Grid.
V Gridu se definuje datový zdroj načtený z dynamické vlastnosti ViewBag,
stránkování, počet stránek a jednotlivé sloupce.
@(Html.EJ().Grid<OrdersView>("DefaultGrid") .Datasource((IEnumerable<object>)ViewBag.datasource) .AllowPaging() .PageSettings(page => { page.PageCount(7); }) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add(); col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75). Format("{0:C}").Add(); col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(80).Format("{0:MM/dd/yyyy}").Add(); }) )
Při vykreslení stránky se pomocí JavaScriptu vytvoří následující tabulka s podporou
stránkování a požadovanými sloupci.
Obrázek 9 - Komponenta Grid z balíku komponent Syncfusion [34]
Komponenty obsahují velké množství nastavení a přizpůsobení. U Gridu se jedná
například o již zmíněné stránkování, filtrování, vytváření sumářů, export dat
do různých formátů, úpravy vzhledu a mnoho dalších vlastností. Syncfusion nabízí
38
rozsáhlou a přehlednou dokumentaci s živými ukázkami. K dispozici je zároveň
nástroj Theme Editor pro vytvoření vlastních barevných témat komponent [34].
7 Vývojové nástroje
Jedním z kritérií vývojářů při výběru nové platformy jsou vývojové nástroje,
se kterými lze na dané platformě pracovat. Microsoft vývojářům nabízí nástroje
pro vývoj aplikací, které lze rozdělit do dvou kategorií. První z nich jsou komplexní
vývojová prostředí (Integrated Development Enviroment, zkráceně IDE). Druhou
kategorií jsou méně komplexní editory. Rozdíly mezi prostředími jsou v závislosti
na cílové skupině uživatelů ve výkonu, ceně i systémových požadavcích. Výběr
prostředí zároveň závisí na vyvíjené aplikaci.
7.1 Visual Studio
Mezi zástupce první kategorie patří Visual Studio. Jedná se o komplexní a velmi
pokročilé IDE, ve kterém je možné vyvíjet aplikace pro různé platformy. Nemusí
se jednat pouze o aplikace úzce spojené s .NET Frameworkem. Mimo již zmíněné
webové aplikace lze vyvíjet konzolové aplikace, WPF a WinForms aplikace,
ale i aplikace pro Android, Apple iOS či cloudové služby. Okolo Visual Studia zároveň
existuje velice rozsáhlý systém doplňků a rozšíření, díky kterým lze IDE neomezeně
přizpůsobit. Jsou tak dostupné nástroje například pro vývoj moderních
Node.JS či ReactJS aplikací.
Microsoft poprvé vydal Visual Studio v roce 1997. Aktuálně je dostupná verze Visual
Studio 2015 ve třech edicích. První je edice Community, která je zdarma dostupná
pro jednotlivé vývojáře, malé vývojářské týmy do pěti členů nebo open source
projekty. Nabízí všechny potřebné komponenty pro vývoj rozsáhlých aplikací.
Druhou edicí je pak Professional, která je určená pro komerční použití větších týmů
a funkcionalitou je téměř shodná s edicí Community. Třetí je Enterprise, která nabízí
podnikové řešení s pokročilými možnostmi pro týmy pracující na projektech
jakékoli velikosti nebo složitosti, včetně pokročilého testování, vývoje a provozu.
Mezi největší nevýhody Visual Studia donedávna patřila jeho vysoká cena spojená
s nedostupností. Od verze Visual Studia 2005 byla sice dostupná edice Express,
39
nicméně její funkcionalita byla velmi omezená. Tuto situaci Microsoft v roce
2014 vyřešil uvolněním již zmíněné edice Visual Studio Community [35].
Obrázek 10 - Ukázka prostředí IDE Visual Studio [35]
7.2 Visual Studio Code
Microsoft Visual Studio Code je nový open-source editor zdrojového kódu, který byl
představen v roce 2015. Jedná se o druhou kategorii vývojových nástrojů. I přes to,
že mimo názvu nemá nic společného s pokročilým Visual Studiem, nabízí několik
stejných funkcí, jako třeba našeptávač Intellisense či snadnou rozšiřitelnost. Editor
je multiplatformní, dostupný na Windows, Linux a OS X a velikost instalátoru
aktuální verze 1.5.2 ze září 2016 nepřekračuje 50 MB.
Barevné značení syntaxe, zvýrazňování a kontrola závorek dělají z Code skvělý
editor pro všechny vaše programátorské úkoly. Visual Studio Code podporuje
JavaScript, C#, C++, PHP, Javu, HTML, R, CSS, SQL, Markdown, TypeScript, LESS,
SASS, JSON, XML a Python, stejně jako spoustu dalších běžných formátů
souborů [36].
40
Obrázek 11 – Ukázka prostředí Visual Studio Code [36]
7.3 NuGet Package Manager
NuGet Package Manager, zkráceně NuGet, je open-source správce balíčků navržený
pro platformu Microsoft. Od představení v roce 2010 se rozrostl do velkého
ekosystému nástrojů a knihoven. Aktuálně se v NuGetu nachází více než
73 500 unikátních balíčků. Ve výchozím nastavení je nainstalován jako rozšíření
do Visual Studia, kde nabízí jednoduché a přehledné uživatelské prostředí i integraci
do kontextových menu. Zároveň může být ovládán pomocí příkazové řádky Package
Manager Console, případně lze vytvořit automatizované scripty. Instalace balíčku
do projektu je oproti ruční instalaci velmi jednoduchá. NuGet při instalaci balíčku
automaticky nakopíruje veškeré potřebné soubory do solution a aktualizuje projekt,
ve kterém přidá reference, změní konfigurační soubor atd. Zároveň vyhledá
a případně nainstaluje nebo aktualizuje veškeré závislé balíčky ve správných
verzích. Při odebrání balíčku odstraní nepotřebné soubory a navrátí veškeré
provedené změny v projektu. Velmi jednoduché je zároveň vytváření a publikování
vlastních balíčků [37].
41
7.4 Užitečné doplňky a rozšíření
Během dvacetileté historie Visual Studia se okolo tohoto nástroje vytvořila také
velmi početná komunita vývojářů, zabývající se jeho rozšířeními. Visual Studio
nabízí téměř neomezené možnosti rozšíření, ať už se jedná o formátování
dokumentů, usnadnění práce, ale i přidávání nových programovacích jazyků,
technologií a mnoho dalších funkcí. V roce 2008 Microsoft vytvořil Visual Studio
Gallery, centrální portál pro zveřejňování rozšíření. Komunitní i komerční vývojáři
zde mohou nahrávat svá rozšíření, uživatelé je mohou hodnotit a psát recenze.
S příchodem Visual Studio Code Microsoft vytvořil nový portál s názvem Visual
Studio Marketplace, kde jsou zveřejňovány rozšíření pro všechny produkty z rodiny
Visual Studio. Zároveň jsou do nově vytvořeného Marketplace postupně přesouvány
i rozšíření z původní Visual Studio Gallery. Instalace rozšíření do nástroje probíhá
velmi jednoduše pomocí nabídky Extensions and updates, některá rozšíření
jsou pak instalovány vlastními instalátory [38].
7.4.1 Resharper
Resharper je velmi populární nástroj rozšiřující funkcionalitu Visual Studia. Jedná
se o komerční produkt české společnosti JetBrains, která je známá i díky velmi
populárnímu IDE IntelliJ IDEA pro jazyk Java. Nástroj je studentům pro studijní
účely zpřístupněn zdarma. Jedním z praktických modulů pomáhající
při programování aplikace je analýza kódu. Resharper obsahuje více než
2000 různých analýz a nabízí rychlé vylepšení a opravy kódu. Upozorňuje
na neošetřené výjimky, zjednodušitelné nebo nedosažitelné části kódu nebo nabízí
rychlou migraci kódu při přechodu na novější specifikaci programovacího jazyka.
Zároveň nabízí množství akcí pro refactoring kódu. Zjednodušuje bezpečné
přejmenování a přesouvání kódu, oddělování a snižování složitosti kódu
nebo převod na alternativní syntaxi jazyka. Resharper zároveň zjednodušuje
orientaci a vyhledávání v projektech nebo formátování a vyčištění kódu. Rozsáhlé
nastavení nástroje umožňuje přizpůsobit většinu chování nástroje, které zároveň lze
snadno sdílet mezi ostatními členy vývojového týmu [39].
42
7.4.2 Web Essentials
Dalším velmi zajímavým rozšířením Visual Studia určeným převážně pro webové
vývojáře je Web Essentials. Obsahuje mnoho vylepšení pro zjednodušení práce
s CSS, HTML, JavaScript, TypeScript, CoffeeScript nebo LESS soubory. Doplněk
je nabízen zdarma pro Visual Studio 2010 a vyšší, jeho stažení a instalace je možná
pomocí Visual Studio Marketplace. Doplňuje podporu Intellisense pro CSS soubory
pro třídy, identifikátory nebo HTML elementy, navigaci při vkládání URL adres, živý
náhled barev, obrázků nebo velikosti písma a mnoho dalších rozšíření. Rozšiřuje
i práci s HTML soubory, kde přidává podporu živých náhledů, formátování
dokumentů nebo dekódování obrázků z formátu Base64. Web Essentials zároveň
obsahuje kompiler pro CSS preprocesor LESS [40].
Obrázek 12 - Ukázka rozšíření Web Essentials [40]
43
8 Praktické použití
Součástí práce je ukázková aplikace, ve které jsou použity vybrané technologie
popsané v této práci. Aplikaci byla vyvíjena pomocí Visual Studia 2015 Community
s databázovým serverem Microsoft SQL Server 2014. Využívá .NET Framework
ve verzi 4.5.2.
Aplikace je rozdělena na tři části. První z nich je část přístupu k datům pojmenovaná
DataAccess. V ní se nachází tři projekty s použitými technologiemi pro přístup
k datům: ADO.NET, Entity Framework a NHibernate. Ve složce se zároveň nachází
inicializační SQL script s testovacími daty. Další částí je Presentation,
kde se nachází dva projekty s prezentačními technologiemi ASP.NET WebForms
a ASP.NET MVC. Mezi těmito částmi je pak ve složce Library projekt Services,
který zajišťuje komunikaci mezi prezentační a datovou částí aplikace. Jednotlivé
projekty lze jednoduše použít pro vlastní potřebu při tvorbě aplikací. Projekty
prezentační části pouze obsahují reference na projekty z části DataAccess,
které je v případě vlastního použití nutné odstranit. Schéma aplikace je znázorněno
na Obrázek 13.
Obrázek 13 - Struktura ukázkové aplikace [Zdroj: autor]
8.1 Aplikační vrstva – přístup k datům
Všechny tři projekty s představenými technologiemi pro přístup k datům mají
totožnou strukturu. Základní složky jsou Domain a Services. Ve složce Domain
se nachází doménové třídy, v Services pak třída zajišťující operace s databází.
44
Třída Service implementuje rozhraní IService, ve kterém jsou definovány
metody pro operace s databází. Ve všech projektech se jedná o metody pro načtení
zákazníka podle identifikátoru, načtení seznamu všech zákazníků s volitelným
filtrováním dle jména zákazníka, uložení a smazání zákazníka. Projekty s nástroji
objektově-relačního mapování obsahují navíc složku Mapping s třídami zajišťující
mapování tříd na doménový model relační databáze, viz. Obrázek 14.
Obrázek 14 - Struktura projektu nástroje Entity Framework [Zdroj: autor]
V každém projektu jsou stejně vytvořeny dvě třídy: Customer a Contact, mezi
kterými je vazba 1:N. U každé třídy bylo pro představení rozdílů vytvořeno více
vlastností s různými datovými typy.
public class Customer { public int Id { get; set; } public string Name { get; set; } public bool Active { get; set; } public string RegNo { get; set; } public string VatNo { get; set; } public DateTime DateCreated { get; set; } public DateTime? DateDeactivated { get; set; } public decimal CurrentCredit { get; set; } public CustomerType CustomerType { get; set; } } public class Contact { public int Id { get; set; } public string Name { get; set; } public bool Active { get; set; } public string Phone { get; set; }
45
public string Email { get; set; } public int CustomerId { get; set; } }
public enum CustomerType { Customer = 0, Agency = 1, Agent = 2 }
8.1.1 ADO.NET
Knihovna ADO.NET je součástí .NET Frameworku, pro její použít není nutné
do projektu přidávat další reference. Pro komunikaci s databází se využívají třídy
SqlCommand, SqlConnection, SqlDataAdapter, SqlDataReader. V následující
části bude popsána jednoduchá metoda pro načtení jména zákazníka z databáze.
SQL příkazy prováděné nad databází je nutné napsat ručně pomocí proměnné
datového typu string. Veškeré parametry dotazů by měly být do příkazu vkládány
pomocí parametrů.
string sSelect = "select Id, Name from Customers c where c.Id = @CustomerID";
Následně je nutné vytvořit instanci třídy SqlConnection se specifikovanou
vlastností Connection string a otevřít spojení s databází.
SqlConnection c = new SqlConnection(CNN()); c.Open();
Dalším krokem je vytvoření instance SqlCommand a předání SQL dotazu
s připojením na databázi. V tomto objektu se také vytvářejí parametry SQL dotazu
a jejich hodnoty.
SqlCommand cmd = new SqlCommand(sSelect, c); cmd.Parameters.AddWithValue("@CustomerID", id);
Následuje vykonání příkazu a přečtení výsledků dotazu pomocí instance třídy
SqlDataReader a uzavření spojení k databázi.
SqlDataReader r = null; int custId; string custName; try { r = cmd.ExecuteReader(); if (r.Read())
{ custId = (int)r["Id"]; custName = (string)r["Name"]; } else
{ throw new Exception("Záznam nelze načíst"); }
46
} finally { r.Close(); c.Close(); }
Pro načítání seznamu záznamů se využívá místo třídy SqlDataReader třída
SqlDataAdapter, která metodou Fill() naplní výsledkem dotazu objekt
DataSet.
SqlCommand cmd = new SqlCommand(); StringBuilder sb = new StringBuilder(); sb.Append(@" select Id, Name, Active, CustomerType from Customers c where 1=1 "); if (!string.IsNullOrEmpty(sFilterName)) { sb.Append(@" and (c.name like @Name) "); cmd.Parameters.AddWithValue("@Name", sFilterName + '%'); } sb.Append(@" order by c.Id "); cmd.CommandText = sb.ToString(); SqlDataAdapter da = new SqlDataAdapter(); da.SelectCommand = cmd; DataSet ds = new DataSet(); SqlConnection c = new SqlConnection(CNN()); cmd.Connection = c; c.Open(); da.Fill(ds, "data"); c.Close(); return ds;
Vytvoření záznamu probíhá obdobně jako jeho načtení. Pro provedení příkazu
a získání nového identifikátoru záznamu lze zavolat metodu ExecuteScalar()
třídy SqlCommand. Při vytváření je nutné specifikovat všechny vlastnosti vkládané
třídy jako parametry a SQL příkaz s těmito parametry.
SqlCommand cmd = new SqlCommand(); cmd.Parameters.AddWithValue("@Name", cust.Name); cmd.Parameters.AddWithValue("@Active", cust.Active); cmd.Parameters.AddWithValue("@CustomerType", cust.CustomerType); SqlConnection c = new SqlConnection(CNN());
47
c.Open(); cmd.Connection = c; try { string sql = @"insert into Customers (Name, Active, CustomerType) values (@Name, @Active, @CustomerType) select NewID = SCOPE_IDENTITY() "; cmd.CommandText = sql.ToString(); try { cust.Id = (int)(decimal)cmd.ExecuteScalar(); } catch (Exception exc) { throw new Exception("Záznam nelze vytvořit!"); } } finally { cmd.Connection.Close(); }
Z předchozí ukázky je patrné, že práce s databází z pohledu vývojáře je velmi
komplikovaná a náchylná na chyby. Každá přidaná nebo upravená vlastnost
k doménové třídě se musí definovat na několika místech. Pro každou doménovou
třídu je nutné vytvářet metody pro načtení, vkládání, aktualizaci a smazání
z databáze.
8.1.2 Entity Framework
ORM nástroj Entity Framework lze do projektu nainstalovat pomocí NuGet Package
Manageru. V ukázkovém projektu je použit Code First přístup, kdy se nejprve
vytvoří doménové třídy aplikace (takzvané POCO třídy), mapování těchto tříd
na databázi a třída DbContext, zajišťující interakci s vývojářem. Mapování
doménových tříd je vytvořeno ve vlastních třídách.
public class EfContext : DbContext { public EfContext() : base("name=DataModel") { } protected override void OnModelCreating(DbModelBuilder modelBuilder)
{ modelBuilder.Configurations.Add(new CustomerMap()); modelBuilder.Configurations.Add(new ContactMap()); base.OnModelCreating(modelBuilder); }
48
public virtual DbSet<Customer> Customers { get; set; } public virtual DbSet<Contact> Contacts { get; set; } }
V konstruktoru třídy je pouze definovaný název vlastnosti Connection string
uložené v konfiguračním souboru. V přetížené metodě OnModelCreating
se definují mapovací třídy. Dále se definují vlastnosti datového typu DbSet<T> pro
každou mapovanou třídu. Mapovací třídy musí být poděděné ze třídy
EntityTypeConfiguration se specifikovaným datovým typem. Samotné
mapování se definuje pomocí tzv. Fluent syntaxe a je velmi intuitivní.
public class CustomerMap : EntityTypeConfiguration<Customer> { public CustomerMap() { ToTable("Customers"); HasKey(c => c.Id); Property(x => x.Active); Property(x => x.CustomerType); Property(c => c.Name).IsRequired().HasMaxLength(128); } }
Veškeré operace s databází se provádí pomocí třídy DbContext. Často se používá
konstrukce using(), která po provedení požadovaných operací uzavře spojení
s databází a provede Dispose objektu. Následující metoda představuje načtení
zákazníka podle klíče id a načtení seznamu zákazníků s volitelným filtrem podle
jména.
using (var ctx = new EfContext()) {
return ctx.Customers.Find(id); }
using (var ctx = new EfContext()) { IQueryable<Customer> list = ctx.Customers; if (!string.IsNullOrEmpty(sFilterName))
{ list = list.Where(x => x.Name.StartsWith(sFilterName)); } return list.ToList(); }
Pro vytvoření nového záznamu stačí přidat vytvořený objekt do kolekce záznamů.
Následně se při zavolání metody SaveChanges() provedené změny uloží
do databáze a u ukládaného objektu se aktualizuje jeho identifikátor.
using (var ctx = new EfContext()) { ctx.Customers.Add(cust);
49
ctx.SaveChanges(); }
Entity Framework automaticky detekuje změny na entitách, nicméně jen v rámci
existence objektu DbContext. Při načtení entity z databáze je pro jinou instanci
DbContextu entita neznámá a nástroj při uložení provede místo aktualizace
vytvoření nového záznamu. Vytvoření nové instance DbContextu je zároveň
náročné. Tento přístup tedy není příliš vhodný pro webové aplikace, kde je nutné
nad entitou provést více operací. Z tohoto důvodu se více používá přístup nazvaný
„per request“, kde se DbContext vytvoří na začátku provádění aplikačního kódu.
Případně lze použít přístup „per lifetime“ s vytvořením DbContextu při startu
aplikace.
8.1.3 NHibernate
Nástroj NHibernate je možné do projektu nainstalovat pomocí NuGet Package
Manageru. Pro jednodušší práci byl zároveň nainstalován i jeho doplněk
FluentNHibernate, zajišťující konfiguraci nástroje pomocí tzv. Fluent syntaxe přímo
v aplikačním kódu. Podobně jako v případě Entity Frameworku se nejdříve vytvoří
doménové a mapovací třídy. Pro komunikaci s databází se využívá objekt Session.
Základem je třída SessionFactory, jejíž instance se obvykle vytváří pro celou
aplikaci. Při vytváření instance SessionFactory se provádí konfigurace nástroje.
Je nutné specifikovat cílovou databázi a její Connection string a přidat mapovací
třídy.
private static ISessionFactory CreateSessionFactory() { return Fluently.Configure() .Database(MsSqlConfiguration.MsSql2012.ConnectionString(CNN())) .Mappings(x => x.FluentMappings.AddFromAssemblyOf<ContactMap>()) .Mappings(x => x.FluentMappings.AddFromAssemblyOf<CustomerMap>() .BuildSessionFactory(); }
Mapovací třídy jsou poděděné z třídy ClassMap s určeným datovým typem.
Pro mapování výčtového typu je nutné explicitně specifikovat tento typ metodou
CustomType.
public class CustomerMap : ClassMap<Customer> { public CustomerMap() { Table("Customers");
50
Id(x => x.Id); Map(x => x.Name).Length(128); Map(x => x.Active); Map(x => x.CustomerType).CustomType<CustomerType>();
HasMany(x => x.Contacts) .KeyColumn("CustomerId").Inverse().Cascade.None();
} }
Práce s databází se provádí pomocí třídy Session, která se vytváří metodou
OpenSession na objektu SessionFactory. Následující kód představuje načtení
zákazníka podle ID a načtení seznamu zákazníků s volitelným filtrem podle jména.
Pro vytváření filtrů se zde používá třída Restrictions, pomocí které lze jednoduše
a přehledně vytvářet podmínky dotazů.
using (var session = sessionFactory.OpenSession()) { return session.Get<Customer>(id); }
public IEnumerable<Customer> LoadCustomerList(string sFilterName) { using (var session = sessionFactory.OpenSession()) { var tmpList = session.QueryOver<Customer>(); if (!string.IsNullOrEmpty(sFilterName)) { tmpList = tmpList.Where(Restrictions.On<Customer>(x => x.Name).IsLike(sFilterName, MatchMode.Start)); } return tmpList.List(); } }
Pro vytvoření nového záznamu se používá metoda Save(), které se předá vkládaný
objekt. Tato metoda automaticky provede příkaz na databázi a v objektu aktualizuje
identifikátor.
using (var session = sessionFactory.OpenSession()) { session.Save(cust); }
8.2 Prezentační vrstva
Prezentační vrstva aplikace obsahuje dva projekty. Uživatelské rozhraní obou
projektů je postaveno na CSS frameworku Bootstrap ve verzi 3.3.7 s použitím
knihovny jQuery ve verzi 1.9.1. V projektech jsou vytvořeny dvě stránky se stejným
rozložením: seznam zákazníků a formulář zákazníka. Obě stránky obsahují stejnou
51
funkcionalitu: zobrazení seznamu zákazníků a jeho filtrování, přidání zákazníka,
úprava zákazníka a odstranění zákazníka z databáze.
8.2.1 ASP.NET WebForms
Technologie WebForms nemá definovanou strukturu projektu. V ukázkovém
projektu je vytvořena Master page (předloha stránky) s názvem Main.Master
a dvě stránky CustomerForm.aspx, CustomerList.aspx. Master page obsahuje
základní hlavičku HTML stránky a menu vytvořené z komponent Bootstrapu.
Veškeré ovládací prvky musí být obalené elementem form s atributem
runat="server". Důležitým prvkem je zde element ContentPlaceHolder
s identifikátorem cphBody.
<asp:ContentPlaceHolder ID="cphBody" runat="server"> </asp:ContentPlaceHolder>
Do tohoto elementu se vkládá obsah stránek používající tuto Master page.
Na začátku každé stránky je nutné definovat soubor MasterPage a stránka musí
obsahovat element Content s identifikátorem ContentPlaceHolder v Master
page.
<asp:Content ID="Content2" ContentPlaceHolderID="cphBody" runat="server">
Definice všech ovládacích prvků na stránce se zapisuje pomocí prefixu <asp: a musí
obsahovat atribut runat="server". Následující část kódu představuje vytvoření
tlačítka btnSearch. K ovládacím prvkům na stránce lze přidat různé metody.
V tomto případě při kliku na tlačítko ASP.NET na serveru vyvolá událost
btnSearch_OnClick.
<asp:Button runat="server" ID="btnSearch" OnClick="btnSearch_OnClick" Text="Vyhledat" CssClass="btn btn-primary" />
V code-behind stránky se tato událost vyvolá. Z ovládacího prvku TextBox s ID
tbFilterName načte jeho vlastnost Text, naplní daty prvek GridView
s ID gvCustomersADO a provede přenačtení dat v GridView.
protected void btnSearch_OnClick(object sender, EventArgs e) { string sFilterName = tbFilterName.Text; gvCustomersADO.DataSource = BPFacade.GetADOService().LoadCustomerList(sFilterName); gvCustomersADO.DataBind(); }
52
Následující část zdrojového kódu představuje vytvoření formuláře pro vytvoření
nebo editaci záznamu zákazníka. První částí je mark-up stránky. Technologie
WebForms dovoluje umístit pouze jeden element form. Ten je umístěn
v MasterPage okolo všech ovládacích prvků, okolo formuláře se tedy další element
form nezapisuje. Mark-up stránky obsahuje stylované prvky pomocí tříd
CSS Frameworku Bootstrap. Na stránce je definováno několik ovládacích prkvů:
TextBox, RequiredFieldValidator, CheckBox, DropDownList a Button.
Ke každému prvku lze nastavit některé atributy. Tyto atributy prvků jsou zároveň
přístupné z code-behind stránky.
<div class="form-group"> <asp:Label runat="server" ID="lblCustomerName" Text="Jméno" AssociatedControlID="tbCustomerName" CssClass="col-sm-2 control-label" /> <div class="col-sm-10"> <asp:TextBox runat="server" ID="tbCustomerName" CssClass="form-control" /> <asp:RequiredFieldValidator runat="server" ID="reqCustomerName" ControlToValidate="tbCustomerName" ErrorMessage="Vyplňte jméno!" ValidationGroup="group" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <asp:CheckBox runat="server" ID="cbActive" Text="Aktivní?" /> </div> </div> </div> <div class="form-group"> <asp:Label runat="server" ID="Label6" Text="Typ zákazníka" AssociatedControlID="cmbCustomerType" CssClass="col-sm-2 control-label" /> <div class="col-sm-10"> <asp:DropDownList runat="server" ID="cmbCustomerType" CssClass="form-control" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <asp:Button runat="server" ID="btnSave" OnClick="btnSave_OnClick" Text="Uložit" ValidationGroup="group" CssClass="btn btn-primary" /> </div> </div>
Součástí stránky je designer soubor. Ten obsahuje vlastnosti příslušných datových
typů všech ovládacích prvků obsažených v mark-up stránky. Tento soubor
je automaticky vygenerován při změně v mark-up souboru.
protected global::System.Web.UI.WebControls.Label lblCustomerName;
53
protected global::System.Web.UI.WebControls.TextBox tbCustomerName; ...
Při prvním načtení stránky se vyvolá událost Page_Load. Vlastnost
Page.IsPostBack má v tomto případě hodnotu na false, tudíž se provede první
inicializace dat do stránky. Načte se řetězec z adresy dotazu a uloží se do skrytého
pole ViewState. Dále se naplní DropDownList s identifikátorem
cmbCustomerType a provede se načtení informací o entitě do ovládacích prvků
stránky.
protected void Page_Load(object sender, EventArgs e) {
if (!Page.IsPostBack) {
int nCustomerId = Convert.ToInt32(Request.QueryString["Id"]); ViewState["CustomerId"] = nCustomerId;
cmbCustomerType.DataSource = CustomerTypeList.GetCustomerTypesLocalized();
cmbCustomerType.DataTextField = "Value"; cmbCustomerType.DataValueField = "Key";
cmbCustomerType.DataBind();
var cust = BPFacade.GetADOService().LoadCustomer(nCustomerId); tbCustomerName.Text = cust.Name;
cmbCustomerType.SelectedValue = ((int) cust.CustomerType).ToString();
cbActive.Checked = cust.Active;
} }
Při kliku na tlačítko btnSave se znovu vyvolá událost Page_Load, tentokrát má však
vlastnost Page.IsPostBack hodnotu true. Při Page_Load se tedy neprovede
žádný kód a vykonávání kódu pokračuje vyvoláním události btnSave_OnClick.
Zde se provede načtení hodnoty ze skrytého pole ViewState, načtení aktuální
entity, která se aktualizuje hodnotami z ovládacích prvků a tyto změny se uloží
do databáze. Poslední řádek kódu nakonec zajistí přesměrování na stránku
s názvem CustomerList.aspx.
protected void btnSave_OnClick(object sender, EventArgs e) { int nCustomerId = Convert.ToInt32(ViewState["CustomerId"]);
var cust = BPFacade.GetADOService().LoadCustomer(nCustomerId); cust.Name = tbCustomerName.Text; cust.CustomerType = (CustomerType)Convert.ToInt32(cmbCustomerType.SelectedValue);
cust.Active = cbActive.Checked;
54
BPFacade.GetADOService().Save(cust);
Response.Redirect("CustomerList.aspx"); }
8.2.2 ASP.NET MVC
Struktura projektu technologie ASP.NET MVC je daná architektonickým vzorem
MVC. Projekt obsahuje složky odpovídající MVC: Models, Views, Controllers. Model
obsahuje všechny vlastnosti pro View. Tyto vlastnosti lze rozšířit o datové anotace,
jako zobrazovaný název, validace, pro textové vlastnosti maximální délku
nebo rozsah pro číselné vlastnosti.
public class CustomerModel { public int Id { get; set; } [Display(Name = "Jméno")] [Required(ErrorMessage = "Jméno je vyžadováno")] public string Name { get; set; }
[Display(Name = "Typ zákazníka")] public int CustomerTypeId { get; set; }
[Display(Name = "Aktivní?")] public bool Active { get; set; } public IEnumerable<SelectListItem> AvailableCustomerTypes { get; set;} }
Druhou komponentou MVC je View. V příkladu se používá syntaxe jazyka Razor.
Na začátku View je definován model. Následuje vytvoření formuláře s definicí
parametrů. Prvním parametrem je Action method s hodnotou CustomerForm
implementovaná v Controlleru Home, definice HTTP metody a CSS třídy.
Ve formuláři se dále vykreslí pole pro validace a klíč pro ochranu proti útoku Cross
Site Request Forgery. Dále je vytvořeno formulářové pole pro vlastnost modelu
Name a tlačítko Uložit. Razor při vykreslení View automaticky zpracuje data anotace
v modelu vygeneruje požadovaný kód. Ve vygenerované stránce bude jako popisek
vstupu zobrazeno „Jméno“ a na pozadí bude vygenerován kód pro validaci
požadovaného pole.
@model CustomerModel @using (Html.BeginForm("CustomerForm", "Home", FormMethod.Post, new { @class = "form-horizontal" })) { @Html.ValidationSummary()
55
@Html.AntiForgeryToken() <div class="form-group"> @Html.LabelFor(x => x.Name, new { @class = "col-sm-2 control-label" }) <div class="col-sm-10"> @Html.TextBoxFor(x => x.Name, new { @class = "form-control" }) @Html.ValidationMessageFor(x => x.Name) </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> @Html.CheckBoxFor(x => x.Active) @Html.LabelFor(x => x.Active) </div>
</div> </div> <div class="form-group"> @Html.LabelFor(x => x.CustomerTypeId, new { @class = "col-sm-2 control-label" }) <div class="col-sm-10"> @Html.DropDownListFor(x=>x.CustomerTypeId, Model.AvailableCustomerTypes, new {@class= "form-control" }) @Html.ValidationMessageFor(x => x.CustomerTypeId) </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" value="Uložit" class="btn btn-primary" /> </div> </div> }
Poslední částí architektonického vzoru je Controller. V něm jsou implementovány
dvě Action method CustomerForm. První z nich je volána pomocí HTTP metody
GET s volitelným parametrem id. V metodě je vytvořena instance modelu,
který je naplněn daty. Nakonec se provede vyhledání View s názvem odpovídajícím
názvu metody, kterému se předají data v modelu.
[HttpGet] public ActionResult CustomerForm(int? id) {
var model = new CustomerModel(); var cust = BPFacade.GetADOService().LoadCustomer(custId); model.Name = cust.Name; model.Active = cust.Active; model.CustomerTypeId = (int)cust.CustomerType; model.AvailableCustomerTypes = MapCustomerTypesToSelectListItems(CustomerTypeList.GetCustomerTypesLocalized(), model.CustomerTypeId); return View(model); }
56
Druhá Action method je volána HTTP metodou POST, data anotace
ValidateAntiForgeryToken zároveň zajistí kontrolu požadavku. ASP.NET
vytvoří instanci modelu, kterou automaticky naplní daty z View a je dostupná
jako parametr metody. Vlastností ModelState.IsValid lze zkontrolovat
správnost zadaných údajů. V případě chyb v modelu se znovu vrátí View
se zadanými údaji, jinak se provede aktualizace dat v databázi a provede
se přesměrování na Action method s názvem CustomerList.
[HttpPost] [ValidateAntiForgeryToken] public ActionResult CustomerForm(CustomerModel model) { if (ModelState.IsValid) { var cust = BPFacade.GetADOService().LoadCustomer(model.Id); cust.Name = model.Name;
cust.Active = model.Active; cust.CustomerType = (CustomerType)model.CustomerTypeId; BPFacade.GetADOService().Save(cust); return RedirectToAction("CustomerList");
} model.AvailableCustomerTypes = MapCustomerTypesToSelectListItems(CustomerTypeList.GetCustomerTypesLocalized(), model.CustomerTypeId);
return View(model); }
57
9 Porovnání použitých technologií
9.1 Nástroje pro přístup k datům
Všechny vybrané technologie pro přístup k datům, knihovna ADO.NET i nástroje
objektově-relačního mapování Entity Framework a NHibernate, umožňují
bez problémů implementovat požadovanou funkcionalitu. V ukázkové aplikaci byly
implementovány běžné operace nad databází – načtení, vytvoření, aktualizace
a smazání záznamu společně s načtením seznamu záznamů s filtrováním. Zároveň
byla vytvořena a namapována vazba 1:N mezi dvěma tabulkami. Implementace
pomocí knihovny ADO.NET je nejsložitější a náchylná na chyby. Množství kódu
s každou přidanou entitou rychle stoupá a případné úpravy jsou složité. Největší
výhodou knihovny je její rychlost a přítomnost v .NET Frameworku. Je vhodná
zejména pro náročné operace, kdy je nutné zpracovávat data v reálném čase
a vytváření objektů by zabralo zbytečně mnoho času. Nicméně v podobných úlohách
záleží na dalších okolnostech. Dále lze použít pro drobné aplikace s velmi malým
počtem databázových operací.
Rozsáhlé ORM nástroje obecně přinášejí při běžných úkolech zpomalení oproti
přímému přístupu k datům. Nabízí však zásadní úsporu při vývoji a následné správě
aplikací. Kód aplikace je zároveň přehlednější. Při výběru nástroje je nutné věnovat
čas pro nastudování dané problematiky a pochopení jeho principu. Poté je jeho
použití rychlé a příjemné. Entity Framework i NHibernate nabízí pokročilé možnosti
při práci s daty, ať už se jedná o Lazy loading, caching dat, správu transakcí
nebo podporu různých databázových systémů. Výhodou Entity Frameworku
je přímá podpora Microsoftu, zejména velmi podrobná dokumentace
a implementace v ukázkových ASP.NET aplikacích. Oba ORM nástroje jsou však
vyrovnanými konkurenty. Výběr tak záleží především na vývojáři a jeho
zvyklostech.
9.2 Prezentační vrstva
V prezentační vrstvě byly použity technologie ASP.NET WebForms a MVC, které byly
popsány a porovnány v teoretické části práce. Jedná se o dospělé technologie,
obě nabízí možnosti pro snadné vytvoření formulářů, ovládacích prvků aplikace
58
i velké možnosti přizpůsobení. Obě technologie generují validní HTML kód a lze
pomocí nich implementovat moderní uživatelské rozhraní. Umožňují využít
nejnovějších technologií v HTML5, CSS3 i JavaScriptu.
Obě však z pohledu tvorby uživatelského rozhraní obsahují některé kompromisy.
WebForms nabízí možnosti pro velmi jednoduchou tvorbu dynamického
uživatelského prostředí. Vývojářům umožňují obsloužit různé události a podle nich
asynchronně překreslit část nebo celou stránku bez nutnosti tuto stránku
přenačítat. Na druhou stranu nabízí jen omezenou kontrolu nad generovaným
kódem. MVC nenabízí žádné možnosti pro vytvoření dynamického uživatelského
prostředí. Vývojář pro tento účel musí využít komponenty třetích stran. Může využít
samotný JavaScript, knihovnu jQuery nebo některý z JavaScriptových frameworků.
Oproti tomu kód vygenerovaný pomocí syntaxe Razor je mnohem přehlednější
a umožňuje mnohem snazší vyhledávání chyb.
K oběma technologiím je přímo od společnosti Microsoft vytvořená podrobná
dokumentace. Mimo oficiální dokumentaci existuje nepřeberné množství literatury
i odborných článků. Zároveň za WebForms i MVC stojí rozsáhlá komunita vývojářů.
K dispozici je velké množství komponent třetích stran, které mohou zásadním
způsobem ulehčit vývoj aplikace. Dalším pozitivním aspektem obou technologií
je vývojové prostředí Visual Studio, nabízející množství pokročilých funkcí
při tvorbě aplikací.
Zásadním bodem v neprospěch WebForms je budoucí vývoj. Do technologie
již nebudou vyvíjeny nové funkce a nebude podporována ani novým ASP.NET Core.
Microsoft neoznámil ukončení podpory a vzhledem k množství projektů, které tuto
technologii stále využívají, bude podpora trvat ještě mnoho let. I přesto je vývoj
na této technologii neperspektivní a doporučovanou cestou je ASP.NET MVC.
59
10 Závěr
Cílem této práce bylo prozkoumat a popsat technologie pro vývoj webových aplikací
na platformě Microsoft .NET.
V první části byl představen .NET Framework, platforma ASP.NET a dvě rozdílné
architektury webových aplikací využívající tuto technologii, WebForms a MVC.
V navazující části byly popsány nástroje objektově-relačního mapování Entity
Framework a NHibernate společně s knihovnou ADO.NET pro přímý přístup
k datům. Další částí bylo představení návrhového vzoru Inversion of Control,
techniky Dependency Injection a Inversion of Control kontejneru Autofac.
V následující kapitole bylo zmíněno několik vybraných nástrojů a knihoven,
které umožňují vytvořit dynamické a použitelné uživatelské rozhraní. Zároveň zde
byla popsána knihovna SignalR umožňující jednoduché vytvoření komunikace
webových aplikací v reálném čase. Další kapitola se zabývala CSS frameworky,
zejména aktuálně nejpoužívanějším frameworkem Twitter Bootstrap a jeho
provázáním s aplikacemi na platformě ASP.NET. Zároveň zde byl ukázán zajímavý
nástroj DotVVM určený pro snadnou tvorbu dynamického uživatelského rozhraní
a dále komponenty třetích stran určených pro zkoumanou platformu. Teoretická
část práce byla uzavřena představením vývojových nástrojů, které lze použít
pro vývoj nejen webových aplikací na .NET Frameworku.
V rámci práce byla vytvořena ukázková aplikace s použitím vybraných
představených technologií. Aplikace je rozdělená na část pro přístup k datům
a prezentační část. Z pohledu návrhu softwaru odpovídají aplikační a prezentační
vrstvě třívrstvé architektury. V aplikační vrstvě byly použity tři technologie
pro přístup k datům. První implementovanou technologií byl přímý přístup k datům
pomocí knihovny ADO.NET a dále nástroje objektově-relačního mapování Entity
Framework a NHibernate. V prezentační vrstvě pak bylo implementováno
uživatelské rozhraní pomocí technologie WebForms a ASP.NET MVC s použitím
CSS frameworku Twitter Bootstrap. Aplikace byla navržena jako znovupoužitelná,
každá technologie obsahuje vlastní projekt, který lze jednoduše použít ve vlastní
aplikaci. Použité technologie byly v praktické části práce popsány a následně
zhodnoceny.
60
Webové technologie se velmi rychle vyvíjí, během zpracovávání bakalářské práce
bylo zveřejněno mnoho nových verzí popisovaných nástrojů a technologií.
Mimo jiné byla zveřejněna první produkční verze nového frameworku .NET Core
a ASP.NET Core, který je zmíněn v této práci. Microsoft nový .NET Core velmi
intenzivně vyvíjí. Vzhledem k nové, otevřené filosofii určuje směr vývoje nejen
Microsoft, ale i široká komunita vývojářů. Je tedy velmi pravděpodobné,
že se po jeho ustálení stane velmi oblíbenou technologií i pro vývojáře, kteří dosud
s .NET Frameworkem díky jeho uzavřenosti a závislosti na systému Windows
nepracovali.
61
11 Seznam použité literatury
[1] ASP.NET Introduction. Santosh ASP.NET Tutorial [online]. 2015 [cit. 2017-03-
09]. Dostupné z: http://www.santosh-
asp.com/pages/ASPDotNet/IntroductiontoASPDOTNET.html
[2] TROELSEN, Andrew W. Pro C# 5.0 and the .NET 4.5 framework. Sixth edition.
New York: Apress Media, 2012. ISBN 978-1-4302-4233-8.
[3] .NET Framework Versions and Dependencies. Learn to Develop with Microsoft
Developer Network | MSDN [online]. 2017 [cit. 2017-03-09]. Dostupné z:
https://msdn.microsoft.com/en-us/library/bb822049(v=vs.110).aspx
[4] PENBERTHY, William. Beginning ASP.NET for Visual Studio 2015.
Indianapolis: John Wiley, 2016. ISBN 978-1-119-07742-8.
[5] Introduction to ASP.NET Core. Microsoft Docs. [online]. 2017 [cit. 2017-03-
09]. Dostupné z: https://docs.microsoft.com/en-us/aspnet/core/
[6] ASP.NET 5 is dead - Introducing ASP.NET Core 1.0 and .NET Core 1.0 - Scott
Hanselman. Scott Hanselman - Coder, Blogger, Teacher, Speaker, Author
[online]. 2017 [cit. 2017-03-09]. Dostupné z:
http://www.hanselman.com/blog/ASPNET5IsDeadIntroducingASPNETCore
10AndNETCore10.aspx
[7] Introduction to ASP.NET and Web Forms. Learn to Develop with Microsoft
Developer Network | MSDN [online]. 2001 [cit. 2017-03-09]. Dostupné z:
https://msdn.microsoft.com/en-us/library/ms973868.aspx
[8] ASP.NET Page Life Cycle Overview. Learn to Develop with Microsoft Developer
Network | MSDN [online]. 2017 [cit. 2017-03-09]. Dostupné z:
https://msdn.microsoft.com/en-us/library/ms178472.aspx
[9] FREEMAN, Adam. Pro ASP.NET MVC 5. Fifth edition. New York: Apress Media,
2013. Expert's voice in ASP.NET. ISBN 978-1-4302-6529-0.
[10] FREEMAN, Adam. Pro ASP.NET MVC 5 platform. New York: Apress Media,
2014. Expert's voice in Web development. ISBN 978-1-4302-6541-2.
[11] BLOCK, Glenn, Pablo CIBRARO, Pedro FELIX, Howard DIERKING a Darrel
MILLER. Designing evolvable web APIs with ASP.NET. Sebastopol: O’Reilly
Media, 2014. ISBN 14-493-3771-6.
62
[12] Build a web API with ASP.NET Core MVC and Visual Studio. Microsoft Docs.
[online]. 2017 [cit. 2017-03-09]. Dostupné z: https://docs.microsoft.com/en-
us/aspnet/core/tutorials/first-web-api
[13] JSON and XML Serialization in ASP.NET Web API. Microsoft Docs. [online].
2017 [cit. 2017-03-09]. Dostupné z: https://docs.microsoft.com/en-
us/aspnet/web-api/overview/formats-and-model-binding/json-and-xml-
serialization
[14] Dependency Injection in ASP.NET Core. Microsoft Docs. [online]. 2017 [cit.
2017-04-06]. Dostupné z: https://docs.microsoft.com/en-
us/aspnet/core/fundamentals/dependency-injection
[15] Autofac: Home. Autofac: Home [online]. 2017 [cit. 2017-04-06]. Dostupné z:
https://autofac.org/
[16] ADO.NET Overview. Learn to Develop with Microsoft Developer Network |
MSDN [online]. 2017 [cit. 2017-03-09]. Dostupné z:
https://msdn.microsoft.com/library/h43ks021.aspx
[17] DRISCOLL, Brian. Entity Framework 6 recipes. Second edition. xxxiv, 511
pages. ISBN 978-1-4302-5788-2.
[18] Compare EF Core & EF6.x. Microsoft Docs. [online]. 2016 [cit. 2017-03-09].
Dostupné z: https://docs.microsoft.com/en-us/ef/efcore-and-ef6/
[19] PERKINS, B. Working with NHibernate 3.0. Indianapolis: Wiley Publishing,
2011. ISBN 978-1-118-10460-6.
[20] SignalR | The ASP.NET Site. ASP.NET | The ASP.NET Site [online]. 2017 [cit.
2017-03-09]. Dostupné z: https://www.asp.net/signalr
[21] AGUILAR, Jose M. ASP.NET SignalR Incredibly simple real-time features for
your web apps. Vigo: Krasis Consulting, S. L., 2013. ISBN 978-84-939659-7-6.
[22] Tutorial: Getting Started with SignalR 2. Microsoft Docs. [online]. 2014 [cit.
2017-03-09]. Dostupné z: https://docs.microsoft.com/en-
us/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-
signalr
[23] MEIERT, Jens Oliver. The Little Book of HTML/CSS Frameworks. Sebastopol:
O’Reilly Media, 2015. ISBN 978-1-491-92016-9.
63
[24] WESTHUIZEN, Pieter. Bootstrap for ASP.NET MVC. Birmingham: Packt
Publishing, 2014. ISBN 978-1-78398-728-3.
[25] TwitterBootstrapMVC. TwitterBootstrapMVC [online]. 2017 [cit. 2017-03-09].
Dostupné z: https://www.twitterbootstrapmvc.com/
[26] AdminLTE 2 | Dashboard. Free Bootstrap Admin Template [online]. 2014 [cit.
2017-03-09]. Dostupné z:
https://almsaeedstudio.com/themes/AdminLTE/index2.html
[27] 10 Best CSS Frameworks for 2017 | Best Reviews 2017. Best Reviews 2017 |
Best Products to Buy in 2017 [online]. 2017 [cit. 2017-03-23]. Dostupné z:
http://bestreviews2017.com/best-css-framework-2017/
[28] TypeScript - JavaScript that scales. TypeScript - JavaScript that scales. [online].
2012 [cit. 2017-03-09]. Dostupné z: https://www.typescriptlang.org/
[29] DotVVM - Docs - Introduction. DotVVM: MVVM Framework for Modern
ASP.NET Applications. Javascript Apps with No Javascript. [online]. 2017 [cit.
2017-03-09]. Dostupné z:
https://www.dotvvm.com/docs/tutorials/introduction/1-1
[30] Bundling and Minification. Microsoft Docs [online]. 2012 [cit. 2017-03-09].
Dostupné z: https://docs.microsoft.com/en-
us/aspnet/mvc/overview/performance/bundling-and-minification
[31] List of 3rd Party .NET UI & Reporting Components - CodeProject. CodeProject
- For those who code [online]. 2014 [cit2017-03-09]. Dostupné z:
https://www.codeproject.com/reference/788434/list-of-rd-party-net-ui-
reporting-components
[32] Employees - DevAV Demo. ASP.NET Controls by DevExpress [online]. 2017 [cit.
2017-03-09]. Dostupné z:
https://demos.devexpress.com/rwa/devav/Employees.aspx
[33] 800+ Free controls and frameworks for .NET. .NET Components & Controls |
Enterprise Development Solutions by Syncfusion [online]. 2001 [cit. 2017-03-
09]. Dostupné z: https://www.syncfusion.com/products/communitylicense
[34] Grid | ASP.NET MVC | Syncfusion. Syncfusion Essential Studio Resources and
Documentation [online]. 2001 [cit. 2017-03-09]. Dostupné z:
https://help.syncfusion.com/aspnetmvc/grid/overview
64
[35] Visual Studio IDE. Visual Studio | Developer Tools and Services | Microsoft IDE
[online]. 2017 Microsoft [cit. 2017-03-09]. Dostupné z:
https://www.visualstudio.com/cs/vs/
[36] Visual Studio Code - Code Editing. Redefined. Visual Studio Code - Code
Editing. Redefined [online]. 2017 [cit. 2017-03-09]. Dostupné z:
https://code.visualstudio.com/
[37] NuGet Gallery | Home. NuGet Gallery | Home [online]. 2017 .NET Foundation
[cit. 2017-03-09]. Dostupné z: https://www.nuget.org/
[38] Extensions for the Visual Studio family of products. Visual Studio Marketplace
[online]. 2017 [cit. 2017-03-09]. Dostupné z:
https://marketplace.visualstudio.com/
[39] ReSharper. JetBrains: Development Tools for Professionals and Teams [online].
2000 [cit. 2017-03-09]. Dostupné z: https://www.jetbrains.com/resharper/
[40] Web Essentials. Web Essentials for Visual Studio [online]. 2017 [cit. 2017-03-
09]. Dostupné z: http://vswebessentials.com/
Oskenované zadání práce
