PŘIacuteRODOVĚDECKAacute FAKULTA UNIVERZITY PALACKEacuteHOKATEDRA INFORMATIKY

BAKALAacuteŘSKAacute PRAacuteCE

Webovaacute aplikace pro vyacuteuku psaniacute všemi deseti prsty

2013 Jiřiacute Krepl

Anotace

V raacutemci bakalaacuteřskeacute praacutece byla vyvinuta webovaacute aplikace pro vyacuteuku psaniacute všemideseti prsty kteraacute je nyniacute dostupnaacute na adrese httpnedatlujcz Uživatelmaacute na vyacuteběr z mnoha různyacutech lekciacute pokud je zaregistrovaacuten je jeho pokrok uklaacute-daacuten sveacute vyacutesledky si může zobrazit v přehlednyacutech statistikaacutech Důraz byl kladen napohodlneacute a přiacutemočareacute ovlaacutedaacuteniacute aplikace

Anotace

V raacutemci bakalaacuteřskeacute praacutece byla vyvinuta webovaacute aplikace pro vyacuteuku psaniacute všemideseti prsty kteraacute je nyniacute dostupnaacute na adrese httpnedatlujcz Uživatelmaacute na vyacuteběr z mnoha různyacutech lekciacute pokud je zaregistrovaacuten je jeho pokrok uklaacute-daacuten sveacute vyacutesledky si může zobrazit v přehlednyacutech statistikaacutech Důraz byl kladen napohodlneacute a přiacutemočareacute ovlaacutedaacuteniacute aplikace

Děkuji vedouciacutemu praacutece PhDr Juraji Mackovi za cenneacute rady a čas kteryacute mivěnoval při konzultaciacutech

Obsah

1 Uacutevod 7

2 Existujiacuteciacute aplikace 821 Program ZAV 822 Program All Ten Fingers 923 Program Deseti prsty 924 Typingercom - online kurz psaniacute naslepo 1025 Všemi Desetieu - Nauč se psaacutet všemi deseti online 1226 Piš deseticz - online kurz psaniacute na pc 13

3 Funkce aplikace 1431 Zvoleniacute platformy 14

4 Uživatelskaacute dokumentace 1541 Vyacuteběr lekce 1642 Zahaacutejeniacute lekce 1743 Registrace a přihlaacutešeniacute uživatele 1944 Statistiky 20

5 Rozhraniacute administraacutetora 2251 Uacuteprava lekciacute 2252 Uacuteprava informačniacuteho panelu 2353 Uacuteprava textu 25

6 Programaacutetorskaacute dokumentace 2761 Použiteacute technologie 2762 Adresaacuteřovaacute struktura 2963 Serverovaacute čaacutest programu 3064 Weboveacute straacutenky 3265 Struktura databaacuteze 34

7 Tvorba lekciacute 3771 Lekce obsahujiacuteciacute celaacute slova 3772 Ostatniacute lekce 37

8 Plaacuteny do budoucna 38

9 Zaacutevěr 39

Reference 40

A Instalace a použiacutevaacuteniacute 41

4

B Obsah přiloženeacuteho CD 41

5

Seznam obraacutezků

1 Program ZAV 82 Program All Ten Fingers 93 Program Deseti prsty 104 Vyacuteuka prstokladu v kurzu Typinger 115 Hra sestřelovaacuteniacute piacutesmen v kurzu Typinger 116 Opisovaacuteniacute textu v kurzu Typinger 127 Rozhraniacute lekce vsemidesetieu 138 Rozhraniacute lekce pisdeseticz 139 Diagram přiacutepadů užitiacute 1510 Tabulka lekciacute zobrazujiacuteciacute pokrok uživatele 1611 Vysunutyacute panel s informacemi o zvoleneacute lekci 1712 Rozhraniacute lekce 1813 Vyvolaacuteniacute naacutepovědy u prvku informačniacuteho panelu 1914 Chyby při psaniacute textu jsou zvyacuterazněny červeně 1915 Registračniacute formulaacuteř s validaciacute vstupniacutech uacutedajů 2016 Formulaacuteř pro přihlaacutešeniacute uživatele 2017 Statistika uživatele - graf vyacutevoje rychlosti psaniacute 2118 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu 2119 Kontextoveacute menu v tabulce lekciacute 2220 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce 2221 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce 2322 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute) 2323 Panely umožňujiacute navigaci v textech lekce 2424 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu 2425 Panely umožňujiacute navigaci v textech lekce 2526 Kontextoveacute menu přiacuteslušneacute textu lekce 2527 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce 2628 atribut placeholder elementu input 2829 Třiacutedy tvořiacuteciacute lekce programu 3130 Struktura databaacuteze 3431 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen 3732 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen 38

6

1 Uacutevod

V posledniacutem desetiletiacute zaznamenal Internet obrovskyacute rozmach Nejznaacutemějšiacuteslužbu World Wide Web využiacutevaacute 24 miliardy lidiacute což je třetina světoveacute popu-lace [3] Diacuteky rychleacutemu připojeniacute a všeobecneacutemu rozšiacuteřeniacute Webu vznikly službyYouTube Wikipedia nebo FacebookVšudypřiacutetomnost internetoveacuteho prohliacutežeče jako klienta udělala weboveacute apli-

kace velmi populaacuterniacute Hlavniacutem důvodem jejich obliacutebenosti je možnost spraacutevy aaktualizace bez nutnosti šiacuteřeniacute a instalace software na tisiacutece počiacutetačů Použiacutevajiacutese staacutele častěji na miacutestech kteraacute byla považovaacutena za tradičniacute pro jednouživatelskeacuteprogramyMoje bakalaacuteřskaacute praacutece popisuje tvorbu weboveacute aplikace pro vyacuteuku psaniacute všemi

deseti prsty Praacuteci jsem rozdělil na několik čaacutestiacute Zabyacutevaacutem se existujiacuteciacutemi apli-kacemi přiacutepravou praacutece uživatelskou a programaacutetorskou dokumentaciacute Zmiňujipostup vytvaacuteřeniacute lekciacute a nastiňuji plaacuteny do budoucna

Naučit se psaacutet všemi deseti maacute mnoho vyacutehod Při vyššiacute rychlosti a přes-nosti psaniacute dochaacuteziacute k uacutespoře času Odpadaacute nutnost věčneacuteho hledaacuteniacute klaacuteves a tiacutemvzrůstaacute miacutera soustředěniacute na vlastniacute praacuteci Dochaacuteziacute ke sniacuteženiacute zdravotniacutech riziknamaacutehaacuteniacute zad při sklaacuteněniacute hlavy ke klaacutevesnici a namaacutehaacuteniacute očiacute při přeostřovaacuteniacutemezi klaacutevesniciacute a monitorem

7

2 Existujiacuteciacute aplikace

Na českeacutem internetu chybiacute kvalitniacute webovaacute aplikace pro vyacuteuku psaniacute všemideseti prsty (daacutele jen všemi deseti) kteraacute by byla naviacutec zdarma To byla hlavniacutemotivace pro zvoleniacute zadaacuteniacute bakalaacuteřskeacute praacutece V teacuteto kapitole chci představit azhodnotit staacutevajiacuteciacute programy pro psaniacute všemi deseti Vybral jsem nejpoužiacutevanějšiacuteprogramy pro Windows a weboveacute straacutenky nabiacutezejiacuteciacute online vyacuteukuDaacutele chci popsat hlavniacute funkce vytvaacuteřeneacute aplikace a odůvodnit zvoleniacute webo-

veacuteho prostřediacute pro vyacutevoj

Pro platformu Windows existuje řada programů [4] Mnoho programů je fre-eware Tři velmi použiacutevaneacute ktereacute jsem vybral jsou placeneacuteNa Internetu jsou tři českeacute straacutenky ktereacute obsahujiacute online kurz Nabiacuteziacute několik

lekciacute zdarma zbytek lekciacute je placenyacute

21 Program ZAV

Jaroslav Zaviačič vicemistr v psaniacute na mechanickeacutem stroji je spoluautoremprogramu ZAV (obr 1) Programovanaacute vyacuteuka ZAV vychaacuteziacute ze sportovniacutech prin-cipů treacuteninku Žaacutek absolvuje specializovanaacute cvičeniacute na techniku přesnost a ko-ordinaci To vše je naacutesobeno různyacutemi motivačniacutemi prvky jako je soutěženiacute pro-střednictviacutem internetu kolektivniacute treacuteninky a systeacutem pohaacuterovyacutech soutěžiacute pro různeacutevěkoveacute kategorie [5]Styl vyacuteuky je nekompromisniacute Pro postup do dalšiacute lekce neniacute dovoleno miacutet

žaacutedneacute chyby v opisovaneacutem textu Pokud se dopustiacutete chyby maacutete možnost opa-kovaacuteniacute V některyacutech přiacutepadech vaacutes při chybneacutem opakovaacuteniacute program vraacutetiacute na před-choziacute lekciStaršiacute verze 448 neniacute upravenaacute pro systeacutem Windows 7 okno programu je

pevně nastaveno na menšiacute rozlišeniacute (text je pak velkyacute) Program nejde zavřiacutetstandardně křiacutežkem Novějšiacute verzi s přepracovanyacutem rozhraniacutem nemůžu vyzkoušetJe placenaacute a neposkytuje žaacutedneacute ukaacutezkoveacute lekce zdarma

Obraacutezek 1 Program ZAV

8

22 Program All Ten Fingers

Program All Ten Fingers (daacutele jen ATF) je již řadu let doporučovaacuten v me-todice MŠMT1 pro vyacuteuku psaniacute všemi deseti (obr 2) Program je registrovaacutenv seznamu vyacuteukoveacuteho softwaru MŠMT Slovenskaacute verze programu ATF obdrželaedukačniacute doložku Ministerstva školstviacute Slovenskeacute republiky [8]Nedostatkem je že program neobsahuje virtuaacutelniacute klaacutevesnici Vyacuteuka začiacutenaacute bez

vysvětleniacute prstokladu Program maacute nepřehledneacute ovlaacutedaacuteniacute Posledniacute verze přidalanovyacute systeacutem navigace ale grafika lekciacute zůstala stejnaacute Moderniacute Ribbon menu jezasazeno do aplikace pro Windows 95

Obraacutezek 2 Program All Ten Fingers

23 Program Deseti prsty

Program deseti prsty vypadaacute moderně a snadno se ovlaacutedaacute (obr 3) Pro-bleacutemoveacute klaacutevesy jsou procvičovaacuteny dynamicky generovanyacutemi lekcemi Programobsahuje virtuaacutelniacute klaacutevesnici i zobrazeniacute prstokladu Zvyacuterazněn je prst kteryacute maacutestisknout naacutesledujiacuteciacute klaacutevesuDeacutelka textu lekciacute by mohla byacutet polovičniacute Při každeacute chybě řekne ženskyacute hlas

bdquochybayuml Zvuky se dajiacute vypnout v nastaveniacute

1Ministerstvo školstviacute mlaacutedeže a tělovyacutechovy Českeacute Republiky

9

Obraacutezek 3 Program Deseti prsty

24 Typingercom - online kurz psaniacute naslepo

Straacutenky kurzu se nachaacuteziacute na adrese httpwwwtypingercom Kurz ob-sahuje dvacet lekciacute ktereacute se dajiacute koupit na neomezenou dobu prvniacute lekce jdevyzkoušet zdarma Každaacute lekce obsahuje tři různaacute cvičeniacute Podle autorů vyacuteukaprobiacutehaacute formou hry V každeacutem cvičeniacute maacute uživatel tři životy Při chybě o jedenživot přijde Při ztraacutetě všech životů musiacute cvičeniacute opakovat Život může opět ziacuteskatněkolika spraacutevně zadanyacutemi piacutesmeny Cvičeniacute maacute časovyacute limit Uživatel musiacute byacutetpřesnyacute a zaacuteroveň zvlaacutednout cvičeniacute v určiteacutem čase jinak nepostoupiacute daacuteleV prvniacutem cvičeniacute musiacute uživatel podle virtuaacutelniacute klaacutevesnice zmaacutečknout spraacutev-

nou klaacutevesu (obr 4) Ruce ukazujiacute spraacutevnyacute prstoklad Toto cvičeniacute považuji zanejpřiacutenosnějšiacute v celeacutem kurzu

10

Obsah

1 Uacutevod 7

2 Existujiacuteciacute aplikace 821 Program ZAV 822 Program All Ten Fingers 923 Program Deseti prsty 924 Typingercom - online kurz psaniacute naslepo 1025 Všemi Desetieu - Nauč se psaacutet všemi deseti online 1226 Piš deseticz - online kurz psaniacute na pc 13

3 Funkce aplikace 1431 Zvoleniacute platformy 14

4 Uživatelskaacute dokumentace 1541 Vyacuteběr lekce 1642 Zahaacutejeniacute lekce 1743 Registrace a přihlaacutešeniacute uživatele 1944 Statistiky 20

5 Rozhraniacute administraacutetora 2251 Uacuteprava lekciacute 2252 Uacuteprava informačniacuteho panelu 2353 Uacuteprava textu 25

6 Programaacutetorskaacute dokumentace 2761 Použiteacute technologie 2762 Adresaacuteřovaacute struktura 2963 Serverovaacute čaacutest programu 3064 Weboveacute straacutenky 3265 Struktura databaacuteze 34

7 Tvorba lekciacute 3771 Lekce obsahujiacuteciacute celaacute slova 3772 Ostatniacute lekce 37

8 Plaacuteny do budoucna 38

9 Zaacutevěr 39

Reference 40

A Instalace a použiacutevaacuteniacute 41

4

B Obsah přiloženeacuteho CD 41

5

Seznam obraacutezků

1 Program ZAV 82 Program All Ten Fingers 93 Program Deseti prsty 104 Vyacuteuka prstokladu v kurzu Typinger 115 Hra sestřelovaacuteniacute piacutesmen v kurzu Typinger 116 Opisovaacuteniacute textu v kurzu Typinger 127 Rozhraniacute lekce vsemidesetieu 138 Rozhraniacute lekce pisdeseticz 139 Diagram přiacutepadů užitiacute 1510 Tabulka lekciacute zobrazujiacuteciacute pokrok uživatele 1611 Vysunutyacute panel s informacemi o zvoleneacute lekci 1712 Rozhraniacute lekce 1813 Vyvolaacuteniacute naacutepovědy u prvku informačniacuteho panelu 1914 Chyby při psaniacute textu jsou zvyacuterazněny červeně 1915 Registračniacute formulaacuteř s validaciacute vstupniacutech uacutedajů 2016 Formulaacuteř pro přihlaacutešeniacute uživatele 2017 Statistika uživatele - graf vyacutevoje rychlosti psaniacute 2118 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu 2119 Kontextoveacute menu v tabulce lekciacute 2220 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce 2221 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce 2322 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute) 2323 Panely umožňujiacute navigaci v textech lekce 2424 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu 2425 Panely umožňujiacute navigaci v textech lekce 2526 Kontextoveacute menu přiacuteslušneacute textu lekce 2527 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce 2628 atribut placeholder elementu input 2829 Třiacutedy tvořiacuteciacute lekce programu 3130 Struktura databaacuteze 3431 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen 3732 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen 38

6

1 Uacutevod

V posledniacutem desetiletiacute zaznamenal Internet obrovskyacute rozmach Nejznaacutemějšiacuteslužbu World Wide Web využiacutevaacute 24 miliardy lidiacute což je třetina světoveacute popu-lace [3] Diacuteky rychleacutemu připojeniacute a všeobecneacutemu rozšiacuteřeniacute Webu vznikly službyYouTube Wikipedia nebo FacebookVšudypřiacutetomnost internetoveacuteho prohliacutežeče jako klienta udělala weboveacute apli-

kace velmi populaacuterniacute Hlavniacutem důvodem jejich obliacutebenosti je možnost spraacutevy aaktualizace bez nutnosti šiacuteřeniacute a instalace software na tisiacutece počiacutetačů Použiacutevajiacutese staacutele častěji na miacutestech kteraacute byla považovaacutena za tradičniacute pro jednouživatelskeacuteprogramyMoje bakalaacuteřskaacute praacutece popisuje tvorbu weboveacute aplikace pro vyacuteuku psaniacute všemi

deseti prsty Praacuteci jsem rozdělil na několik čaacutestiacute Zabyacutevaacutem se existujiacuteciacutemi apli-kacemi přiacutepravou praacutece uživatelskou a programaacutetorskou dokumentaciacute Zmiňujipostup vytvaacuteřeniacute lekciacute a nastiňuji plaacuteny do budoucna

Naučit se psaacutet všemi deseti maacute mnoho vyacutehod Při vyššiacute rychlosti a přes-nosti psaniacute dochaacuteziacute k uacutespoře času Odpadaacute nutnost věčneacuteho hledaacuteniacute klaacuteves a tiacutemvzrůstaacute miacutera soustředěniacute na vlastniacute praacuteci Dochaacuteziacute ke sniacuteženiacute zdravotniacutech riziknamaacutehaacuteniacute zad při sklaacuteněniacute hlavy ke klaacutevesnici a namaacutehaacuteniacute očiacute při přeostřovaacuteniacutemezi klaacutevesniciacute a monitorem

7

2 Existujiacuteciacute aplikace

Na českeacutem internetu chybiacute kvalitniacute webovaacute aplikace pro vyacuteuku psaniacute všemideseti prsty (daacutele jen všemi deseti) kteraacute by byla naviacutec zdarma To byla hlavniacutemotivace pro zvoleniacute zadaacuteniacute bakalaacuteřskeacute praacutece V teacuteto kapitole chci představit azhodnotit staacutevajiacuteciacute programy pro psaniacute všemi deseti Vybral jsem nejpoužiacutevanějšiacuteprogramy pro Windows a weboveacute straacutenky nabiacutezejiacuteciacute online vyacuteukuDaacutele chci popsat hlavniacute funkce vytvaacuteřeneacute aplikace a odůvodnit zvoleniacute webo-

veacuteho prostřediacute pro vyacutevoj

