Informačný systém pre podporu výuky programovania

	Slovenská technická univerzita Materiálovotechnologická fakulta so sídlom v Trnave
	Informačný systém pre podporu výuky programovania Bakalárska práca

Autor:	Erik Schmidt
Pedagogický vedúci:	Ing. Juraj Ďuďák, PhD.
Študijný odbor:	Aplikovaná informatika a automatizácia v priemysle
Akademický rok	2018/2019

Obsah práce

1.	Analýza informačného systému pre podporu výuky programovania
2.	Požiadavky na navrhovaný systém eXam
3.	Implementácia systému eXam
4.	Testovanie systému eXam

Abstrakt Cieľom bakalárskej práce je vytvorenie informačného systému na automatickú kontrolu správnosti odovzdaných zdrojových kódov študentov vo zvolenom programovacom jazyku. Jedným z hlavných prínosov takéhoto systému je uľahčenie práce a času vyučujúcemu pri oprave a kontrole odovzdaných riešení študentov. Povolené programovacie jazyky sú určené ku každému zadaniu a žiak má možnosť zvoliť si, ktorý jazyk mu vyhovuje najviac. Správnosť zadania je určená na základe porovnávania výsledkových premenných odovzdaného zadania, získaných z pridruženého kompilátora zvoleného jazyka s výsledkovými premennými daného zadania, ktoré určil tvoriaci zadania. Predpokladá sa, že používanie tohto systému na škole zlepší určité schopnosti študentov, ako sú precíznosť, presnosť a čítanie s porozumením, nakoľko systém vyžaduje presné riešenia aby zadania vyhodnotil ako správne. Zistili sme, že takýto pohľad na riešenie zadaní môže slúžiť aj ako motivačný faktor pre študentov k zlepšovaniu. Tento systém navrhujeme aplikovať do praxe na škole STU MTF.

Abstract The aim of the thesis is to create information system for auto-verifying source codes sent by students in chosen programming language. One of the main benefits of such system is facilitating work and saving time for teachers in checking the sent solutions by students. Allowed programming languages are selected for each assignment and student has the option to choose the language, which fits him the most. The correctness of the assignment is determined by comparing the result variables of the sent solution, acquired by the associated compilator, with the result variables chosen by the creator of given assigment.It is assumed, that using of such system in school will improve various skills of students, some of which are precision, accuracy and reading comprehension because system requires, that the solutions are precise, in order for it to mark them as correct. We found out, that this view of solving the assigments can work as a motivating factor for students, to improve themselves. We propose to put this system in practice at school STU MTF.

Úvod

Vo svete IT je primárnym cieľom zabezpečiť odborne vzdelaných a kreatívnych programátorov. Tento proces sa začína už na stredných školách a pokračuje na špeciálnych odboroch na univerzitách. Spôsobom ako toto docieliť je okrem kvalitných teoretických základov aj praktická časť - teda riešenie algoritmických problémov. Čím viac úloh študent vyrieši, tým sa jeho zručnosti rozširujú. Pri tvorbe riešení týchto algoritmických úloh je však potrebné navrhnuté riešenie verifikovať, teda overiť jeho správnosť. Medzi parametre, ktoré definujú správnosť programu patrí: samotný výsledok, časová náročnosť, pamäťová náročnosť a asymptotická zložitosť. Pre overenie týchto parametrov existujú špecializované programové riešenia, ktoré dokážu navrhnuté riešenie analyzovať. Súhrnne ich označujeme ako statické a dynamické analyzátory zdrojového kódu. Základným parametrom overenia správnosti je však stále kontrola správnosti výsledkov overovaného algoritmu, resp. programu.
V súčasnosti je vyvíjaných veľa iniciatív, ktorých cieľom je nájsť ľudí ktorí dokážu riešiť náročné algoritmické problémy. Webové stránky ako napríklad www.topcoder.com, projecteuler.net, www.coderbyte.com, www.hackerrank.com, www.codechef.com sú portály na ktorých bežia programátorské súťaže v rôznych oblastiach.
Pre túto bakalársku prácu sme definovali nasledujúce ciele.

1. Podrobne sa oboznámiť s technológiou tvorby profesionálnych web aplikácií s použitím MVC frameworku v jazyku php.
2. Špecifikácia požiadaviek na systém kontroly správnosti zdrojových kódov.
3. Návrh dátového modelu systému, implementácia web aplikácie pre testovanie zdrojových kódov.
4. Začlenenie kompilátora zdrojového kódu do vytváranej web aplikácie s ohľadom na zabezpečenie celého riešenia.
5. Testovanie navrhnutého systému v polo-ostrej prevádzke.

Analýza informačného systému pre podporu výuky programovania

Prvá kapitola práce je venovaná analýze a definíciám použitých technológii práce ako takých.

Informačný systém

