STŘEDOŠKOLSKÁ ODBORNÁ ČINNOST Omluvenky online Jan Čižmár Gymnázium, Brno, třída Kapitána Jaroše 14 Brno 2013
STŘEDOŠKOLSKÁ ODBORNÁ ČINNOST Obor SOČ: 18. Informatika Omluvenky Online Autor: Jan Čižmár Škola: Gymnázium, Brno, třída Kapitána Jaroše 14 Vedoucí práce: Ing. Viera Hájková Brno 2013
Prohlášení Prohlašuji, že jsem svou práci vypracoval samostatně, použil jsem pouze podklady (literaturu, SW atd.) uvedené v přiloženém seznamu a postup při zpracování a dalším nakládání s prací je v souladu se zákonem č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon) v platném znění. V... dne... podpis:... 2
Poděkování Děkuji své profesorce informatiky a vedoucí mé práce Ing. Vieře Hájkové, krerá dala vzniknout mé práci zejména položením základů mých znalostí v oboru programování. Dále děkuji PhDr. Libuši Čižmárové, CSc., z Ústavu pro jazyk český AV ČR, v. v. i., která mi velmi pomohla s jazykovou stánkou jak praktické, tak textové podoby mé práce. Rád bych také poděkoval autorům převzatých kódů, kteří zdarma poskytují své programy a velmi tak přispívají k vývoji webových aplikací. Velký dík patří také mým spolužákům, kteří svými přopomínkami přispěli k tomu, aby má práce byla kvalitní. Na závěr děkuji své škole jako instituci za to, že mi poskytovala zázemí pro vývoj mé práce. 3
Abstrakt V této práci bych rád představil svou aplikaci pro omlouvání absencí přes internet pro střední a základní školy. Na tvorbu tohoto software jsem použil programovací jazyky PHP, MySQL, Javascript (AJAX, JQuery), HTML, CSS a PHP framework CodeIgniter. Snažil jsem se vytvořit software, který by byl uživatelsky přístupný a hlavně bezpečný a použitelný v praxi, což se mi v prostředky vyhraněných mezích podařilo. 4
Obsah I Úvod 7 1 Jak to celé funguje? 7 2 Co jsem použil 9 II Dokumentace aplikace 11 3 Struktura MySQL databáze 11 4 Struktura aplikace 12 4.1 Kořenový adresář......................... 12 4.2 Application............................ 13 4.2.1 Config........................... 13 4.2.2 Controllers........................ 13 4.2.3 Viewers.......................... 13 4.2.4 Models.......................... 13 4.3 Images............................... 13 4.4 Další adresáře........................... 13 5 Popis jednotlivých controllerů 13 5.1 Controller student........................ 14 5.2 Controller zastupce........................ 16 5.2.1 Výpis........................... 16 5.2.2 Omlouvání absencí.................... 17 5.3 Další controllery......................... 19 6 Orientace v kódu 19 7 Vzhled aplikace 19 III Manuál 19 8 Přihlášení 21 9 Student 21 9.1 Výpis absencí........................... 22 9.2 Nastavení............................. 22 5
10 Zákonný zástupce 23 10.1 Omlouvání absencí........................ 23 10.2 Odstranění absence........................ 24 10.3 Nastavení............................. 24 10.3.1 Osobní nastavení..................... 25 10.3.2 Změna telefoních čísel.................. 25 11 Profesor 26 11.1 Zaznamenávání absencí..................... 26 11.2 Výpis všech ověřených omluv.................. 27 11.3 Jednotliví studenti........................ 27 11.4 Nastavení............................. 27 11.4.1 osobní nastavení..................... 27 11.4.2 Nastavení údajů studentů................ 28 11.4.3 Přidávání záznamů studentů.............. 30 12 Administrátor 31 12.1 Třídy/Třídní profesoři...................... 31 12.1.1 Vytvoření záznamu profesora/třídy........... 31 12.1.2 Úprava údajů třídních profesorů............ 31 12.2 Studenti.............................. 32 12.2.1 Přidávání studentů.................... 32 12.2.2 Úprava údajů studentů................. 32 12.2.3 Odstranení všech záznamů o studentech z dané třídy. 32 12.3 Školní rok............................. 32 12.3.1 Posunout třídy no nového školního roku........ 32 12.3.2 Posunout třídy do nového roku a ponechat 5. ročníky 33 12.3.3 Pouze smazat 5. ročníky a ponechat třídního profesora 33 12.4 Osobní nastavení......................... 33 IV Závěr 34 6
Část I Úvod Vážení čtenáři, v této práci bych rád představil svou aplikaci pro omlouvání absencí přes internet a ověření jejich odesílatele pomocí sms zpráv. Demoverzi práce najdete na adrese http://demo.absence.chlupac.com. Přihlašujte se s následujícími přihlašovacími údaji: student: xdemo00 zákonný zástupce: zdemo00 profesor: pdemo administrátor: admin Všichni uživatelé mají heslo demodemo. Databáze pro demoverzi se obnovuje každý den v 00:00. Odesílání sms zpráv je deaktivováno z finančních důvodů. 1 Jak to celé funguje? Členění Celý systém se člení na 4 základní části, a to na prostředí studenta, zákonného zástupce, profesora a administrátora. Přihlášení Každý uživatel dostane svoje přidělené uživatelské jméno a heslo. Tyto údaje zadá do formuláře a systém ověří, zda jsou v databázi. Pokud oba údaje souhlasí, systém ho přihlásí do prostředí, kam patří. Nastavení Všechny 4 prostředí mají společné nastavení uživatelského jména a hesla. Další nastavení se odvíjí podle toho, zda je přihlášen student, zákonný zástupce, prefosor nebo administrátor. Student Studentské rozhraní je velmi jednoduché. Student může pouze zobrazovat svůj seznam omluv, ale nemůže s nimi nijak manipulovat, od toho je tu zákonný zástupce. 7
Zákonný zástupce Zákonný zástupce má právo přidávat omluvy a ověřovat jejich pravost pomocí svého mobilního telefonu. Formulář pro omlouvání absence obsahuje několik polí, mimo jiné také seznam telefonních čísel, na které se po odeslání formuláře odešle sms kód pro ověření pravosti (pro odesílíní těchto kódů jsem využil placenou sms bránu sms.sluzba.cz). Po odeslání formuláře se uživatel octne na stránce, kam musí zadat přijatý sms kód. Pro vyšší bezpečnost jsem oba formuláře (pro omluvu a pro ověření sms kódu) zabezpečil nutností opsat kód z obrázku. Pokud ale uživatel nechce ověřovat pravost omluvy inhned, může tak učinit později, a pokud kód ztratí, může využít možnosti znovuodeslání kódu. V nastavení si zákonný zástupce může telefonní čísla změnit, ale jedno původní telefoní číslo musí použít k přijetí kontrolního kódu. Profesor Profesor musí každou absenci zaznamenat do papírové třídní knihy, proto se mu ihned po přihlášení zobrazí výpis nezaznamenaných (neověřených) omluv. Poté co omluvu zapíše do třídní knihy, klikne na zaznamenat a omluva se přesune do omluv zaznamenaných (ověřených). Profesor si může také zobrazit omluvy pouze u studenta, který ho zrovna zajímá. V nastavení má možnost přidávat, odstraňovat a upravovat záznamy o studentech (a jejich zákonných zástupcích) ve své třídě. Administrátor Administrátor může přidávat, upravovat a odstraňovat záznamy o všech profefesorech, studentech a jejich zákonných zástupcích a měl by mít oprávnění udělat všechny změny v databázi, které jsou pro jeho správu potřeba. Snažl jsem se, aby administrátor nemusel využít přímého přístupu do databáze. 8
2 Co jsem použil Ke své práci jsem využil mnoha jazyků a cizích kódů, které dále uvádím. PHP Ve své práci jsem použil programovací jazyk PHP. PHP je skriptovací programovací jazyk. Je určen pro tvorbu webových aplikací a je interpretován na straně serveru. CodeIgniter CodeIgntier je PHP framework, který obsahuje mnoho významných funkcí a zajišťuje celkovou strukturu webové aplikace, čímž mi značně ulehčil tvorbu celého projektu. Adresa oficiálních stránek je http://codeigniter.com. MySQL Mysql je software, který se stará o databáze. Javascript Javascript je multiplatformní, objektově orientovaný skriptovací jazyk, který jen na rozdíl od PHP interpretován na straně klienta. AJAX AJAX je obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačítání. JQuery JQuery je lehká javascriptová knihovna, která klade důraz na interakci mezi JavaScriptem a HTML. Nabízí třídy a funkce, které umožňují snažší práci s JavaScriptem. HTML HTML je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na internetu. CSS Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou CSS) je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. 9
Kalendář Pro svůj software jsem převzal kalendář, který je potřeba pro výběr data dané absence. Adresa oficiálních stránek je http://www.triconsole.com/php/calendar_datepicker.php Facebox Facebox je JQuery aplikace, která zobrazuje části stránky, jiné stránky nebo obrázky v okně v rámci jedné stránky. Recaptcha Recaptcha zajišťuje, aby formuláře nebyly odesílány za sebou případným útočníkem, který by chtěl aplikaci napadnout a to tak, že pro odeslání formuláře musí jeho odesílatel opsat krátký text z obrázku. 10
Část II Dokumentace aplikace 3 Struktura MySQL databáze Databáze obsahuje 5 tabulek: uzivatele, absence, telefony, hesla a telefonymodif. Uzivatele Do tabulky uzivatele se ukládají záznamy o uživatelích. Každý uživatel má svoje: id - identifikační číslo idstudenta - id studenta, ke kterému uživatel patří (pokud je student, je shodné s id, pokud je zákonný zástupce, je to id studenta, jehož je zástupcem) uzivatel - uživatelské jméno heslo - md5 hash hesla jmeno - Jméno prijmeni - Příjmení stat - obsahuje s, z, p nebo a. Označuje zda je uživatel student, zástupce, profesor nebo administrátor trida - do které třídy užvatel patří Absence Do tabulky absence se vkládají omluvy absencí. Obsahuje sloupce: id - identifikační číslo dané omluvy idstudenta - id studenta, ke kterému omluva patří datum - počáteční datum absence datum_kon - konečné datum absence duvod - důvod absence pocet - počet zameškaných hodin kod - ověřovací kód, který se pošle sms zprávou 11
overeno - 1 nebo NULL podle toho jestli zákonný zástupce absenci již ověřil opsáním sms kódu ucitelem - 1 nebo NULL podle toho, zda profesor absenci již zaznamenal do třídní knihy Telefony Tabulka telefony slouží pro ukládání telefoních čísel zákonných zástupců studentů. Obsahuje tyto sloupce: Hesla id - nabívá hodnot 1-3, protože maximální počet telefoních čísel na jednoho studenta je 3. idstudenta - id studenta ke kterému telefon patří cislo - telefoní číslo zákonného zástupce Tabulka hesel slouží k uchování dočasných hesel studentů a profesorů, dokud nejsou předány. Obsahuje položky: id - id uživatele, ke kterému heslo patří heslo - heslo v textové podobě, nikoli hash Telefonymodif Tabulka slouží k dočasnému uchování nových telefoních čísel, dokud zákonný zástupce neověří jejich pravost opsáním přijatého sms kódu. Tato tabulka obsahuje stejná pole jako telefony a kód. 4 Struktura aplikace Jak už bylo zmíněňo, strukturu aplikace zajišťuje už využitý framework. Vlastní aplikace obsahuhe několik adresářů. 4.1 Kořenový adresář V kořenovém adresáři aplikace je několik souborů. Popíšu jen ty důležité. Htaccess (.htaccess) zajišťuje, že se v adrese nezobrazuje index.php pomocí mod_rewrite. Tedy místo http://priklad.cz/index.php/polozka/polozka se zobrazuje http://priklad.cz/polozka/polozka. Index.php je součástí CodeIgniteru, neřeším tedy jak funguje. Recaptchalib.php obsahuje kód pro funkčnost recaptcha - popsano v úvodu. 12
4.2 Application V tomto adresáři jsou součásti aplikace, které patří do frameworku. Důležité jsou zejmnéna Config, Controllers, Viewers a Models. 4.2.1 Config Tato část obsahuje soubory pro konfiguraci webové aplikace. Důležité jsou soubory config.php, kde je obecné nastavení aplikace, database.php, kde je nastavení databáze. 4.2.2 Controllers V tomto adresáři jsou všechny soubory, které zajišťují funkčnost aplikace. Každý soubor obsahuje jednu třídu, která je potom obsažena v adrese jako první parametr. 4.2.3 Viewers Zde jsou všechny soubory, které se starají o to, jak bude každá stránka vypadat. 4.2.4 Models Pokud nechceme plýtvat místem v Controllers, můžeme si některé funkce nadefinovat v Models a tím zjednodušit orientaci v kódu. 4.3 Images Tento adresář obsahuje obrázky, některé scripty a kaskádové styly. Do adresáře images jsem je vkládal, aby byly ve stejném adresáři jako jsou obrázky jimi používané, a nemusely se tak hledat jinde. Navíc to také ulehčí práci s mod_rewrite. 4.4 Další adresáře Kořenový adresář obsahuje další adresáře: Calendar obsahuje soubory patřící ke kalendáři, smsgateapi_sluzba_cz obsahuje souboury pro odesílání sms pomocí brány sms.sluzba.cz. 5 Popis jednotlivých controllerů Ve framewroku Codeigniter se využíváají takzvané controllery a viewy. Co to znamená, jsem už střučně popsal v úvodu. Důležité je ještě uvést, že každý controller je vlastně třída obsahující funkce. Adresy webové aplikace pak vypadají takto: 13
http://priklad.cz/controller/funkce/(1. argument funkce)/ (2. argument funkce)/... 5.1 Controller student Controller student je velice jednoduchý. Obsahuje pouze 2 funkce, a to construct a index. Zdrojový kód tohoto controlleru sem pro názornou ukázku vkládám, protože je nejjednoduší. <?php if (! defined( BASEPATH )) exit( No direct script access allowed ); class Student extends CI_Controller { function construct() { parent:: construct(); $this->load->model( databaze,,true); $session_data = $this->session->userdata( logged_in ); if($session_data[ stat ]!="s"){redirect( login, refresh );} } function index() { $session_data = $this->session->userdata( logged_in ); $data[ db_overeno ]=$this->databaze-> get_absence_overene($session_data[ idstudenta ]); $data[ db_neovereno ]=$this->databaze-> get_absence_neoverene($session_data[ idstudenta ]); $this->load->view( student_vypis_view, $data); } }?> Construktor zajistí načtení modelu databaze, ve kterém jsem nadefinoval některé funkce. Dále zajistí načtení dat ze session a ověří, zda je přihlášený opravdu student. Pokud není, je uživatel přesměrován na login. Funkce index zajistí, že se do pole data vloží data z databáze. Konkrétně ověřené a neověřené omluvy. A nakonec načte viewer, který říká, jak se má obsah zobrazit. Jeho zdrojový kód také vkládám. <? $data[ menu ] = <ul id="menu"> <li><a href=". base_url("student"). ">Výpis omluv</a></li> <li><a href=". base_url("nastaveni"). ">Nastavení</a></li> </ul> ;?> <? $this->load->view( hlavicka_view, $data);?> <div id="case"> <div id="content"> <h1>výpis omluvenek</h1> <? $anone[ ] = <img src=. base_url( images/unchecked.png ). alt="ano"> ; $anone[ 1 ] = <img src=. base_url( images/checked.png ). alt="ano"> ;?> <table> 14
<tr><th>datum od</th><th>datum do</th><th>důvod</th> <th>počet</th><th>ověření</th><th>zaznamenáno</th></tr> <? foreach ($db_neovereno as $row):?> <tr ><td><?= $row->datum;?></td> <td><?= $row->datum_kon;?></td> <td><?= $row->duvod;?></td> <td><?= $row->pocet;?></td> <td><img src="<?= base_url( images/unchecked.png )?>" alt= NE ></td> <td><?= $anone[$row->ucitelem];?></td></tr> <? endforeach;?> <? foreach ($db_overeno as $row):?> <tr ><td><?= $row->datum;?></td> <td><?= $row->datum_kon;?></td> <td><?= $row->duvod;?></td> <td><?= $row->pocet;?></td> <td><img src="<?= base_url( images/checked.png )?>" alt= ANO ></td> <td><?= $anone[$row->ucitelem];?></td></tr> <? endforeach;?> </table> </div> <div id="side"> <h2>rychlá nápověda</h2> <p>na této stránce je výpis omluv. Absence může omlouvat pouze zákonný zástupce.</p> </div> </div> <? $this->load->view( foot_view );?> Nejprve tedy nastavíme menu a odešleme ho do vieweru, který zobrazí hlavičku stránky. Funce base_url zajistí, že se před její argument vloží úplná adresa na danou stránku, tedy v případě base_url("student") vrátí http://adresa.aplikace/student. Jak je vidět, ve vieweru se to, co se odeslalo v poli data, používá už bez pole přímo jako proměnná. Uvnitř jednotlivých viewerů můžeme volat další viewery. Tuto možnost využívám k tomu, abych pokaždé nemuzel opisovat hlavičku a patičku stránky. Dále nastavím hodnoty v poli anone, aby se zobrazoval buďto křížek, nebo zatržítko, kde je omluva ověřená nebo neověřená. A potom pomocí funkce foreach z obsah proměné db_neovereno a db_overeno, kterou jsem naplnil v controlleru, vypisuji jednotlivá data do tabulky. Ve výsledku tedy stránka vypadá takto: 15
$apipost->set_text("autorizacni kod pro vasi omluvenku je $kod"); $apipost->send(); } Jak je vidět, je to velice jednoduchý způsob, jak odesílat sms přes internet. 5.3 Další controllery Systém obshuje také další controllery, ale vzhledem k tomu, že se v nich využívají podobné funkce jako ve dvou zmíněných controllerech, je tu nebudu popisovat, ale raději popíšu, jak se v kódu co nejrychleji zorientovat. 6 Orientace v kódu Nejprve je potřeba si uvědomit, co presně chci upravovat, a zjistit, který controller, který najdu v adresáři application/controllers, tomu odpovídá. Jak už bylo uvedeno adresa je tvořena takto: http://priklad.cz/controller/funkce. Takže: otevřu si daný controller a najdu funkci, kterou chci upravit. Pokud nenajdu to, co hledám, v controlleru, pravděpodobně to najdu ve viewu, který se volá pomocí $this->load->view("nazev", $data); Volaný view najdu v adresáři application/views. V rámci těchto viewů někdy volám další viewy, nejčasteji hlavicka_view a foot_view, které obsahují hlavi čku a patičku stránky. Pokud controller obsahuje nějakou funkci, která není popsána v oficiální dokumentaci CodeIgniteru, pravděpodobně patří do nějakého mnou vytvořeného modelu. Tyto modely najdu v adresáři application/models. 7 Vzhled aplikace Vzhled aplikace je vytvořen pomocí HTML a css. Celý vzhled je vytvořen velmi jednoduše. Je tvořen z hlavičky stánky, místa pro samotný obsah stránky, bočního panelu a patičky stránky. Vzhled jsem se snail udělat tak, aby byl co nejvíce příjemný a co možná nejjednodušší. Cesta k souboru.css je images/style.css. 19
pro přidávání. Tato nastavení jsou natolik intuitivní, že nemá smysl je více popisovat. 12.2 Studenti Pro editaci záznamů studentů vyberte v menu položku studenti. Pod nadpisem vyberte třídu, kterou chcete zobrazit, a do které chcete přidávat studenty. 12.2.1 Přidávání studentů Pro přidání studenta vyplňte formulář a stiskněte tlačítko přidat. Se záznamem studenta se vytvoří i záznam jeho zákonného zástupce. Student se přidá do třídy, která je momentálně vybrána. Pod seznamem studentů je možnost tisk, tuto možnost použijte pro předání přihlašovacích údajů studentům a jejich zákonným zástupcům. Po předání údajů prosím použijte možnost "Odsranit dočasná hesla", aby se v databázi neuchovávala hesla studentů v textové podobě (nikoli jako otisk). 12.2.2 Úprava údajů studentů Administrátor může upravovat záznamy studentů. V seznamu studentů naleznete možnost upravit, odstranit a resetovat heslo. Pokud budete resetovat heslo, systém se zeptá, zda heslo resetovat studentovi nebo zákonému zástupci. 12.2.3 Odstranení všech záznamů o studentech z dané třídy Pro odstranění všech záznamů o studenech a jejich zákonných zástupcích z určité třídy klikněte na odkaz "Odstranit všechny studenty třídy..."pod seznamem studentů. 12.3 Školní rok V položce školní rok naleznete funkce, které nejspíš využijete, když se mění školní rok. Položka obsahuje 3 funkce. 12.3.1 Posunout třídy no nového školního roku Tato možnost zvýší indexy u tříd o 1 a páté ročníky ostraní. Pokud máme například třídu 1B, systém ji změní na 2B. Pokud je v systému třída 4A, systém záznamy studentů takové třídy odstraní a třídní profesor zůstane v systému se třídou 5A. 32
12.3.2 Posunout třídy do nového roku a ponechat 5. ročníky Tato možnost se chová stejně jako možnost předchozí s rozdílem, že ponechá studenty 5. ročníků v systému. 12.3.3 Pouze smazat 5. ročníky a ponechat třídního profesora Tato možnost pouze smaže záznamy o studentech 5. ročníků, s indexy u tříd nijak nemanipuluje. 12.4 Osobní nastavení V osobním nastavení si může administrátor nastavovat svoje uživatelské jméno a heslo. 33
Část IV Závěr Ve svém práci jsem se snažil vyřešit problém omlouvání absencí pomocí webové aplikace a věřím, že se mi to do jisté míry podařilo. Věřím, že jednou bude většina středních i základních škol využívat pro omlouvání absencí tento nebo podobný systém. Nedostatky této práce vidím hlavně v tom, že sms zprávy, bez kterých se systém neobejde, jsou zpoplatněné, a tak by přibyl školám výdaj navíc, na druhou stranu je systém ekologičtější než klasické omluvenky na papír a řekl bych, že je i stejně bezpečný. Do budoucna bych chtěl systém rozšířit o další funkce jako zapisování známek nebo rozvrhy, aby byl systém jednotný pro všechny úkony, které běžná škola potřebuje. Reference [1] Framework CodeIgniter http://www.codeigniter.com [2] Kalendár pro výběr data absence http://www.triconsole.com/php/calendar_datepicker.php [3] Facebox http://defunkt.io/facebox/ [4] Recaptcha http://www.google.com/recaptcha [5] jquery - knihovna pro zjednodušení JavaScriptu a AJAXu http://jquery.com/ [6] API pro odesílání sms zpráv http://sms.sluzba.cz/ [7] Wikipedia - pro popis, toho, co jsem použil http://cs.wikipedia.org/ 34