Pro platformu Windows existuje řada programů [4] Mnoho programů je fre-eware Tři velmi použiacutevaneacute ktereacute jsem vybral jsou placeneacuteNa Internetu jsou tři českeacute straacutenky ktereacute obsahujiacute online kurz Nabiacuteziacute několik

lekciacute zdarma zbytek lekciacute je placenyacute

21 Program ZAV

Jaroslav Zaviačič vicemistr v psaniacute na mechanickeacutem stroji je spoluautoremprogramu ZAV (obr 1) Programovanaacute vyacuteuka ZAV vychaacuteziacute ze sportovniacutech prin-cipů treacuteninku Žaacutek absolvuje specializovanaacute cvičeniacute na techniku přesnost a ko-ordinaci To vše je naacutesobeno různyacutemi motivačniacutemi prvky jako je soutěženiacute pro-střednictviacutem internetu kolektivniacute treacuteninky a systeacutem pohaacuterovyacutech soutěžiacute pro různeacutevěkoveacute kategorie [5]Styl vyacuteuky je nekompromisniacute Pro postup do dalšiacute lekce neniacute dovoleno miacutet

žaacutedneacute chyby v opisovaneacutem textu Pokud se dopustiacutete chyby maacutete možnost opa-kovaacuteniacute V některyacutech přiacutepadech vaacutes při chybneacutem opakovaacuteniacute program vraacutetiacute na před-choziacute lekciStaršiacute verze 448 neniacute upravenaacute pro systeacutem Windows 7 okno programu je

pevně nastaveno na menšiacute rozlišeniacute (text je pak velkyacute) Program nejde zavřiacutetstandardně křiacutežkem Novějšiacute verzi s přepracovanyacutem rozhraniacutem nemůžu vyzkoušetJe placenaacute a neposkytuje žaacutedneacute ukaacutezkoveacute lekce zdarma

Obraacutezek 1 Program ZAV

8

22 Program All Ten Fingers

Program All Ten Fingers (daacutele jen ATF) je již řadu let doporučovaacuten v me-todice MŠMT1 pro vyacuteuku psaniacute všemi deseti (obr 2) Program je registrovaacutenv seznamu vyacuteukoveacuteho softwaru MŠMT Slovenskaacute verze programu ATF obdrželaedukačniacute doložku Ministerstva školstviacute Slovenskeacute republiky [8]Nedostatkem je že program neobsahuje virtuaacutelniacute klaacutevesnici Vyacuteuka začiacutenaacute bez

vysvětleniacute prstokladu Program maacute nepřehledneacute ovlaacutedaacuteniacute Posledniacute verze přidalanovyacute systeacutem navigace ale grafika lekciacute zůstala stejnaacute Moderniacute Ribbon menu jezasazeno do aplikace pro Windows 95

Obraacutezek 2 Program All Ten Fingers

23 Program Deseti prsty

Program deseti prsty vypadaacute moderně a snadno se ovlaacutedaacute (obr 3) Pro-bleacutemoveacute klaacutevesy jsou procvičovaacuteny dynamicky generovanyacutemi lekcemi Programobsahuje virtuaacutelniacute klaacutevesnici i zobrazeniacute prstokladu Zvyacuterazněn je prst kteryacute maacutestisknout naacutesledujiacuteciacute klaacutevesuDeacutelka textu lekciacute by mohla byacutet polovičniacute Při každeacute chybě řekne ženskyacute hlas

bdquochybayuml Zvuky se dajiacute vypnout v nastaveniacute

1Ministerstvo školstviacute mlaacutedeže a tělovyacutechovy Českeacute Republiky

9

Obraacutezek 3 Program Deseti prsty

24 Typingercom - online kurz psaniacute naslepo

Straacutenky kurzu se nachaacuteziacute na adrese httpwwwtypingercom Kurz ob-sahuje dvacet lekciacute ktereacute se dajiacute koupit na neomezenou dobu prvniacute lekce jdevyzkoušet zdarma Každaacute lekce obsahuje tři různaacute cvičeniacute Podle autorů vyacuteukaprobiacutehaacute formou hry V každeacutem cvičeniacute maacute uživatel tři životy Při chybě o jedenživot přijde Při ztraacutetě všech životů musiacute cvičeniacute opakovat Život může opět ziacuteskatněkolika spraacutevně zadanyacutemi piacutesmeny Cvičeniacute maacute časovyacute limit Uživatel musiacute byacutetpřesnyacute a zaacuteroveň zvlaacutednout cvičeniacute v určiteacutem čase jinak nepostoupiacute daacuteleV prvniacutem cvičeniacute musiacute uživatel podle virtuaacutelniacute klaacutevesnice zmaacutečknout spraacutev-

nou klaacutevesu (obr 4) Ruce ukazujiacute spraacutevnyacute prstoklad Toto cvičeniacute považuji zanejpřiacutenosnějšiacute v celeacutem kurzu

10

B Obsah přiloženeacuteho CD 41

5

Seznam obraacutezků

1 Program ZAV 82 Program All Ten Fingers 93 Program Deseti prsty 104 Vyacuteuka prstokladu v kurzu Typinger 115 Hra sestřelovaacuteniacute piacutesmen v kurzu Typinger 116 Opisovaacuteniacute textu v kurzu Typinger 127 Rozhraniacute lekce vsemidesetieu 138 Rozhraniacute lekce pisdeseticz 139 Diagram přiacutepadů užitiacute 1510 Tabulka lekciacute zobrazujiacuteciacute pokrok uživatele 1611 Vysunutyacute panel s informacemi o zvoleneacute lekci 1712 Rozhraniacute lekce 1813 Vyvolaacuteniacute naacutepovědy u prvku informačniacuteho panelu 1914 Chyby při psaniacute textu jsou zvyacuterazněny červeně 1915 Registračniacute formulaacuteř s validaciacute vstupniacutech uacutedajů 2016 Formulaacuteř pro přihlaacutešeniacute uživatele 2017 Statistika uživatele - graf vyacutevoje rychlosti psaniacute 2118 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu 2119 Kontextoveacute menu v tabulce lekciacute 2220 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce 2221 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce 2322 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute) 2323 Panely umožňujiacute navigaci v textech lekce 2424 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu 2425 Panely umožňujiacute navigaci v textech lekce 2526 Kontextoveacute menu přiacuteslušneacute textu lekce 2527 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce 2628 atribut placeholder elementu input 2829 Třiacutedy tvořiacuteciacute lekce programu 3130 Struktura databaacuteze 3431 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen 3732 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen 38

6

1 Uacutevod

V posledniacutem desetiletiacute zaznamenal Internet obrovskyacute rozmach Nejznaacutemějšiacuteslužbu World Wide Web využiacutevaacute 24 miliardy lidiacute což je třetina světoveacute popu-lace [3] Diacuteky rychleacutemu připojeniacute a všeobecneacutemu rozšiacuteřeniacute Webu vznikly službyYouTube Wikipedia nebo FacebookVšudypřiacutetomnost internetoveacuteho prohliacutežeče jako klienta udělala weboveacute apli-

kace velmi populaacuterniacute Hlavniacutem důvodem jejich obliacutebenosti je možnost spraacutevy aaktualizace bez nutnosti šiacuteřeniacute a instalace software na tisiacutece počiacutetačů Použiacutevajiacutese staacutele častěji na miacutestech kteraacute byla považovaacutena za tradičniacute pro jednouživatelskeacuteprogramyMoje bakalaacuteřskaacute praacutece popisuje tvorbu weboveacute aplikace pro vyacuteuku psaniacute všemi

deseti prsty Praacuteci jsem rozdělil na několik čaacutestiacute Zabyacutevaacutem se existujiacuteciacutemi apli-kacemi přiacutepravou praacutece uživatelskou a programaacutetorskou dokumentaciacute Zmiňujipostup vytvaacuteřeniacute lekciacute a nastiňuji plaacuteny do budoucna

Naučit se psaacutet všemi deseti maacute mnoho vyacutehod Při vyššiacute rychlosti a přes-nosti psaniacute dochaacuteziacute k uacutespoře času Odpadaacute nutnost věčneacuteho hledaacuteniacute klaacuteves a tiacutemvzrůstaacute miacutera soustředěniacute na vlastniacute praacuteci Dochaacuteziacute ke sniacuteženiacute zdravotniacutech riziknamaacutehaacuteniacute zad při sklaacuteněniacute hlavy ke klaacutevesnici a namaacutehaacuteniacute očiacute při přeostřovaacuteniacutemezi klaacutevesniciacute a monitorem

7

2 Existujiacuteciacute aplikace

Na českeacutem internetu chybiacute kvalitniacute webovaacute aplikace pro vyacuteuku psaniacute všemideseti prsty (daacutele jen všemi deseti) kteraacute by byla naviacutec zdarma To byla hlavniacutemotivace pro zvoleniacute zadaacuteniacute bakalaacuteřskeacute praacutece V teacuteto kapitole chci představit azhodnotit staacutevajiacuteciacute programy pro psaniacute všemi deseti Vybral jsem nejpoužiacutevanějšiacuteprogramy pro Windows a weboveacute straacutenky nabiacutezejiacuteciacute online vyacuteukuDaacutele chci popsat hlavniacute funkce vytvaacuteřeneacute aplikace a odůvodnit zvoleniacute webo-

veacuteho prostřediacute pro vyacutevoj

Pro platformu Windows existuje řada programů [4] Mnoho programů je fre-eware Tři velmi použiacutevaneacute ktereacute jsem vybral jsou placeneacuteNa Internetu jsou tři českeacute straacutenky ktereacute obsahujiacute online kurz Nabiacuteziacute několik

lekciacute zdarma zbytek lekciacute je placenyacute

21 Program ZAV

Jaroslav Zaviačič vicemistr v psaniacute na mechanickeacutem stroji je spoluautoremprogramu ZAV (obr 1) Programovanaacute vyacuteuka ZAV vychaacuteziacute ze sportovniacutech prin-cipů treacuteninku Žaacutek absolvuje specializovanaacute cvičeniacute na techniku přesnost a ko-ordinaci To vše je naacutesobeno různyacutemi motivačniacutemi prvky jako je soutěženiacute pro-střednictviacutem internetu kolektivniacute treacuteninky a systeacutem pohaacuterovyacutech soutěžiacute pro různeacutevěkoveacute kategorie [5]Styl vyacuteuky je nekompromisniacute Pro postup do dalšiacute lekce neniacute dovoleno miacutet

žaacutedneacute chyby v opisovaneacutem textu Pokud se dopustiacutete chyby maacutete možnost opa-kovaacuteniacute V některyacutech přiacutepadech vaacutes při chybneacutem opakovaacuteniacute program vraacutetiacute na před-choziacute lekciStaršiacute verze 448 neniacute upravenaacute pro systeacutem Windows 7 okno programu je

pevně nastaveno na menšiacute rozlišeniacute (text je pak velkyacute) Program nejde zavřiacutetstandardně křiacutežkem Novějšiacute verzi s přepracovanyacutem rozhraniacutem nemůžu vyzkoušetJe placenaacute a neposkytuje žaacutedneacute ukaacutezkoveacute lekce zdarma

Obraacutezek 1 Program ZAV

8

22 Program All Ten Fingers

Program All Ten Fingers (daacutele jen ATF) je již řadu let doporučovaacuten v me-todice MŠMT1 pro vyacuteuku psaniacute všemi deseti (obr 2) Program je registrovaacutenv seznamu vyacuteukoveacuteho softwaru MŠMT Slovenskaacute verze programu ATF obdrželaedukačniacute doložku Ministerstva školstviacute Slovenskeacute republiky [8]Nedostatkem je že program neobsahuje virtuaacutelniacute klaacutevesnici Vyacuteuka začiacutenaacute bez

vysvětleniacute prstokladu Program maacute nepřehledneacute ovlaacutedaacuteniacute Posledniacute verze přidalanovyacute systeacutem navigace ale grafika lekciacute zůstala stejnaacute Moderniacute Ribbon menu jezasazeno do aplikace pro Windows 95

Obraacutezek 2 Program All Ten Fingers

23 Program Deseti prsty

Program deseti prsty vypadaacute moderně a snadno se ovlaacutedaacute (obr 3) Pro-bleacutemoveacute klaacutevesy jsou procvičovaacuteny dynamicky generovanyacutemi lekcemi Programobsahuje virtuaacutelniacute klaacutevesnici i zobrazeniacute prstokladu Zvyacuterazněn je prst kteryacute maacutestisknout naacutesledujiacuteciacute klaacutevesuDeacutelka textu lekciacute by mohla byacutet polovičniacute Při každeacute chybě řekne ženskyacute hlas

bdquochybayuml Zvuky se dajiacute vypnout v nastaveniacute

1Ministerstvo školstviacute mlaacutedeže a tělovyacutechovy Českeacute Republiky

9

Obraacutezek 3 Program Deseti prsty

24 Typingercom - online kurz psaniacute naslepo

Straacutenky kurzu se nachaacuteziacute na adrese httpwwwtypingercom Kurz ob-sahuje dvacet lekciacute ktereacute se dajiacute koupit na neomezenou dobu prvniacute lekce jdevyzkoušet zdarma Každaacute lekce obsahuje tři různaacute cvičeniacute Podle autorů vyacuteukaprobiacutehaacute formou hry V každeacutem cvičeniacute maacute uživatel tři životy Při chybě o jedenživot přijde Při ztraacutetě všech životů musiacute cvičeniacute opakovat Život může opět ziacuteskatněkolika spraacutevně zadanyacutemi piacutesmeny Cvičeniacute maacute časovyacute limit Uživatel musiacute byacutetpřesnyacute a zaacuteroveň zvlaacutednout cvičeniacute v určiteacutem čase jinak nepostoupiacute daacuteleV prvniacutem cvičeniacute musiacute uživatel podle virtuaacutelniacute klaacutevesnice zmaacutečknout spraacutev-

nou klaacutevesu (obr 4) Ruce ukazujiacute spraacutevnyacute prstoklad Toto cvičeniacute považuji zanejpřiacutenosnějšiacute v celeacutem kurzu

10

Seznam obraacutezků

1 Program ZAV 82 Program All Ten Fingers 93 Program Deseti prsty 104 Vyacuteuka prstokladu v kurzu Typinger 115 Hra sestřelovaacuteniacute piacutesmen v kurzu Typinger 116 Opisovaacuteniacute textu v kurzu Typinger 127 Rozhraniacute lekce vsemidesetieu 138 Rozhraniacute lekce pisdeseticz 139 Diagram přiacutepadů užitiacute 1510 Tabulka lekciacute zobrazujiacuteciacute pokrok uživatele 1611 Vysunutyacute panel s informacemi o zvoleneacute lekci 1712 Rozhraniacute lekce 1813 Vyvolaacuteniacute naacutepovědy u prvku informačniacuteho panelu 1914 Chyby při psaniacute textu jsou zvyacuterazněny červeně 1915 Registračniacute formulaacuteř s validaciacute vstupniacutech uacutedajů 2016 Formulaacuteř pro přihlaacutešeniacute uživatele 2017 Statistika uživatele - graf vyacutevoje rychlosti psaniacute 2118 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu 2119 Kontextoveacute menu v tabulce lekciacute 2220 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce 2221 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce 2322 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute) 2323 Panely umožňujiacute navigaci v textech lekce 2424 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu 2425 Panely umožňujiacute navigaci v textech lekce 2526 Kontextoveacute menu přiacuteslušneacute textu lekce 2527 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce 2628 atribut placeholder elementu input 2829 Třiacutedy tvořiacuteciacute lekce programu 3130 Struktura databaacuteze 3431 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen 3732 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen 38

6

1 Uacutevod

V posledniacutem desetiletiacute zaznamenal Internet obrovskyacute rozmach Nejznaacutemějšiacuteslužbu World Wide Web využiacutevaacute 24 miliardy lidiacute což je třetina světoveacute popu-lace [3] Diacuteky rychleacutemu připojeniacute a všeobecneacutemu rozšiacuteřeniacute Webu vznikly službyYouTube Wikipedia nebo FacebookVšudypřiacutetomnost internetoveacuteho prohliacutežeče jako klienta udělala weboveacute apli-

kace velmi populaacuterniacute Hlavniacutem důvodem jejich obliacutebenosti je možnost spraacutevy aaktualizace bez nutnosti šiacuteřeniacute a instalace software na tisiacutece počiacutetačů Použiacutevajiacutese staacutele častěji na miacutestech kteraacute byla považovaacutena za tradičniacute pro jednouživatelskeacuteprogramyMoje bakalaacuteřskaacute praacutece popisuje tvorbu weboveacute aplikace pro vyacuteuku psaniacute všemi

deseti prsty Praacuteci jsem rozdělil na několik čaacutestiacute Zabyacutevaacutem se existujiacuteciacutemi apli-kacemi přiacutepravou praacutece uživatelskou a programaacutetorskou dokumentaciacute Zmiňujipostup vytvaacuteřeniacute lekciacute a nastiňuji plaacuteny do budoucna

Naučit se psaacutet všemi deseti maacute mnoho vyacutehod Při vyššiacute rychlosti a přes-nosti psaniacute dochaacuteziacute k uacutespoře času Odpadaacute nutnost věčneacuteho hledaacuteniacute klaacuteves a tiacutemvzrůstaacute miacutera soustředěniacute na vlastniacute praacuteci Dochaacuteziacute ke sniacuteženiacute zdravotniacutech riziknamaacutehaacuteniacute zad při sklaacuteněniacute hlavy ke klaacutevesnici a namaacutehaacuteniacute očiacute při přeostřovaacuteniacutemezi klaacutevesniciacute a monitorem

7

2 Existujiacuteciacute aplikace

