Návrh používateľského rozhrania rozvrhu FM TnUAD
| 1. | Štruktúra webovej aplikácie |
| 2. | Technológie off-line web aplikácií |
| 3. | Systémy na vizualizáciu rozvrhu hodín |
| 4. | Návrh používateľského rozhrania rozvrhu FM TnUAD
|
Obsah
Používateľské rozhranie rozvrhu fakulty mechatroniky
Úlohou tejto semestrálnej práce je navrhnúť front-end rozvrhu fakulty mechatroniky. To znamená užívateľské prostredie, ktoré bude dostatočne prehľadné a jednoduché.
Grafický návrh front-endu
Grafický návrh prezentačnej vrstvy veľmi dôležitý, pretože je tvorí časť s ktorou je užívateľ priamo konfrontovaný. Cieľom rozvrhnutia jednotlivých častí (Obr. 5.1) je, aby sa zobrazila čo najväčšia časť výpisu tabuľky rozvrhu bez nutnosti scrollovania. Oproti súčasnej verzií pribudne niekoľko panelov. Vrchný panel bude zobrazovať dátum poslednej aktualizácie a on-line/off-line režim v akom sa nachádzate. Ten však bude zobrazovaný len v prípade, že budete mať nainštalované rozšírenie Google Gears na podporu off-line aplikácií. Z formulára na výber jednotlivých parametrov pre filtrovanie sme odstránili niekoľko prvkov formulára, ktoré neboli dôležité a ostali iba prvky na výber krúžku, predmetu, vyučujúceho a miestnosti. V pravej časti pribudne panel na zobrazovanie informácií o zmene v rozvrhu. Pod ním je panel odkazov na export rozvrhu do rôznych formátov a ponuka inštalácie rozšírenia Google Gears.
Obr. 5.1 Návrh prezentačnej vrstvy rozvrhu
Najdôležitejšou časťou je zobrazenie samotnej tabuľky rozvrhu. Oproti súčasnej verzií (Obr. 4.2) je do návrhu novej tabuľky rozvrhu (Obr. 5.2) pridaná vodorovná časová os. Každý ďalší riadok tabuľky reprezentuje deň v týždni a zobrazuje predmety ktoré do neho patria. V prípade, že sa predmet koná len v nepárny týždeň, rozdelí sa riadok na dva riadky. Tie potom reprezentujú párny a nepárny týždeň. Prednáška je označená modrou, cvičenie červenou a laboratória zelenou farbou. Každá takáto farebná bunka obsahuje názov predmetu, meno vyučujúceho a miestnosť, kde sa vyučovanie koná. Nasledovným rozvrhnutím tabuľky rozvrhu sme zobrazili potrebné údaje a zlepšili prehľadnosť odstránením prebytočných údajov.
Obr. 5.2 Návrh novej tabuľky rozvrhu
Realizácia front-endu
Pri realizácií front-endu rozvrhu fakulty mechatroniky som použil knižnicu ZEND framework.
Príprava dát pre formulár
Formulár slúži výber jednotlivých parametrov, podľa ktorých sa budú filtrovať dáta z databázy. Následne sa zobrazí tabuľka zodpovedajúca týmto dátam. Výpis rozvrhu sa dá filtrovať podľa názvu krúžku, predmetu, mena vyučujúceho a učebne. Zoznam všetkých možností výberu jednotlivých parametrov sa načíta z pohľadov databázy rozvrh_view a rozvrh_view_extern. Formulár nezobrazí prvky výberu, ktoré síce v databáze existujú, ale nie sú zaradené do aktuálne vytvoreného rozvrhu. To znamená, že vo formulári bude chýbať napr. predmet Matematika I. v prípade, ak nebude mať pridelený aspoň jeden krúžok. Potom by bol tento predmet ako možnosť parametra predmet zbytočný.
Výber údajov z databázy zabezpečuje trieda indexSearch, ktorá je model používaný v kontroléry indexController. Tento kontrolér obsluhuje celý front-end. Výber jednotlivých parametrov má veľmi podobný SQL dotaz, ktorý sa líši iba názvami vyberaných stĺpcov. Preto bola vytvorená metóda bothViewsSelect, ktorá vyberá údaje z oboch pohľadov.
Kód 5.1 Metóda bothViewsSelect' triedy indexSearch
private function bothViewsSelect(array $columns, $cmp = null, array $where = array())
{
$types = array('D' => T_VIEW, 'E' => T_VIEW_E);
$union = array();
foreach($types as $type => $table) {
$select = $this->_db->select()
->distinct()
->from($table, $columns);
foreach($where as $wh) {
$select->where($wh);
}
$union[] = $select;
}
$select = $this->_db->select()->union($union);
$data = $this->_db->fetchAll($select);
if($cmp !== null) {
usort($data, $cmp);
}
return $data;
}
Metóda bothViewsSelect má nasledovné parameter:
- $columns – pole stĺpcov, ktoré sa majú z databázy vybrať
- $cmp – obsahuje názov porovnávacej funkcie, podľa ktorej sa majú výsledky zoradiť, v opačnom prípadne má hodnotu null
- $where – pole podmienok dotazu
Najskôr sa pre každý pohľad vytvorí SELECT dotaz podľa parametrov metódy zvlášť. Následne sa tieto dotazy spoja SQL príkazom UNION(), ktorý zabezpečí, že vyberú iba rozdielne dáta. Výber dát z databázy vykonáva metóda fetchAll() triedy Zend_Db_Select. Ak parameter $cmp obsahuje názov porovnávacej funkcie, zavolá sa funkcia usort(). Tá má parameter $data, ktorý obsahuje výsledky dotazu a samotný parameter $cmp. Zoradí pole $data podľa názvu funkcie uloženého v reťazci $cmp.
Kód 5.2 Príklad funkcia na porovnanie vyučujúcich
function cmp_teachers($a, $b)
{
if($a['priezvisko'] == $b['priezvisko']) {
return ($a['meno'] < $b['meno']) ? -1 : 1;
} else {
return ($a['priezvisko'] < $b['priezvisko']) ? -1 : 1;
}
}
Funkcia na porovnanie vyučujúcich porovnáva najskôr podľa priezviska, v prípade zhody sa porovnáva podľa mena.
Kód 5.3 Príklad použitia metódy bothViewsSelect na výber vyučujúcich
public function getUsers()
{
return $this->bothViewsSelect(
array('meno', 'priezvisko', 'tituly', 'user_id'),
'cmp_teachers'
);
}
Výber dát z databázy podľa zvolených parametrov
Metóda getTTable získa z databázy všetky potrebné dáta podľa zadaných parametrov z formulára a pripraví ich pre pomocnú triedu TimetableRenderer, ktorá sa stará o vykresľovanie tabuľky rozvrhu.
Kód 5.4 Metóda getTTable
public function getTTable($params)
{
$return = array('D' => array(), 'E' => array());
$where = array();
if($params['subclass']) {
$branch_num = substr($params['subclass'], 1, 1);
$year = substr($params['subclass'], 2, 1);
$sign = substr($params['subclass'], 3);
$where[] = $this->_db->quoteInto('branch_num = ?', (int)$branch_num);
$where[] = $this->_db->quoteInto('year = ?', (int)$year);
$where[] = $this->_db->quoteInto('subclass_sign IS NULL OR subclass_sign = ?', $sign);
}
Ak bol zadaný parameter krúžok získame z neho jednotlivé údaje o číselnom označení odboru, ročníka a krúžku. Tieto údaje potom vložíme do poľa podmienok $where.
if($params['room']) {
$where[] = $this->_db->quoteInto('room_id = ?', (int)$params['room']);
}
if($params['teacher']) {
$where[] = $this->_db->quoteInto('user_id = ?', (int)$params['teacher']);
}
if($params['subject']) {
$where[] = $this->_db->quoteInto('subject_id = ?', (int)$params['subject']);
}
$select = $this->_db->select()
->from(T_VIEW,
array('subject', 'hours', 'color', 'week','day', 'hour', 'room', 'meno', 'priezvisko', 'tituly', 'subclass'));
foreach($where as $wh) {
$select->where($wh);
}
Vytvorenie dotazu na pohľad rozvrh_view v databáze o denných študentoch.
$data = $this->_db->fetchAll($select);
$return = array();
foreach($data as $row) {
$return['D'][$row['day']][$row['week']][$row['hour']] = array(
'subject' => $row['subject'],
'tituly' => $row['tituly'],
'meno' => $row['meno'],
'priezvisko' => $row['priezvisko'],
'room' => $row['room'],
'subclass' => $row['subclass'],
'hours' => $row['hours'],
'color' => $row['color']
);
}
return $return;
}
Metóda getTTable vracia údaje z databázy do mnohorozmerného poľa, zoradeného podľa našich potrieb pre vykresľovanie.
Vykresľovanie rozvrhu
Pomocná trieda Views_Helpers_TimetableRenderer pre view časť MVC obsahuje metódy:
- timetableRenderer($data, $subclass) – ak vo formulári nebol ako parameter vybraný krúžok vypíše sa rozvrh pre denných aj externých študentov, inak sa rozhodne o tom ktorý sa vypíše podľa tvaru názvu krúžku
- intern() – metóda na vykreslenie tabuľky rozvrhu denných študentov, ktorá si volá ďalšie pomocné metódy:
- intern_prepareDay($index) – metóda vracia štruktúru buniek dňa s indexom $index
- intern_prepareCell($data) – metóda vytvára obsah bunky (predmet, meno vyučujúceho, učebňa, prípadne číslo krúžku). Číslo krúžku sa vypisuje len v prípade ak sa nejedná o prednášky
