Administrátorské prostredie rozvrhu FM

Obsah práce

1.	Popis systémov pre tvorbu rozvrhu
2.	Návrh systému rozvrhu pre FM TnU AD
3.	Administrátorské prostredie rozvrhu FM

Grafický návrh administrátorského prostredia

Pri návrhu používateľského rozhrania sa snažím o maximálny komfort, prehľadnosť a intuitívnosť ovládania. Pomáha mi pri tom hlavne používanie grafických prvkov a implementovanie funkcionalít, na ktoré sú používatelia internetových aplikácií zvyknutí a očakávajú ich, napr. presúvanie objektov, zmazanie objektu po presunutí do koša, zobrazenie dodatočných informácií o objekte pri presunutí kurzoru nad daný objekt atď. Na zabezpečenie takýchto funkcií na internetových stránkach sa používa JavaScript. Keďže je mnou navrhované prostredie pomerne dosť dynamické, potrebuje veľké množstvo JavaScriptového kódu. To by sa mohlo prejaviť na plynulosti behu aplikácie. Preto program testujem na posledných verziách všetkých majoritných internetových prehliadačoch: Firefox, Opera, Internet Explorer a Chrome. K zrýchleniu behu JavaScriptového kódu pomáha tiež použitie knižnice jQuery, ktorá je výborne optimalizovaná.

Ďalším problémom, ktorý pri použití JavaScriptu môže nastať je, že v prípade, že ho má používateľ vypnutý, sa aplikácia stane nepoužiteľnou. Bežným zvykom pri tvorbe internetových stránok je preto snaha písať kód stránky tak, aby bola zabezpečená aspoň jej základná funkčnosť aj pri vypnutom JavaScripte. Avšak keďže náš systém bude používať iba jeden používateľ, ktorý bude o nutnosti mať zapnutý JavaScript upozornený, nebudem tieto opatrenia do kódu stránky vkladať.

Súbor:Mpbc1.6.jpg

Obr. 2.2 Administrátorské prostredie aplikácie

Na Obr. 2.2 je znázornená súčasná podoba administrátorskej časti systému. Aj keď tento návrh nie je konečný a pravdepodobne sa bude meniť s pribúdajúcimi funkciami aplikácie, rozloženie hlavných ovládacích prvkov by už radikálnou zmenou prejsť nemalo.

Hlavné menu

Na vrchu stránky sa nachádza hlavné menu (Obr. 2.3). Jedná sa o tzv. drop-down menu – viacúrovňové menu ovládané pomocou JavaScriptu, ktorého ďalšia úroveň sa zobrazí po prechode kurzoru nad nadradenou úrovňou.

Súbor:Mpbc1.7.jpg

Obr. 2.3 Hlavné menu

Položky menu budú obsahovať odkazy na takmer všetky funkcie aplikácie, napr.: práca s archívom rozvrhu, správa predmetov, správa vyučujúcich atď.

Zoznam priradených predmetov

Tento zoznam (Obr. 2.4) je tvorený tabuľkou, ktorá obsahuje všetky predmety s určeným časom a učebňou. Stĺpec tabuľky určuje hodinu, riadok učebňu, v ktorej sa výučba koná. Každý riadok učebne je rozdelený na dve polovice, horná časť znamená párny týždeň, spodná časť nepárny. Ak sa výučba opakuje každý týždeň, hodina presahuje obe polovice. Obsah bunky tabuľky tvorí skratka vyučovaného predmetu a skratka vyučujúceho v hornej časti a zoznam krúžkov, ktorých sa výučba týka, v dolnej časti. V prípade prednášok, ktoré platia pre všetky krúžky v danom odbore a ročníku, sa v spodnej časti bunky nachádza písmeno P.

Nad tabuľkou sa nachádzajú záložky, na prepínanie dní. Pre každý deň je vytvorená samostatná tabuľka, pričom je zobrazená vždy len tabuľka prislúchajúca k aktuálne vybratému dňu. Záložkou napravo sa prepína do správy rozvrhu externých študentov, ktorá bude mať iné prostredie.