Na českeacutem internetu chybiacute kvalitniacute webovaacute aplikace pro vyacuteuku psaniacute všemideseti prsty (daacutele jen všemi deseti) kteraacute by byla naviacutec zdarma To byla hlavniacutemotivace pro zvoleniacute zadaacuteniacute bakalaacuteřskeacute praacutece V teacuteto kapitole chci představit azhodnotit staacutevajiacuteciacute programy pro psaniacute všemi deseti Vybral jsem nejpoužiacutevanějšiacuteprogramy pro Windows a weboveacute straacutenky nabiacutezejiacuteciacute online vyacuteukuDaacutele chci popsat hlavniacute funkce vytvaacuteřeneacute aplikace a odůvodnit zvoleniacute webo-

veacuteho prostřediacute pro vyacutevoj

Pro platformu Windows existuje řada programů [4] Mnoho programů je fre-eware Tři velmi použiacutevaneacute ktereacute jsem vybral jsou placeneacuteNa Internetu jsou tři českeacute straacutenky ktereacute obsahujiacute online kurz Nabiacuteziacute několik

lekciacute zdarma zbytek lekciacute je placenyacute

21 Program ZAV

Jaroslav Zaviačič vicemistr v psaniacute na mechanickeacutem stroji je spoluautoremprogramu ZAV (obr 1) Programovanaacute vyacuteuka ZAV vychaacuteziacute ze sportovniacutech prin-cipů treacuteninku Žaacutek absolvuje specializovanaacute cvičeniacute na techniku přesnost a ko-ordinaci To vše je naacutesobeno různyacutemi motivačniacutemi prvky jako je soutěženiacute pro-střednictviacutem internetu kolektivniacute treacuteninky a systeacutem pohaacuterovyacutech soutěžiacute pro různeacutevěkoveacute kategorie [5]Styl vyacuteuky je nekompromisniacute Pro postup do dalšiacute lekce neniacute dovoleno miacutet

žaacutedneacute chyby v opisovaneacutem textu Pokud se dopustiacutete chyby maacutete možnost opa-kovaacuteniacute V některyacutech přiacutepadech vaacutes při chybneacutem opakovaacuteniacute program vraacutetiacute na před-choziacute lekciStaršiacute verze 448 neniacute upravenaacute pro systeacutem Windows 7 okno programu je

pevně nastaveno na menšiacute rozlišeniacute (text je pak velkyacute) Program nejde zavřiacutetstandardně křiacutežkem Novějšiacute verzi s přepracovanyacutem rozhraniacutem nemůžu vyzkoušetJe placenaacute a neposkytuje žaacutedneacute ukaacutezkoveacute lekce zdarma

Obraacutezek 1 Program ZAV

8

22 Program All Ten Fingers

Program All Ten Fingers (daacutele jen ATF) je již řadu let doporučovaacuten v me-todice MŠMT1 pro vyacuteuku psaniacute všemi deseti (obr 2) Program je registrovaacutenv seznamu vyacuteukoveacuteho softwaru MŠMT Slovenskaacute verze programu ATF obdrželaedukačniacute doložku Ministerstva školstviacute Slovenskeacute republiky [8]Nedostatkem je že program neobsahuje virtuaacutelniacute klaacutevesnici Vyacuteuka začiacutenaacute bez

vysvětleniacute prstokladu Program maacute nepřehledneacute ovlaacutedaacuteniacute Posledniacute verze přidalanovyacute systeacutem navigace ale grafika lekciacute zůstala stejnaacute Moderniacute Ribbon menu jezasazeno do aplikace pro Windows 95

Obraacutezek 2 Program All Ten Fingers

23 Program Deseti prsty

Program deseti prsty vypadaacute moderně a snadno se ovlaacutedaacute (obr 3) Pro-bleacutemoveacute klaacutevesy jsou procvičovaacuteny dynamicky generovanyacutemi lekcemi Programobsahuje virtuaacutelniacute klaacutevesnici i zobrazeniacute prstokladu Zvyacuterazněn je prst kteryacute maacutestisknout naacutesledujiacuteciacute klaacutevesuDeacutelka textu lekciacute by mohla byacutet polovičniacute Při každeacute chybě řekne ženskyacute hlas

bdquochybayuml Zvuky se dajiacute vypnout v nastaveniacute

1Ministerstvo školstviacute mlaacutedeže a tělovyacutechovy Českeacute Republiky

9

Obraacutezek 3 Program Deseti prsty

24 Typingercom - online kurz psaniacute naslepo

Straacutenky kurzu se nachaacuteziacute na adrese httpwwwtypingercom Kurz ob-sahuje dvacet lekciacute ktereacute se dajiacute koupit na neomezenou dobu prvniacute lekce jdevyzkoušet zdarma Každaacute lekce obsahuje tři různaacute cvičeniacute Podle autorů vyacuteukaprobiacutehaacute formou hry V každeacutem cvičeniacute maacute uživatel tři životy Při chybě o jedenživot přijde Při ztraacutetě všech životů musiacute cvičeniacute opakovat Život může opět ziacuteskatněkolika spraacutevně zadanyacutemi piacutesmeny Cvičeniacute maacute časovyacute limit Uživatel musiacute byacutetpřesnyacute a zaacuteroveň zvlaacutednout cvičeniacute v určiteacutem čase jinak nepostoupiacute daacuteleV prvniacutem cvičeniacute musiacute uživatel podle virtuaacutelniacute klaacutevesnice zmaacutečknout spraacutev-

nou klaacutevesu (obr 4) Ruce ukazujiacute spraacutevnyacute prstoklad Toto cvičeniacute považuji zanejpřiacutenosnějšiacute v celeacutem kurzu

10

1 Uacutevod

V posledniacutem desetiletiacute zaznamenal Internet obrovskyacute rozmach Nejznaacutemějšiacuteslužbu World Wide Web využiacutevaacute 24 miliardy lidiacute což je třetina světoveacute popu-lace [3] Diacuteky rychleacutemu připojeniacute a všeobecneacutemu rozšiacuteřeniacute Webu vznikly službyYouTube Wikipedia nebo FacebookVšudypřiacutetomnost internetoveacuteho prohliacutežeče jako klienta udělala weboveacute apli-

kace velmi populaacuterniacute Hlavniacutem důvodem jejich obliacutebenosti je možnost spraacutevy aaktualizace bez nutnosti šiacuteřeniacute a instalace software na tisiacutece počiacutetačů Použiacutevajiacutese staacutele častěji na miacutestech kteraacute byla považovaacutena za tradičniacute pro jednouživatelskeacuteprogramyMoje bakalaacuteřskaacute praacutece popisuje tvorbu weboveacute aplikace pro vyacuteuku psaniacute všemi

deseti prsty Praacuteci jsem rozdělil na několik čaacutestiacute Zabyacutevaacutem se existujiacuteciacutemi apli-kacemi přiacutepravou praacutece uživatelskou a programaacutetorskou dokumentaciacute Zmiňujipostup vytvaacuteřeniacute lekciacute a nastiňuji plaacuteny do budoucna

Naučit se psaacutet všemi deseti maacute mnoho vyacutehod Při vyššiacute rychlosti a přes-nosti psaniacute dochaacuteziacute k uacutespoře času Odpadaacute nutnost věčneacuteho hledaacuteniacute klaacuteves a tiacutemvzrůstaacute miacutera soustředěniacute na vlastniacute praacuteci Dochaacuteziacute ke sniacuteženiacute zdravotniacutech riziknamaacutehaacuteniacute zad při sklaacuteněniacute hlavy ke klaacutevesnici a namaacutehaacuteniacute očiacute při přeostřovaacuteniacutemezi klaacutevesniciacute a monitorem

7

2 Existujiacuteciacute aplikace

Na českeacutem internetu chybiacute kvalitniacute webovaacute aplikace pro vyacuteuku psaniacute všemideseti prsty (daacutele jen všemi deseti) kteraacute by byla naviacutec zdarma To byla hlavniacutemotivace pro zvoleniacute zadaacuteniacute bakalaacuteřskeacute praacutece V teacuteto kapitole chci představit azhodnotit staacutevajiacuteciacute programy pro psaniacute všemi deseti Vybral jsem nejpoužiacutevanějšiacuteprogramy pro Windows a weboveacute straacutenky nabiacutezejiacuteciacute online vyacuteukuDaacutele chci popsat hlavniacute funkce vytvaacuteřeneacute aplikace a odůvodnit zvoleniacute webo-

veacuteho prostřediacute pro vyacutevoj

Pro platformu Windows existuje řada programů [4] Mnoho programů je fre-eware Tři velmi použiacutevaneacute ktereacute jsem vybral jsou placeneacuteNa Internetu jsou tři českeacute straacutenky ktereacute obsahujiacute online kurz Nabiacuteziacute několik

lekciacute zdarma zbytek lekciacute je placenyacute

21 Program ZAV

Jaroslav Zaviačič vicemistr v psaniacute na mechanickeacutem stroji je spoluautoremprogramu ZAV (obr 1) Programovanaacute vyacuteuka ZAV vychaacuteziacute ze sportovniacutech prin-cipů treacuteninku Žaacutek absolvuje specializovanaacute cvičeniacute na techniku přesnost a ko-ordinaci To vše je naacutesobeno různyacutemi motivačniacutemi prvky jako je soutěženiacute pro-střednictviacutem internetu kolektivniacute treacuteninky a systeacutem pohaacuterovyacutech soutěžiacute pro různeacutevěkoveacute kategorie [5]Styl vyacuteuky je nekompromisniacute Pro postup do dalšiacute lekce neniacute dovoleno miacutet

žaacutedneacute chyby v opisovaneacutem textu Pokud se dopustiacutete chyby maacutete možnost opa-kovaacuteniacute V některyacutech přiacutepadech vaacutes při chybneacutem opakovaacuteniacute program vraacutetiacute na před-choziacute lekciStaršiacute verze 448 neniacute upravenaacute pro systeacutem Windows 7 okno programu je

pevně nastaveno na menšiacute rozlišeniacute (text je pak velkyacute) Program nejde zavřiacutetstandardně křiacutežkem Novějšiacute verzi s přepracovanyacutem rozhraniacutem nemůžu vyzkoušetJe placenaacute a neposkytuje žaacutedneacute ukaacutezkoveacute lekce zdarma

Obraacutezek 1 Program ZAV

8

22 Program All Ten Fingers

Program All Ten Fingers (daacutele jen ATF) je již řadu let doporučovaacuten v me-todice MŠMT1 pro vyacuteuku psaniacute všemi deseti (obr 2) Program je registrovaacutenv seznamu vyacuteukoveacuteho softwaru MŠMT Slovenskaacute verze programu ATF obdrželaedukačniacute doložku Ministerstva školstviacute Slovenskeacute republiky [8]Nedostatkem je že program neobsahuje virtuaacutelniacute klaacutevesnici Vyacuteuka začiacutenaacute bez

vysvětleniacute prstokladu Program maacute nepřehledneacute ovlaacutedaacuteniacute Posledniacute verze přidalanovyacute systeacutem navigace ale grafika lekciacute zůstala stejnaacute Moderniacute Ribbon menu jezasazeno do aplikace pro Windows 95

Obraacutezek 2 Program All Ten Fingers

23 Program Deseti prsty

Program deseti prsty vypadaacute moderně a snadno se ovlaacutedaacute (obr 3) Pro-bleacutemoveacute klaacutevesy jsou procvičovaacuteny dynamicky generovanyacutemi lekcemi Programobsahuje virtuaacutelniacute klaacutevesnici i zobrazeniacute prstokladu Zvyacuterazněn je prst kteryacute maacutestisknout naacutesledujiacuteciacute klaacutevesuDeacutelka textu lekciacute by mohla byacutet polovičniacute Při každeacute chybě řekne ženskyacute hlas

bdquochybayuml Zvuky se dajiacute vypnout v nastaveniacute

1Ministerstvo školstviacute mlaacutedeže a tělovyacutechovy Českeacute Republiky

9

Obraacutezek 3 Program Deseti prsty

24 Typingercom - online kurz psaniacute naslepo

Straacutenky kurzu se nachaacuteziacute na adrese httpwwwtypingercom Kurz ob-sahuje dvacet lekciacute ktereacute se dajiacute koupit na neomezenou dobu prvniacute lekce jdevyzkoušet zdarma Každaacute lekce obsahuje tři různaacute cvičeniacute Podle autorů vyacuteukaprobiacutehaacute formou hry V každeacutem cvičeniacute maacute uživatel tři životy Při chybě o jedenživot přijde Při ztraacutetě všech životů musiacute cvičeniacute opakovat Život může opět ziacuteskatněkolika spraacutevně zadanyacutemi piacutesmeny Cvičeniacute maacute časovyacute limit Uživatel musiacute byacutetpřesnyacute a zaacuteroveň zvlaacutednout cvičeniacute v určiteacutem čase jinak nepostoupiacute daacuteleV prvniacutem cvičeniacute musiacute uživatel podle virtuaacutelniacute klaacutevesnice zmaacutečknout spraacutev-

nou klaacutevesu (obr 4) Ruce ukazujiacute spraacutevnyacute prstoklad Toto cvičeniacute považuji zanejpřiacutenosnějšiacute v celeacutem kurzu

10

2 Existujiacuteciacute aplikace

Na českeacutem internetu chybiacute kvalitniacute webovaacute aplikace pro vyacuteuku psaniacute všemideseti prsty (daacutele jen všemi deseti) kteraacute by byla naviacutec zdarma To byla hlavniacutemotivace pro zvoleniacute zadaacuteniacute bakalaacuteřskeacute praacutece V teacuteto kapitole chci představit azhodnotit staacutevajiacuteciacute programy pro psaniacute všemi deseti Vybral jsem nejpoužiacutevanějšiacuteprogramy pro Windows a weboveacute straacutenky nabiacutezejiacuteciacute online vyacuteukuDaacutele chci popsat hlavniacute funkce vytvaacuteřeneacute aplikace a odůvodnit zvoleniacute webo-

veacuteho prostřediacute pro vyacutevoj

Pro platformu Windows existuje řada programů [4] Mnoho programů je fre-eware Tři velmi použiacutevaneacute ktereacute jsem vybral jsou placeneacuteNa Internetu jsou tři českeacute straacutenky ktereacute obsahujiacute online kurz Nabiacuteziacute několik

lekciacute zdarma zbytek lekciacute je placenyacute

21 Program ZAV

Jaroslav Zaviačič vicemistr v psaniacute na mechanickeacutem stroji je spoluautoremprogramu ZAV (obr 1) Programovanaacute vyacuteuka ZAV vychaacuteziacute ze sportovniacutech prin-cipů treacuteninku Žaacutek absolvuje specializovanaacute cvičeniacute na techniku přesnost a ko-ordinaci To vše je naacutesobeno různyacutemi motivačniacutemi prvky jako je soutěženiacute pro-střednictviacutem internetu kolektivniacute treacuteninky a systeacutem pohaacuterovyacutech soutěžiacute pro různeacutevěkoveacute kategorie [5]Styl vyacuteuky je nekompromisniacute Pro postup do dalšiacute lekce neniacute dovoleno miacutet

žaacutedneacute chyby v opisovaneacutem textu Pokud se dopustiacutete chyby maacutete možnost opa-kovaacuteniacute V některyacutech přiacutepadech vaacutes při chybneacutem opakovaacuteniacute program vraacutetiacute na před-choziacute lekciStaršiacute verze 448 neniacute upravenaacute pro systeacutem Windows 7 okno programu je

pevně nastaveno na menšiacute rozlišeniacute (text je pak velkyacute) Program nejde zavřiacutetstandardně křiacutežkem Novějšiacute verzi s přepracovanyacutem rozhraniacutem nemůžu vyzkoušetJe placenaacute a neposkytuje žaacutedneacute ukaacutezkoveacute lekce zdarma

Obraacutezek 1 Program ZAV

8

22 Program All Ten Fingers

Program All Ten Fingers (daacutele jen ATF) je již řadu let doporučovaacuten v me-todice MŠMT1 pro vyacuteuku psaniacute všemi deseti (obr 2) Program je registrovaacutenv seznamu vyacuteukoveacuteho softwaru MŠMT Slovenskaacute verze programu ATF obdrželaedukačniacute doložku Ministerstva školstviacute Slovenskeacute republiky [8]Nedostatkem je že program neobsahuje virtuaacutelniacute klaacutevesnici Vyacuteuka začiacutenaacute bez

vysvětleniacute prstokladu Program maacute nepřehledneacute ovlaacutedaacuteniacute Posledniacute verze přidalanovyacute systeacutem navigace ale grafika lekciacute zůstala stejnaacute Moderniacute Ribbon menu jezasazeno do aplikace pro Windows 95

Obraacutezek 2 Program All Ten Fingers

23 Program Deseti prsty

Program deseti prsty vypadaacute moderně a snadno se ovlaacutedaacute (obr 3) Pro-bleacutemoveacute klaacutevesy jsou procvičovaacuteny dynamicky generovanyacutemi lekcemi Programobsahuje virtuaacutelniacute klaacutevesnici i zobrazeniacute prstokladu Zvyacuterazněn je prst kteryacute maacutestisknout naacutesledujiacuteciacute klaacutevesuDeacutelka textu lekciacute by mohla byacutet polovičniacute Při každeacute chybě řekne ženskyacute hlas

bdquochybayuml Zvuky se dajiacute vypnout v nastaveniacute

1Ministerstvo školstviacute mlaacutedeže a tělovyacutechovy Českeacute Republiky

9

Obraacutezek 3 Program Deseti prsty

24 Typingercom - online kurz psaniacute naslepo

Straacutenky kurzu se nachaacuteziacute na adrese httpwwwtypingercom Kurz ob-sahuje dvacet lekciacute ktereacute se dajiacute koupit na neomezenou dobu prvniacute lekce jdevyzkoušet zdarma Každaacute lekce obsahuje tři různaacute cvičeniacute Podle autorů vyacuteukaprobiacutehaacute formou hry V každeacutem cvičeniacute maacute uživatel tři životy Při chybě o jedenživot přijde Při ztraacutetě všech životů musiacute cvičeniacute opakovat Život může opět ziacuteskatněkolika spraacutevně zadanyacutemi piacutesmeny Cvičeniacute maacute časovyacute limit Uživatel musiacute byacutetpřesnyacute a zaacuteroveň zvlaacutednout cvičeniacute v určiteacutem čase jinak nepostoupiacute daacuteleV prvniacutem cvičeniacute musiacute uživatel podle virtuaacutelniacute klaacutevesnice zmaacutečknout spraacutev-

