UNIVERZITA KOMENSKÉHO V BRATISLAVE FAKULTA MATEMATIKY, FYZIKY A INFORMATIKY

SOFTVÉR NA VÝUČBU PARALELIZMU A AUTOMATOV NA ZÁKLADNEJ ŠKOLE

Bakalárska práca

2018 Patrik Priebera

UNIVERZITA KOMENSKÉHO V BRATISLAVE FAKULTA MATEMATIKY, FYZIKY A INFORMATIKY

SOFTVÉR NA VÝUČBU PARALELIZMU A AUTOMATOV NA ZÁKLADNEJ ŠKOLE

Bakalárska práca

Študijný program: Aplikovaná informatika Študijný odbor: 2511 Aplikovaná informatika Školiace pracovisko: Katedra aplikovanej informatiky Školiteľ: Mgr. Lucia Budinská

Bratislava, 2018 Patrik Priebera

I

//// zadanie

II

Čestné vyhlásenie

Čestne vyhlasujem, že som bakalársku prácu „Softvér na výučbu paralelizmu

a automatov na základnej škole" vypracoval samostatne s použitím uvedenej literatúry

a zdrojov dostupných na internete.

V Bratislave dňa 03.01.2018 ______________________

Patrik Priebera

III

Poďakovanie

Touto cestou by som sa chcel poďakovať mojej školiteľke Mgr. Lucii Budinskej

a konzultantke Mgr. Karolíne Mayerovej za pomoc, ochotu, cenné rady a pripomienky pri

tvorbe mojej bakalárskej práci.

IV

Abstrakt

PRIEBERA, Patrik: Softvér na výučbu paralelizmu a automatov na základnej škole

(Bakalárska práca) – Univerzita Komenského v Bratislave, Fakulta matematiky, fyziky

a informatiky; Katedra aplikovanej informatiky. – Školiteľ Mgr. Lucia Budinská.: FMFI UK, 2018, XX strán

..................

Kľúčové slová: .....................

V

Abstract

PRIEBERA, Patrik: Software for teaching parallelism and automata at primary schools

(Bachelor thesis) – Comenius University in Bratislava, Faculty of Mathematics, Physics and

Informatics; Department of Applied Informatics – Supervisor Mgr. Lucia Budinská .: FMFI

UK, 2018, XX pages

……………………………….

Keywords: …………………

VI

Predhovor

...................

VII

Obsah

Úvod .................................................................................................................................. 1

Teoretické východiská ............................................................................................... 3

Konečný automat ............................................................................................. 3

Paralelizmus ..................................................................................................... 4

Edukačný softvér ............................................................................................. 5

Inštruktívne programy .............................................................................. 6

E-learning ......................................................................................................... 7

iBobor .............................................................................................................. 8

Zásady tvorby softvéru pre deti ..................................................................... 10

Návrh aplikácie ........................................................................................................ 11

Návrh softvéru a použité technológie ............................................................ 11

Použité technológie ................................................................................ 11

HTML5 a CSS3 ...................................................................................... 11

Bootstrap ................................................................................................. 11

JavaScript ............................................................................................... 12

MySQL ................................................................................................... 12

AJAX ...................................................................................................... 12

jQuery ..................................................................................................... 12

Laravel .................................................................................................... 12

Typy používateľov ......................................................................................... 14

Administrátor .......................................................................................... 14

Učiteľ ...................................................................................................... 14

Žiak ......................................................................................................... 14

Anonymný používateľ ............................................................................ 14

Implementácia aplikácie .......................................................................................... 16

VIII

Výsledky .................................................................................................................. 17

Záver ............................................................................................................................... 18

Literatúra a internetové zdroje ........................................................................................ 19

Prílohy ............................................................................................................................. 20

1

Úvod Výučba na školách v 21. storočí sa podstatne odlišuje od výučby v predchádzajúcom

storočí. Kvôli celospoločenskej potrebe sa začala meniť štruktúra vzdelávacích odborov,

začali sa rozvíjať moderné technológie výučby na školách. Do popredia sa dostáva rozvíjanie

štandardov digitálnej gramotnosti, komunikačných kompetencií žiakov a učiteľov stredných