Súbor:Mpbc1.8.jpg

Obr. 2.4 Zoznam priradených predmetov

Zoznam nepriradených predmetov

Zoznam nepriradených predmetov (Obr. 2.5) obsahuje bloky vyučovacích hodín, ktoré boli do systému pridané, ale ešte nebola určená ich hodina a miestnosť výučby. Pri vstupe do administrátorského prostredia sa nachádza v ľavom dolnom rohu obrazovky. Jeho pozícia je daná fixne, to znamená, že pri rolovaní stránky zostáva zoznam na mieste. Dá sa však presúvať uchopením za hornú časť. V spodnej časti sa nachádza zoznam odborov a ich ročníkov. Farba položiek korešponduje s farebným označením buniek v tabuľke priradených predmetov. V hornej časti sa nachádza zoznam predmetov, ktoré sú k vybranému odboru a ročníku pridelené. Jednotlivé predmety sú tvorené systémom záložiek podobne ako prepínanie dní v zozname priradených predmetov.

Súbor:Mpbc1.9.jpg

Obr. 2.5 Zoznam nepriradených predmetov minimalizovaný

Súbor:Mpbc1.10.jpg

Obr. 2.6 Detaily nepriradených predmetov

Kvôli veľkosti zoznamu som sa rozhodol pridať funkciu minimalizácie a maximalizácie, takže po vybratí predmetu sa zobrazí stredná časť (Obr. 2.6), v ktorej sa nachádzajú jednotlivé nepriradené hodiny. Naľavo sú typy predmetov, napravo je zoznam krúžkov vo vybratom odbore a ročníku. Tieto prvky sú taktiež tvorené systémom záložiek, aj keď pri nich som na rozdiel od ostatných záložiek nemohol použiť hotový systém z knižnice jQuery UI kvôli ich vertikálnej polohe. V prípade, že sa vyberie typ predmetu prednáška, zoznam krúžkov sa skryje, pretože prednášky sa pridávajú pre všetky krúžky naraz. Medzi typmi predmetov a krúžkami sa nachádzajú jednotlivé nepriradené predmety rozdelené podľa dĺžky výučby.

Prvky označené veľkým plus slúžia na rýchle pridanie položky daného typu (predmetu, krúžku, nepriradenej hodiny). Po kliknutí na vybratý predmet sa stredná časť skryje a tým sa zoznam minimalizuje.

Kôš

Kôš (Obr. 2.7) slúži na vymazávanie položiek rozvrhu. Nachádza sa v pravom dolnom rohu obrazovky a podobne ako zoznam nepriradených predmetov sa dá presunúť uchopením a potiahnutím. Po presunutí prvku nad kôš (Obr. 2.8) a uvoľnení myši JavaScript automaticky rozpozná typ prvku a odošle požiadavku príslušnému PHP skriptu. Typ prvku sa rozpozná podľa triedy, ktorú obsahuje. Medzi prvky, ktoré sa budú dať takýmto spôsobom vymazať zo systému, patrí: priradený predmet, nepriradený predmet, predmet zo zoznamu predmetov odboru a ročníku, krúžok.

Obr. 2.7 Kôš

Obr. 2.8 Kôš po presunutí prvku

Naprogramované funkcie

Zatiaľ sú naprogramované iba základné funkcie potrebné pre vykreslenie administrátorského prostredia. Nasleduje ich zoznam a popis.

Bootstrap

Pri používaní ZF sa stránky nazývajú kontroléry (controller) a ich podstránky akcie (action), takže každý kontrolér môže obsahovať niekoľko akcií. Kontrolér je reprezentovaný triedou a akcie kontroléru jeho metódami. Pre správnu funkčnosť ZF musí byť každá požiadavka na stránku na serveri vnútorne presmerovaná na súbor, ktorý sa nazýva bootstrap. Pre toto presmerovanie sa používa mod_rewrite, ktorý musí byť na serveri nainštalovaný a povolený a príslušný kód v súbore .htaccess (Kód 2.1).