nou klaacutevesu (obr 4) Ruce ukazujiacute spraacutevnyacute prstoklad Toto cvičeniacute považuji zanejpřiacutenosnějšiacute v celeacutem kurzu

10

22 Program All Ten Fingers

Program All Ten Fingers (daacutele jen ATF) je již řadu let doporučovaacuten v me-todice MŠMT1 pro vyacuteuku psaniacute všemi deseti (obr 2) Program je registrovaacutenv seznamu vyacuteukoveacuteho softwaru MŠMT Slovenskaacute verze programu ATF obdrželaedukačniacute doložku Ministerstva školstviacute Slovenskeacute republiky [8]Nedostatkem je že program neobsahuje virtuaacutelniacute klaacutevesnici Vyacuteuka začiacutenaacute bez

vysvětleniacute prstokladu Program maacute nepřehledneacute ovlaacutedaacuteniacute Posledniacute verze přidalanovyacute systeacutem navigace ale grafika lekciacute zůstala stejnaacute Moderniacute Ribbon menu jezasazeno do aplikace pro Windows 95

Obraacutezek 2 Program All Ten Fingers

23 Program Deseti prsty

Program deseti prsty vypadaacute moderně a snadno se ovlaacutedaacute (obr 3) Pro-bleacutemoveacute klaacutevesy jsou procvičovaacuteny dynamicky generovanyacutemi lekcemi Programobsahuje virtuaacutelniacute klaacutevesnici i zobrazeniacute prstokladu Zvyacuterazněn je prst kteryacute maacutestisknout naacutesledujiacuteciacute klaacutevesuDeacutelka textu lekciacute by mohla byacutet polovičniacute Při každeacute chybě řekne ženskyacute hlas

bdquochybayuml Zvuky se dajiacute vypnout v nastaveniacute

1Ministerstvo školstviacute mlaacutedeže a tělovyacutechovy Českeacute Republiky

9

Obraacutezek 3 Program Deseti prsty

24 Typingercom - online kurz psaniacute naslepo

Straacutenky kurzu se nachaacuteziacute na adrese httpwwwtypingercom Kurz ob-sahuje dvacet lekciacute ktereacute se dajiacute koupit na neomezenou dobu prvniacute lekce jdevyzkoušet zdarma Každaacute lekce obsahuje tři různaacute cvičeniacute Podle autorů vyacuteukaprobiacutehaacute formou hry V každeacutem cvičeniacute maacute uživatel tři životy Při chybě o jedenživot přijde Při ztraacutetě všech životů musiacute cvičeniacute opakovat Život může opět ziacuteskatněkolika spraacutevně zadanyacutemi piacutesmeny Cvičeniacute maacute časovyacute limit Uživatel musiacute byacutetpřesnyacute a zaacuteroveň zvlaacutednout cvičeniacute v určiteacutem čase jinak nepostoupiacute daacuteleV prvniacutem cvičeniacute musiacute uživatel podle virtuaacutelniacute klaacutevesnice zmaacutečknout spraacutev-

nou klaacutevesu (obr 4) Ruce ukazujiacute spraacutevnyacute prstoklad Toto cvičeniacute považuji zanejpřiacutenosnějšiacute v celeacutem kurzu

10

Obraacutezek 3 Program Deseti prsty

24 Typingercom - online kurz psaniacute naslepo

Straacutenky kurzu se nachaacuteziacute na adrese httpwwwtypingercom Kurz ob-sahuje dvacet lekciacute ktereacute se dajiacute koupit na neomezenou dobu prvniacute lekce jdevyzkoušet zdarma Každaacute lekce obsahuje tři různaacute cvičeniacute Podle autorů vyacuteukaprobiacutehaacute formou hry V každeacutem cvičeniacute maacute uživatel tři životy Při chybě o jedenživot přijde Při ztraacutetě všech životů musiacute cvičeniacute opakovat Život může opět ziacuteskatněkolika spraacutevně zadanyacutemi piacutesmeny Cvičeniacute maacute časovyacute limit Uživatel musiacute byacutetpřesnyacute a zaacuteroveň zvlaacutednout cvičeniacute v určiteacutem čase jinak nepostoupiacute daacuteleV prvniacutem cvičeniacute musiacute uživatel podle virtuaacutelniacute klaacutevesnice zmaacutečknout spraacutev-

nou klaacutevesu (obr 4) Ruce ukazujiacute spraacutevnyacute prstoklad Toto cvičeniacute považuji zanejpřiacutenosnějšiacute v celeacutem kurzu

10

Obraacutezek 4 Vyacuteuka prstokladu v kurzu Typinger

Druheacute cvičeniacute je hra Uživatel ovlaacutedaacute raketu kteraacute sestřeluje přibližujiacuteciacute sepiacutesmena (obr 5) O život přijde pokud zmaacutečkne klaacutevesu kteraacute se nevyskytujena hraciacute ploše nebo pokud piacutesmeno naraziacute do raketyTřetiacute cvičeniacute je opisovaacuteniacute textu podle předlohy (obr 6) Spraacutevně zadaneacute piacutes-

meno bdquozmiziacuteyuml a opisovaacuteniacute pokračuje naacutesledujiacuteciacutem piacutesmenem Opět maacute uživateltři životy O jeden přijde pokud stiskne špatnou klaacutevesuTypinger je nejpropracovanějšiacute z uvaacuteděnyacutech online kurzů Třetiacute typ cvičeniacute

by ale měl miacutet zobrazenou virtuaacutelniacute klaacutevesnici s prstokladem

Obraacutezek 5 Hra sestřelovaacuteniacute piacutesmen v kurzu Typinger

11

Obraacutezek 6 Opisovaacuteniacute textu v kurzu Typinger

25 Všemi Desetieu - Nauč se psaacutet všemi deseti online

Kurz se nachaacuteziacute na straacutence vsemidesetieu Straacutenky jsou zatiacutem ve vyacutevojinyniacute ve verzi 03 beta Uživatel může vyzkoušet prvniacutech deset lekciacute zdarma nebokoupit celyacute kurz na tři měsiacutece nebo jeden rok Registrace uživatelů a pokročileacutestatistiky jsou dostupneacute jen v placeneacute verzi Zajiacutemavou funkciacute je použitiacute člaacutenkuz Wikipedie nebo některyacutech českyacutech zpravodajskyacutech serverů jako textu lekceStraacutenky majiacute profesionaacutelniacute typografii a obsah ale rozhraniacute kurzu je na nedosta-tečneacute uacuterovniRozhraniacute kurzu neobsahuje virtuaacutelniacute klaacutevesnici s prstokladem (obr 7) Chybiacute

indikaacutetor postupu uživatel tak neviacute kdy lekce skončiacute Daacutele chybiacute zobrazeniacute rych-losti a přesnosti psaniacute HTML2 input element vlevo dole (obr 7) asi sloužiacute ktestovaciacutem uacutečelům a zatiacutem nebyl odstraněn Lekce se voliacute HTML option elemen-tem vpravo dole

2HyperText Markup Language

12

Obraacutezek 6 Opisovaacuteniacute textu v kurzu Typinger

25 Všemi Desetieu - Nauč se psaacutet všemi deseti online

Kurz se nachaacuteziacute na straacutence vsemidesetieu Straacutenky jsou zatiacutem ve vyacutevojinyniacute ve verzi 03 beta Uživatel může vyzkoušet prvniacutech deset lekciacute zdarma nebokoupit celyacute kurz na tři měsiacutece nebo jeden rok Registrace uživatelů a pokročileacutestatistiky jsou dostupneacute jen v placeneacute verzi Zajiacutemavou funkciacute je použitiacute člaacutenkuz Wikipedie nebo některyacutech českyacutech zpravodajskyacutech serverů jako textu lekceStraacutenky majiacute profesionaacutelniacute typografii a obsah ale rozhraniacute kurzu je na nedosta-tečneacute uacuterovniRozhraniacute kurzu neobsahuje virtuaacutelniacute klaacutevesnici s prstokladem (obr 7) Chybiacute

indikaacutetor postupu uživatel tak neviacute kdy lekce skončiacute Daacutele chybiacute zobrazeniacute rych-losti a přesnosti psaniacute HTML2 input element vlevo dole (obr 7) asi sloužiacute ktestovaciacutem uacutečelům a zatiacutem nebyl odstraněn Lekce se voliacute HTML option elemen-tem vpravo dole

2HyperText Markup Language

12

Obraacutezek 7 Rozhraniacute lekce vsemidesetieu

26 Piš deseticz - online kurz psaniacute na pc

Vyacuteuka na straacutenkaacutech pisdeseticz probiacutehaacute odlišnyacutem způsobem než u před-choziacutech kurzů Uživatel zaplatiacute kurz a potom dostaacutevaacute každyacute druhyacute den emailemodkaz na novou lekci Kurz obsahuje dvacet lekciacute Po zakoupeniacute lze každou lekcineomezeně opakovat Prvniacute tři lekce jsou na straacutenkaacutech k vyzkoušeniacute zdarmaKurz nenabiacuteziacute registraci uživatelů Statistiky se neuklaacutedajiacute ale pouze zobra-

zujiacute v rozhraniacute lekce (obr 8) Lekce může miacutet viacutece řaacutedků Probleacutem je že přiopisovaacuteniacute dalšiacutech řaacutedků neniacute snadneacute sledovat text předlohy Opět chybiacute virtuaacutelniacuteklaacutevesnice s prstokladem

Obraacutezek 8 Rozhraniacute lekce pisdeseticz

13

3 Funkce aplikace

Aplikace bude přiacutestupnaacute na straacutenkaacutech httpwwwnedatlujcz a bude miacutetmožnost registrace svyacutech uživatelů Uživatel si bude moci zvolit zda bude zare-gistrovaacuten a přihlaacutešen Pokud ano bude jeho pokrok a osobniacute statistiky zazname-naacutevaacuteny do jeho profilu Statistiky budou obsahovat probleacutemovaacute piacutesmena a průběhzlepšovaacuteniacute rychlosti a přesnosti psaniacute po dobu použiacutevaacuteniacute aplikaceUživatel si bude moci zvolit požadovanou lekci nebo se vyzkoušet svoje do-

vednosti v testu psaniacute Statistiky testu a lekciacute budou odděleneacute Bude kladen důrazna rozhraniacute lekce bude vytvořena virtuaacutelniacute klaacutevesnice a znaacutezorněniacute prstokladuAplikace bude obsahovat rozhraniacute administraacutetora Administraacutetor bude moci

vytvaacuteřet noveacute lekce upravovat je a mazat Změnit bude možneacute veškeryacute obsahlekce

31 Zvoleniacute platformy

Web je ideaacutelniacute prostřediacute pro tuto aplikaci Vyacutehody jsou naacutesledujiacuteciacute

bull nezaacutevislost na operačniacutem systeacutemu a internetoveacutem prohliacutežeči uživatele

bull odpadaacute nutnost instalace softwaru na konkreacutetniacutem počiacutetači

bull k ovlaacutedaacuteniacute postačuje internetovyacute prohliacutežeč

bull snadnějšiacute aktualizace a distribuce aplikace

bull uživatel se nemusiacute starat o svoje data ta jsou přiacutestupnaacute odkudkoliv

bull ověřeneacute programy pro vyacuteuku psaniacute všemi deseti již existujiacute pro systeacutem Win-dows

Webovaacute aplikace je dle meacuteho naacutezoru lepšiacute pro meacuteně zkušeneacute uživatele kteřiacutese nemusejiacute zabyacutevat stahovaacuteniacutem a instalaciacute programu

14

4 Uživatelskaacute dokumentace

Uživatelskaacute dokumentace popisuje obsluhu aplikace Zde budou popsaacutenyfunkce aplikace doplněneacute o sniacutemky rozhraniacute aplikace Diagram přiacutepadů užitiacute(obr 9) ukazuje co aplikace uživateli nabiacuteziacute Uživatel může byacutet nepřihlaacutešenyacutepřihlaacutešenyacute nebo administraacutetorPřihlaacutešeneacutemu uživateli je pokrok uklaacutedaacuten do databaacuteze Nepřihlaacutešeneacutemu uži-

vateli je pokrok uklaacutedaacuten pouze dočasně

Obraacutezek 9 Diagram přiacutepadů užitiacute

15

41 Vyacuteběr lekce

Kurz je podle obtiacutežnosti rozdělen na tři kategorie Každaacute kategorie obsahujelekce stejneacute uacuterovně Prvniacute skupinu tvořiacute tři zaacutekladniacute řady piacutesmen Druhaacute obsahuječtvrtou horniacute řadu (diakritika a čiacuteslice) a velkaacute piacutesmena Posledniacute čaacutesti jsou lekcepsaneacuteho textuUživatel si může vybrat lekci z jakeacutehokoliv kategorie Pokud již uživatel ovlaacutedaacute

např tři zaacutekladniacute řady piacutesmen může tyto lekce přeskočit a začiacutet jinou lekciacuteTabulka lekciacute (obr 10) ukazuje uživatelův pokrok a dosaženou přesnost v

daneacute lekci Uživatel může pokračovat v započateacutem kurzu nebo jakyacutekoliv kurz sizopakovat (tlačiacutetko restart)

Obraacutezek 10 Tabulka lekciacute zobrazujiacuteciacute pokrok uživatele

16

42 Zahaacutejeniacute lekce

Před zahaacutejeniacutem lekce se vysune panel s informacemi a zvyacuterazněnyacutem prsto-kladem (obr 11) Panel se zobrazuje jen při zahaacutejeniacute lekce (u prvniacuteho textu)Uživatel panel zavře tlačiacutetkem Pokračujte zde nebo křiacutežkem vpravo nahoře Pozavřeniacute panelu může lekce začiacutet

Obraacutezek 11 Vysunutyacute panel s informacemi o zvoleneacute lekci

17

Obraacutezek 12 Rozhraniacute lekce

Rozhraniacute lekce (obr 12) se sklaacutedaacute z drobečkoveacute navigace informačniacuteho pa-nelu textu lekce a virtuaacutelniacute klaacutevesnice

Drobečkovaacute navigace

Udaacutevaacute vybranou čaacutest kurzu a jmeacuteno lekce Uživatel ji může použiacutet k naacutevratuna předchoziacute straacutenku

Informačniacute panel

Informačniacute panel se sklaacutedaacute z naacutesledujiacuteciacutech čaacutestiacute

bull tlačiacutetko začiacutet text znovu resetuje pokrok v aktuaacutelniacutem textu

bull chyby počiacutetadlo chyb

bull požadovanaacute přesnost přesnost psaniacute kterou je nutneacute dodržet pro pokračo-vaacuteniacute na dalšiacute text lekce

bull přesnost udaacutevaacute aktuaacutelniacute přesnost psaniacute

bull WMP ukazatel rychlosti psaniacute počet slov za minutu (words per minute)

bull aktuaacutelniacute text ukazuje aktuaacutelniacute text lekce a z kolika textů se lekce sklaacutedaacute

18

bull průběh lekce grafickeacute znaacutezorněniacute deacutelky lekce zaraacutežkami je označena deacutelkajednoho textu Zelenaacute linka je pokrok v daneacute lekci (naviacutec udaacutevanyacute v pro-centech)

Každyacute ukazatel informačniacuteho panelu maacute svoji naacutepovědu (obr 13) vyvolanounajetiacutem myši otazniacutek v zaacutevorkaacutech

Obraacutezek 13 Vyvolaacuteniacute naacutepovědy u prvku informačniacuteho panelu

Text lekce

Lekce je složena z textů Každyacute text kteryacute je zobrazen na čtyřech řaacutedciacutech maacutedeacutelku maximaacutelně 325 znaků (65 znaků na řaacutedek) Text maacute nastavenou požado-vanou přesnost Pokrok je uklaacutedaacuten pokud uživatel dokončiacute text s požadovanoupřesnostiacute jinak musiacute text opakovat Rozděleniacute lekce na kraacutetkeacute texty umožniacute uži-vateli použiacutevat aplikaci jen několik minut a přesto dosaacutehnout pokrokuZnak kteryacute maacute uživatel napsat je zvyacuterazněn zeleně Pokud dojde k chybě je

znak zvyacuterazněn červeně (obr 14) Neniacute dovoleno udělat viacutece jak dvě chyby zasebou Po prvniacutem chybně napsaneacutem znaku musiacute uživatel napsat znak spraacutevněSplněnaacute čaacutest textu je zvyacuterazněna šedou barvou

Obraacutezek 14 Chyby při psaniacute textu jsou zvyacuterazněny červeně

Virtuaacutelniacute klaacutevesnice

Zobrazuje naacutesledujiacuteciacute znak textu kteryacute se nachaacuteziacute před praacutevě napsanyacutem zna-kem Současně je zvyacuterazněn prst kteryacutem maacute byacutet znak napsaacuten (obr 12)

43 Registrace a přihlaacutešeniacute uživatele

Registračniacute formulaacuteř (obr 15) ověřiacute zadaneacute uacutedaje ještě před stisknutiacutem tla-čiacutetka odeslat (technologie AJAX3) Toto řešeniacute zvyšuje komfort uživatele kteryacuteokamžitě vidiacute zda jsou jeho uacutedaje spraacutevneacute Ověřuje se spraacutevnost zadanyacutech uacutedajů(např deacutelka jmeacutena hesla se shodujiacute apod) Kontroluje se email a uživatel-skeacute jmeacuteno - nesmiacute byacutet již zaregistrovaacuteno Přihlaacutešeniacute probiacutehaacute přes přihlašovaciacute

3AJAX (Asynchronous JavaScript and XML) je obecneacute označeniacute pro technologie vyacutevojeinteraktivniacutech webovyacutech aplikaciacute ktereacute měniacute obsah svyacutech straacutenek bez nutnosti jejich znovuna-čiacutetaacuteniacute

19

