Ukázka zobrazení struktury tabulky - Liberec 2014 Jakub Jirouš

6.7 Výpis dat z tabulky

Pro výpis všech dat z tabulky je použita jedna z knihoven databázové vrstvy z dis-tribuce Nette.

( # 4 , 5 +5)

Nette využívalo do verze 2.0 knihovnu Nette\Database\SelectionFactory. Od vy-dání nové verze 2.1 dostala zmi ovaná knihovna nový název Nette\Database\Context.

Knihovna Nette\Database\Context obsahuje všechny d ležité metody pro práci s data-bází. Mezi její hlavní p ednosti, oproti klasickému zp sobu, pat í tvorba zjednodušených SQL dotaz .

P i výpisu všech dat z tabulky je nutné zpracovat následující SQL dotaz s nastave-ným limitem výpisu dat s výchozí nastavenou hodnotu 100.

SELECT * FROM `tabulka` LIMIT 100;

Zdrojový kód 10: Výpis všech dat z tabulky

Za použití knihovny Nette\Database\Context, kdy je nejprve nutné vytvo it novou instanci t ídy z vytvo eného p ipojení k databázovému serveru, které bylo vytvo eno na základ údaj z p ihlašovacího formulá e, je vytvá ení SQL dotazu daleko p íjemn jší, jednodušší a je p edevším zamezeno vzniku chyb v SQL syntaxi.

$this->db = new Nette\Database\Context($this->connection);

return $this->db->table('tabulka') ->select('*')

->limit(100) ->fetchAll();

Zdrojový kód 11: Ukázka použití knihovny Nette\Database\Context

Po vytvo ení instance t ídy, je možné využít n kterých jejich metod pro vytvo ení pot ebného SQL dotazu, jak je vid t v ukázce znázorn né výše.

Vytvo ení nové instance t ídy je provád no ve t íd modelové vrstvy, kde je ná-sledn tato t ída využívána ve funkci, která zpracovává SQL dotazy. Funkce zpracovávající SQL dotazy je volána z presenteru, kde se jí p edají pot ebné parametry ke zpracování. Presenter má na starost zpracovaný výsledek SQL dotazu p edat do ša-blony. V šablon se nad výsledkem SQL dotazu provede itera ní cyklus, ve kterém se vykreslí veškerá data z tabulky uložené v databázi do HTML tabulky.

6.8 azení dat podle sloupc

Jednou z funkcí celé aplikace je možnost provád t vzestupné nebo sestupné azení nad uloženými daty v databázové tabulce podle jednotlivých sloupc .

K urychlení b hu aplikace není tato funkce azení dat provád na klasickým HTTP požadavkem, ale probíhá p es požadavek AJAX. U azení žádným zp sobem neprobíhá ukládání aktuálního stavu, takže p i obnovení stránky dochází k výchozímu výpisu všech dat.

( 9 :+ 7 ; ) ,5 < = 7 , *

V samotné distribuci Nette není p ítomný žádný skript, který by obsluhoval AJAX požadavky. Na oficiálních stránkách frameworku v sekci dopl k , plugin a komponent je k dispozici voln stažitelný alternativní obslužný skript pro AJAX, jehož autorem je Vojt ch Dobeš [18]. Knihovna nette.ajax.js je vydávána pod licencí MIT.

K tomu, aby se stal tento obslužný skript sou ástí aplikace, je ho nutné zkopírovat do složky s ostatními javascriptovými soubory a p idat odkaz do hlavi ky v šablon . Ná-sledn je nutné provést inicializaci v zavád cím javascriptovém skriptu. NáNá-sledn se stává obslužný skript aktivní a p evádí na AJAX požadavky všechny odkazy nebo formulá e, které obsahují CSS t ídu ajax.

( 9 ! > ,5 < = 7 , *

Ke zpracování AJAX požadavk dochází v metod handle<Signal>(), která zpra-covává p íchozí signály.

V terminologii Nette je termín signál neboli subrequest ozna ován jako komuni-kace se serverem, aniž by se p i ní zm nila šablona. Metod zpracovávající signály se m že p edávat neomezené množství parametr . Hlavním p íjemcem signál je samotný presenter. Signál v podstat slouží pro objekt jako identifikátor, který ur uje, co se má aktuáln provést. Nap íklad nastal-li požadavek na vzestupné set íd ní výpisu dat podle požadovaného sloupce, požadavek na zpracování SQL dotazu nad databází a podobn . V práci se signály je d ležité si uv domit, že je signál vždy volán na aktuálním presenteru a view, není jej možné sm ovat n jak jinam [19].

Jelikož se metoda handle<Signal>() v životním cyklu presenteru nachází nad vykreslovací ástí, je možné provést pot ebné zpracování požadavku v této ásti, ješt p ed samotným vykreslením šablon.

V p ípad azení dat dle sloupc se v metod zpracovávající požadavky uloží do prom nné p íslušný název sloupce, podle kterého se má azení provád t a následn s ním údaj o typu azení. Pokud se jedná o AJAX požadavek, je p i zpracování zavolána funkce starající se o p ekreslení ur ité definované ásti stránky. Pokud se jedná o klasický HTTP požadavek, dojde po zpracování k p ekreslení stránky celé.

V šablon se definují ur ité ásti stránky, které se mají po zpracování AJAX poža-davk p ekreslit, pomocí blokové zna ky pod názvem snippet. Jednotlivé snippety lze pojmenovávat a funkci, která se stará o p ekreslení pouze ur ité ásti stránky, je p edán pouze název p íslušného snippetu, ímž je ešeno p ekreslování pouze p esn definované

ásti.

Když je zavolána funkce pro p ekreslení p íslušného snippetu, dostane se presenter do vykreslovací ásti, ve které se provede metoda render<View> a dojde k požadova-nému p ekreslení snippetu.

Data z prom nných, uložených p i volání metody zpracovávající signály, se p edají jako parametry funkcím zpracovávající dotazy nad databází. Získaná pozm n ná data, oproti p vodním, se p edají do šablony provád jící vykreslení. Výsledek celé operace se projeví jako zm na azení dat u konkrétního sloupce.

6.9 Nastavení limitu u výpisu dat

Pokud by databázová tabulka obsahovala velké množství záznam , byl by výpis všech dat zdlouhavý a nep ehledný. Kv li tomuto jevu je ve výchozím nastavení výpis dat omezen na hodnotu 100 záznam . Pomocí formulá ového prvku lze tento limit modi-fikovat v rozsahu od 1 do maximálního po tu záznam obsažených v konkrétní tabulce.

Nov nastavená hodnota limitu je prost ednictvím formulá e odesílána jako AJAX požadavek, který je následn zpracován v obslužné funkci, kam se formulá ová data do-stanou v p ípad validn odeslaného formulá e. Odesíláním formulá e p es AJAX požadavek je zajišt né jeho rychlé zpracování bez zbyte ného p esm rovávání na jinou stránku.

Obslužná funkce zpracovávající odeslaný formulá vezme nov nastavenou hod-notu limitu a uloží jí do prom nné. Následn se provede požadavek na p ekreslení snippetu, ve kterém je obsažen výpis dat z databáze. Presenter se ve svém cyklu z fáze interak ní dostává do vykreslovací fáze, kde je uložená hodnota limitu z prom nné pou-žita jako parametr pro funkci, která v modelové vrstv zajiš uje vykonání SQL dotaz nad databází. Výsledkem funkce zpracovávající SQL dotazy je pole dat. Po prob hnutí itera ního cyklu nad tímto polem je v šablon vypsán požadovaný po et dat odpovídající p esn nastavenému limitu.

6.10 Cizí klí e

Sou ástí výpisu dat z databáze je i možnost zobrazení atributu, kterého se týká re-feren ní integrita dat – cizího klí e.

Veškeré informace o cizích klí ích jsou získávány z informa ní databáze INFORMATION_SCHEMA z tabulky KEY_COLUMN_USAGE, která popisuje, jaké

omezení mají sloupce obsahující klí ovou hodnotu.

V následující tabulce jsou znázorn ny všechny sloupce, které byly p i zpracovávání zobrazování cizích klí použity.

Tabulka 2: INFORMATION_SCHEMA.KEY_COLUMN_USAGE

TABLE_SCHEMA - název databáze

TABLE_NAME - název tabulky

COLUMN_NAME - název sloupce

REFERENCED_TABLE_SCHEMA - název cílové databáze REFERENCED_TABLE_NAME - název cílové tabulky REFERENCED_COLUMN_NAME - název cílového sloupce

Zobrazování vazby mezi jednotlivými tabulkami je zpracováváno signálem, který je zavolán nad daným sloupcem. Signálu jsou jako parametr p edávány následující hod-noty: název databáze, název tabulky, název sloupce a aktuální hodnota sloupce. V rámci zpracování se do session prom nných uloží pot ebné informace identifikující, že se apli-kace nachází v režimu zobrazování cizích klí . Poté dochází k p esm rování na view vypisující všechny data z databázové tabulky. Oproti klasickému výpisu všech dat je zde na základ získaných údaj z tabulky KEY_COLUMN_USAGE zobrazen vždy pouze konkrétní ádek, se kterým tvo í sloupec z tabulky, ze které se volal signál, spole nou vazbu.

Deaktivací režimu zobrazování cizích klí se aplikace op t p epne do standardního režimu, kde již není vypisován pouze jeden ádek, ale všechny data obsažené v databá-zové tabulce.

6.11 Editace obsahu databáze

Jednou z požadovaných vlastností na aplikaci je možnost editace obsahu i struktury databáze.

( 3- /5

Prvotní navrhovaný zp sob m l využívat zp sobu p ímé editace dat za použití kni-hovny X-editable (http://vitalets.github.io/x-editable/). Knihovna umož ovala vytvá et edita ní formulá ové prvky p ímo na webové stránce bez nutnosti dalšího p esm rová-vání za použití technologií Bootstrap, jQuery-UI nebo pouze jQuery s možností výb ru z režimu zobrazení v samostatném dialogovém okn nebo v ádku.

Tento zp sob m l fungovat velmi rychle a efektivn na principu editace vždy jedné konkrétní vypsané hodnoty. Po kliknutí na vypsanou hodnotu z databázové tabulky uvnit HTML tabulky se m l zobrazit edita ní formulá ový prvek. Uživatel by provedl požado-vanou zm nu a po kliknutí mimo fokus formulá ového prvku, by došlo k odeslání formulá e, což by m lo za následek editaci hodnoty v databázi.

Navrhované ešení nefungovalo podle prvotních p edpoklad . Skript ve výchozím nastavení provád l editaci pouze nad vypsanými hodnotami. V p ípad , kdy byl p i ode-sílání edita ního formulá e na tuto událost navázán signál, který realizoval editaci dat, nebylo možné dosáhnout správné synchronizace mezi údaji uloženými v databázi a údaji, které zobrazoval skript z vypsaných hodnot.

( ! , / 0

Zp sob p ímé editace pomocí knihovny X-editable nevedl k úsp šnému ešení. Pro editaci byl tedy zvolen alternativní zp sob využívající modal okna za podpory Bootstrap pro Nette.

Modal okno je efektivní, flexibilní dialogové okno sou ástí Bootstrap, umož ující své zobrazení za pomocí jednoduchých funkcí s inteligentním nastavením výchozích hod-not [20].

Tento odlišný zp sob nabízí funk ní ešení a možnost editace všech hodnot v da-ném ádku databázové tabulky sou asn , což je nepatrn asov náro n jší o proti p edchozímu návrhu, a to p edevším z hlediska editace dlouhých datových v t u rozsáh-lých tabulek.

P ed samotnou editací hodnot je každá tabulka testována, zda obsahuje alespo je-den sloupec disponující unikátní hodnotou. Protože pokud by se provád la editace dat nad tabulkou bez sloupce s unikátní hodnotou, nebylo by možné jednozna n identifiko-vat hodnotu v tabulce ur enou k editaci. Nap íklad p i editaci tabulky bez sloupce s unikátní hodnotou, kde se v jednom sloupci vyskytují duplicitní data, by docházelo k nežádoucí zm n všech t chto dat. Proto není možnost editace dat v tabulce neobsahu-jící žádný sloupec s unikátní hodnotou povolena a uživatel je na tuto skute nost upozorn n prost ednictvím informa ní hlášky.

Po kliknutí na ikonu editace na stránce s výpisem dat z databáze, je proveden signál, kterému je jako parametr p edán unikátní název sloupce a jeho hodnota. P i zpracování signálu se nastaví prom nná $openEditModal, zap í i ující zobrazení modal okna, na hodnotu TRUE. V tomto okamžiku, z d vod p edchozího vykreslení šablony s výpisem dat z databáze, je již modal okno v šablon obsaženo, ale má pomocí javascriptové funkce deaktivovanou viditelnost.

Následn se provede požadavek na p ekreslení snippetu, ve kterém je obsaženo mo-dální okno. Presenter se ve svém cyklu dostává z fáze interak ní do fáze vykreslovací.

Do šablony se dostává prom nná $openEditModal s hodnotou TRUE pro zobrazení modal okna, kde je pomocí javascriptové funkce na základ spln né podmínky aktivována vidi-telnost edita ního modal okna.

Zdrojový kód 12: Aktivace viditelnosti edita ního modal okna

{snippet editModal}

<div class="modal fade" id="editModal" tabindex="-1"

role="dialog" aria-labelledby="editModalLabel"

aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close"

data-dismiss="modal" aria-hidden="true">

×

</button>

<h4 class="modal-title" id="editModalLabel">

{$table|upper}

<div class="modal-footer"></div>

</div>

{/snippet}

Zdrojový kód 13: Konstrukce modal okna v šablon Latte

Uvnit t la modal okna je umíst na komponenta rowEdit. S komponentami se v Nette zachází tak, že se jejich nová instance vytvá í p ímo v presenteru v tzv. továrni ce, za použití metody createComponent<NazevKomponenty>.

V továrni ce komponenty rowEdit dochází k vytvá ení celého edita ního formu-lá e. Pomocí d íve použitých SQL dotaz pro zjišt ní struktury databázové tabulky je zjišt na struktura všech sloupc u editovaného ádku tabulky.

Dle zjišt né struktury jednotlivého sloupce je vytvo en odpovídající formulá ový prvek. U íselných datových typ je velikost vkládaného ísla limitována rozsahem kon-krétního datového typu a údajem o znaménkovosti. Využívá se zde podpora pro vkládání specifických dat za podpory HTML5 atribut .

U textových datových typ je velikost vkládaného textu limitována délkou, která je definována strukturou tabulky.

U datových typ p edstavující údaje o ase nebo datu je využíváno rozší ení datepicker z distribuce Bootstrap pro možnost jednoduchého výb ru asu a data pomocí dialogového okna a zárove toto rozší ení zajiš uje validaci.

Obrázek 7: Dialogové okno pro výb r asu a data

U editace hodnot reprezentovaných pomocí množinového datového typu ENUM je vždy zobrazena aktuální nabídka hodnot, které lze nastavit. Nabídka je tvo ena prost ed-nictvím formulá ového prvku typu select box a hodnoty jsou získávány ze struktury dané tabulky, kde je jejich p esné zn ní definované. Obdobn je realizovaná i editace datového typu SET. Nabídka všech hodnot je shodn získávána ze struktury tabulky, ale je zobra-zována pomocí formulá ových prvk check box, u kterých je možné zaškrtnout více položek sou asn .

Možnost editace datových typ typu BINARY nebo BLOB, obsahující binární data, není v této aplikaci implementovaná. Stávající editace ostatních datových typ je prová-d na pomocí AJAX požaprová-davk . Tohoto zp sobu by nebylo možné u eprová-ditace velkých binárních soubor docílit, protože AJAX požadavky jsou pro p enos dat limitované. Celý zp sob editace by musel být zm n n, ímž by se narušil dosavadní koncept pro vytvo ení jednoduché a rychlé aplikace. Docházelo by ke zpomalení v d sledku odesílání velkého množství dat prost ednictvím HTTP požadavku.

Pokud je ve struktu e sloupce nastaveno, že nesmí obsahovat nulovou hodnotu, for-mulá ovému prvku je nastaven valida ní atribut, který nedovolí odeslání forfor-mulá e d íve, než je daný prvek vypln n tzv. required.

V p ípad , že je provád na editace nad sloupcem, jehož hodnota odpovídá klí ové hodnot , je pomocí formulá ového prvku select box uveden aktuální dostupný výpis na-stavitelných hodnot. Tímto zp sobem je provád na zm na závislostí jednotlivých ádk mezi tabulkami v databázi.

Po provedení všech pot ebných zm n a zajišt ní správného vypln ní všech formu-lá ových prvk díky nastaveným valida ním pravidl m je formuformu-lá odesformu-lán. Obslužná funkce zpracovávající odeslaný formulá používá funkci z modelové vrstvy, která vyko-nává SQL dotazy nad databází. Funkce z modelové vrstvy následn provede aktualizaci dat v p íslušné databázové tabulce. Aktualizace dat je následn provedena i v šablon vypisující data. Na záv r je viditelnost edita ního modal okna op t deaktivována.

6.12 SQL p íkazy

V aplikaci je možné krom akcí popsaných v p edchozích krocích provád t i zpra-cování libovolných SQL p íkaz .

Vstupním bodem sloužícím pro zadávání SQL dotaz je p íkazové okno tvo ené formulá ovým prvkem textarea. K následnému zpracování jsou použity metody obsažené v knihovn Nette\Database\Helpers.

( ! > ,5 ? - )*

P íkazové okno m že obsahovat více než jeden SQL p íkaz. V p ípad , že jich ob-sahuje více, musí být od sebe vzájemn odd leny st edníkem.

Zpracování p íkaz je provád no funkcí z modelové vrstvy, která daný p íkaz vy-koná nad aktuáln p ipojenou databází, nebo pouze nad samotným serverem. Zmi ovaná funkce vrací sadu výsledk Nette\Database\ResultSet, která je využita jako vstupní para-metr metody dumpResult. Metoda dumpResult se následn postará o vykreslení výsledku zpracovaného SQL p íkazu do HTML tabulky. Proto je její volání použito až v šablon .

public static dumpResult(Nette\Database\ResultSet $result)

Zdrojový kód 14: Definice metody pro zobrazování výsledku SQL p íkazu

( ! ! >,; ) 0 ? $

Krom samotného zpracovávání jsou veškeré SQL p íkazy vizuáln zobrazovány.

K zobrazování zpracovaných p íkaz se využívá metoda dumpSql, která jako vstupní pa-rametr p ejímá et zec obsahující všechny p íkazy z p íkazového okna. Výsledkem je zobrazení p íkaz se zvýrazn ním SQL syntaxe.

public static string dumpSql(string $sql, array $params = NULL)

Zdrojový kód 15: Definice metody pro zvýrazn ní SQL syntaxe

( ! @ - )*

Všechny zpracované SQL p íkazy, i v etn p íkaz jejichž syntaxe nebyla zcela správn , jsou evidovány po dobu p ipojení k databázovému serveru v historii p íkaz .

Do historie je ukládán vždy celý obsah p íkazového okna s rozd lením po jednotli-vých p íkazech podle po adí, v jakém bylo provád no jejich zpracovávání. Jako identifikátor je používán aktuální datum a as z doby zpracování. Jednotlivé uložené p í-kazy lze zp tn upravovat a v p ípad pot eby znovu vykonat. K dispozici je tla ítko, pomocí n hož je možné obsah celé historie nenávratn smazat.

6.13 Vizuální schéma databáze

Jednou z hlavních a nejd ležit jších ástí celé aplikace je tvorba vizuálního schéma databáze. Jelikož se jedná o pom rn náro nou operaci, byla k této innosti využita javascriptová knihovna pro tvorbu diagram v HTML5 pod názvem JointJS.

( # 4 , < <

Knihovna JointJS pro tvorbu diagram je pln interaktivní nástroj s podporou pro všechny moderní webové prohlíže e. Uvád ná knihovna není pouze kreslícím nástrojem, ale díky MVC architektu e dokáže z výsledného vykreslení odd lit jednotlivé prvky. Celé jádro knihovny JointJS je licencováno pod Mozilla Public License ve verzi 2. V základní nabídce je k dispozici n kolik p eddefinovaných stavebních prvk , kterých lze p i tvorb diagram i schémat využít [21].

Základním principem knihovny je vytvo ení hlavní kreslící plochy, do které budou jednotlivé prvky vykreslovány a umís ovány. Následn jsou vytvo eny jednotlivé kom-ponenty typu joint.shapes.devs.Model, které v p ípad vyvíjené aplikace p edstavují tabulky v databázi. Pomocí funkcí z modelové vrstvy jsou získávány všechny pot ebné údaje o databázi, jako název a struktura jednotlivých tabulek. Každá komponenta zastu-puje danou tabulku z databáze. Do každé komponenty jsou umíst ny tzv. porty s popiskem, které reprezentují sloupec v databázové tabulce. U každé komponenty bylo nutné upravit pozici umíst ní port , popisk a p edevším pozici, na které se bude kom-ponenta v kreslící ploše vykreslovat, aby se komkom-ponenta co nejvíce podobala databázové tabulce. Po vytvo ení všech komponent jsou vykresleny na kreslící plochu.

Po umíst ní komponent do kreslící plochy je realizována vizualizace vazeb mezi jednotlivými tabulkami. Op t je zde použita funkce z modelové vrstvy, která získává všechny údaje o využití cizích klí z tabulky KEY_COLUMN_USAGE z informa ní da-tabáze INFORMATION_SCHEMA. Každý port uvnit vytvo ené komponenty má sv j jednozna ný identifikátor, díky n muž lze p íslušnému portu nastavit na jakou kompo-nentou a jaký konkrétní port má být vykresleno spojení, p edstavující vazbu mezi jednotlivými sloupci databázových tabulek. Díky jednozna ným identifikátor m každé komponenty je možné vytvo it komponenty typu joint.dia.Link, p edstavující reali-zaci propojení dvou komponent typu joint.shapes.devs.Model, které jsou po svém vytvo ení taktéž vykresleny na kreslící plochu. Po vykreslení všech vytvo ených

In document Liberec 2014 Jakub Jirouš (Page 34-0)