Z´apadoˇcesk´a univerzita v Plzni Fakulta aplikovan´ych vˇed Katedra informatiky a v´ypoˇcetn´ı techniky Bakal´aˇrsk´apr´ace Webov´aaplikace pro poˇr´ad´an´ız´avod˚u v orientaˇcn´ım bˇehu Plzeˇn2017 Jan Palc´ut M´ısto t´eto strany bude zad´an´ıpr´ace. Prohl´aˇsen´ı Prohlaˇsuji, ˇzejsem bakal´aˇrskou pr´aci vypracoval samostatnˇea v´yhradnˇe s pouˇzit´ım citovan´ych pramen˚u. V Plzni dne 26. ˇcervna 2017 Jan Palc´ut Podˇekov´an´ı T´ımto bych chtˇel podˇekovat vedouc´ımu bakal´aˇrsk´epr´ace panu Ing. Tom´aˇsovi Hercigovi za cenn´erady, pˇripom´ınky a odborn´eveden´ıt´eto pr´ace. Abstract The topic of this bachelor thesis is the creation of a web application for organizing orienteering races including user registration, creation of races, registration of users to races, management of teams and contestants, and results evaluation based on selected criteria. Section2 deals with the de- scription of Java web frameworks. Section3 describes the Spring modules and the reasons why this framework was chosen for implementation. Sec- tion4 includes used technologies. The Section5 describes the funcionalities of the website and database. Section6 describes the creation of the ap- plication in the framework Spring, the structure of the project and selected sections of the code. Section7 includes race simulation, stress test, web browsers compatibility, and Selenium tests. Abstrakt Pˇredmˇetem m´ebakal´aˇrsk´epr´ace je vytvoˇren´ıwebov´eaplikace pro poˇr´ad´an´ı z´avod˚uv orientaˇcn´ım bˇehu umoˇzˇnuj´ıc´ı registraci uˇzivatel˚u, vytv´aˇren´ı z´a- vod˚u, registraci uˇzivatel˚udo z´avodu, spravov´an´ıseznamu t´ym˚uvˇcetnˇe´uˇcast- n´ık˚ua n´asledn´evyhodnocen´ızadan´ych v´ysledk˚upodle zvolen´ych krit´eri´ı. Kapitola2 se zab´yv´apopisem webov´ych framework˚ujazyka Java. Kapi- tola3 popisuje moduly Springu a d˚uvody proˇcbyl tento framework vybr´an pro implementaci. Kapitola4 obsahuje pouˇzit´etechnologie. Kapitola5 po- pisuje funkcionality webu a datab´azi. Kapitola6 popisuje tvorbu aplikace ve frameworku Spring, strukturu projektu a vybran´eˇc´asti k´odu. Kapitola7 ob- sahuje simulaci z´avodu, z´atˇeˇzov´ytest aplikace, zkouˇsku kompatibility webo- v´ych prohl´ıˇzeˇc˚ua Selenium testy. Obsah 1 Uvod´ 1 2 Reˇserˇse framework˚u2 2.1 Apache Struts 2.........................2 2.2 JavaServer Faces........................2 2.3 Apache Wicket.........................3 2.4 Google Web Toolkit.......................3 2.5 Apache Tapestry........................4 2.6 OpenXava............................4 2.7 RIFE...............................5 2.8 Seam...............................5 2.9 Srovn´an´ıframework˚u......................6 3 Framework Spring7 3.1 Historie.............................7 3.2 Moduly.............................7 4 Pouˇzit´etechnologie 10 4.1 HyperText Markup Language................. 10 4.2 Cascading Style Sheets..................... 11 4.3 Bootstrap............................ 11 4.4 Javascript a jQuery....................... 12 4.5 Hibernate............................ 12 4.6 DataTables........................... 12 5 N´avrh aplikace 14 5.1 Poˇzadavky na aplikaci..................... 14 5.2 Tˇr´ıdy uˇzivatel˚u......................... 15 5.3 Funkcionality webu....................... 16 5.4 N´avrh datab´aze......................... 21 6 Implementace 28 6.1 Struktura projektu....................... 28 6.1.1 Komponenty...................... 28 6.1.2 Obsah sloˇzky webapp.................. 33 6.2 Uk´azky implementace...................... 35 7 Testov´an´ı 37 7.1 Simulace z´avodu........................ 37 7.2 Z´atˇeˇzov´ytest.......................... 39 7.3 Kompatibilita prohl´ıˇzeˇc˚u.................... 40 7.4 Selenium testy.......................... 41 8 Z´avˇer 43 Literatura 44 Pˇr´ılohy 47 A Datab´aze............................ 48 B Dokumentace.......................... 49 C Obsah DVD........................... 65 1 Uvod´ C´ılem m´ebakal´aˇrsk´epr´ace je vytvoˇren´ıwebov´eaplikace pro poˇr´ad´an´ıori- entaˇcn´ıch bˇeh˚u. Tato webov´aaplikace umoˇzn´ıspravovat z´avody, u kter´ych p˚ujde pˇri vytv´aˇren´ıdefinovat vlastn´ıkategorie a poˇcet ˇclen˚uv t´ymu. Sou- ˇc´ast´ız´avodu bude registrace pˇres formul´aˇre, kter´eumoˇzn´ıuˇzivateli pˇridat do z´avodu jeho t´ym nebo registrovat s´amsebe jako uˇzivatele bez t´ymu. Z regis- trovan´ych t´ym˚ubude vytvoˇren seznam, kter´ybude slouˇzit jako prezentace ´uˇcastn´ık˚uz´avod˚u. Spr´avci z´avodu bude umoˇznˇeno pˇrid´avat, mazat t´ymy a editovat jednotliv´e´udaje o t´ymech i jejich ˇclenech. Souˇc´ast´ıseznamu re- gistrovan´ych t´ym˚ubude umoˇznˇeno spr´avci z´avodu importovat a exportovat t´ymy ve form´atu XLSX. D´ale bude souˇc´ast´ıwebov´eaplikace spr´ava a prezentace v´ysledk˚u. Spr´ava bude umoˇzˇnovat zad´av´an´ıstartovn´ıho ˇcasu, ˇcasu dokonˇcen´ı, z´ıskan´ych bod˚u a urˇcen´ıd´elky z´avodu pro v´ypoˇcetpenalizace. Spr´ava i vizualizace v´ysledk˚u bude obsahovat filtry, ˇrazen´ıhodnot v tabulce a vyhled´av´an´ınejen pro efek- tivnˇejˇs´ızad´av´an´ıv´ysledk˚u, ale i napˇr´ıklad umoˇznˇen´ızobrazit v´ysledky pro pˇr´ısluˇsnou kategorii. U zobrazen´ych v´ysledk˚ubude pro spr´avce z´avodu umoˇz- nˇeno vyfiltrovan´e´udaje exportovat ve form´atu XLSX a CSV. Prvn´ım bodem zad´an´ım´ebakal´aˇrsk´epr´ace je prov´est reˇserˇsinejpouˇz´ı- vanˇejˇs´ıch framework˚upro tvorbu webov´ych aplikac´ıv jazyce Java, ve kter´e bude o kaˇzd´emz nich naps´ano p´ar vˇet. Souˇc´ast´ı reˇserˇsebude i n´asledn´y v´ybˇerframeworku, kter´ybude pouˇzit pro implementaci n´avrhu ˇreˇsen´ı. Druh´ym bodem m´eho ˇreˇsen´ıje n´avrh webov´eaplikace, kter´ybude vych´a- zet ze zadan´ych poˇzadavk˚una aplikaci. Souˇc´ast´ın´avrhu bude popis v´ybˇeru jednotliv´ych technologi´ıpro implementaci, popis funkcionalit webu a n´avrh ˇreˇsen´ıukl´ad´an´ıdat pro potˇreby webu. Po n´avrhu n´asleduje implementace. V t´eto ˇc´asti dojde k vytvoˇren´ıwebov´e aplikace ve frameworku Spring. Na tento bod navazuje testov´an´ı, ve kter´em bude provedena simulace imagin´arn´ıho z´avodu. C´ılem tohoto testu bude od- halit nedostatky aplikace. Dalˇs´ım testem bude z´atˇeˇzov´ytest, kter´ydefinuje rozsah velikosti z´avodu, pro kter´ybude tato aplikace pouˇziteln´a.Souˇc´ast´ı testov´an´ıbude zkouˇska kompatibility nejpouˇz´ıvanˇejˇs´ıch prohl´ıˇzeˇc˚ua vytvo- ˇren´ıSelenium test˚upro ovˇeˇren´ıspr´avnosti funkcionalit aplikace. Na z´avˇer bude vytvoˇrena uˇzivatelsk´adokumentace, kter´abude souˇc´ast´ıpˇr´ılohy. 1 2 Reˇserˇse framework˚u V t´eto kapitole je pops´ana reˇserˇseosmi framework˚upro tvorbu webov´ych aplikac´ı v jazyce Java. Tato kapitola neobsahuje Spring, protoˇze jemu je vˇenov´ana cel´akapitola3. 2.1 Apache Struts 2 Struts 2 je popul´arn´ıwebov´yframework, kter´yje zaloˇzen na MVC architek- tuˇre. Vznikl kompletn´ım pˇreps´an´ım p˚uvodn´ıarchitektury jeho pˇredch˚udce, kter´ynesl oznaˇcen´ıStruts. K pˇreps´an´ıdoˇslo pˇredevˇs´ım proto, ˇze nov´averze mˇela b´yt l´epe pouˇziteln´aa rozˇs´ıˇriteln´apro v´yvoj´aˇre. Pˇri vzniku nov´everze se odstoupilo od p˚uvodn´ıch akˇcn´ıch formul´aˇr˚u. Se Strust 2 se pˇreˇslo k pouˇz´ıv´an´ıPOJO (Plain Old Java Object) tˇr´ıd pro vstup z formul´aˇr˚u. Tento framework n´am poskytuje vlastn´ıznaˇcky, kter´e uˇsetˇr´ıpsan´ık´odu pro v´yvoj´aˇre. Souˇc´ast´ıtˇechto znaˇcekje i moˇznost vyuˇzit´ı technologie Ajax. Jako dalˇs´ıv´yhoda se ud´av´ajednoduch´arozˇs´ıˇritelnost o dalˇs´ıframeworky. Lze snadno integrovat frameworky jako je Spring, Tiles nebo SiteMash. Pro rozˇs´ıˇritelnost j´adra frameworku lze pouˇz´ıt i dalˇs´ız´asuvn´emoduly, kter´ych tento framework nab´ız´ınespoˇcet [1]. 2.2 JavaServer Faces JavaServer Faces (JSF) je stejnˇejako Struts webov´yframework, kter´ypod- poruje pouˇzit´ıMVC architektury. C´ılem tohoto frameworku je zjednoduˇsen´ı konstrukce uˇzivatelsk´eho rozhran´ı. K usnadnˇen´ı tvorby uˇzivatelsk´eho rozhran´ı doch´az´ı skl´ad´an´ım jednot- liv´ych ˇsablon pomoc´ıkomponent˚u, kter´ejdou jednoduˇsevloˇzit a vyˇzaduj´ı minim´aln´ıkonfiguraci. Tento framework poskytuje API, kter´epopisuje kom- ponenty uˇzivatelsk´eho rozhran´ı, spravuje jejich stav, zpracov´av´aud´alosti a ovˇeˇruje spr´avnost dat. Tento framework nab´ız´ıˇradu z´akladn´ıch knihoven, kter´eobsahuj´ıkomponenty pro pouˇzit´ı. V pˇr´ıpadˇenevyhovuj´ıc´ıch z´aklad- 2 n´ıch komponent˚utˇechto knihoven n´am JSF poskytuje API pro jejich vlastn´ı v´yvoj a rozˇs´ıˇren´ı. Stejnˇejako Strust 2 n´am nab´ız´ımoˇznost integrace r˚uzn´ych framework˚u jako je Spring nebo Hibernate. I tento framework podporuje vlastn´ıznaˇcky, kter´elze pouˇzit pˇripr´aci se ˇsablonami [2]. 2.3 Apache Wicket Wicket je komponentovˇezaloˇzen´yframework pro tvorbu webov´ych str´anek, kter´yje vyv´ıjen pod licenc´ıApache License 2.0 neziskovou organizac´ıApache Software Foundation. Framework n´am umoˇzˇnuje vytvoˇrit znovu pouˇziteln´ekomponenty. U jed- notliv´ych komponent˚uje potˇreba definovat, jak bude kaˇzd´ykomponent re- agovat na vstup od uˇzivatele. Pro pˇrehlednost mezi k´odem Java a znaˇc- kovac´ım jazykem lze pouˇz´ıt pro vkl´ad´an´ı k´odu napsan´eho v jazyce Java do HTML znaˇcky JSP (JavaServer Pages). Framework Wicket poskytuje i vlastn´ıznaˇcky, kter´enab´ız´ıˇradu moˇznost´ı. Stejnˇejako ostatn´ıv´yˇseuveden´eframeworky i Wicket umoˇzˇnuje integraci jin´ych framework˚u(jako je Spring) a podporuje Ajax technologii. Od verze 6 dokonce tento framework zaˇcalpodporovat nejpouˇz´ıvanˇejˇs´ıJavaScriptovou knihovnu jQuery [3,4]. 2.4 Google Web Toolkit Google Web Toolkit (GWT) je v´yvojov´yn´astroj pro tvorbu RIA (RICH Internet Application). Tento n´astroj n´amumoˇzˇnuje ps´at klientskou stranu v jazyce Java. Jedineˇcnost tohoto n´astroje spoˇc´ıv´av tom, ˇzekompiluje klientsk´yk´od napsan´yv jazyce Java do skriptovac´ıho jazyka JavaScript. Kromˇev´yhody psan´ıklientsk´estrany v jazyce Java je n´am tak´eumoˇzˇnuje plnˇedebugovat celou aplikaci. Souˇc´ast´ıGoogle Web Toolkit je integrace frameworku JUnit a n´astroje Maven. 3 Google Web Toolkit poskytuje Widgets knihovnu, kter´aobsahuje z´a- kladn´ın´astroje jako je Button, TextBox, TextArea, DatePicker nebo Rich- TextArea.