(obr 16) formulaacuteř uživatel se přihlašuje pod svyacutem uživatelskyacutem jmeacutenem a hes-lem

Obraacutezek 15 Registračniacute formulaacuteř s validaciacute vstupniacutech uacutedajů

Obraacutezek 16 Formulaacuteř pro přihlaacutešeniacute uživatele

44 Statistiky

Pokud je uživatel přihlaacutešen může si zobrazit statistiky pokroku Statistikyjsou uklaacutedaacuteny zvlaacutešť pro lekce a testy Grafy zobrazujiacute klaacutevesy s nejviacutece chybamirychlost psaniacute v zaacutevislosti na čase (obr 17) a počet splněnyacutech textů každyacute denDodatečneacute informace se zobrazujiacute při najetiacute myšiacute na hodnoty grafů (obr 18)Daacutele se zobrazuje datum registrace počet dokončenyacutech lekciacute a čas straacutevenyacute připsaniacute lekciacute

20

Obraacutezek 17 Statistika uživatele - graf vyacutevoje rychlosti psaniacute

Obraacutezek 18 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu

21

5 Rozhraniacute administraacutetora

Uacuteprava lekciacute kurzu probiacutehaacute přes rozhraniacute administraacutetora Administraacutetor jeuživatel kteryacute maacute v databaacutezi v tabulce Users nastaven přiacuteznak isAdminCiacutelem bylo vytvořit rozhraniacute ve stylu redakčniacuteho systeacutemu ktereacute by bylo sou-

čaacutestiacute aplikace Nechtěl jsem vytvaacuteřet dalšiacute samostatneacute grafickeacute rozhraniacute k data-baacutezi ktereacute již existuje (phpMyAdmin)

51 Uacuteprava lekciacute

Administrace lekciacute probiacutehaacute přes kontextoveacute menu tabulky lekciacute (obr 19)Menu je vyvolaacuteno pravyacutem tlačiacutetkem myši

Obraacutezek 19 Kontextoveacute menu v tabulce lekciacute

Menu obsahuje naacutesledujiacuteciacute položky

bull vytvořit lekci na konci tabulky lekciacute vytvořiacute novyacute řaacutedek (obr 20) do kte-reacuteho se vložiacute jmeacuteno a kategorie noveacute lekce

bull upravit lekci v řaacutedku na ktereacutem bylo vyvolaneacute kontextoveacute menu vytvořiacuteHTML elemnt input (obr 21) pro editaci naacutezvu a HTML element optionpro změnu kategorie lekce

bull smazat lekci smaže lekci nad kterou bylo vyvolaacuteno kontextoveacute menu (jevyžadovaacuteno potvrzeniacute)

bull upravit vaacutehu v každeacutem řaacutedku se vytvořiacute HTML element input (obr 22)V něm se nachaacuteziacute hodnota vaacutehy řaacutedku kteraacute udaacutevaacute jeho pořadiacute v tabulceŘaacutedky s vyššiacute vahou (klesajiacute) jsou zařazenyacute niacuteže

Obraacutezek 20 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce

22

Obraacutezek 21 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce

Obraacutezek 22 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute)

52 Uacuteprava informačniacuteho panelu

Informačniacute panel se přepne do moacutedu uacuteprav po stisknutiacute tlačiacutetka upravit(obr 24) ktereacute se na něm nachaacuteziacute Moacuted uacuteprav (obr 23) nabiacuteziacute možnost zob-razovat pouze textoveacute informace nebo naviacutec klaacutevesnici a prstoklad Upravit lzetextoveacute informace o lekci je možneacute vložit HTML koacuted Daacutele vybrat klaacutevesy a zvolitprstoklad

23

Obraacutezek 23 Panely umožňujiacute navigaci v textech lekce

Obraacutezek 24 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu

24

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

41 Vyacuteběr lekce

Kurz je podle obtiacutežnosti rozdělen na tři kategorie Každaacute kategorie obsahujelekce stejneacute uacuterovně Prvniacute skupinu tvořiacute tři zaacutekladniacute řady piacutesmen Druhaacute obsahuječtvrtou horniacute řadu (diakritika a čiacuteslice) a velkaacute piacutesmena Posledniacute čaacutesti jsou lekcepsaneacuteho textuUživatel si může vybrat lekci z jakeacutehokoliv kategorie Pokud již uživatel ovlaacutedaacute

např tři zaacutekladniacute řady piacutesmen může tyto lekce přeskočit a začiacutet jinou lekciacuteTabulka lekciacute (obr 10) ukazuje uživatelův pokrok a dosaženou přesnost v

daneacute lekci Uživatel může pokračovat v započateacutem kurzu nebo jakyacutekoliv kurz sizopakovat (tlačiacutetko restart)

Obraacutezek 10 Tabulka lekciacute zobrazujiacuteciacute pokrok uživatele

16

42 Zahaacutejeniacute lekce

Před zahaacutejeniacutem lekce se vysune panel s informacemi a zvyacuterazněnyacutem prsto-kladem (obr 11) Panel se zobrazuje jen při zahaacutejeniacute lekce (u prvniacuteho textu)Uživatel panel zavře tlačiacutetkem Pokračujte zde nebo křiacutežkem vpravo nahoře Pozavřeniacute panelu může lekce začiacutet

Obraacutezek 11 Vysunutyacute panel s informacemi o zvoleneacute lekci

17

Obraacutezek 12 Rozhraniacute lekce

Rozhraniacute lekce (obr 12) se sklaacutedaacute z drobečkoveacute navigace informačniacuteho pa-nelu textu lekce a virtuaacutelniacute klaacutevesnice

Drobečkovaacute navigace

Udaacutevaacute vybranou čaacutest kurzu a jmeacuteno lekce Uživatel ji může použiacutet k naacutevratuna předchoziacute straacutenku

Informačniacute panel

Informačniacute panel se sklaacutedaacute z naacutesledujiacuteciacutech čaacutestiacute

bull tlačiacutetko začiacutet text znovu resetuje pokrok v aktuaacutelniacutem textu

bull chyby počiacutetadlo chyb

bull požadovanaacute přesnost přesnost psaniacute kterou je nutneacute dodržet pro pokračo-vaacuteniacute na dalšiacute text lekce

bull přesnost udaacutevaacute aktuaacutelniacute přesnost psaniacute

bull WMP ukazatel rychlosti psaniacute počet slov za minutu (words per minute)

bull aktuaacutelniacute text ukazuje aktuaacutelniacute text lekce a z kolika textů se lekce sklaacutedaacute

18

bull průběh lekce grafickeacute znaacutezorněniacute deacutelky lekce zaraacutežkami je označena deacutelkajednoho textu Zelenaacute linka je pokrok v daneacute lekci (naviacutec udaacutevanyacute v pro-centech)

Každyacute ukazatel informačniacuteho panelu maacute svoji naacutepovědu (obr 13) vyvolanounajetiacutem myši otazniacutek v zaacutevorkaacutech

Obraacutezek 13 Vyvolaacuteniacute naacutepovědy u prvku informačniacuteho panelu

Text lekce

Lekce je složena z textů Každyacute text kteryacute je zobrazen na čtyřech řaacutedciacutech maacutedeacutelku maximaacutelně 325 znaků (65 znaků na řaacutedek) Text maacute nastavenou požado-vanou přesnost Pokrok je uklaacutedaacuten pokud uživatel dokončiacute text s požadovanoupřesnostiacute jinak musiacute text opakovat Rozděleniacute lekce na kraacutetkeacute texty umožniacute uži-vateli použiacutevat aplikaci jen několik minut a přesto dosaacutehnout pokrokuZnak kteryacute maacute uživatel napsat je zvyacuterazněn zeleně Pokud dojde k chybě je

znak zvyacuterazněn červeně (obr 14) Neniacute dovoleno udělat viacutece jak dvě chyby zasebou Po prvniacutem chybně napsaneacutem znaku musiacute uživatel napsat znak spraacutevněSplněnaacute čaacutest textu je zvyacuterazněna šedou barvou

Obraacutezek 14 Chyby při psaniacute textu jsou zvyacuterazněny červeně

Virtuaacutelniacute klaacutevesnice

Zobrazuje naacutesledujiacuteciacute znak textu kteryacute se nachaacuteziacute před praacutevě napsanyacutem zna-kem Současně je zvyacuterazněn prst kteryacutem maacute byacutet znak napsaacuten (obr 12)

43 Registrace a přihlaacutešeniacute uživatele

Registračniacute formulaacuteř (obr 15) ověřiacute zadaneacute uacutedaje ještě před stisknutiacutem tla-čiacutetka odeslat (technologie AJAX3) Toto řešeniacute zvyšuje komfort uživatele kteryacuteokamžitě vidiacute zda jsou jeho uacutedaje spraacutevneacute Ověřuje se spraacutevnost zadanyacutech uacutedajů(např deacutelka jmeacutena hesla se shodujiacute apod) Kontroluje se email a uživatel-skeacute jmeacuteno - nesmiacute byacutet již zaregistrovaacuteno Přihlaacutešeniacute probiacutehaacute přes přihlašovaciacute

3AJAX (Asynchronous JavaScript and XML) je obecneacute označeniacute pro technologie vyacutevojeinteraktivniacutech webovyacutech aplikaciacute ktereacute měniacute obsah svyacutech straacutenek bez nutnosti jejich znovuna-čiacutetaacuteniacute

19

(obr 16) formulaacuteř uživatel se přihlašuje pod svyacutem uživatelskyacutem jmeacutenem a hes-lem

Obraacutezek 15 Registračniacute formulaacuteř s validaciacute vstupniacutech uacutedajů

Obraacutezek 16 Formulaacuteř pro přihlaacutešeniacute uživatele

44 Statistiky

Pokud je uživatel přihlaacutešen může si zobrazit statistiky pokroku Statistikyjsou uklaacutedaacuteny zvlaacutešť pro lekce a testy Grafy zobrazujiacute klaacutevesy s nejviacutece chybamirychlost psaniacute v zaacutevislosti na čase (obr 17) a počet splněnyacutech textů každyacute denDodatečneacute informace se zobrazujiacute při najetiacute myšiacute na hodnoty grafů (obr 18)Daacutele se zobrazuje datum registrace počet dokončenyacutech lekciacute a čas straacutevenyacute připsaniacute lekciacute

20

Obraacutezek 17 Statistika uživatele - graf vyacutevoje rychlosti psaniacute

Obraacutezek 18 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu

21

5 Rozhraniacute administraacutetora

Uacuteprava lekciacute kurzu probiacutehaacute přes rozhraniacute administraacutetora Administraacutetor jeuživatel kteryacute maacute v databaacutezi v tabulce Users nastaven přiacuteznak isAdminCiacutelem bylo vytvořit rozhraniacute ve stylu redakčniacuteho systeacutemu ktereacute by bylo sou-

čaacutestiacute aplikace Nechtěl jsem vytvaacuteřet dalšiacute samostatneacute grafickeacute rozhraniacute k data-baacutezi ktereacute již existuje (phpMyAdmin)

51 Uacuteprava lekciacute

Administrace lekciacute probiacutehaacute přes kontextoveacute menu tabulky lekciacute (obr 19)Menu je vyvolaacuteno pravyacutem tlačiacutetkem myši

Obraacutezek 19 Kontextoveacute menu v tabulce lekciacute

Menu obsahuje naacutesledujiacuteciacute položky

bull vytvořit lekci na konci tabulky lekciacute vytvořiacute novyacute řaacutedek (obr 20) do kte-reacuteho se vložiacute jmeacuteno a kategorie noveacute lekce

bull upravit lekci v řaacutedku na ktereacutem bylo vyvolaneacute kontextoveacute menu vytvořiacuteHTML elemnt input (obr 21) pro editaci naacutezvu a HTML element optionpro změnu kategorie lekce

bull smazat lekci smaže lekci nad kterou bylo vyvolaacuteno kontextoveacute menu (jevyžadovaacuteno potvrzeniacute)

bull upravit vaacutehu v každeacutem řaacutedku se vytvořiacute HTML element input (obr 22)V něm se nachaacuteziacute hodnota vaacutehy řaacutedku kteraacute udaacutevaacute jeho pořadiacute v tabulceŘaacutedky s vyššiacute vahou (klesajiacute) jsou zařazenyacute niacuteže

Obraacutezek 20 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce

22

Obraacutezek 21 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce

Obraacutezek 22 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute)

52 Uacuteprava informačniacuteho panelu

Informačniacute panel se přepne do moacutedu uacuteprav po stisknutiacute tlačiacutetka upravit(obr 24) ktereacute se na něm nachaacuteziacute Moacuted uacuteprav (obr 23) nabiacuteziacute možnost zob-razovat pouze textoveacute informace nebo naviacutec klaacutevesnici a prstoklad Upravit lzetextoveacute informace o lekci je možneacute vložit HTML koacuted Daacutele vybrat klaacutevesy a zvolitprstoklad

23

Obraacutezek 23 Panely umožňujiacute navigaci v textech lekce

Obraacutezek 24 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu

24

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

42 Zahaacutejeniacute lekce

Před zahaacutejeniacutem lekce se vysune panel s informacemi a zvyacuterazněnyacutem prsto-kladem (obr 11) Panel se zobrazuje jen při zahaacutejeniacute lekce (u prvniacuteho textu)Uživatel panel zavře tlačiacutetkem Pokračujte zde nebo křiacutežkem vpravo nahoře Pozavřeniacute panelu může lekce začiacutet

Obraacutezek 11 Vysunutyacute panel s informacemi o zvoleneacute lekci

17

Obraacutezek 12 Rozhraniacute lekce

Rozhraniacute lekce (obr 12) se sklaacutedaacute z drobečkoveacute navigace informačniacuteho pa-nelu textu lekce a virtuaacutelniacute klaacutevesnice

Drobečkovaacute navigace

Udaacutevaacute vybranou čaacutest kurzu a jmeacuteno lekce Uživatel ji může použiacutet k naacutevratuna předchoziacute straacutenku

Informačniacute panel

Informačniacute panel se sklaacutedaacute z naacutesledujiacuteciacutech čaacutestiacute

bull tlačiacutetko začiacutet text znovu resetuje pokrok v aktuaacutelniacutem textu

bull chyby počiacutetadlo chyb

bull požadovanaacute přesnost přesnost psaniacute kterou je nutneacute dodržet pro pokračo-vaacuteniacute na dalšiacute text lekce

bull přesnost udaacutevaacute aktuaacutelniacute přesnost psaniacute

bull WMP ukazatel rychlosti psaniacute počet slov za minutu (words per minute)

bull aktuaacutelniacute text ukazuje aktuaacutelniacute text lekce a z kolika textů se lekce sklaacutedaacute

18

bull průběh lekce grafickeacute znaacutezorněniacute deacutelky lekce zaraacutežkami je označena deacutelkajednoho textu Zelenaacute linka je pokrok v daneacute lekci (naviacutec udaacutevanyacute v pro-centech)

Každyacute ukazatel informačniacuteho panelu maacute svoji naacutepovědu (obr 13) vyvolanounajetiacutem myši otazniacutek v zaacutevorkaacutech

Obraacutezek 13 Vyvolaacuteniacute naacutepovědy u prvku informačniacuteho panelu

Text lekce

Lekce je složena z textů Každyacute text kteryacute je zobrazen na čtyřech řaacutedciacutech maacutedeacutelku maximaacutelně 325 znaků (65 znaků na řaacutedek) Text maacute nastavenou požado-vanou přesnost Pokrok je uklaacutedaacuten pokud uživatel dokončiacute text s požadovanoupřesnostiacute jinak musiacute text opakovat Rozděleniacute lekce na kraacutetkeacute texty umožniacute uži-vateli použiacutevat aplikaci jen několik minut a přesto dosaacutehnout pokrokuZnak kteryacute maacute uživatel napsat je zvyacuterazněn zeleně Pokud dojde k chybě je

znak zvyacuterazněn červeně (obr 14) Neniacute dovoleno udělat viacutece jak dvě chyby zasebou Po prvniacutem chybně napsaneacutem znaku musiacute uživatel napsat znak spraacutevněSplněnaacute čaacutest textu je zvyacuterazněna šedou barvou

Obraacutezek 14 Chyby při psaniacute textu jsou zvyacuterazněny červeně

Virtuaacutelniacute klaacutevesnice

Zobrazuje naacutesledujiacuteciacute znak textu kteryacute se nachaacuteziacute před praacutevě napsanyacutem zna-kem Současně je zvyacuterazněn prst kteryacutem maacute byacutet znak napsaacuten (obr 12)

43 Registrace a přihlaacutešeniacute uživatele

Registračniacute formulaacuteř (obr 15) ověřiacute zadaneacute uacutedaje ještě před stisknutiacutem tla-čiacutetka odeslat (technologie AJAX3) Toto řešeniacute zvyšuje komfort uživatele kteryacuteokamžitě vidiacute zda jsou jeho uacutedaje spraacutevneacute Ověřuje se spraacutevnost zadanyacutech uacutedajů(např deacutelka jmeacutena hesla se shodujiacute apod) Kontroluje se email a uživatel-skeacute jmeacuteno - nesmiacute byacutet již zaregistrovaacuteno Přihlaacutešeniacute probiacutehaacute přes přihlašovaciacute

3AJAX (Asynchronous JavaScript and XML) je obecneacute označeniacute pro technologie vyacutevojeinteraktivniacutech webovyacutech aplikaciacute ktereacute měniacute obsah svyacutech straacutenek bez nutnosti jejich znovuna-čiacutetaacuteniacute

19

(obr 16) formulaacuteř uživatel se přihlašuje pod svyacutem uživatelskyacutem jmeacutenem a hes-lem

Obraacutezek 15 Registračniacute formulaacuteř s validaciacute vstupniacutech uacutedajů

Obraacutezek 16 Formulaacuteř pro přihlaacutešeniacute uživatele

44 Statistiky