škôl a študentov vysokých škôl, ich osobnostného rozvoja. Je to jedným z kľúčových krokov

pre aktuálne a perspektívne potreby vedomostnej spoločnosti a trhu práce so zameraním na

informatiku a informačných a komunikačných technológií (IKT). Rozvoj IKT je potrebný

z dôvodu nedostatočného množstva a trvalo klesajúcej kvality vzdelávania absolventov škôl

informatickej, technickej a prírodovednej oblasti vzhľadom na súčasné potreby

zamestnávateľov.

Neoddeliteľnou súčasťou vzdelávania žiakov a študentov v 21. storočí je

elektronické vzdelávanie. Elektronické vzdelávanie predstavuje najmodernejší spôsob

výučby s využitím informačných technológií.1 Ide o nenáročné samoštúdium s využitím

informačných technológií pomocou internetového pripojenia a počítača. Využíva sa na

prípravu na prijímacie pohovory do škôl, pomáha zvyšovanie kvalifikácie zamestnancov,

poskytuje efektívny nástroj manažmentu vzdelávania či manažmentu kvality. Hlavnou

výhodou elektronického vzdelávania je zautomatizovanie viacerých pedagogických

procesov a vyhodnocovania testov. Šetrí čas pedagógov a umožňuje im ho využívať na iné

činnosti. Zároveň napomáha počítačovej gramotnosti nielen pedagógov, ale aj študentov.

Pomocou elektronického vzdelávania sa znižujú náklady na spotrebný materiál ako papier

a toner. Študenti a pedagógovia nemusia tlačiť písomné práce, študijné materiály, testy.

Elektronické vzdelávanie je dostupné kedykoľvek, nemá obmedzenie v určitých časových

intervaloch a môžeme ho využívať kdekoľvek, kde je prístup na internet.

Cieľom našej práce je navrhnúť edukačnú webovú aplikáciu na výučbu konečných

automatov a paralelizmu pre žiakov na druhom stupni základných škôl.

1 Dostupné na: http://www.elearning.sk/co-je-elearning.html [09.01.2018]

2

Pri písaní tejto práce sme sa venovali teoretickej a praktickej časti spracovania

návrhu edukačnej webovej aplikácie pre žiakov a učiteľov na druhom stupni základných

škôl. Práca je rozdelená do štyroch kapitol, ktoré čitateľovi predkladajú v teoretickej rovine

prehľad použitej technológie, ktoré sme využili pri vytvorení webovej aplikácie na výučbu

konečných automatov a paralelizmu. Uvedenej problematike sme sa venovali v prvej

kapitole. V druhej kapitole ...

3

Teoretické východiská Konečný automat

Konečný automat A je pätica (K, Σ, δ, q0, F), kde K je konečná neprázdna množina

stavov, Σ je konečná vstupná abeceda, q0 ∈ K je počiatočný stav, F ⊆ K je množina

akceptačných (koncových) stavov a δ : K × Σ → K je prechodová funkcia.

Konfigurácia konečného automatu je ľubovoľný prvok k (q, w) ∈ K ×Σ*, kde q je

stav automatu a w je nespracovaná časť vstupného slova. Konfigurácia nám udáva

jednoznačný popis situácie, v ktorej sa automat A v danom okamihu výpočtu nachádza. Na

základe jeho konfigurácie budeme vedieť povedať, ako bude výpočet pokračovať ďalej.

Krok výpočtu konečného automatu A je relácia ⊢A na konfiguráciách definovaná

(q,av) ⊢A (p,v) ⇐⇒ p = δ(q, a). Krok výpočtu teda hovorí v akej konfigurácií sa bude

A nachádzať v nasledujúcom kroku výpočtu, ak vieme, v akej sa nachádza teraz. Výpočet

automatu teda môžeme formálne zapísať ako postupnosť konfigurácií, pričom každé dve po

sebe nasledujúce konfigurácie sú v relácií „krok výpočtu“. 2

Konečný automat môžeme zapisovať (respektíve jeho δ-funkciu) aj prechodovou

tabuľkou alebo prechodovým diagramom.

