271emi deseti prsty...nyní ve verzi 0.3 beta. u¾ivatel mů vyzkou„et prvních deset lekcí...
TRANSCRIPT
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
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
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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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 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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
(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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
- 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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-
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
- Uacutevod
- Existujiacuteciacute aplikace
-
- Program ZAV
- Program All Ten Fingers
- Program Deseti prsty
- Typingercom - online kurz psaniacute naslepo
- Vsup1emi Desetieu - Nauegrave se psaacutet vsup1emi deseti online
- Pisup1 deseticz - online kurz psaniacute na pc
-
- Funkce aplikace
-
- Zvoleniacute platformy
-
- Ufrac34ivatelskaacute dokumentace
-
- Vyacutebigraver lekce
- Zahaacutejeniacute lekce
- Registrace a poslashihlaacutesup1eniacute ufrac34ivatele
- Statistiky
-
- Rozhraniacute administraacutetora
-
- Uacuteprava lekciacute
- Uacuteprava informaegraveniacuteho panelu
- Uacuteprava textu
-
- Programaacutetorskaacute dokumentace
-
- Poufrac34iteacute technologie
- Adresaacuteoslashovaacute struktura
- Serverovaacute egraveaacutest programu
- Weboveacute straacutenky
- Struktura databaacuteze
-
- Tvorba lekciacute
-
- Lekce obsahujiacuteciacute celaacute slova
- Ostatniacute lekce
-
- Plaacuteny do budoucna
- Zaacutevigraver
- Reference
- Instalace a poufrac34iacutevaacuteniacute
- Obsah poslashilofrac34eneacuteho CD
-