Pokud je uživatel přihlaacutešen může si zobrazit statistiky pokroku Statistikyjsou uklaacutedaacuteny zvlaacutešť pro lekce a testy Grafy zobrazujiacute klaacutevesy s nejviacutece chybamirychlost psaniacute v zaacutevislosti na čase (obr 17) a počet splněnyacutech textů každyacute denDodatečneacute informace se zobrazujiacute při najetiacute myšiacute na hodnoty grafů (obr 18)Daacutele se zobrazuje datum registrace počet dokončenyacutech lekciacute a čas straacutevenyacute připsaniacute lekciacute

20

Obraacutezek 17 Statistika uživatele - graf vyacutevoje rychlosti psaniacute

Obraacutezek 18 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu

21

5 Rozhraniacute administraacutetora

Uacuteprava lekciacute kurzu probiacutehaacute přes rozhraniacute administraacutetora Administraacutetor jeuživatel kteryacute maacute v databaacutezi v tabulce Users nastaven přiacuteznak isAdminCiacutelem bylo vytvořit rozhraniacute ve stylu redakčniacuteho systeacutemu ktereacute by bylo sou-

čaacutestiacute aplikace Nechtěl jsem vytvaacuteřet dalšiacute samostatneacute grafickeacute rozhraniacute k data-baacutezi ktereacute již existuje (phpMyAdmin)

51 Uacuteprava lekciacute

Administrace lekciacute probiacutehaacute přes kontextoveacute menu tabulky lekciacute (obr 19)Menu je vyvolaacuteno pravyacutem tlačiacutetkem myši

Obraacutezek 19 Kontextoveacute menu v tabulce lekciacute

Menu obsahuje naacutesledujiacuteciacute položky

bull vytvořit lekci na konci tabulky lekciacute vytvořiacute novyacute řaacutedek (obr 20) do kte-reacuteho se vložiacute jmeacuteno a kategorie noveacute lekce

bull upravit lekci v řaacutedku na ktereacutem bylo vyvolaneacute kontextoveacute menu vytvořiacuteHTML elemnt input (obr 21) pro editaci naacutezvu a HTML element optionpro změnu kategorie lekce

bull smazat lekci smaže lekci nad kterou bylo vyvolaacuteno kontextoveacute menu (jevyžadovaacuteno potvrzeniacute)

bull upravit vaacutehu v každeacutem řaacutedku se vytvořiacute HTML element input (obr 22)V něm se nachaacuteziacute hodnota vaacutehy řaacutedku kteraacute udaacutevaacute jeho pořadiacute v tabulceŘaacutedky s vyššiacute vahou (klesajiacute) jsou zařazenyacute niacuteže

Obraacutezek 20 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce

22

Obraacutezek 21 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce

Obraacutezek 22 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute)

52 Uacuteprava informačniacuteho panelu

Informačniacute panel se přepne do moacutedu uacuteprav po stisknutiacute tlačiacutetka upravit(obr 24) ktereacute se na něm nachaacuteziacute Moacuted uacuteprav (obr 23) nabiacuteziacute možnost zob-razovat pouze textoveacute informace nebo naviacutec klaacutevesnici a prstoklad Upravit lzetextoveacute informace o lekci je možneacute vložit HTML koacuted Daacutele vybrat klaacutevesy a zvolitprstoklad

23

Obraacutezek 23 Panely umožňujiacute navigaci v textech lekce

Obraacutezek 24 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu

24

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

Obraacutezek 12 Rozhraniacute lekce

Rozhraniacute lekce (obr 12) se sklaacutedaacute z drobečkoveacute navigace informačniacuteho pa-nelu textu lekce a virtuaacutelniacute klaacutevesnice

Drobečkovaacute navigace

Udaacutevaacute vybranou čaacutest kurzu a jmeacuteno lekce Uživatel ji může použiacutet k naacutevratuna předchoziacute straacutenku

Informačniacute panel

Informačniacute panel se sklaacutedaacute z naacutesledujiacuteciacutech čaacutestiacute

bull tlačiacutetko začiacutet text znovu resetuje pokrok v aktuaacutelniacutem textu

bull chyby počiacutetadlo chyb

bull požadovanaacute přesnost přesnost psaniacute kterou je nutneacute dodržet pro pokračo-vaacuteniacute na dalšiacute text lekce

bull přesnost udaacutevaacute aktuaacutelniacute přesnost psaniacute

bull WMP ukazatel rychlosti psaniacute počet slov za minutu (words per minute)

bull aktuaacutelniacute text ukazuje aktuaacutelniacute text lekce a z kolika textů se lekce sklaacutedaacute

18

bull průběh lekce grafickeacute znaacutezorněniacute deacutelky lekce zaraacutežkami je označena deacutelkajednoho textu Zelenaacute linka je pokrok v daneacute lekci (naviacutec udaacutevanyacute v pro-centech)

Každyacute ukazatel informačniacuteho panelu maacute svoji naacutepovědu (obr 13) vyvolanounajetiacutem myši otazniacutek v zaacutevorkaacutech

Obraacutezek 13 Vyvolaacuteniacute naacutepovědy u prvku informačniacuteho panelu

Text lekce

Lekce je složena z textů Každyacute text kteryacute je zobrazen na čtyřech řaacutedciacutech maacutedeacutelku maximaacutelně 325 znaků (65 znaků na řaacutedek) Text maacute nastavenou požado-vanou přesnost Pokrok je uklaacutedaacuten pokud uživatel dokončiacute text s požadovanoupřesnostiacute jinak musiacute text opakovat Rozděleniacute lekce na kraacutetkeacute texty umožniacute uži-vateli použiacutevat aplikaci jen několik minut a přesto dosaacutehnout pokrokuZnak kteryacute maacute uživatel napsat je zvyacuterazněn zeleně Pokud dojde k chybě je

znak zvyacuterazněn červeně (obr 14) Neniacute dovoleno udělat viacutece jak dvě chyby zasebou Po prvniacutem chybně napsaneacutem znaku musiacute uživatel napsat znak spraacutevněSplněnaacute čaacutest textu je zvyacuterazněna šedou barvou

Obraacutezek 14 Chyby při psaniacute textu jsou zvyacuterazněny červeně

Virtuaacutelniacute klaacutevesnice

Zobrazuje naacutesledujiacuteciacute znak textu kteryacute se nachaacuteziacute před praacutevě napsanyacutem zna-kem Současně je zvyacuterazněn prst kteryacutem maacute byacutet znak napsaacuten (obr 12)

43 Registrace a přihlaacutešeniacute uživatele

Registračniacute formulaacuteř (obr 15) ověřiacute zadaneacute uacutedaje ještě před stisknutiacutem tla-čiacutetka odeslat (technologie AJAX3) Toto řešeniacute zvyšuje komfort uživatele kteryacuteokamžitě vidiacute zda jsou jeho uacutedaje spraacutevneacute Ověřuje se spraacutevnost zadanyacutech uacutedajů(např deacutelka jmeacutena hesla se shodujiacute apod) Kontroluje se email a uživatel-skeacute jmeacuteno - nesmiacute byacutet již zaregistrovaacuteno Přihlaacutešeniacute probiacutehaacute přes přihlašovaciacute

3AJAX (Asynchronous JavaScript and XML) je obecneacute označeniacute pro technologie vyacutevojeinteraktivniacutech webovyacutech aplikaciacute ktereacute měniacute obsah svyacutech straacutenek bez nutnosti jejich znovuna-čiacutetaacuteniacute

19

(obr 16) formulaacuteř uživatel se přihlašuje pod svyacutem uživatelskyacutem jmeacutenem a hes-lem

Obraacutezek 15 Registračniacute formulaacuteř s validaciacute vstupniacutech uacutedajů

Obraacutezek 16 Formulaacuteř pro přihlaacutešeniacute uživatele

44 Statistiky

Pokud je uživatel přihlaacutešen může si zobrazit statistiky pokroku Statistikyjsou uklaacutedaacuteny zvlaacutešť pro lekce a testy Grafy zobrazujiacute klaacutevesy s nejviacutece chybamirychlost psaniacute v zaacutevislosti na čase (obr 17) a počet splněnyacutech textů každyacute denDodatečneacute informace se zobrazujiacute při najetiacute myšiacute na hodnoty grafů (obr 18)Daacutele se zobrazuje datum registrace počet dokončenyacutech lekciacute a čas straacutevenyacute připsaniacute lekciacute

20

Obraacutezek 17 Statistika uživatele - graf vyacutevoje rychlosti psaniacute

Obraacutezek 18 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu

21

5 Rozhraniacute administraacutetora

Uacuteprava lekciacute kurzu probiacutehaacute přes rozhraniacute administraacutetora Administraacutetor jeuživatel kteryacute maacute v databaacutezi v tabulce Users nastaven přiacuteznak isAdminCiacutelem bylo vytvořit rozhraniacute ve stylu redakčniacuteho systeacutemu ktereacute by bylo sou-

čaacutestiacute aplikace Nechtěl jsem vytvaacuteřet dalšiacute samostatneacute grafickeacute rozhraniacute k data-baacutezi ktereacute již existuje (phpMyAdmin)

51 Uacuteprava lekciacute

Administrace lekciacute probiacutehaacute přes kontextoveacute menu tabulky lekciacute (obr 19)Menu je vyvolaacuteno pravyacutem tlačiacutetkem myši

Obraacutezek 19 Kontextoveacute menu v tabulce lekciacute

Menu obsahuje naacutesledujiacuteciacute položky

bull vytvořit lekci na konci tabulky lekciacute vytvořiacute novyacute řaacutedek (obr 20) do kte-reacuteho se vložiacute jmeacuteno a kategorie noveacute lekce

bull upravit lekci v řaacutedku na ktereacutem bylo vyvolaneacute kontextoveacute menu vytvořiacuteHTML elemnt input (obr 21) pro editaci naacutezvu a HTML element optionpro změnu kategorie lekce

bull smazat lekci smaže lekci nad kterou bylo vyvolaacuteno kontextoveacute menu (jevyžadovaacuteno potvrzeniacute)

bull upravit vaacutehu v každeacutem řaacutedku se vytvořiacute HTML element input (obr 22)V něm se nachaacuteziacute hodnota vaacutehy řaacutedku kteraacute udaacutevaacute jeho pořadiacute v tabulceŘaacutedky s vyššiacute vahou (klesajiacute) jsou zařazenyacute niacuteže

Obraacutezek 20 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce

22

Obraacutezek 21 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce

Obraacutezek 22 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute)

52 Uacuteprava informačniacuteho panelu

Informačniacute panel se přepne do moacutedu uacuteprav po stisknutiacute tlačiacutetka upravit(obr 24) ktereacute se na něm nachaacuteziacute Moacuted uacuteprav (obr 23) nabiacuteziacute možnost zob-razovat pouze textoveacute informace nebo naviacutec klaacutevesnici a prstoklad Upravit lzetextoveacute informace o lekci je možneacute vložit HTML koacuted Daacutele vybrat klaacutevesy a zvolitprstoklad

23

Obraacutezek 23 Panely umožňujiacute navigaci v textech lekce

Obraacutezek 24 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu

24

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

bull průběh lekce grafickeacute znaacutezorněniacute deacutelky lekce zaraacutežkami je označena deacutelkajednoho textu Zelenaacute linka je pokrok v daneacute lekci (naviacutec udaacutevanyacute v pro-centech)

Každyacute ukazatel informačniacuteho panelu maacute svoji naacutepovědu (obr 13) vyvolanounajetiacutem myši otazniacutek v zaacutevorkaacutech

Obraacutezek 13 Vyvolaacuteniacute naacutepovědy u prvku informačniacuteho panelu

Text lekce

Lekce je složena z textů Každyacute text kteryacute je zobrazen na čtyřech řaacutedciacutech maacutedeacutelku maximaacutelně 325 znaků (65 znaků na řaacutedek) Text maacute nastavenou požado-vanou přesnost Pokrok je uklaacutedaacuten pokud uživatel dokončiacute text s požadovanoupřesnostiacute jinak musiacute text opakovat Rozděleniacute lekce na kraacutetkeacute texty umožniacute uži-vateli použiacutevat aplikaci jen několik minut a přesto dosaacutehnout pokrokuZnak kteryacute maacute uživatel napsat je zvyacuterazněn zeleně Pokud dojde k chybě je

znak zvyacuterazněn červeně (obr 14) Neniacute dovoleno udělat viacutece jak dvě chyby zasebou Po prvniacutem chybně napsaneacutem znaku musiacute uživatel napsat znak spraacutevněSplněnaacute čaacutest textu je zvyacuterazněna šedou barvou

Obraacutezek 14 Chyby při psaniacute textu jsou zvyacuterazněny červeně

Virtuaacutelniacute klaacutevesnice

Zobrazuje naacutesledujiacuteciacute znak textu kteryacute se nachaacuteziacute před praacutevě napsanyacutem zna-kem Současně je zvyacuterazněn prst kteryacutem maacute byacutet znak napsaacuten (obr 12)

43 Registrace a přihlaacutešeniacute uživatele

Registračniacute formulaacuteř (obr 15) ověřiacute zadaneacute uacutedaje ještě před stisknutiacutem tla-čiacutetka odeslat (technologie AJAX3) Toto řešeniacute zvyšuje komfort uživatele kteryacuteokamžitě vidiacute zda jsou jeho uacutedaje spraacutevneacute Ověřuje se spraacutevnost zadanyacutech uacutedajů(např deacutelka jmeacutena hesla se shodujiacute apod) Kontroluje se email a uživatel-skeacute jmeacuteno - nesmiacute byacutet již zaregistrovaacuteno Přihlaacutešeniacute probiacutehaacute přes přihlašovaciacute

3AJAX (Asynchronous JavaScript and XML) je obecneacute označeniacute pro technologie vyacutevojeinteraktivniacutech webovyacutech aplikaciacute ktereacute měniacute obsah svyacutech straacutenek bez nutnosti jejich znovuna-čiacutetaacuteniacute

19

(obr 16) formulaacuteř uživatel se přihlašuje pod svyacutem uživatelskyacutem jmeacutenem a hes-lem

Obraacutezek 15 Registračniacute formulaacuteř s validaciacute vstupniacutech uacutedajů

Obraacutezek 16 Formulaacuteř pro přihlaacutešeniacute uživatele

44 Statistiky

Pokud je uživatel přihlaacutešen může si zobrazit statistiky pokroku Statistikyjsou uklaacutedaacuteny zvlaacutešť pro lekce a testy Grafy zobrazujiacute klaacutevesy s nejviacutece chybamirychlost psaniacute v zaacutevislosti na čase (obr 17) a počet splněnyacutech textů každyacute denDodatečneacute informace se zobrazujiacute při najetiacute myšiacute na hodnoty grafů (obr 18)Daacutele se zobrazuje datum registrace počet dokončenyacutech lekciacute a čas straacutevenyacute připsaniacute lekciacute

20

Obraacutezek 17 Statistika uživatele - graf vyacutevoje rychlosti psaniacute

Obraacutezek 18 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu

21

5 Rozhraniacute administraacutetora

Uacuteprava lekciacute kurzu probiacutehaacute přes rozhraniacute administraacutetora Administraacutetor jeuživatel kteryacute maacute v databaacutezi v tabulce Users nastaven přiacuteznak isAdminCiacutelem bylo vytvořit rozhraniacute ve stylu redakčniacuteho systeacutemu ktereacute by bylo sou-

čaacutestiacute aplikace Nechtěl jsem vytvaacuteřet dalšiacute samostatneacute grafickeacute rozhraniacute k data-baacutezi ktereacute již existuje (phpMyAdmin)

51 Uacuteprava lekciacute

Administrace lekciacute probiacutehaacute přes kontextoveacute menu tabulky lekciacute (obr 19)Menu je vyvolaacuteno pravyacutem tlačiacutetkem myši

Obraacutezek 19 Kontextoveacute menu v tabulce lekciacute

Menu obsahuje naacutesledujiacuteciacute položky

bull vytvořit lekci na konci tabulky lekciacute vytvořiacute novyacute řaacutedek (obr 20) do kte-reacuteho se vložiacute jmeacuteno a kategorie noveacute lekce

bull upravit lekci v řaacutedku na ktereacutem bylo vyvolaneacute kontextoveacute menu vytvořiacuteHTML elemnt input (obr 21) pro editaci naacutezvu a HTML element optionpro změnu kategorie lekce

bull smazat lekci smaže lekci nad kterou bylo vyvolaacuteno kontextoveacute menu (jevyžadovaacuteno potvrzeniacute)

bull upravit vaacutehu v každeacutem řaacutedku se vytvořiacute HTML element input (obr 22)V něm se nachaacuteziacute hodnota vaacutehy řaacutedku kteraacute udaacutevaacute jeho pořadiacute v tabulceŘaacutedky s vyššiacute vahou (klesajiacute) jsou zařazenyacute niacuteže

Obraacutezek 20 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce

22

Obraacutezek 21 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce

Obraacutezek 22 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute)

52 Uacuteprava informačniacuteho panelu

Informačniacute panel se přepne do moacutedu uacuteprav po stisknutiacute tlačiacutetka upravit(obr 24) ktereacute se na něm nachaacuteziacute Moacuted uacuteprav (obr 23) nabiacuteziacute možnost zob-razovat pouze textoveacute informace nebo naviacutec klaacutevesnici a prstoklad Upravit lzetextoveacute informace o lekci je možneacute vložit HTML koacuted Daacutele vybrat klaacutevesy a zvolitprstoklad

23

Obraacutezek 23 Panely umožňujiacute navigaci v textech lekce

Obraacutezek 24 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu

24

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

(obr 16) formulaacuteř uživatel se přihlašuje pod svyacutem uživatelskyacutem jmeacutenem a hes-lem

Obraacutezek 15 Registračniacute formulaacuteř s validaciacute vstupniacutech uacutedajů

Obraacutezek 16 Formulaacuteř pro přihlaacutešeniacute uživatele

44 Statistiky