Kód 2.1

Options +FollowSymlinks
RewriteEngine on
RewriteRule !\.(js|gif|jpg|png|css)$ index.php

V bootstrape sa inicializuje ZF trieda Zend_Controller_Front, ktorá podľa tvaru adresy zaistí vyvolanie správneho kontroléru a akcie. Adresa má pritom tvar:

protokol://doména/názov_kontroléru/názov_akcie/

Po názvu akcie môžu v adrese nasledovať premenné poslané metódou GET a to buď klasickým štýlom

?premenna1=hodnota1&premenna2=hodnota2

alebo štýlom SEF URL

premenna1/hodnota1/premenna2/hodnota2

Okrem toho sa do bootstrapu vkladá kód, ktorý sa musí vykonať pri návšteve každej stránky, napr. nastavenie PHP prostredia, inicializácia sessions, pripojenie k databáze, atď.

Prihlásenie do systému

Pre prihlásenie do systému slúži jednoduchý HTML formulár. Na vytváranie formulárov v ZF existuje trieda Zend_Form, ktorá obsahuje metódy na vytváranie všetkých bežných prvkov formulára. Prvkom sa dajú okrem klasických atribútov priradiť tiež rôzne filtre, podľa ktorých trieda označí formulár ako správne alebo nesprávne vyplnený po jeho odoslaní.

Metóda pre kontrolu odoslaných údajov checkForm() (Kód 2.2) sa nachádza v triede adminLogin a prijíma dva parametre: $login a $password, ktoré obsahujú odoslané prihlasovacie meno a heslo. Zisťuje sa, či bol formulár odoslaný metódou POST. Kontroluje správnosť údajov podľa filtrov pridelených k daným prvkom formulára. Následne sa porovnávajú údaje so správnymi prihlasovacími údajmi. Ako som už spomínal v podkapitole 2.1.3, vzhľadom k tomu, že do systému bude mať prístup iba veľmi malé množstvo používateľov, sú správne prihlasovacie údaje uložené ako konštanty triedy obsluhujúcej prihlasovanie. Ak bolo zadané prihlasovacie meno a heslo správne, nastaví sa session s informáciou o stave prihlásenia na hodnotu true. Inak sa označí prvok formulára pre heslo ako nesprávne vyplnené a pridá sa chybová správa. Metóda má návratovú hodnotu buď true – pravda, keď prihlásenie prebehlo úspešne, alebo false – nepravda, keď prihlásenie úspešné nebolo. V tom prípade sa znovu zobrazí prihlasovací formulár spolu s chybou, prečo sa prihlásenie nepodarilo.

Kód 2.2

public function checkForm($login, $password)
{
    if(false == $this->_controller->getRequest()->isPost()) {
        return false;
    }

    if(true == $this->getForm()->isValid($_POST)) {
        if(self::LOGIN === $login && self::PASSWORD === $password) {
            Zend_Registry::get('sessions')->logged = true;
            return true;
        } else {
            $this->_form->getElement('password')->addError('Nesprávny login alebo heslo!');
        }
    }

    return false;
}

To, či je používateľ prihlásený alebo nie, sa kontroluje pri každom prístupe do administrátorského prostredia. Ak používateľ nie je prihlásený a zadá adresu inú ako na stránku s prihlasovacím formulárom, bude na túto stránku presmerovaný. Naopak, ak používateľ prihlásený je, ale zadá adresu na prihlasovaciu stránku, bude presmerovaný na stránku s administračným prostredím. Na túto stránku bude prihlásený používateľ presmerovaný aj pri pokuse o priamy vstup na akúkoľvek inú stránku administrácie, pretože tieto stránky sú prístupné iba cez AJAX. Prístup cez AJAX sa zisťuje prítomnosťou hlavičky X-Requested-With. Táto kontrola sa vykonáva v metóde preDispatch() (Kód 2.3) kontroléra AdminController. To, že je táto metóda volaná pri každom prístupe k danému kontroléru zabezpečuje ZF.