Obrázok 1 Prechodová tabuľka konečného automatu (http://foja.dcs.fmph.uniba.sk/materialy/skripta.pdf)

Konečný automat označujeme skrátene KA, prípadne FSM (z anglického finite state

machine).

2 Dostupné na: http://foja.dcs.fmph.uniba.sk/materialy/skripta.pdf [10.01.2018]

4

Obrázok 2 Konečný automat (http://foja.dcs.fmph.uniba.sk/materialy/skripta.pdf)

Popis fungovania automatu

Automat sa na začiatku nachádza v počiatočnom stave. V každom ďalšom kroku sa

prečíta jeden symbol zo vstupu a prejde do stavu, ktorý je daný hodnotou, ktorá

v prechodovej tabuľke zodpovedá aktuálnemu stavu a prečítanému symbolu. Následne

pokračuje čítaním ďalšieho symbolu zo vstupu, ďalším prechodom podľa prechodovej

tabuľky a podobne.

Ak automat po prečítaní vstupu skončí v stave, ktorý patrí do množiny akceptačných

(koncových) stavov, potom platí, že automat buď daný vstup prijal alebo neprijal.

Paralelizmus Paralelizmus, ide o vykonávanie viacerých úloh súčasne, čím sa urýchľuje proces,

znižujú sa náklady na prácu a vykoná sa viac práce v kratšom čase.

Paralelné programovanie je v informatike označenie konceptu, ktorý umožňuje

naprogramovať úlohy, ktoré sú schopné paralelného (súčasného) behu. Paralelné

programovanie je hodnotené podľa toho, ako dobre dokáže rôzne problémy popísať a akého

výkonu je možné dosiahnuť na rôznych počítačových platformách. Implementácia

paralelného programovania môže byť v podobe knižníc pre tradičné sekvenčné

programovacie jazyky, vo forme rozšíreného existujúceho programovacieho jazyka alebo

úplne nový prístup (programovací jazyk).3

3 Dostupné na: https://cs.wikipedia.org/wiki/Paraleln%C3%AD_programov%C3%A1n%C3%AD [11.01.2018]

5

Edukačný softvér Edukačný softvér je softvér vytvorený špeciálne pre vyučovanie ako nástroj pre

učiteľov na učenie alebo pre študentov na učenie sa. Edukačný softvér rozvíja informatickú

kultúru a digitálnu gramotnosť, poskytuje spätnú väzbu, rozvíja asociatívne učenie

a podporuje individuálny prístup k tomu, kto sa učí.4 Na internete nájdeme veľké množstvo

edukačného softvéru, no máloktorý sa dá použiť v našom školstve, pretože väčšina je

napísaná v cudzom jazyku.

Klasifikácia edukačného softvéru podľa účelu použitia

Edukačný softvér podľa účelu použitia vieme klasifikovať do niekoľkých skupín:

• inštruktívne programy,

• simulácie a modelovanie,

• nástroje na získavanie informácií,

• nástroje na prácu s informáciami,

• nástroje na komunikáciu.

Simulácie a modelovanie

Túto skupinu môžeme ďalej rozdeliť na:

• simulácie (napodobňovanie reálneho procesu pomocou výpočtovej techniky),

• mikrosvety (mikrosvet je prostredie, v ktorom možno vytvárať vlastné simulácie),

• programovacie jazyky (programovací jazyk slúži ako prostriedok pre zápis

algoritmov, ktoré môžu byť vykonané na počítači),

• nástroje na modelovanie (vyžaduje sa od žiaka, aby vytvoril model, kedy študent

jasne demonštruje znalosť príslušných vzťahov reálnej situácie, ktorú modeluje).5

Nástroj na získavanie informácií je softvér, ktorý nám slúži na získavanie informácií.

Tento typ softvéru nie je navrhnutý priamo na vyučovanie, ale často môže byť pri učení

4 Dostupné na: http://files.virtual-lab.sk/APVV%20VV-11/Clanky%20a%20publikacie/Edukacny%20 softver_Daniela_Lehotska_Bezakova.pdf [03.01.2018] 5 Dostupné na: http://files.virtual-lab.sk/APVV%20VV-11/Clanky%20a%20publikacie/Edukacny%20 softver_Daniela_Lehotska_Bezakova.pdf [09.01.2018]

6

užitočný. Do tejto skupiny môžeme zaradiť multimediálne encyklopédie, on-line databázy

alebo veľa webových stránok. Softvér na získavanie informácií sa používa najčastejšie ako

zdroj faktov a údajov, ale aj za účelom naučiť sa vyhľadávať potrebné informácie.

Nástroje na prácu s informáciami sa vo všeobecnosti nehodnotia a nedávajú spätnú

väzbu týkajúcu sa vstupov a výstupov tak, ako to robia simulácie a inštruktívne programy.

Pri použití na vyučovaní musí túto spätnú väzbu zabezpečiť učiteľ, sám žiak alebo ďalší

spolužiaci.

Do poslednej skupiny Nástroje na komunikáciu môžeme zahrnúť nástroje ako

elektronická pošta, textové, audio- a videokonferencie. Nástroje na komunikáciu majú za

úlohu sprostredkúvať komunikáciu medzi žiakmi a učiteľmi, nie medzi žiakom

a počítačom.6

Nás predovšetkým zaujíma skupina inštruktívnych programov, pretože náš edukačný

softvér spadá pod túto skupinu, preto si túto skupine podrobnejšie rozpíšeme.

Inštruktívne programy Sú to programy, ktoré nahrádzajú učiteľa (respektíve učebnicu) pri výklade nového

učiva, jeho precvičovaní a automatickom vyhodnocovaní dosiahnutej úrovne žiackych

vedomostí. Inštruktívne programy väčšinou spracovávajú konkrétny vedný odbor alebo

vyučovací predmet.7

Rozlišujeme niekoľko druhov inštruktívnych programov:

• kvízy na sebahodnotenie,

• softvér na precvičovanie,

• programové učenie,

• tutoriály,

• inteligentné vyučovacie systémy.

6 Dostupné na: http://files.virtual-lab.sk/APVV%20VV-11/Clanky%20a%20publikacie/Edukacny%20 softver_Daniela_Lehotska_Bezakova.pdf [09.01.2018] 7 Dostupné na: http://files.virtual-lab.sk/APVV%20VV-11/Clanky%20a%20publikacie/Edukacny%20 softver_Daniela_Lehotska_Bezakova.pdf [03.01.2018]

7

Kvízy na sebahodnotenie

Kvízy nevyučujú žiakov nič nové, slúžia len na otestovanie ich vedomostí, aby učitelia zistili

aktuálny stav vedomostí žiakov.

Softvér na precvičovanie

Tento druh programu neslúži na to, aby naučil nejakú novú zručnosť alebo predal novú

vedomosť. Jeho zámerom je precvičovanie nejakých činností a upevňovanie faktov.

Programové učenie

Programové učenie zahŕňa výklad, testovanie a „doučovanie“ znalostí. Softvér žiakovi

zobrazí úlohu a očakáva od študenta odpoveď. Ak je odpoveď správna, softvér ponúkne

žiakovi ďalšiu úlohu na riešenie, ak odpoveď nebola správna, očakáva sa od študenta nová

odpoveď.

Tutoriál

Typ softvéru, ktorý sa zväčša používa na odovzdávanie vedomostí a prezentovanie

zručností, na učenie pojmov, pravidiel, poučiek a definícií v štýle podobný učebnici.

Inteligentné vyučovacie systémy

Vyučovacie systémy, ktoré sa snažia aplikovať metódy umelej inteligencie na prispôsobenie

sa jednotlivým žiakom, čo sa týka témy aj spôsobu učenia.8

E-learning E-learning alebo elektronické vzdelávanie, predstavuje najmodernejší spôsob výučby

s využitím informačných technológií. Je to implementácia informačných technológií

do vývoja, distribúcie a riadenia vzdelávania alebo výučby. E-learning je efektívnym

prostriedkom, ako sa spojiť so študentmi alebo zamestnancami a odovzdať im cenné

informácie na diaľku.9

8 Dostupné na: http://files.virtual-lab.sk/APVV%20VV-11/Clanky%20a%20publikacie/Edukacny%20 softver_Daniela_Lehotska_Bezakova.pdf [03.01.2018]

9 Dostupné na: http://www.elearning.sk/co-je-elearning.html [06.01.2018]

8

Hlavným nástrojom pre vzdelávanie je počítač a internet, vďaka ktorým sa

e-learning stáva nástrojom využiteľným na ľubovoľnom mieste v ľubovoľnom čase. Toto

odovzdávanie informácií sa najčastejšie realizuje prostredníctvom on-line dištančných

kurzov. Dištančné vzdelávanie ako také, teda samoštúdium za pomoci tútora, ktorý je

fyzicky oddelený od študujúcich a vzdelávanie iba koordinuje, existuje už veľa rokov.

Rozvoj informačných technológií zasiahol aj do vzdelávania a výrazne vylepšil vyučovací

proces.

E-learning je určený pre každého, kto vyhľadáva informácie, ako pre študentov

základných, stredných či vysokých škôl, na prípravu na prijímacie pohovory do škôl, tak

i pre organizácie a ich zamestnancov ako súčasť zvyšovania kvalifikácie. Pre študentov

e-learning predstavuje praktickú a pohodlnú formu získavania informácií.

Úroveň rozšírenia či využitia e-learningu je na Slovensku momentálne veľmi nízka,

no postupne sa začína presadzovať.

iBobor IBobor je informatická súťaž, ktorá bola založená v roku 2004 v Litve

prof. Dr. Valentinou Dagiene. Cieľom súťaže je podporiť záujmy o informačné

a komunikačné technológie (IKT) u všetkých žiakov. Súťaž chce iniciovať v deťoch

využívanie IKT, posmeliť ich v intenzívnejšom a kreatívnejšom používaní moderných

technológií pri učení sa. Každoročne sa súťaž koná vo viac ako štyridsiatich krajinách

do ktorej sa zapojí približne 1 650 000 žiakov.10

Informatická súťaž iBobor prebieha on-line, priamo pri počítačoch, čo organizátori

považujú za veľmi dôležitý motivačný prvok súťaže – aby informatická súťaž neprebiehala

na papieri. Princípom súťaže je, že žiaci majú v obmedzenom časovom limite vyriešiť

pevne stanovené úlohy. Keďže samostatná súťaž prebieha pri počítačoch, je možné do nej

zaraďovať aj úlohy, pri ktorých je riešenie dané interakciou súťažiaceho a počítača. Keď

súťaž skončí, softvér automaticky vyhodnotí odpovede žiakov, zobrazí im správne riešenia

10 Dostupné na: http://ibobor.sk/ [05.01.2018]

9

a poskytne súťažiacemu informáciu, ako sa daná konkrétna úloha vníma z pohľadu

informatiky.

Súťaž sa organizuje v troch kategóriách, ktoré sa označujú ako Benjamins, Juniors

a Seniors. V každej vekovej kategórií nájdeme úlohy troch stupňov obtiažnosti, pričom

počet úloh v jednotlivých stupňoch je rovnaký. Obtiažnosť úloh je nastavená tak, aby

najľahšie úlohy vyriešili v danom časovom limite takmer všetci účastníci, ťažšie úlohy nie

všetci a najťažšie zvládnu v danom časovom limite len tí najlepší.

Súťažné úlohy sa líšia svojím zameraním, náročnosťou a spôsobom riešenia. Kým

niektoré z úloh majú formy otázok s výberom odpovede zo štyroch možností, súťažiaci sa

môže stretnúť i s interaktívnou úlohou, v ktorej má presunúť, usporiadať alebo doplniť časť

riešenia.11

Obrázok 3 Typy úloh iBobor (http://ibobor.sk/bobordidinfo.pdf)

Pri tvorbe edukačnej webovej aplikácie na výučbu konečných automatov

a paralelizmu pre žiakov na druhom stupni základných škôl nám veľkou inšpiráciou boli

typy úloh, ktoré sú obsiahnuté v informatickej súťaži iBobor. Z uvedeného dôvodu sme sa

v podkapitole 1.3. podrobne venovali princípu súťaže, súťažným kategóriám, stupňom

obtiažnosti, typom a náročnosti úloh. Získané informácie o princípe, priebehu, použitej

technológie a praktických a technických otázkach sme plnohodnotne využili pri tvorbe

nášho softvéru.

11 Dostupné na: http://ibobor.sk/bobordidinfo.pdf [09.01.2018]

10

Zásady tvorby softvéru pre deti V súčasnosti deti predstavujú dôležitú skupinu používateľov softvéru a technológií,

a preto sa kladie čoraz väčší dôraz na vypracovanie softvéru pre deti. Sú náročnými

spotrebiteľmi, preto softvér musí byť dostatočne motivačný. Úlohy musia byť efektívne

a mali by vedieť deti zaujať.

Návrhári detskej technológie by sa mali sústrediť a starostlivo zvážiť, pre aké vekové

kategórie bude ich softvér používaný z dôvodu, že každá veková kategória má odlišné

zručnosti, schopnosti a očakávania.

Autori článku „Framework for Evaluating the Usability of Mobile Educational

Applications for Children“ Rabail Tahir a Fahim Arif12 uvádzajú, že prvou základnou

zásadou pri tvorbe softvéru pre deti je to, aby softvér bol ľahko pochopiteľný pre dieťa.

Rozhranie by malo byť priateľské k deťom a tiež kompatibilné s kognitívnymi

schopnosťami detí s použitím vhodného jazyka a obsahu.

Návrh softvéru by mal byť jednoduchý, atraktívny a organizovaný. Veľkosť písma

a farebnosť by mala zaujať detskú kategóriu. Používame jednoduché deťom známe ikony

pre správne porozumenie, vhodné multimédia, animácie a texty. Pre detských používateľov

je potrebné, aby sa vedeli na stránke ľahko orientovať prostredníctvom jednoduchej

navigácie, jasných navigačných tlačidiel.

Deti na rozdiel od dospelých používateľov očakávajú výsledky svojich aktivít

okamžite. Ak sa po ich vstupe nič nestane, deti môžu opakovať svoju činnosť, až kým niečo

nenastane. Očakávajú okamžitú spätnú väzbu, upozornenie a podanie inštrukcií ako

postupovať ďalej a plniť ďalšie úlohy.

12 Dostupné na: https://www.researchgate.net/profile/Fahim_Arif/publication/285925086_Framework_for_Evaluating_the

_Usability_of_Mobile_Educational_Applications_for_Children/links/5664673608ae192bbf909492/Framework-for-Evaluating-the-Usability-of-Mobile-Educational-Applications-for-Children.pdf?origin=publication_detail [11.01.2018]

11

Návrh aplikácie V tejto kapitole bude podrobný opis a komplexný návrh webovej aplikácie, ....

Návrh softvéru a použité technológie

Použité technológie V tejto podkapitole sa budeme venovať stručnému popísaniu technológií, ktoré boli

použité pri tvorbe edukačnej webovej aplikácie. Pri tvorbe boli využité aktuálne

a najpoužívanejšie programovacie jazyky a frameworky, ktoré sa v súčasnosti používajú pri

vytváraní webových aplikácií. Pomocou týchto technológií sme vytvorili softvér, ktorý je

dostupný online ako webová aplikácia.

HTML5 a CSS3 HTML, celým názvom HyperText Markup Language, je najrozšírenejším jazykom,

ktorý sa používa na vývoj webových stránok. Je značkovací jazyk určený na vytváranie

webových stránok a iných informácií zobraziteľných vo webovom prehliadači.13 Keďže je

to značkovací jazyk, tak na popis obsahu stránok využíva značky (príkazy, tagy), ktoré sa

vkladajú medzi znaky „“. Cascading Style Sheets (Kaskádové štýly) alebo CSS, je

jednoduchý dizajnový jazyk určený na zjednodušenie tvorby webových stránok. Slúži na

vizuálne formátovanie dokumentov.14

Bootstrap Bootstrap je jednoduchá a voľné stiahnuteľná sada nástrojov pre tvorbu webu

a webových aplikácií.15 Výhodou Bootstrap-u je hlavne responzívny design, ktorým

dosiahneme to, že sa naša webová stránka bude korektne zobrazovať na zariadeniach ako sú

mobilné telefóny, tablety, notebooky či stolné počítače. Poskytuje nám veľa vytvorených

prvkov od tlačidiel a tabuliek, cez panely, hlášky až po JavaScript-om ovládané modálne

okná, rozbaľovacie tlačidlá či slidery. Okrem toho Bootstrap obsahuje aj dopredu vytvorené

šablóny založené na HTML a CSS.

13 Dostupné na: https://www.tutorialspoint.com/html/html_overview.htm [04.01.2018] 14 Dostupné na: https://www.tutorialspoint.com/css/what_is_css.htm [04.01.2018] 15 Dostupné na: https://getbootstrap.com/ [04.01.2018]

12

JavaScript Javascript je skriptovací programovací jazyk, ktorý sa používa hlavne pri tvorbe

webových stránok. Je najčastejšie používaný ako komponent webových stránok, ktorých

implementácia povoľuje skriptu interakciu s používateľom na strane klienta a vytvára tak

dynamickú stránku. 16

MySQL MySQL je relačný databázový server typu DBMS (database management system).

Každá databáza v MySQL je tvorená z jednej alebo z viacerých tabuliek, ktoré majú riadky

a stĺpce. V riadkoch sú jednotlivé údaje a stĺpce udávajú dátový typ jednotlivých údajov.

Komunikácia s MySQL databázou prebieha pomocou takzvaných dotazov, ktoré vychádzajú

z programovacieho jazyka SQL (Structured Query Language).17

AJAX AJAX, celým názvom Asynchronous JavaScript and XML, je technika tvorby

lepších, rýchlejších a interaktívnejších webových aplikácií pomocou dostupných technológií

ako XML, HTML, CSS a JavaScript. Umožňuje meniť obsah stránok bez potreby ich

kompletného znovunačítania zo servera vďaka asynchrónnemu spracovaniu webových

stránok pomocou knižnice napísanej v JavaScripte.18

jQuery jQuery je rýchla a presná JavaScript knižnica so širokou podporou webových

prehliadačov, ktorá zdôrazňuje spojenie jazykov JavaScript a HTML. Uľahčuje nám písanie

v JavaScript-e. jQuery syntax je navrhnutá pre jednoduchší výber DOM elementov,

vytváranie animácií, spracovanie udalostí a pre jednoduchšiu prácu s AJAX-om.19

Laravel Laravel patrí medzi najpopulárnejší MVC framework pre programovací jazyk PHP,

určený pre vývojárov, ktorí potrebujú jednoduchý a elegantný nástroj na vytváranie

16 Dostupné na: https://www.tutorialspoint.com/javascript/javascript_overview.htm [05.01.2018] 17 Dostupné na: https://www.tutorialspoint.com/mysql/mysql-introduction.htm [05.01.2018] 18 Dostupné na: https://www.tutorialspoint.com/ajax/what_is_ajax.htm [05.01.2018] 19 Dostupné na: https://jquery.com/ [04.01.2018]

13

plnohodnotných webových aplikácií.20 Laravel je Open Source framework, čo znamená, že

má dostupný zdrojový kód a používatelia ho môžu voľne používať, modifikovať a šíriť.

Laravel zahrňuje všetky nástroje pre komunikáciu s databázou, kontrolu prístupu

užívateľov, posielanie e-mailov a veľa ďalších funkcionalít. Súčasťou Laravel-u je aj

Artisan, čo je vlastne príkazový riadok, ktorý obsahuje príkazy pre zrýchlenie a uľahčenie

rôznych činností pri tvorbe webových aplikácií. Laravel využíva softvérovú architektúru

MVC, čo je skratka pre Model-View-Controller architektúru.

PHP PHP (PHP: Hypertext Preprocessor) je skriptovací programovací jazyk, ktorý

umožňuje vývojárom vytvárať dynamický obsah, ktorý interaguje s databázami.21

Model-View-Controller Model-View-Controller je architektonický vzor, ktorý rozdeľuje dátový model

aplikácie do troch nezávislých na sebe komponentov Model, View, Controller, tak, že

modifikácia ktoréhokoľvek z nich má minimálny vplyv na ostatné.22

Model Komponent Model zodpovedá za všetkú dátovú logiku, s ktorou používateľ pracuje.

Môžu to byť dáta prenášané medzi komponentami View a Controller alebo hocijaká iná

práca s dátami. Môžu to byť napríklad aj databázové dotazy, výpočty, validácie a podobne.

View (Pohľad) Komponent View z pohľadu aplikácie sprostredkováva výstup z aplikácie, stará sa

teda o zobrazenie výstupu užívateľovi. Väčšinou je to výstup vo forme HTML stránky, no

môže to byť napríklad aj PDF dokument.

Controller (Kontroler) Komponent Controller zohráva úlohu prostredníka, ktorý komunikuje s užívateľom,

modelom a pohľadom. Drží teda celý systém pohromade a komponenty prepojuje. Zvyčajne

20 Dostupné na: https://laravel.com/ [04.01.2018] 21 Dostupné na: http://php.net/ [04.01.2018] 22 Dostupné na: https://www.tutorialspoint.com/mvc_framework/mvc_framework_introduction.htm [05.01.2018]

14

spracováva vstup od užívateľa a na základe toho vstupu spustí funkcie modelu a ich výstupy

odovzdáva do pohľadu.

Typy používateľov Za používateľa aplikácie môžeme považovať toho, kto prichádza do styku

s aplikáciou. Webovú aplikáciu budú navštevovať väčšinou len učitelia a žiaci.

Používateľov teda môžeme rozdeliť do štyroch skupín:

• Administrátor,

• Učiteľ,

• Žiak,

• Anonymný používateľ.

Administrátor Administrátor je používateľ s maximálnymi možnými právomocami na správu

webovej aplikácie, používateľov, kurzov a úloh, ktorý bol vytvorený manuálne. Jeho úlohou

je dohliadať na používateľov, riešenie problémov, prípadná editácia používateľov, kurzov

a úloh.

Učiteľ Učiteľ je používateľ, ktorý sa musí registrovať na webovej aplikácií. Jeho úlohou je

spravovať kurzy, pridávať alebo vytvárať nových žiakov, vytvárať nové alebo editovať staré

úlohy oboch typov pomocou preddefinovaných šablón. Učiteľ má prístup k výsledkom

žiakov a má právo hodnotiť svojich žiakov.

Žiak Žiak je koncový používateľ webovej aplikácie. Takisto ako učiteľ, žiak musí byť

registrovaný na webovej stránke. Žiak má prístup k prihláseniu, po prihlásení má prístup

k jeho úlohám, môže riešiť úlohy, sady úlohy alebo experimentovať v otvorených úlohách.

Anonymný používateľ Do tejto skupiny patria používatelia, ktorí nie sú registrovaní alebo prihlásení do

systému. Anonymný používateľ má možnosť sa len registrovať na webovej aplikácií, keďže

aplikácia má všetky funkcie prístupné až po registrovaní a prihlásení.

15

Obrázok 4 Use-Case Diagram

16

Implementácia aplikácie

17

Výsledky

18

Záver

19

Literatúra a internetové zdroje

20

Prílohy Digitálna príloha –

ObsahÚvod1. Teoretické východiská1.1. Konečný automat1.2. Paralelizmus1.3. Edukačný softvér1.3.1. Inštruktívne programy

1.4. E-learning1.5. iBobor1.6. Zásady tvorby softvéru pre deti

2. Návrh aplikácie2.1. Návrh softvéru a použité technológie2.1.1. Použité technológie2.1.2. HTML5 a CSS32.1.3. Bootstrap2.1.4. JavaScript2.1.5. MySQL2.1.6. AJAX2.1.7. jQuery2.1.8. Laravel PHP Model-View-Controller Model View (Pohľad) Controller (Kontroler)

2.2. Typy používateľov2.2.1. Administrátor2.2.2. Učiteľ2.2.3. Žiak2.2.4. Anonymný používateľ2.2.5.

3. Implementácia aplikácie4. VýsledkyZáverLiteratúra a internetové zdrojePrílohy