Informačné systémy (IS) sú súčasťou systému sietí hardware a software, ktoré ľudia a organizácie používajú na zber, filtrovanie, spracovanie, vytváranie a distribuovanie dát. Dôraz sa kladie hlavne na to, aby mal systém presne definované hranice, akými sú napríklad používatelia, procesory, úložisko, vstupy, výstupy a spomenuté komunikačné siete. Základné rozdelenie IS sa člení na štyri komponenty: technológia, proces, ľudia a organizačná štruktúra [10].

Všetky IS sa snažia podporiť a uľahčiť operácie, manažment a rozhodovanie. IS je informačná a komunikačná technológia (IKT), ktorú používajú spoločnosti, organizácie a ľudia, ale takisto aj spôsob, ktorým ľudia zaobchádzajú s touto technológiou. IS často obsahujú v sebe IKT komponent, ale nie je to ich hlavná súčasť, ktorou je koncové použitie informačných technológii (IT) [6].

Základný pohľad na IS

IS by mal obsahovať šesť komponentov, ktoré by mali tvoriť funkčný celok :

1. Hardware: Výraz hardware znamená mechanizmus. Táto kategória zahŕňa počítač ako taký, ktorý obsahuje centrálny procesor (CPU) a všetky jeho podporné periférie. Pomedzi podpornými perifériami a príslušenstvom sú aj vstupné a výstupné zariadenia, úložné zariadenia a sieťové zariadenia.
2. Software: Pod pojmom software sa dá rozumieť počítačový program, alebo manuály (ak nejaké sú) ktoré ho podporujú. Počítačové programy sú strojovo čitateľné inštrukcie, ktoré riadia elektrické obvody v časti hardware-u systému, aby produkoval užitočné informácie z dát. Používateľ má k jeho ovládaniu zväčša prístup cez grafické používateľské rozhranie (GUI).
3. Dáta: Dáta sú fakty, ktoré sú použité programom na vytvorenie užitočných informácii. Tak isto ako programy, aj dáta sú uložené v podobe strojovo čitateľnej formy na disku, pokiaľ ich počítač potrebuje.
4. Procedúry: Procedúry sú postupy, ktoré riadia správanie sa počítačového systému.
5. Ľudia: Každý systém potrebuje ľudí, aby bol užitočný. Je to jeden z často prehliadnutých komponentov IS, ktorý najviac predurčuje úspech IS. Medzi týchto ľudí nepatria len používatelia, ale aj tí, čo majú na starosti údržbu hardware-u a software-u systému.
6. Spätná väzba: IS môže byť zaobstaraný spätnou väzbou

Internetovo založený informačný systém
Je to IS, ktorý používa internetové webové technológie na podanie informácii a služieb používateľom. Táto technológia je použitá na odosielanie a úschovu dát na základe hypertextového princípu. Je to kombinácia jednej, alebo viacerých webových aplikácii, špecificky funkčne orientovaných komponentov.

Výhody internetovo založeného IS :

• medzi-platformová kompatibilita,
• malé systémové požiadavky na strane používateľa,
• viac súbežných používateľov,
• živé aktuálne dáta.

V súčasnej dobe sú tieto systémy používané väčšinou vzdelávacích inštitúcii na komunikáciu a zjednodušenie procesov výuky so študentami. Taktiež sú užitočné na vzdialenú výuku predmetov [10].

Informačné systémy pre vyhodnocovanie programového kódu

Systémy pre kontrolu správnosti zdrojových kódov sú vo väčšine prípadov používané na akademickej pôde ako podporný nástroj výuky programovacích jazykov alebo v programátorských súťažiach, kde manuálne opravovanie riešení nie je z technicky realizovateľné. Samotný princíp fungovania takéhoto systému je jednoduchý: prihlásiť sa, vybrať si oblasť a úroveň svojich znalostí a vyriešiť zadaný problém. Samotné riešenie je vo forme zdrojového kódu, ktorý je potrebné skontrolovať. A práve túto úlohu vykonáva samotný informačný systém. Proces kontroly spočíva v preložení (resp. interpretovaní - podľa typu programovacieho jazyka) zdrojového kódu do spustiteľného súboru. Takto vytvorenému spustiteľnému súboru sa pri spustení dajú ako vstupné hodnoty pripravená množina dát a kontroluje sa výstup programu voči správnej množine dát. Typickým využitím týchto informačných systémov sú:

• portály spravujúce programátorské súťaže,
• vzdelávacie inštitúcie, ktoré systém používajú ako podporný nástroj.

PHP framework Nette

Framework je softvérová štruktúra ktorá slúži ako podpora pri programovaní, vývoji a organizácii softvérových produktov. Môže obsahovať iné podporné programy, knihovne API, podporu pre návrhové vzory alebo doporučené postupy pri vývoji.
Framework zabezpečuje dodržiavanie určitého štýlu pri písaní kódu, rozdeľuje kód na vzájomne komunikujúce vrstvy a uľahčuje prácu v týme. Framework Nette pozostáva z nasledujúcich modulov:

• šablónovací systém Latte,
• ladiace nástroje (Tracy),
• caching,
• formuláre,
• databázová vrstva Database Explorer,
• dependency injection (DI container),
• konfiguračné súbory NEON,
• RobotLoader (autoloading tried).

Model-View-Controller aplikácie

Model-View-Controller (MVC) je softvérová architektúra ktorá vznikla na základe potreby rozdelenia logiky aplikácii s grafickým rozhraním pre lepšiu orientáciu v kóde. Jedná sa o rozdelenie kódu obsluhy (controller) od kódu aplikačnej logiky (model) a od kódu vykresľujúceho dáta (view). Týmto prístupom je aplikácia prehľadnejšia a umožňuje testovanie jednotlivých častí zvlášť.
Model je dátový a funkčný základ celej aplikácie. Spracovávajú sa v ňom všetky akcie používateľa a logika stránky. Model zahŕňa v sebe svoje metódy a funkcie na spracovanie požadovaných akcii, logiky a navonok ponúka prístup k pevne danému rozhraniu, cez ktoré môžeme zisťovať, či meniť jeho stav. Model je nezávislý od vrstiev view a controller, tie ho implementujú.
View, inak nazývaný aj pohľad má za úlohu vykresľovanie spracovaných požiadavkov od vrstvy logiky. Veľmi často používa šablónovací systém ako napríklad latte, ktorý výrazne uľahčuje prácu a vie, ako sa má zobraziť komponenta alebo výsledok získaný z modelu. Šablónovací systém zavádza cez tzv. makrá do vrstvy view aj určitý stupeň logiky.
Controller je radič, ktorý zachytáva požiadavky od používateľa a na základe predmetu požiadavky následovne volá danú aplikačnú vrstvu logiky (model), ktorá ju spracuje a pošle odpoveď controlleru, ktorý následne ak treba výsledok vykreslí pomocou vrstvy view. Príkladom controllera vo frameworku Nette sú presentery [1].

Obr. 1.1 Schéma MVC architektúry

[fig:schema_MVC]

Súborová štruktúra nette projektu

Obr. 1.2 Súborová štruktúra nette projektu

V následnej štruktúre je vidieť, že aplikácia sa spúšťa z jedného súboru (index.php), ktorý sídli vo verejnom súbore www. Cez tento súbor sa posielajú všetky požiadavky do riadenia aplikácie súboru app/, inicializačnému súboru bootstrap.php, kde sa konfiguruje prostredie a vytvára Dependency injection (DI) kontajner.
U zložitejších aplikáciach a aj v našej aplikácii sa používajú v štruktúre aplikácie tzv. moduly. Aplikácia sa tak dá pekne rozčleniť na časti a každému používateľovi sa na základe jeho "role" zobrazí správna stránka prispôsobená jeho statusu. V našom prípade je to buď obyčajný študent (user), alebo admin.

Obr. 1.3 Súborová štruktúra modulov projektu

Nette Presenter a komponent

Presenter je časť controllera z MVC architektúry a v nette aplikácii slúži na spracovanie požiadavkov používateľa. Ako bolo už spomenuté, každý HTTP požiadavok prejde cez súbory index.php a bootstrap.php do objektu zvaného application. Objekt sám o sebe HTTP požiadavkám nerozumie, požiada router, aby mu požiadavok preložil t.j. aby mu povedal, pre ktorý presenter a akciu v ňom je požiadavok určený.
Príklad generovanej adresy požiadavku URL pri použití SimpleRouter :

http://example.com/?presenter=Product&action=detail&id=123

Tento požiadavok hľadá presenter s menom Product, pri akcii detail a odovzdáva mu parameter id s hodnotou 123. Takýto prístup však nie je prehľadný, preto naša aplikácia používa triedu Route, ktorá využíva modul Apache serveru s názvom mod rewrite, ktorý v skratke umožňuje prepisovanie URL za behu.
Príklad generovanej adresy požiadavku URL pri použití Route:

http://example.com/product/detail/123

Tento prístup je prehľadnejší a umožňuje sa používateľom lepšie orientovať. V aplikácii treba samozrejme nastaviť východziu akciu aplikácie pri načítaní stránky a to v súbore RouterFactory.php.
Presenter tento požiadavok preložený routerom preberie a na základe odoslaných parametrov odošle naspäť odpoveď, ktorá môže mať viacero podôb, akými sú napríklad HTML stránka, obrázok, JSON objekt apod. Na základe zvolenej akcie sa presenter pokúsi vyhľadať danú šablónu k danej akcii presentera, v tejto šablóne môžu byť určité HTML prvky spojené s latte makrami na vykreslenie, alebo zobrazenie odpovede. Túto šablónu hľadá v príkladnom dokumente templates/presenter/akcia.latte.
Presenter do tejto šablóny posiela aj niekoľko užitočných premenných, ako napríklad:

• $basePath - absolútna URL cesta ku koreňovému www adresáru (napr. /img),
• $baseUrl je absolútne URL ku koreňovému adresáru (napr. http://localhost/img),
• $user je objekt reprezentujúci používateľa,
• $presenter je aktuálny presenter,
• $control je aktuálny komponent, alebo presenter,
• $flashes pole správ zaslaných funkciou flashMessage(), ktorá sa volá z presentera.

Životný cyklus presentera
Pri spustení akcie presentera sa spustí metóda renderAkcia, kde Akcia je meno vytvorenej akcie. Avšak pri spustení presenteru môžeme využiť aj metódy spomenuté v obrázku 1.3.

Obr. 1.4 Životný cyklus presentera

Opis metód životného cyklu presentera:

1. startup() - Pri vytvorení presenteru sa ako prvé zavolá táto metóda. Je vhodná na inicializáciu niektorých premenných, alebo overenie používateľských oprávnení na základe prihláseného používateľa.
2. action<Action>() - Je to alternatíva k metóde render<Action>(), nakoľko sú prípady použitia akcie, kedy sa nič používateľovi nevykreslí, napríklad pri presmerovaní inam, alebo zápisu údajov do databázy. Používanie metódy render by bolo tak neprehľadné. Táto metóda sa však zavolá skôr, ako metóda render. Môže teda rozhodnúť aj pri zavolaní inej metódy render.
3. handle<Signal>() - Je určená na spracovanie tzv. signálov. Je určená primárne pre komponenty a spracovanie AJAXových požiadavkov. V tejto úrovni prebieha aj spracovanie formulárov.
4. beforeRender() - Volá sa pred volaním metód render. Môže sa využiť pri nastaveniach šablóny, alebo predávaní premenných, ktoré majú spoločné viaceré šablóny zobrazenia.
5. render<View>() - Metóda, ktorá sa využíva pri vykreslovaní pohľadov po určitých akciách. Obvykle sa používa na naplnenie premenných do vykresľovanej šablóny.
6. shutdown() - Je zvolaná pri ukončení životného cyklu presentera [1].

Komponent slúži hlavne k znovo-použiteľnosti kódu a využívaniu práce komunity, ktorá spomínané použiteľné komponenty vytvára. Je to vykresliteľný objekt ako napríklad menu, formuláre a podobne. Komponenty použiteľné pre Nette framework sa dajú stiahnuť napríklad zo stránky https://componette.com.

Každá komponenta obsahuje svoju šablónu a továreň pre spracovanie šablóny. V súbore ktorý slúži ako továreň je možné v metóde render() definovať použiteľné parametre šablóny a taktiež cestu odkiaľ sa má šablóna vykresľovať [1].

Šablónovací systém Latte

Latte je šablónovací systém pre jazyk PHP ktorý slúži na uľahčenie práce programátorom a zabezpečenie výstupu pred určitými typmi útokov ako je napríklad XSS.
XSS je metóda narušenia WWW stránok za využitia neošetrených bezpečnostných chýb v skriptoch(predovšetkým vstupov). Útočník tak môže narušiť stránku alebo získať prístup k citlivým údajom tým, že do stránky podstrčí svoj vlastný javascriptový kód [8].
Výhody frameworku Latte:

• rýchlosť kompilácie,
• bezpečnosť (Kontextovo senzitívne escapovanie príkazov a znakov),
• intuitívna rýchla syntax.

Latte využíva takzvané makrá na uľahčenie práce programátorovi. Sú dva typy makier ktoré môže programátor využiť:

• makrá v zložených zátvorkách napr.

  {foreach...}{/foreach}

• takzvané n:makrá, ktoré sa vkladajú priamo do elementov HTML napr.

  n:if="…"

Príklad použitia šablónovacieho systému Latte pri výpisu pola prvkov Items ako zoznamu za použitia šablónovacieho systému a makra foreach:

<?php
  <ul n:if="$items">
    {foreach $items as $item}
      <li id="item-{$iterator->counter}">{$item|capitalize}</li>
    {/foreach}
  </ul>
?>

Ako môžeme v uvedených príkladoch vidieť, šablónovací systém výrazne uľahčuje prácu programátora. Veľmi dôležitá vlastnosť Latte je spomenuté escapovanie, čo znamená že Latte prevedie znaky ktoré majú v HTML kóde nejaký význam na iné odpovedajúce parametre tj. nemôže sa stať, že niekto odošle vo formulári kód HTML, alebo iný kód ktorý sa na strane servera spustí [1].