Kód 2.3

public function preDispatch()
{
    $this->_sessions = Zend_Registry::get('sessions');
    $action = $this->getRequest()->getActionName();

    if(!$this->_sessions->logged && $action != 'login') {
        $this->_redirect('admin/login', array('exit' => true));
    } else if($this->_sessions->logged && $action == 'login') {
        $this->_redirect('admin/index', array('exit' => true));
    } else if($action != 'login' && $action != 'index') {
        $http = new Zend_Controller_Request_Http();

        if($action != 'logout' && !$http->isXmlHttpRequest()) {
            $this->_redirect('admin/index', array('exit' => true));
        }
    }

    $this->view->addHelperPath('./application/views/helpers', 'Views_Helpers');
}

Hlavné menu

Pre vytvorenie a prácu s hlavným menu som si vytvoril triedu My_MainMenu, ktorej konštruktor prijíma ako parameter mnohorozmerné pole s presne určenou štruktúrou (Kód 2.4), ktoré reprezentuje dané menu.

Kód 2.4

array(
    array(
        'label'  => 'Rozvrh',
        'js'     => 'rozvrh'[,
        ['style' => 'float:right;',]
            ['sub'   => array(...)]]
    )
    [, array(...)]
);

label

zobrazovaný text položky menu

js

identifikátor položky menu pre JavaScript. Identifikátory nižších úrovní menu sa reťazia s použitím oddeľovača –

style (nepovinné)

CSS vlastnosti danej položky. Tento atribút som pridal kvôli položke Odhlásiť sa, ktorá je od ostatných položiek opticky oddelená

sub (nepovinné)

zoznam položiek nižšej úrovne

Trieda obsahuje magickú metódu __toString(), ktorá volá metódu na vykreslenie menu automaticky pri pokuse o vypísanie premennej, ktorá inštanciu triedy obsahuje.

Ostatné ovládacie prvky

Pre vykreslenie ostatných ovládacích prvkov potrebujem z databázy vybrať viaceré údaje: študentské kombinácie a krúžky, miestnosti, typy predmetov, názvy predmetov a vyučujúcich priradených k predmetom, určené predmety, neurčené predmety, informácie o vyučujúcich. Tieto údaje vyberám v triede adminIndex. Na prácu s databázou používam ZF triedu Zend_Db a po vybratí údajov ich triedim a ukladám do poľa kvôli ľahšej práci s nimi.

Príklad metódy na výber priradených predmetov:

Kód 2.5

public function gAddedSubjects()
{
    $select = $this->_db->select()
        ->from(array('tt' => T_TTABLE),
            array('id', 'provides', 'week', 'day', 'hour', 'note', 'room' => 'rozvrh_room_id'))
        ->join(array('si' => T_SUBITEMS),
            'tt.rozvrh_subjectItem_id = si.id',
            array('hours', 'subject' => 'rozvrh_subject_id', 'type' => 'rozvrh_subjectType_id', 'subclass' => 'rozvrh_subclass_id'))
        ->joinLeft(array('t' => T_TEACH),
            'tt.rozvrh_teacher_id = t.id',
            array('teacher' => 'eval_user_id'))
        ->join(array('s' => T_SUB),
            'si.rozvrh_subject_id = s.id',
            array('comb' => 'rozvrh_combination_id'));

    $result = $this->_db->fetchAll($select);
    $return = array();

    foreach($result as $row) {
        if(!isset($return[$row['room']][$row['day']][$row['week']][$row['hour']])) {
            $return[$row['room']][$row['day']][$row['week']][$row['hour']] = array(
                'provides'   => $row['provides'],
                'hours'      => $row['hours'],
                'teacher'    => $row['teacher'],
                'subject'    => $row['subject'],
                'comb'       => $row['comb'],
                'type'       => $row['type'],
                'note'       => $row['note'],
                'subclasses' => array()
            );
        }

        $return[$row['room']][$row['day']][$row['week']][$row['hour']]['subclasses'][$row['subclass']] = $row['id'];
    }

    return $return;
}