Pokud je uživatel přihlaacutešen může si zobrazit statistiky pokroku Statistikyjsou uklaacutedaacuteny zvlaacutešť pro lekce a testy Grafy zobrazujiacute klaacutevesy s nejviacutece chybamirychlost psaniacute v zaacutevislosti na čase (obr 17) a počet splněnyacutech textů každyacute denDodatečneacute informace se zobrazujiacute při najetiacute myšiacute na hodnoty grafů (obr 18)Daacutele se zobrazuje datum registrace počet dokončenyacutech lekciacute a čas straacutevenyacute připsaniacute lekciacute

20

Obraacutezek 17 Statistika uživatele - graf vyacutevoje rychlosti psaniacute

Obraacutezek 18 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu

21

5 Rozhraniacute administraacutetora

Uacuteprava lekciacute kurzu probiacutehaacute přes rozhraniacute administraacutetora Administraacutetor jeuživatel kteryacute maacute v databaacutezi v tabulce Users nastaven přiacuteznak isAdminCiacutelem bylo vytvořit rozhraniacute ve stylu redakčniacuteho systeacutemu ktereacute by bylo sou-

čaacutestiacute aplikace Nechtěl jsem vytvaacuteřet dalšiacute samostatneacute grafickeacute rozhraniacute k data-baacutezi ktereacute již existuje (phpMyAdmin)

51 Uacuteprava lekciacute

Administrace lekciacute probiacutehaacute přes kontextoveacute menu tabulky lekciacute (obr 19)Menu je vyvolaacuteno pravyacutem tlačiacutetkem myši

Obraacutezek 19 Kontextoveacute menu v tabulce lekciacute

Menu obsahuje naacutesledujiacuteciacute položky

bull vytvořit lekci na konci tabulky lekciacute vytvořiacute novyacute řaacutedek (obr 20) do kte-reacuteho se vložiacute jmeacuteno a kategorie noveacute lekce

bull upravit lekci v řaacutedku na ktereacutem bylo vyvolaneacute kontextoveacute menu vytvořiacuteHTML elemnt input (obr 21) pro editaci naacutezvu a HTML element optionpro změnu kategorie lekce

bull smazat lekci smaže lekci nad kterou bylo vyvolaacuteno kontextoveacute menu (jevyžadovaacuteno potvrzeniacute)

bull upravit vaacutehu v každeacutem řaacutedku se vytvořiacute HTML element input (obr 22)V něm se nachaacuteziacute hodnota vaacutehy řaacutedku kteraacute udaacutevaacute jeho pořadiacute v tabulceŘaacutedky s vyššiacute vahou (klesajiacute) jsou zařazenyacute niacuteže

Obraacutezek 20 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce

22

Obraacutezek 21 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce

Obraacutezek 22 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute)

52 Uacuteprava informačniacuteho panelu

Informačniacute panel se přepne do moacutedu uacuteprav po stisknutiacute tlačiacutetka upravit(obr 24) ktereacute se na něm nachaacuteziacute Moacuted uacuteprav (obr 23) nabiacuteziacute možnost zob-razovat pouze textoveacute informace nebo naviacutec klaacutevesnici a prstoklad Upravit lzetextoveacute informace o lekci je možneacute vložit HTML koacuted Daacutele vybrat klaacutevesy a zvolitprstoklad

23

Obraacutezek 23 Panely umožňujiacute navigaci v textech lekce

Obraacutezek 24 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu

24

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

Obraacutezek 17 Statistika uživatele - graf vyacutevoje rychlosti psaniacute

Obraacutezek 18 Dodatečneacute uacutedaje zobrazeneacute při najetiacute myšiacute na data grafu

21

5 Rozhraniacute administraacutetora

Uacuteprava lekciacute kurzu probiacutehaacute přes rozhraniacute administraacutetora Administraacutetor jeuživatel kteryacute maacute v databaacutezi v tabulce Users nastaven přiacuteznak isAdminCiacutelem bylo vytvořit rozhraniacute ve stylu redakčniacuteho systeacutemu ktereacute by bylo sou-

čaacutestiacute aplikace Nechtěl jsem vytvaacuteřet dalšiacute samostatneacute grafickeacute rozhraniacute k data-baacutezi ktereacute již existuje (phpMyAdmin)

51 Uacuteprava lekciacute

Administrace lekciacute probiacutehaacute přes kontextoveacute menu tabulky lekciacute (obr 19)Menu je vyvolaacuteno pravyacutem tlačiacutetkem myši

Obraacutezek 19 Kontextoveacute menu v tabulce lekciacute

Menu obsahuje naacutesledujiacuteciacute položky

bull vytvořit lekci na konci tabulky lekciacute vytvořiacute novyacute řaacutedek (obr 20) do kte-reacuteho se vložiacute jmeacuteno a kategorie noveacute lekce

bull upravit lekci v řaacutedku na ktereacutem bylo vyvolaneacute kontextoveacute menu vytvořiacuteHTML elemnt input (obr 21) pro editaci naacutezvu a HTML element optionpro změnu kategorie lekce

bull smazat lekci smaže lekci nad kterou bylo vyvolaacuteno kontextoveacute menu (jevyžadovaacuteno potvrzeniacute)

bull upravit vaacutehu v každeacutem řaacutedku se vytvořiacute HTML element input (obr 22)V něm se nachaacuteziacute hodnota vaacutehy řaacutedku kteraacute udaacutevaacute jeho pořadiacute v tabulceŘaacutedky s vyššiacute vahou (klesajiacute) jsou zařazenyacute niacuteže

Obraacutezek 20 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce

22

Obraacutezek 21 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce

Obraacutezek 22 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute)

52 Uacuteprava informačniacuteho panelu

Informačniacute panel se přepne do moacutedu uacuteprav po stisknutiacute tlačiacutetka upravit(obr 24) ktereacute se na něm nachaacuteziacute Moacuted uacuteprav (obr 23) nabiacuteziacute možnost zob-razovat pouze textoveacute informace nebo naviacutec klaacutevesnici a prstoklad Upravit lzetextoveacute informace o lekci je možneacute vložit HTML koacuted Daacutele vybrat klaacutevesy a zvolitprstoklad

23

Obraacutezek 23 Panely umožňujiacute navigaci v textech lekce

Obraacutezek 24 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu

24

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

5 Rozhraniacute administraacutetora

Uacuteprava lekciacute kurzu probiacutehaacute přes rozhraniacute administraacutetora Administraacutetor jeuživatel kteryacute maacute v databaacutezi v tabulce Users nastaven přiacuteznak isAdminCiacutelem bylo vytvořit rozhraniacute ve stylu redakčniacuteho systeacutemu ktereacute by bylo sou-

čaacutestiacute aplikace Nechtěl jsem vytvaacuteřet dalšiacute samostatneacute grafickeacute rozhraniacute k data-baacutezi ktereacute již existuje (phpMyAdmin)

51 Uacuteprava lekciacute

Administrace lekciacute probiacutehaacute přes kontextoveacute menu tabulky lekciacute (obr 19)Menu je vyvolaacuteno pravyacutem tlačiacutetkem myši

Obraacutezek 19 Kontextoveacute menu v tabulce lekciacute

Menu obsahuje naacutesledujiacuteciacute položky

bull vytvořit lekci na konci tabulky lekciacute vytvořiacute novyacute řaacutedek (obr 20) do kte-reacuteho se vložiacute jmeacuteno a kategorie noveacute lekce

bull upravit lekci v řaacutedku na ktereacutem bylo vyvolaneacute kontextoveacute menu vytvořiacuteHTML elemnt input (obr 21) pro editaci naacutezvu a HTML element optionpro změnu kategorie lekce

bull smazat lekci smaže lekci nad kterou bylo vyvolaacuteno kontextoveacute menu (jevyžadovaacuteno potvrzeniacute)

bull upravit vaacutehu v každeacutem řaacutedku se vytvořiacute HTML element input (obr 22)V něm se nachaacuteziacute hodnota vaacutehy řaacutedku kteraacute udaacutevaacute jeho pořadiacute v tabulceŘaacutedky s vyššiacute vahou (klesajiacute) jsou zařazenyacute niacuteže

Obraacutezek 20 Novyacute řaacutedek v tabulce lekciacute pro založeniacute noveacute lekce

22

Obraacutezek 21 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce

Obraacutezek 22 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute)

52 Uacuteprava informačniacuteho panelu

Informačniacute panel se přepne do moacutedu uacuteprav po stisknutiacute tlačiacutetka upravit(obr 24) ktereacute se na něm nachaacuteziacute Moacuted uacuteprav (obr 23) nabiacuteziacute možnost zob-razovat pouze textoveacute informace nebo naviacutec klaacutevesnici a prstoklad Upravit lzetextoveacute informace o lekci je možneacute vložit HTML koacuted Daacutele vybrat klaacutevesy a zvolitprstoklad

23

Obraacutezek 23 Panely umožňujiacute navigaci v textech lekce

Obraacutezek 24 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu

24

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

Obraacutezek 21 Rozhraniacute pro uacutepravu naacutezvu a kategorie lekce

Obraacutezek 22 Uacuteprava vaacutehy v tabulce (pořadiacute lekciacute)

52 Uacuteprava informačniacuteho panelu

Informačniacute panel se přepne do moacutedu uacuteprav po stisknutiacute tlačiacutetka upravit(obr 24) ktereacute se na něm nachaacuteziacute Moacuted uacuteprav (obr 23) nabiacuteziacute možnost zob-razovat pouze textoveacute informace nebo naviacutec klaacutevesnici a prstoklad Upravit lzetextoveacute informace o lekci je možneacute vložit HTML koacuted Daacutele vybrat klaacutevesy a zvolitprstoklad

23

Obraacutezek 23 Panely umožňujiacute navigaci v textech lekce

Obraacutezek 24 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu

24

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

Obraacutezek 23 Panely umožňujiacute navigaci v textech lekce

Obraacutezek 24 Tlačiacutetko pro zahaacutejeniacute uacutepravy informačniacuteho panelu

24

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

53 Uacuteprava textu

Administraacutetor maacute k dispozici panely (obr 25) představujiacuteciacute texty lekce klik-nutiacutem na libovolnyacute panel se rychle přesune na tento text v lekci Tiacutemto přesunemnemusiacute administraacutetor pro postup v lekci přepsat text v požadovaneacute přesnosti

Obraacutezek 25 Panely umožňujiacute navigaci v textech lekce

Stiskem praveacuteho tlačiacutetka v textu lekce dojde k vyvolaacuteniacute kontextoveacuteho menu(obr 26) Položky dalšiacute a předchoziacute text posunou aktuaacutelniacute text lekce vpřed nebozpět Položka upravit text vyvolaacute editačniacute prostřediacute (obr 27) Prostřediacute umožňujetyto uacutepravy

bull přidat novyacute text kliknutiacutem na tlačiacutetko plus

bull odebrat text kliknutiacutem na tlačiacutetko smazat

bull upravit text použitiacutem formulaacuteře k uacutepravě textu

bull upravit požadovanou přesnost textu použitiacutem formulaacuteře pro uacutepravu přes-nosti

bull měnit pořadiacute textů panely lze přesouvat metodou drag and drop

bull uložit uacutepravy kliknutiacutem na tlačiacutetko uložit

bull zrušit uacutepravy kliknutiacutem na tlačiacutetko storno

Obraacutezek 26 Kontextoveacute menu přiacuteslušneacute textu lekce

25

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

Obraacutezek 27 Prostřediacute umožňujiacuteciacute uacutepravu textů lekce

26

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

6 Programaacutetorskaacute dokumentace

V teacuteto čaacutesti bude popsaacutena struktura aplikace Rozděleniacute na serverovou a kli-entskou čaacutest aplikace

61 Použiteacute technologie

V aplikaci byly použity naacutesledujiacuteciacute technologie

PHP

PHP je objektově orientovanyacute skriptovaciacute programovaciacute jazyk Je určenyacute pře-devšiacutem pro programovaacuteniacute dynamickyacutech internetovyacutech straacutenek a webovyacutech apli-kaciacute Při použitiacute PHP pro dynamickeacute straacutenky jsou skripty provaacuteděny na straněserveru ndash k uživateli je přenaacutešen až vyacutesledek jejich činnosti PHP je nejrozšiacuteře-nějšiacutem skriptovaciacutem jazykem pro web [7]

MySQL

MySQL je multiplatformniacute široce rozšiacuteřenyacute databaacutezovyacute systeacutem Komunikaceprobiacutehaacute dialektem jazyka SQL Systeacutem umožňuje přiacutestup k databaacuteziacutem viacutece uži-vatelům současně

HTML

HTML je značkovaciacute jazyk použiacutevanyacute pro tvorbu webovyacutech straacutenek

CSS

CSS je jazyk pro popis způsobu zobrazeniacute straacutenek HTML XHTML neboXML

JavaScript

JavaScript je skriptovaciacute objektově orientovanyacute funkcionaacutelniacute a prototypovězaloženyacute programovaciacute jazyk Jeho interpretry jsou součaacutestiacute webovyacutech prohliacutežečůKoacuted je vklaacutedanyacute přiacutemo do HTML koacutedu straacutenky Na rozdiacutel od PHP je vykonaacutevanyacutena straně klienta (interpretrem weboveacuteho prohliacutežeče)

jQuery

jQuery je JavaScriptovaacute knihovna použiacutevanaacute pro zjednodušeniacute praacutece s Ja-vaScriptem Obsahuje propracovanyacute systeacutem selektorů HTML elementů a řaduvlastniacutech metod

27

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

Highcharts

Highcarts je jQuery knihovna vytvaacuteřejiacuteciacute grafy Na vyacuteběr je velkeacute množstviacutegrafů ktereacute jde snadno přizpůsobit