T_TTABLE, T_SUBITEMS, T_TEACH a T_SUB sú konštanty reprezentujúce názvy tabuliek v databáze. Tieto konštanty sú definované v samostatnom súbore tables.php, ktorý sa nachádza v konfiguračnom priečinku aplikácie.

T_TTABLE

rozvrh_timetable

T_SUBITEMS

rozvrh_subjectitems

T_TEACH

rozvrh_teachers

T_SUB

rozvrh_subjects

$this->_db je objekt triedy Zend_Db. Táto trieda obsahuje metódy pre prácu s databázou. Zoznam a význam niektorých metód:

select()

vytvára objekt Zend_Db_Select pre vytvorenie dotazu na databázu typu SELECT

from($table, $columns)

FROM časť dotazu
$table - názov tabuľky. Môže byť typu string alebo array. V prípade typu array kľúč označuje alias tabuľky a hodnota názov tabuľky
$columns - zoznam stĺpcov, ktoré sa majú vybrať. Môže byť typu string alebo array. V prípade array môže byť pole asociatívne alebo číselné. Ak je pole asociatívne, kľúč znamená alias stĺpca

join($table, $condition, $columns), joinLeft($table, $condition, $columns)

INNER JOIN, JOIN LEFT časť dotazu
$table - ako vo from()
$condition - podmienka spájania výsledkov
$columns - ako vo from()

fetchAll($select)

metóda vracia všetky záznamy vrátené databázou. Formát vrátených údajov sa dá nastaviť metódou setFetchMode(). Prednastavený formát je poľe
$select - dotaz, ktorý sa má vykonať. Môže byť typu string alebo objekt Zend_Db_Select

Po vybratí údajov z databázy sa výsledky ukladajú do poľa $return (Kód 2.6) v novom poradí v cykle foreach.

Kód 2.6

array(
    T_TTABLE.rozvrh_room_id => array(
        T_TTABLE.day => array(
            T_TTABLE.week => array(
                T_TTABLE.hour => array(
                    'provides'   => T_TTABLE.provides,
                    'hours'      => T_SUBITEMS.hours,
                    'teacher'    => T_TEACH.eval_user_id,
                    'subject'    => T_SUBITEMS.rozvrh_subject_id,
                    'comb'       => T_SUB.rozvrh_combination_id,
                    'type'       => T_SUBITEMS.rozvrh_subjectType_id,
                    'note'       => T_TTABLE.note,
                    'subclasses' => array(
                        T_SUBITEMS.rozvrh_subclass_id => T_TTABLE.id
                    )
                )
            )
        )
    )
)

Tieto mnohorozmerné polia posúva kontrolér skriptu, ktorý sa stará o vykresľovanie stránky. V tomto skripte sa postupným prechádzaním polí vytvárajú jednotlivé ovládacie prvky.

Keďže na vykreslenie niektorých prvkov využívam JavaScript, musím tieto polia s údajmi vložiť aj do jeho kódu (Kód 2.7). Na túto úlohu sa používa JSON, formát pre prenos dát z jedného programovacieho jazyka do druhého. Premenná akéhokoľvek typu zakódovaná do formátu JSON je reťazec s pevne danou štruktúrou, z ktorého vie prijímajúci jazyk vytvoriť premennú rovnakého typu. Ak požadovaný typ v jazyku neexistuje, použije sa ekvivalentný typ s vlastnosťami čo najviac podobnými pôvodnému typu.