1 $(function () 2 id elementu kam bude vygenerovaacuten graf3 $(rsquocontainer rsquo)highcharts (4 chart 5 type rsquobarrsquo typ grafu6 7 xAxis pole s popisky osy x8 categories [rsquoApples rsquo rsquoBananas rsquo rsquoOranges rsquo]9 10 yAxis 11 title naacutezev osy y12 text rsquoFruit eaten rsquo13 14 15 series [ hodnoty grafu16 name rsquoJanersquo17 data [1 0 4]18 19 )20 )

Ukaacutezka koacutedu 1 Vytvořeniacute grafu pomociacute knihovny Highcharts

jQuery Context Menu

jQuery Context Menu je knihovna kteraacute vytvaacuteřiacute kontextovaacute menu pro HTMLelementy

jQuery Placeholder

Atribut placeholder sloužiacute jako popisek HTML elementu input (obr 28)popisek zmiziacute pokud se do elementu klikne JQuery Placeholder je knihovna zpřiacute-stupňujiacuteciacute atribut placeholder pro všechny prohliacutežeče

Obraacutezek 28 atribut placeholder elementu input

SimpleModal

SimpleModal je jQuery knihovna zobrazujiacuteciacute animovaneacute modaacutelniacute dialogy

28

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

sha512js

Implementace hašovaciacuteho algoritmu SHA-512 Teacuteto hašovaciacute funkce jsem vy-užil při odesiacutelaacuteniacute registračniacuteho a přihlašovaciacuteho formulaacuteře Heslo se tak neodesiacutelaacutena server nezašifrovaneacute

62 Adresaacuteřovaacute struktura

Adresaacuteřovaacute struktura projektu se sklaacutedaacute z naacutesledujiacuteciacutech položek

bull php hlavniacute složka pro serverovou čaacutest programu - PHP koacuted neniacute přiacutestupnaacuteuživatelům

- Autoloaderphp načiacutetaacute třiacutedy (soubory) nezaacutevisle na miacutestě odkudbyla metoda třiacutedy zavolaacutena

- configphp konfiguračniacute soubor kteryacute obsahuje přihlašovaciacute uacutedaje dodatabaacuteze a symbolickeacute konstanty

bull phpclasses složka obsahujiacuteciacute soubory PHP třiacuted Metody z těchto souborů(třiacuted) lze volat bez nutnosti použiacutevaacuteniacute jazykovyacutech konstruktů include neborequire

- Authorisationphp třiacuteda ověřujiacuteciacute přihlaacutešeniacute uživatele

- Databasephp třiacuteda obsluhujiacuteciacute databaacutezi přiacuteprava parametrizovanyacutechdotazů

- Categoryphp třiacuteda představujiacuteciacute kategorii lekciacute Kategorie jsoulehkaacute středniacute pokročilaacute Každaacute kategorie obsahuje objekty lekciacute

- Lessonphp třiacuteda představujiacuteciacute objekt lekce Každaacute lekce obsahuje ně-kolik objektů třiacutedy Text

- Textphp třiacuteda představujiacuteciacute objekt textu Text je nejmenšiacute jednotkav raacutemci hierarchie kurzu Textovyacute řetězec z členskeacute proměnneacute $text jezobrazovaacuten uživateli při provaacuteděniacute lekce

- Validationphp metody třiacutedy sloužiacute k ověřovaacuteniacute zadanyacutech dat regis-tračniacuteho formulaacuteře

bull www složka klientskeacute čaacutesti programu volně přiacutestupnaacute uživatelům

bull wwwcss soubory kaskaacutedovyacutech stylů

bull wwwcssimages složka s obraacutezky

bull wwwjs složka se soubory JavaScriptu

29

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

63 Serverovaacute čaacutest programu

spl autoload register

Logika programu je ukotvena v PHP třiacutedaacutech Každyacute soubor obsahuje jednutřiacutedu Probleacutem nastaacutevaacute kdykoliv je potřeba volat koacuted z těchto třiacuted (souborů)Použiacutevaacuteniacute konstrukciacute require nebo include pro každou třiacutedu neniacute elegantniacuteLepšiacute řešeniacute nabiacuteziacute PHP funkce spl autoload register (koacuted 2 řaacutedek 12) kteraacute

přijiacutemaacute jeden parametr - funkci Při volaacuteniacute třiacutedy přes classNamerarrmethodNamedojde k zavolaacuteniacute funkce (parametru) spl autoload register Tato funkce vraacutetiacute sou-bor třiacutedy podle jejiacuteho jmeacutena (className)Miacutesto připojovaacuteniacute několika souborů s třiacutedami stačiacute pouze připojit soubor ob-

sahujiacuteciacute funkci spl autoload register

1 class AutoLoader 23 funkce předaacutevanaacute spl autoload register vraciacute nalezenou třiacutedu4 public static function classLoader($className) 5 $file = PHP_FOLDER rsquoclassesrsquo $className rsquophprsquo6 if ( file_exists($file)) 7 return false8 9 require $file10 11 12 spl_autoload_register(rsquoAutoloader classLoader rsquo)

Ukaacutezka koacutedu 2 Použitiacute funkce spl autoload register

Třiacutedy lekciacute

Třiacutedy (obr 29) odpoviacutedajiacute logickeacutemu členěniacute kurzu Třiacuteda Category reprezen-tuje obtiacutežnost (lehkaacute středniacute pokročilaacute) Třiacuteda Lesson představuje lekci a třiacutedaText tvořiacute objekty textů Třiacuteda Category agreguje objekty třiacutedy Lesson TřiacutedaLesson agreguje objekty třiacutedy TextJakmile jsou všechny objekty zkonstruovaacuteny je využito super globaacutelniacute4 pro-

měnneacute $ SESSION Session řešiacute bezstavovost protokolu HTTP5 udržujiacute se s niacuteinformace o stavu aplikace a o praacuteci uživatele Objekt třiacutedy Category je nahraacuten dopole $ SESSION[rsquodifficultyrsquo] Při přechodu mezi straacutenkami zůstaacutevaacute objekt staacutele vSession Pokud objekt již v Session existuje nemusiacute se vytvaacuteřet znovu

4Superglobals - předdefinovaneacute globaacutelniacute proměnneacute v PHP ktereacute jsou k dispozici v celeacutemlexikaacutelniacutem rozsahu5Hypertext Transfer Protocol je internetovyacute protokol určenyacute pro vyacuteměnu hypertextovyacutech

dokumentů ve formaacutetu HTML

30

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

Obraacutezek 29 Třiacutedy tvořiacuteciacute lekce programu

Rozhraniacute serveru

Požadavky klienta jsou pro přehlednost směřovaacuteny do souboru ajaxInter-facephp Klient použiacutevaacute k volaacuteniacute tohoto souboru metody jQueryajax() Jakmileserver převezme řiacutezeniacute je volaacuteniacute zpracovaacuteno a podle nastavenyacutech argumentů pře-daacutevaacuteno přiacuteslušnyacutem třiacutedaacutem (koacuted 3)

1 vraacuteceniacute počtu chybnyacutech klaacuteves pro zobrazeniacute na konci lekce2 if (isset($_POST[rsquoerrorKeys rsquo])) 3 $lesson = Lesson getCurrentLesson ()4 echo $lesson -gtgetErrorKeyDisplay ()5 67 vyacutepis statistik lekciacute8 if (isset($_POST[rsquol-stats rsquo])) 9 Stats countCoursesProgress ()10

Ukaacutezka koacutedu 3 vyřiacutezeniacute požadavků klienta

Praacutece s databaacuteziacute

Pro zjednodušeniacute praacutece s databaacuteziacute jsem vytvořil třiacutedu Databasephp Třiacutedavyužiacutevaacute naacutevrhoveacuteho vzoru Singleton (koacuted 4) Při prvniacutem MySQL dotazu je vprogramu vytvořen objekt databaacuteze Při dalšiacutem dotazu se použije staacutevajiacuteciacute objektMetoda queryDB (koacuted 5) třiacutedy Database přijiacutemaacute parametry MySQL dotaz

pole nebo jeden parametr dotazu a možnost jak maacute byacutet dotaz zpracovaacuten K do-tazovaacuteniacute se využiacutevaacute objekt PDO6 s parametrizovanyacutemi dotazy Parametry nejsoupřiacutemo vepsaacuteny do řetězce dotazu vklaacutedaacute je až objekt PDO

6PHP Data Objects definuje rozhraniacute pro praacuteci s databaacuteziacute

31

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

1 class Database 23 protected static $db45 private function __construct () 6 self$db = new PDO(rsquomysqlhost=rsquo DB_HOST )7 89 private static function getConnection () 10 if (self$db) 11 novyacute objekt byl vytvořen pokud neexistoval12 new Database ()13 14 return self$db15

Ukaacutezka koacutedu 4 Naacutevrhovyacute vzor Singleton třiacutedy Databasephp

1 public static function queryDB($query $parameters $option) 2 $pdo = self getConnection ()3 $stmt = $pdo -gtprepare($query)4 $index = 05 připojeniacute pole argumentů nebo pouze jednoho arg do dotazu6 if (is_array($parameters)) 7 foreach ($parameters as $param) 8 $stmt -gtbindValue($index $param )9 $index ++10 11 else 12 $stmt -gtbindParam($index $parameters )13 14 $stmt -gtexecute ()1516 switch ($option) možnost např INSERT INTO nebo SELECT 17 case DB_FETCH_ALL18 return $stmt -gtfetchAll(PDO FETCH_ASSOC)19 break20 21 22 23 přiacuteklad dotazu kteryacute staacutehne data všech lekciacute daneacute obtiacutežnosti24 $q = SELECT FROM lessons WHERE difficulty =025 $lessons = Database queryDB(q $difficulty DB_FETCH_ALL)

Ukaacutezka koacutedu 5 Přiacuteklad dotazu a metoda provaacutedějiacuteciacute dotazovaacuteniacute

64 Weboveacute straacutenky

Weboveacute straacutenky vytvaacuteřejiacute prostřediacute kurzu a zobrazujiacute data ze serveroveacute čaacutestiObsah straacutenek je umiacutestěn v adresaacuteři www Nachaacuteziacute se zde HTML soubory CSS

32

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

styly a soubory s JavaScriptovyacutem koacutedemSoubory obsahujiacuteciacute HTML majiacute přiacuteponu php PHP koacuted kteryacute je v těchto

souborech umiacutestěnyacute mezi značkami ltphp gt může byacutet zpracovaacuten serve-rem Takto je napřiacuteklad do souborů vložena např patička straacutenky ltphp requirersquofooterhtmlrsquo gt Soubory zobrazujiacuteciacute HTML obsah jsou naacutesledujiacuteciacute

- indexphp uacutevodniacute informace o straacutenkaacutech

- coursesphp tabulka s lekcemi volba obtiacutežnosti lekce a vyacuteběr lekce

- lessonphp zobrazuje průběh lekce

- testBannerphp popis a vyacuteběr testu

- testphp zobrazuje průběh testu

- loginphp obsahuje formulaacuteř pro přihlaacutešeniacute uživatele

- registrationphp obsahuje formulaacuteř pro registraci uživatele

Javascriptoveacute soubory jsou připojeny k HTML souborům pomociacute HTMLznačky ltscript scriptgt nebo jsou dynamicky nahraacutevaacuteny pomociacute jQuery me-tody getScript()

- makeLessonjs vytvořiacute prostřediacute lekce obsahuje algoritmy řiacutediacuteciacute průběhlekce

- keyboardjs ovlaacutedaacute virtuaacutelniacute klaacutevesnici a obraacutezky rukou zobrazujiacuteciacute prsto-klad

- timeGraphjs z databaacuteze připravenaacute data vykresliacute do grafů

- validateRegistrationjs ověřuje registračniacute formulaacuteř

- countWpmjs počiacutetaacute uplynulyacute čas v lekci a slova za minutu

- adminInterfacejs vytvořiacute rozhraniacute administraacutetora

- simpleModaljs obsahuje koacuted informačniacuteho panelu Z databaacuteze připravenaacutedata vykresliacute do informačniacuteho panelu na začaacutetku nebo na konci lekce

33

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

65 Struktura databaacuteze

MySQL databaacuteze (obr 30) obsahuje data lekciacute a data uživatelů Nachaacuteziacute sezde několik ciziacutech kliacutečů Prvniacute se odkazuje na jmeacuteno uživatele (sloupec userNamev tabulce users) druhyacute se odkazuje na jmeacuteno lekce (sloupec lessonName v tabulcelessons) Pokud dojde k vymazaacuteniacute uživatele nebo lekce nezůstanou v databaacutezižaacutedneacute bdquomrtveacute dušeyuml

Obraacutezek 30 Struktura databaacuteze

Databaacuteze obsahuje několik tabulek

bull lessons obsahuje lekce a uacutevodniacute texty ke každeacute lekci Obsahuje sloupce

- difficulty enum(rsquoeasyrsquo rsquomediumrsquo rsquohardrsquo) - obtiacutežnost lekce

- lessonOrder int - pořadiacute v html tabulce lekciacute

- lessonName varchar - jmeacuteno lekce

- introText text - text zobrazenyacute na začaacutetku lekce

34

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

- isTest tinyint - rozděleniacute lekciacute a testu

- errorKeyDisplay enum(rsquo1rsquo rsquo2rsquo rsquo4rsquo) - počet klaacuteves s nejviacutece chybamiktereacute jsou zobrazovaacuteny v panelu na konci lekce

bull completed lessons zde se uklaacutedajiacute texty lekciacute splněneacute každyacutem uživatelem

- userName varchar - jmeacuteno uživatele kteryacute splnil lekci

- lessonName varchar - jmeacuteno splněneacute lekce

- textId int - identifikaacutetor textu

- accuracy int - přesnost dosaženaacute při psaniacute textu

- wordsPerMinute int - slova za minutu dosaženaacute při psaniacute textu

- time int - čas ve ktereacutem byl text splněn (v sekundaacutech)

- date date - datum splněniacute textu

- dayTime time - čas splněniacute textu

- isTest tynyint - je text čaacutestiacute lekce nebo testu (rozlišeniacute pro vyacutepis sta-tistik)

bull lessontexts obsahuje texty lekciacute

- id smallint - identifikaacutetor textu

- textOrder int - řazeniacute textu v lekci

- lessonName varchar - jmeacuteno lekce

- text text - text lekce

- accuracy int - požadovanaacute přesnost textu

bull login attempts obsahuje zaacuteznamy o četnosti přihlaacutešeniacute jednotlivyacutech uži-vatelů Sloužiacute k zabraacuteněniacute brute force uacutetoku

- user id int - identifikaacutetor uživatele

- time varchar - čas přihlaacutešeniacute

bull stats lesson obsahuje serializovanyacute objekt statistik lekciacute každeacuteho uživatele

- userName varchar - uživatelskeacute jmeacuteno

- errorTable text - serializovanyacute objekt s chybnyacutemi klaacutevesami

- errorCount int - počet chyb

bull stats test obsahuje serializovanyacute objekt statistik testů každeacuteho uživateleSloupce stejneacute jako u tabulky stats lesson

35

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

bull user obsahuje přihlašovaciacute uacutedaje každeacuteho uživatele

- id int - identifikaacutetor uživatele

- username varchar - uživatelskeacute jmeacuteno

- password char - heslo

- salt char - naacutehodnaacute data pro hašovaciacute funkci

- email varchar - email uživatele

- regDate date - datum registrace

- isAdmin tinyint - rozlišeniacute mezi uživatelem a administraacutetorem

36

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

7 Tvorba lekciacute

Lekce obsahujiacute dva typy textů

71 Lekce obsahujiacuteciacute celaacute slova

Obsah lekciacute byl vygenerovaacuten ze souboru všech českyacutech slov Soubor obsahuje165 tisiacutec slov kde je každeacute slovo na jednom řaacutedku K vybraacuteniacute slov obsahujiacuteciacutepouze piacutesmena určiteacute lekce bylo použito několik linuxovyacutech programů (koacuted 6)Prvniacute program načte a zpracuje soubor a vyacutesledek je předaacuten ze standardniacuteho

vyacutestupu na standardniacute vstup dalšiacuteho programu pomociacute roury Vyacutestup posledniacutehoprogramu je zapsaacuten do souboru (metaznak bdquogtyuml)

bull grep načte textovaacute data ze souboru a na zaacutekladě regulaacuterniacuteho vyacuterazu vybereřaacutedky ktereacute daneacutemu regulaacuterniacutemu vyacuterazu vyhovujiacute

bull sed prochaacuteziacute textovyacutem souborem a na každyacute řaacutedek aplikuje seznam přiacutekazů

bull shuf do souboru zapiacuteše naacutehodnou permutaci vstupniacutech řaacutedků

bull pearl využiacutevaacute přiacutekazu programovaciacuteho jazyka Perl k odstraněniacute znaku za-lomeniacute řaacutedku (vyacuteslednyacute text je na jednom řaacutedku)

bull fold zalomiacute řaacutedky na požadovanou deacutelku

1 grep rsquo^[ asdfjklru ]+$rsquo wordlist |2 sed rsquo3drsquo |3 shuf | tr -d rsquorrsquo |4 perl -ne rsquochomp print $_ rsquo |5 fold -sw 160 gt result

Ukaacutezka koacutedu 6 Tvorba lekce ze slov obsahujiacuteciacute znaky f j k d (každyacute programje pro přehlednost na jednom řaacutedku)

72 Ostatniacute lekce

Lekce ktereacute pomaacutehajiacute uživateli si zapamatovat rozloženiacute klaacuteves jsou složenyz kombinaciacute třiacute (obr 31) a čtyř (obr 32) piacutesmen Kombinace jsou uspořaacutedaacutenytak aby se uživatel naučil všechny možneacute hmaty pro psaniacute piacutesmen z kteryacutech selekce sklaacutedaacute Tyto dovednosti uživatel využije v lekciacutech obsahujiacuteciacute celaacute slova

Obraacutezek 31 Řaacutedek lekce obsahujiacuteciacute kombinace třiacute piacutesmen

37

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

Obraacutezek 32 Řaacutedek lekce obsahujiacuteciacute kombinace čtyř piacutesmen

38

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

8 Plaacuteny do budoucna

bull Vytvořeniacute lekciacute a virtuaacutelniacute klaacutevesnice pro numerickyacute blok klaacuteves

bull Propracovanějšiacute statistiky uživatele Měřeniacute plynulosti zadaacutevaneacuteho textuMapovaacuteniacute probleacutemovyacutech kombinaciacute klaacuteves a generovaacuteniacute lekciacute podle zjiště-nyacutech vyacutesledků

bull Vytvořeniacute rozloženiacute klaacutevesnice českeacute qwerty dvorak

bull Většiacute propojeniacute se sociaacutelniacutemi siacutetěmi možnost sdiacuteleniacute vyacutesledku dokončeneacutelekce (bdquoPraacutevě jsem dokončil lekci xy v čase 123 s průměrnyacutem WPM 34yuml)

bull Zlepšeniacute uacuterovně lekciacute jinyacute styl kurzu vytvořeniacute rozhraniacute pro učitele a stu-deny využitiacute aplikace ve školstviacute

bull Placeneacute kurzy s odbornyacutemi termiacuteny Kurzy pro různeacute profese např leacutekařepraacutevniacuteky

bull Lokalizace straacutenek a lekciacute do jinyacutech jazyků (němčina polština)

39

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

9 Zaacutevěr

Ciacutelem praacutece bylo vytvořit webovou aplikaci pro vyacuteuku psaniacute všemi desetiAplikace měla miacutet možnost registrace svyacutech uživatelů zaznamenaacutevaacuteniacute pokrokua zobrazovaacuteniacute statistik Uživatel měl miacutet možnost vybrat si a absolvovat lekcipsaniacute nebo vykonat test psaniacute Součaacutestiacute mělo byacutet i rozhraniacute pro administraciAplikace je již měsiacutec a půl umiacutestěna na adrese httpnedatlujcz V

databaacutezi je registrovaacuteno 260 uživatelů denně navštiacuteviacute straacutenku padesaacutet až stouživatelů z toho patnaacutect registrovanyacutechZlepšeniacute vidiacutem v optimalizaci pro vyhledaacutevače Pro dotaz vyhledaacutevače Google

psaniacute všemi online je straacutenka umiacutestěna na 11 pozici a pro dotaz psaniacute všemideseti je umiacutestěna až na 32 pozici Dotaz psaniacute všemi deseti maacute 6600 vyhledaacuteniacuteměsiacutečně Počty uživatelů by byly vyššiacute

40

Reference

[1] Nixon Robin Learning PHP MySQL JavaScript and CSS Amazon 2006

[2] Zandstra Matt PHP Objects Patterns and Practice Amazon 2007

[3] Internet Users in the World Webovaacute straacutenka 2001-2013

[4] Jakub Dvořaacutek Naučte se psaacutet všemi deseti na klaacutevesnici Přiacutespěvek na webu2011

[5] Martin Singr Jaroslav Zaviačič si s klaacutevesniciacute vždy rozuměl Přiacutespěvek nawebu 2008

[6] Psaniacute všemi deseti prsty Webovaacute straacutenka 2009

[7] Usage of server-side programming languages for websites Webovaacute straacutenka2013

[8] ATF - Psaniacute všemi deseti Webovaacute straacutenka 1992

[9] Psaniacute všemi deseti naučte se strojopis rychle a snadno Webovaacute straacutenka2010

[10] Piš deseticz online kurz psaniacute na pc Webovaacute straacutenka 2012

41

A Instalace a použiacutevaacuteniacute

Na straacutenkaacutech httpnedatlujcz byl založen testovaciacute uacutečet s adminis-traacutetorskyacutemi praacutevy Uživatelskeacute jmeacuteno bptest heslo infupol2013

Pro použitiacute na jineacutem serveru vytvořte v databaacutezi MySql uživatele sec user sheslem ZAKPGk6c5ytS5v8FQ5g8efHR nebo nastavte jineacuteho uživatele pro da-tabaacutezi MySql v souboru phpconfigphp Naimportujte do databaacuteze soubordatlujsql Přesuňte složky php a www do složky http serveru

B Obsah přiloženeacuteho CD

Zde je uveden stručnyacute popis obsahu přiloženeacuteho CD

nedatlujAdresaacuteř obsahuje i všechny potřebneacute soubory pro provoz na weboveacutem ser-veru

nedatlujwwwHTML javascriptoveacute a CSS soubory

nedatlujphpPHP třiacutedy a soubory

datlujsqlObsah databaacuteze MySql

42