Kód 2.7

<script type="text/javascript">
    var subjects_added = eval(<?php echo json_encode($this->sub_added);?>);
</script>

Záver

V práci som opísal systémy pre tvorbu rozvrhu. Najskôr som všeobecne načrtol problémy, s ktorým musí programátor pri návrhu aplikácie slúžiacej na tvorbu rozvrhu čeliť. Uviedol som príklady existujúcich programov a popísal som ich klady a nedostatky. V druhej časti som sa zameral na návrh takejto aplikácie pre FM TnU AD. Najskôr som zhrnul prípravné práce, ktoré som musel vykonať pred samotným vytváraním systému. Navrhol som štruktúru tabuliek v databáze, určil som bezpečnostnú politiku aplikácie, vybral som programovacie jazyky. V praktickej časti som následne popísal funkcie a výzor grafických ovládacích prvkov administrátorského prostredia. Taktiež som poskytol niektoré hlavné časti zdrojového kódu spolu s ich popisom. Aj napriek mojej veľkej snahe zabezpečiť aspoň základné funkcie, ktoré sú pri tvorbe rozvrhu nevyhnutné, sa mi tento cieľ doposiaľ nepodarilo splniť do odovzdania tejto práce. V aplikácií plánujem doprogramovať minimálne tieto funkcie:

• pridávanie predmetov a krúžkov zvolenému študijnému odboru a ročníku
• pridávanie blokov nepriradených hodín
• presunutie hodiny zo zoznamu nepriradených hodín do tabuľky priradených hodín metódou presunutia myšou na želané miesto v rozvrhu
• úprava zadaných údajov, obmedzení vyučujúcich
• mazanie položiek rozvrhu metódou presunutia myšou nad prvok kôš
• vytvorenie tabuľkového náhľadu na vytvorený rozvrh s možnosťou filtrovania údajov
• vytváranie rozvrhu pre externých študentov

Okrem toho aplikácia bude musieť vykazovať pri mnohých akciách administrátora určité známky inteligencie a automatizácie, hlavne pri pridávaná predmetov do tabuľky priradených hodín.

Bibliografia

1. RNDr. Červený, Ľubomír. [Online] 2008. [Dátum: 3. 1 2010.] http://www.cerveny.sk/.
2. Daňko, Marek. Portál AiS2'. [Online] 2009. [Dátum: 3. 1 2010.] http://www.ais2.sk/xwiki/bin/view/Domov/.
3. Wikipédia, prispievatelia. Hypertext markup language. Wikipédia, Slobodná encyklopédia. [Online] 2010. [Dátum: 8. 1 2010.] http://sk.wikipedia.org/wiki/Hypertext_markup_language.
4. World Wide Web Consortium. W3C. [Online] 2010. [Dátum: 4. 1 2010.] http://www.w3.org/.
5. Wikipédia, prispievatelia. JavaScript. Wikipédia, Slobodná encyklopédia. [Online] 2010. [Dátum: 8. 1 2010.] http://sk.wikipedia.org/wiki/JavaScript.
6. jQuery Team. jQuery JavaScript Library. [Online] 2010. [Dátum: 5. 1 2010.] http://jquery.com/.
7. The PHP Group. PHP: Hypertext Preprocessor. [Online] 2010. [Dátum: 5. 1 2010.] http://php.net/index.php.
8. Zend Technologies Ltd. ZF - Zend Framework. [Online] 2010. [Dátum: 5. 12 2010.] http://framework.zend.com/.
9. Refsnes Data. W3Schools. [Online] 2010. [Dátum: 5. 1 2010.] http://www.w3schools.com/Ajax/Default.Asp.
10. Sun Microsystems, Inc. MySQL. [Online] 2010. [Dátum: 6. 1 2010.] http://www.mysql.com/.
11. JSON. [Online] 2009. [Dátum: 6. 1 2010.] http://www.json.org/.