Liberec 2014 Jakub Jirouš

TECHNICKÁ UNIVERZITA V LIBERCI

Fakulta mechatroniky, informatiky a mezioborových studií

VIZUÁLNÍ NÁSTROJ PRO ONLINE SPRÁVU DATABÁZÍ

BAKALÁ SKÁ PRÁCE

Liberec 2014 Jakub Jirouš

VIZUÁLNÍ NÁSTROJ PRO ONLINE SPRÁVU DATABÁZÍ

Bakalá ská práce

Studijní program: B2646 – Informa ní technologie Studijní obor: 1802R007 – Informa ní technologie Autor práce: Jakub Jirouš

Vedoucí práce: Ing. Mojmír Volf

Prohlášení

Byl jsem seznámen s tím, že na mou bakalá skou práci se pln vztahuje zákon . 121/2000 Sb., o právu autorském, zejména § 60 – školní dílo.

Beru na v domí, že Technická univerzita v Liberci (TUL) nezasahuje do mých autorských práv užitím mé bakalá ské práce pro vnit ní pot ebu TUL.

Užiji-li bakalá skou práci nebo poskytnu-li licenci k jejímu využití, jsem si v dom povinnosti informovat o této skute nosti TUL; v tomto p ípad má TUL právo ode mne požadovat úhradu náklad , které vynaložila na vytvo ení díla, až do jejich skute né výše.

Bakalá skou práci jsem vypracoval samostatn s použitím uvedené literatury a na základ konzultací s vedoucím bakalá ské práce a konzultantem.

Sou asn estn prohlašuji, že tišt ná verze práce se shoduje s elektronickou verzí, vloženou do IS STAG.

Datum:

Podpis:

Pod kování

Rád bych pod koval svému vedoucímu bakalá ské práce Ing. Mojmírovi Volfovi z ústavu Nových technologií a aplikované informatiky, za poskytnuté konzultace v pr - b hu vývoje aplikace a p i zpracovávání textové ásti bakalá ské práce.

Dále bych cht l pod kovat vedoucímu ústavu Informa ní technologií a elektroniky prof. Ing. Zde kovi Plívovi, Ph.D. za konzultace a poskytnuté informace p i zpracovávání formálních náležitostí textové ásti bakalá ské práce.

V neposlední ad bych cht l pod kovat své rodin , která m po celou dobu studia velmi podporovala.

Abstrakt

Bakalá ská práce se zabývá tvorbou online nástroje pro správu databáze, který je schopen provád t správu i editaci jejího obsahu. Cílem je vytvo ení nástroje v podob online aplikace pro správu databází s vizuálním rozhraním na základ technických mož- ností databázové platformy MySQL. P ínosem práce je online nástroj se snadnou instalací bez nutnosti dodate né konfigurace na stran serveru.

Nástroj je vytvá en jako serverová aplikace za pomocí skriptovacího jazyka PHP a nástroje Nette Framework.

Výsledná aplikace má fungovat jako samostatná webová aplikace umož ující p i- pojení k libovolnému databázovému serveru. Aplikace umož uje editaci obsahu databáze, provád ní SQL p íkaz , vizualizaci schéma p íslušné databáze a nastavování oprávn ní jednotlivým uživatel m.

Výsledkem této práce je vytvo ení jednoduše ovladatelného online nástroje bez nutné konfigurace umož ující správu obsahu MySQL databází.

Klí ová slova:

MySQL, PHP, Nette Framework, webová aplikace, online správa a editace data- báze

Abstract

This bachelor thesis concerns development of an online tool for database management. Database content could be managed and edited using this tool. The aim is to create a tool working as an online application for database management and having a visual interface based on technical possibilities of MySQL database platform. The benefit of the bachelor thesis is an online and easy to be installed tool without additional configuration required on the server side.

The tool is developed as a server application using PHP scripting language and a tool Nette Framework.

The final application operates as a separate web application allowing user to connect to any database server. The application allows user to edit the contents of a database, to execute SQL statements, to render database scheme of corresponding database and to set administrative rights to individual users.

The outcome of this bachelor thesis is the development of an easily operable online tool without complicated configuration. This tool allows user to do content management of MySQL database.

Keywords:

MySQL, PHP, Nette Framework, web application, online database management and editing

Obsah

1 Úvod 13

1.1 Problematika . . . 13

1.2 ešený problém . . . 13

1.3 Motivace . . . 14

2 Hypertext Preprocessor 15 3 Nette Framework 15 3.1 Požadavky . . . 16

3.2 Zprovozn ní . . . 16

3.3 Sandbox . . . 16

3.3.1 Struktura . . . 17

3.4 Ladící nástroj Lad nka . . . 18

3.4.1 Ladící panel . . . 19

3.5 Šablonovací jazyk . . . 19

3.5.1 Context-Aware Escaping . . . 19

3.6 Dependency Injection . . . 20

3.7 MVC aplikace . . . 20

3.7.1 Model . . . 20

3.7.2 View . . . 20

3.7.3 Kontroler . . . 20

3.8 Twitter Bootstrap . . . 21

4 MySQL 22 4.1 Typy databázových úložiš . . . 22

4.1.1 MyISAM . . . 22

4.1.2 InnoDB . . . 22

5 Cíl práce 23 6 Postup vývoje aplikace 24 6.1 Kontrola p ed spušt ním aplikace . . . 24

6.2 Vytvo ení p ipojení k databázovému serveru . . . 27

6.2.1 Vlastní zp sob vytvo ení p ipojení . . . 27

6.3 Session prom nné . . . 28

6.3.1 Session prom nné v Nette . . . 28

6.3.2 P ihlášení více uživatel z jednoho webového prohlíže e . . . 29

6.4 Výpis databází na serveru . . . 30

6.5 Tabulky v databázi . . . 31

6.6 Struktura tabulky . . . 31

6.7 Výpis dat z tabulky . . . 32

6.7.1 Knihovna pro práci s databází . . . 32

6.8 azení dat podle sloupc . . . 33

6.8.1 Obslužný skript pro zpracování AJAX požadavk . . . 33

6.8.2 Zpracování AJAX požadavk . . . 34

6.9 Nastavení limitu u výpisu dat . . . 35

6.10 Cizí klí e . . . 36

6.11 Editace obsahu databáze . . . 37

6.11.1 P ímá editace . . . 37

6.11.2 Editace v modal okn . . . 38

6.12 SQL p íkazy . . . 42

6.12.1 Zpracování SQL p íkaz . . . 42

6.12.2 Zvýrazn ní SQL syntaxe . . . 42

6.12.3 Historie p íkaz . . . 43

6.13 Vizuální schéma databáze . . . 43

6.13.1 Knihovna JointJS . . . 43

6.14 Uživatelská oprávn ní . . . 46

6.14.1 Vytvo ení nového uživatele . . . 46

6.14.2 Globální oprávn ní uživatele . . . 47

6.14.3 Oprávn ní databáze . . . 48

6.14.4 Oprávn ní tabulky . . . 50

6.14.5 Oprávn ní sloupce . . . 51

6.14.6 Porovnání správy oprávn ní u ostatních existujících nástroj . . . 51

6.15 Informace o ovládání aplikace . . . 52

7 Vyhodnocení ešení 53

8 Shrnutí práce 56

Použitá literatura 57

P ílohy 59

A Obsah p iloženého CD 59

A.1 Text bakalá ské práce . . . 59

A.2 Použité obrázky v textu bakalá ské práce. . . 59

A.3 Zdrojové kódy aplikace . . . 59

A.4 Snímky obrazovky z výsledné aplikace . . . 59

B Snímky obrazovky výsledné aplikace 60 B.1 P ihlašovací formulá . . . 60

B.2 Výpis databází na serveru . . . 60

B.3 Výpis tabulek v databázi . . . 61

B.4 Zobrazení struktury tabulky . . . 61

B.5 Výpis dat z tabulky . . . 62

B.6 Omezení výpisu dat z tabulky . . . 62

B.7 azení vypsaných dat v tabulce . . . 63

B.8 Editace dat . . . 63

B.9 Vizuální schéma databáze . . . 65

B.10 Globální oprávn ní uživatel . . . 66

B.11 Nový uživatel . . . 67

B.12 Zm na hesla . . . 68

B.13 Oprávn ní databáze . . . 68

B.14 Oprávn ní tabulky . . . 70

B.15 Oprávn ní sloupce . . . 71

B.16 SQL p íkazy . . . 72

B.17 Nápov da . . . 73

Seznam obrázk

Obrázek 1: Struktura základního skeletonu aplikace Sandbox . . . 17

Obrázek 2: Ukázka zachycení chybné syntaxe pomocí Lad nky . . . 18

Obrázek 3: Ladící panel . . . 19

Obrázek 4: Ukázka kontroly serveru p ed spušt ním aplikace v Nette . . . 26

Obrázek 5: Ukázka zobrazení struktury tabulky . . . 32

Obrázek 6: Životní cyklus presenteru . . . 34

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

Obrázek 8: Ukázka vizuálního schéma testovací databáze SAKILA . . . 45

Obrázek 9: P ihlašovací formulá . . . 60

Obrázek 10: Výpis databází na serveru . . . 60

Obrázek 11: Výpis tabulek v databázi . . . 61

Obrázek 12: Zobrazení struktury tabulky . . . 61

Obrázek 13: Výpis dat z tabulky . . . 62

Obrázek 14: Omezení výpisu dat z tabulky . . . 62

Obrázek 15:Vzestupné azení vypsaných dat z tabulky . . . 63

Obrázek 16: Sestupné azení vypsaných dat z tabulky . . . 63

Obrázek 17: Editace dat . . . 63

Obrázek 18: Výb r data p i editaci sloupce datového typu timestamp . . . 64

Obrázek 19: Výb r asu p i editaci sloupce datového typu timestamp . . . 64

Obrázek 20: Vizuální schéma databáze . . . 65

Obrázek 21: Globální oprávn ní uživatel . . . 66

Obrázek 22: Zm na globálního oprávn ní . . . 66

Obrázek 22: Nový uživatel . . . 67

Obrázek 23: Zm na hesla . . . 68

Obrázek 24: Oprávn ní databáze . . . 68

Obrázek 25: Nové oprávn ní databáze . . . 69

Obrázek 26: Zm na oprávn ní databáze . . . 69

Obrázek 27: Oprávn ní tabulky . . . 70

Obrázek 28: Nové oprávn ní tabulky . . . 70

Obrázek 29: Zm na oprávn ní tabulky . . . 70

Obrázek 32: Zm na oprávn ní sloupce . . . 71

Obrázek 33: SQL p íkazové okno . . . 72

Obrázek 34: Ukázka výsledku vykonaného SQL p íkazu . . . 72

Obrázek 35: Historie SQL p íkaz . . . 73

Obrázek 36: Nápov da . . . 73

Seznam tabulek

Tabulka 2: INFORMATION_SCHEMA.KEY_COLUMN_USAGE . . . 36

Seznam zdrojových kód

Zdrojový kód 2: Nastavení RobotLoader pro automatické procházení všech t íd . . . 18

Zdrojový kód 3: P ihlašovací údaje k databázi v konfigura ním souboru NEON . . . 27

Zdrojový kód 4: Konstruktor Nette\Database\Connection . . . 28

Zdrojový kód 5: Funkce pro vytvo ení hashe z uživatelského jména . . . 29

Zdrojový kód 6: Nastavení názvu session sekce pomocí uživatelského jména . . . . 30

Zdrojový kód 7: Výpis názv databází obsažených na serveru . . . 30

Zdrojový kód 8: Získání kódování a porovnání databáze . . . 30

Zdrojový kód 9: Zobrazení struktury tabulky . . . 31

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

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

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

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

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

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

Zdrojový kód 16: SQL p íkaz pro vytvo ení nového uživatele . . . 46

Zdrojový kód 17: SQL p íkaz pro p i azení globálního oprávn ní uživateli . . . 47

Zdrojový kód 18: SQL p íkaz pro p i azení oprávn ní na úrovni databáze . . . 49

Zdrojový kód 19: SQL p íkaz pro p i azení oprávn ní na úrovni tabulky . . . 50

Zdrojový kód 20: SQL p íkaz pro p i azení oprávn ní na úrovni sloupce . . . 51

Seznam zkratek

AJAX Asynchronous JavaScript and XML API Application Programming Interface CSS Cascading Style Sheets

DI Dependency Injection, z ejmé p edávání závislostí GD Grafická knihovna

GNU GPL GNU General Public License

HTML5 Hypertext Markup Language 5, zna kovací jazyk pro

hypertext ve verzi 5

HTTP Hypertext Transfer Protocol ICONV Rozší ení PHP

IP Internet Protocol

MIME Multipurpose Internet Mail Extensions MIT Massachusetts Institute of Technology

MySQL My Structured Query Language, systém pro ízení databází NEON Konfigura ní soubor v Nette Framework

New BSD New Berkeley Software Distribution, licence pro svobodný

software

PCRE Perl Compatible Regular Expressions PDO PHP Data Object

PHP Hypertext Preprocessor, skriptovací programovací jazyk SEO Search Engine Optimization, optimalizace pro vyhledáva e

SPL Standard PHP Library SQL Structured Query Language

XSS Cross Site Scripting

1 Úvod

1.1 Problematika

Tato bakalá ská práce se zabývá problematikou databází. Jedná se o rozší ení ba- kalá ského projektu, který se taktéž zabýval problematikou spojenou s databázemi, ovšem na nižší úrovni a ešil pouze vizualizaci databázových struktur bez možnosti provád ní administra ních úkon nad databází.

1.2 ešený problém

Hlavním ešeným problémem práce je nutnost vytvo ení bezkonfigura ní online webové aplikace. Cílem této aplikace je funk nost ihned po jejím rozbalení na serveru, což by m lo p isp t k usnadn ní a zp íjemn ní práce, p edevším pak ke zjednodušení p enositelnosti celé aplikace mezi jednotlivými servery bez zdlouhavého prvotního na- stavení.

Po nahrání aplikace na server bude následovat zjišt ní, zda server spl uje všechny technické požadavky pro bezchybný b h aplikace. Dále bude nutné zajistit, aby byla spl- n na alespo minimální nutná kompatibilita aplikace se serverem.

V aplikaci je implementována možnost editace dat v databázi umíst né na serveru, ke kterému je aplikace p ipojená a možnost spravování veškerých uživatelských opráv- n ní.

D raz je kladen na rozší ení vizuální stránky celé aplikace. Ovládání aplikace by m lo být uživatelsky p ív tivé, p ehledné, intuitivní s dodržením všech standard . Bylo využito nejmodern jších trend a postup pro tvorbu moderních webových aplikací sou-

asné doby.

Mezi další možnosti webové aplikace je schopnost p ipojení se k libovolnému da- tabázovému serveru. K vytvo ení p ipojení je zapot ebí znát pouze p ihlašovací údaje konkrétního lokálního nebo vzdáleného serveru a vše ostatní bude dále probíhat automa- ticky.

1.3 Motivace

Hlavní motivací byla možnost rozší ení bakalá ského projektu a posunutí celé práce o další vývojový krok výše. Ve sv t databází již podobné nástroje umož ující správu databází existují. P edevším se jedná o nástroje Adminer, vytvo ený velice uznávaným

eským programátorem Jakubem Vránou, a také velmi rozší ený phpMyAdmin.

Vizuální nástroj pro online správu databází z t chto dvou nástroj vychází a snaží se využít dobrých a osv d ených postup , které jsou zde využity. Snaží se také o vytvo-

ení nových i vylepšení stávajících funkcí a vlastností, které nejsou u t chto nástroj k dispozici, vše jednoduchou a snadno ovladatelnou formou.

2 Hypertext Preprocessor

PHP je programovací skriptovací jazyk využívaný pro vývoj webových aplikací.

Vytvá ená aplikace je psána práv pomocí PHP v aktuáln jedné z nejnov jších dostup- ných stabilních verzí PHP 5.5 [1].

3 Nette Framework

V oblasti vývoje webových aplikací existuje velké množství knihoven obsahující zobecn né funkce a t ídy, souhrnn pojmenované jako framework.

Nette Framework (dále jen Nette) je nástroj pro vytvá ení webových aplikací v PHP ve verzi 5. Na jeho vývoji se více než 9 let podílel eský programátor a zakladatel David Grudl. Práv David Grudl v roce 2004 vytvo il jednu z prvních verzí. Od roku 2008 se Nette ší í jako open source a od tohoto okamžiku se komunita pohybující se okolo neustále rozši uje. V sou asné dob se jedná o jeden z nejpoužívan jších framework v eské republice [2].

Celá práce je postavena práv na Nette, konkrétn na verzi 2.1, která vyšla na za- átku roku 2014.

Sou ástí frameworku je mnoho užite ných nástroj , které samotnou tvorbu webo- vých aplikací usnad ují a zp ehled ují.

Mezi nejd ležit jší ásti rozhodn pat í intuitivní šablonovací systém, propraco- vané ladící nástroje, velmi efektivní databázová vrstva a d raz na bezpe nost. Dále samotný moderní framework podporující nejmodern jší technologie HTML5, AJAX nebo SEO s istým objektovým návrhem vedoucím k dobrým programátorským návyk m a umož ující dostate n volné pracovní p sobišt . Celý framework je detailn zdoku- mentován a disponuje nejaktivn jší komunitou v eské republice. Veškerý p ehled t íd, metod a parametr je shrnutý v p ehledu API referencí [3].

Nette je ší en jako svobodný software pod licencemi New BSD nebo GNU GPL ve verzi 2 nebo 3 a m že být kýmkoliv využíván. Framework m že být používán i v ko- mer ních projektech [4].

3.1 Požadavky

Nette vyžaduje pro sv j bezproblémový b h p ítomnost PHP v minimální verzi 5.3.1 nebo vyšší. Krom minimální verze PHP klade jisté minimální požadavky na pro- st edí webového serveru [5].

3.2 Zprovozn ní

Existuje n kolik zp sob jak Nette nainstalovat. Zprovozn ní je možné realizovat zcela ru n stažením z oficiálních webových stránek http://nette.org/, kde je celá distri- buce voln k dispozici.

Další možností je využít Composer. Jedná se o balí kovací nástroj pro PHP, díky kterému je možné velmi snadno stáhnout a nainstalovat Sandbox [6].

3.3 Sandbox

Sandbox je základní skeleton aplikace, obsažen již v samotné distribuci Nette.

Pro založení nového projektu sta í najít ko enový adresá webového serveru a po- mocí p íkazové ádky vykonat následující p íkaz.

composer create-project nette/sandbox vnposd

Zdrojový kód 1: Vytvo ení nového projektu pomocí nástroje Composer Sandbox obsahuje ukázkový kód s úvodní obrazovkou, která je zobrazena p i úsp š- ném zprovozn ní frameworku, tím je ov eno, jestli vše funguje správn .

Obrázek 1: Struktura základního skeletonu aplikace Sandbox

Do ko enového adresá e webu www se ukládají p edevším obrázky, soubory skript , soubory obsahující definici kaskádových styl i další ve ejn p ístupné soubory, nebo pouze tento adresá je p ístupný z internetu. Ve v tšin p ípad je proto tento ad- resá nastavován jako ko enový adresá celého webu.

Nejd ležit jší je však adresá app, ve kterém se nachází celá webová aplikace. Je zde umíst n soubor bootstrap.php, který slouží k na tení celého frameworku a nastavení celé aplikace. Aktivuje se zde autoloading všech t íd, který odstra uje použití require nebo include soubor , které chceme práv používat.

Framework obsahuje nástroj Nette\Loaders\RobotLoader zajiš ující automatické na ítání všech t íd pro celou aplikaci. Nástroj RobotLoader prochází všechny PHP skripty a ukládá si do mezipam ti všechny t ídy a rozhraní z procházených skript a použije je v dalších požadavcích. Sta í pouze nastavit cesty k soubor m aplikace, kde jsou knihovny uloženy [7].

$configurator = new Nette\Configurator;

$configurator->createRobotLoader() ->addDirectory(__DIR__)

->addDirectory(__DIR__ . '/../vendor/others') ->register();

Zdrojový kód 2: Nastavení RobotLoader pro automatické procházení všech t íd

3.4 Ladící nástroj Lad nka

Jazyk PHP je na tvorbu chyb jako stvo ený, odchytávání a lad ní chyb je v n m zna n nep ehledné.

Knihovna Nette\Diagnostics\Debugger, v Nette slangu nazývaná jako Lad nka i Tracy, je jedním z nejužite n jších pomocník p i tvorb webových aplikací v PHP.

Jedná se o diagnostický nástroj disponující mnoha funkcemi. Mezi nejd ležit jší z nich pat í možnost rychlé eliminace a lad ní chyb, možnost logování chyb, e-mailové notifikace, p ehledný výpis prom nných a možnost p epínaní mezi vývojá ským a pro- duk ním režimem [8].

Obrázek 2: Ukázka zachycení chybné syntaxe pomocí Lad nky

Ladící panel neboli Debugger Bar, se zobrazuje p edevším ve vývojá ském režimu.

Obsahuje d ležité informace o aktuálním stavu vyvíjené aplikace jako je aktuální as provád ní, velikost využití alokované pam ti, informace o p ihlášeném uživateli, aktu- áln využívaném presenteru a šablon . Další informace se týkají routování. Na ladícím panelu jsou zobrazeny informace o všech dostupných routách a je zde rovn ž vyzna ena aktivní routa spl ující konkrétní routovací pravidlo.

Obrázek 3: Ladící panel

3.5 Šablonovací jazyk

Jednou z klí ových ástí a p edností celého Nette je intuitivní šablonovací jazyk známý pod názvem Latte. Celkový vývoj webových aplikací dokáže zp íjemnit a usnadnit práci díky možnosti vytvá ení i využití helper a maker. Navíc zabezpe uje výstup p ed zranitelnostmi, jako je nap íklad XSS.

Latte disponuje velmi d ležitou vlastností v podob výpisu prom nných, které jsou automaticky escapovány. Výpis libovolné prom nné by m l být vždy proveden pomocí escapování, aby bylo dodrženo p evedení znak obsahující v HTML speciální význam na alternativní odpovídající sekvence. Bez escapování prom nných by mohla v aplikaci vzniknout bezpe nostní díra v podob XSS [9].

V r zných ástech dokument nebo stránek se využívají odlišné escapovací funkce, proto Latte využívá unikátní technologii Context-Aware Escaping. Zmín ná technologie dokáže automaticky rozpoznat, o jakou p esnou ást dokumentu se jedná a podle toho zvolit správné a odpovídající escapování. Využitím zmín né technologie jsou zamezena rizika vzniku bezpe nostních d r v podob chybn vypsané prom nné.

3.6 Dependency Injection

Podstatou DI (Dependency Injection) je odebrání t ídám jejich zodpov dnosti za získávání objekt , které pot ebují pro svoji innost (tzv. služeb) a místo toho jim služby p edávat p ímo p i vytvá ení. V aplikaci vznikne daleko srozumiteln jší kód a eliminují se vazby mezi sou ástmi aplikace. Pomocí tohoto principu je možné zajistit znovu pou- žitelnost celého kódu [10].

3.7 MVC aplikace

Nette používá pro tvorbu webových aplikací MVC (Model–View–Controller) mo- del. MVC je softwarová architektura odd lující u aplikací s grafickým rozhraním obslužný kód od kódu aplika ní logiky a od kódu zobrazujícího data. Tímto modelem se aplikace zp ehled uje, usnad uje se její budoucí vývoj a umož uje tvorbu i testování jednotlivých ástí odd len [11].

Model je datový a funk ní základ celé aplikace. Obsahuje aplika ní logiku, ve které je libovolná akce uživatele reprezentována jako akce modelu. Model si spravuje sv j vnit ní stav a dále zprost edkovává striktn definované rozhraní. Voláním funkcí tohoto rozhraní je možné m nit nebo zjiš ovat jeho stav. Model o existenci view i kontroleru v bec neví a p edstavuje celou vrstvu, nikoliv pouze samostatnou t ídu.

! "

Pohled neboli view je vrstva aplikace, která se stará o zobrazování požadovaného výsledku. Používá šablonovací systém a dokáže definovat p esné vykreslení jednotlivých komponent nebo výsledek získaný z modelu.

#

adi zpracovává uživatelovy požadavky a na jejich základ volá p íslušnou apli- ka ní logiku, tedy model, a poté odešle žádost view, aby vykreslil data. V Nette jsou kontrolery realizovány presentery.

3.8 Twitter Bootstrap

Twitter Bootstrap (dále jen Bootstrap) je v sou asné dob jeden z nejpoužívan jších a nejoblíben jších framework pro tvorbu vizuální ásti webových aplikací s podporou responzivního designu pro za ízení s r zným rozlišením displej . Bootstrap je vydáván pod licencí MIT s autorskými právy 2014 Twitter.

Jedním z hlavních d vod výb ru technologií Bootstrap a Nette je ten, že spole n vytvá í výchozí prost edky, pomocí kterých lze vytvá et moderní webové aplikace. Navíc je již p ímo v samotném jád e Nette vytvo ena podpora pro vykreslování jednotlivých

ástí aplikace pro Bootstrap verze 2 nebo 3.

Nap íklad vykreslování formulá vytvo ených v Nette je velmi snadné. Jednodu- chým zp sobem lze v továrni ce formulá e p enastavit výchozí nastavení renderu, který se stará o vykreslování formulá e v šablon . Jednotlivým blok m formulá e jsou p i a- zeny CSS atributy, díky kterým m že být formulá vytvo ený v Nette p i vykreslování nastylován pomocí technologie Bootstrap.

4 MySQL

MySQL pat í pravd podobn mezi nejpopulárn jší databázové systémy pro tvorbu webových aplikací, který byl vyvinut v polovin 90. let 20. století. Jedním z hlavních d vod velké popularity MySQL je fakt, že je obdobn jako PHP voln a zdarma do- stupné. Disponuje mimo ádnou výkonností a rychlostí. Dokáže b žet na nejzákladn jším typu hardwaru [12].

Celá aplikace pracuje s daty uloženými v rela ní databázi práv na zmín né plat- form MySQL.

4.1 Typy databázových úložiš

MySQL databáze nabízejí n kolik typ úložiš . Každý typ má své výhody i nevý- hody a jejich použití se hodí v r zných situacích.

$%

Tabulky typu MyISAM nepodporují transakce, ale na druhou stranu jsou velmi rychlé. Tento typ je p evážn optimalizován na zpracování dotaz typu SELECT.

Statické tabulky

Vyzna ují se tím, že neobsahují žádný datový typ s prom nnou délkou. Pro každý údaj v databázi je pevn vyhrazené místo. Proto dotazy nad touto ta- bulkou probíhají velmi rychle.

Dynamické tabulky

Obsahují n které datové typy s prom nnou délkou a každý údaj musí navíc obsahovat informaci o své délce. Dochází k fragmentaci ásti záznamu.

! % &'

InnoDB je velice spolehlivé a výkonné databázové jádro databázového systému MySQL. Tabulky typu InnoDB uspo ádávají data na disk k optimalizaci b žných dotaz na základ primárních klí . Každá tabulka má primární index klí e nazvaný jako klastro-

5 Cíl práce

Hlavním cílem bakalá ské práce je vytvo ení online aplikace spravující databázi prost ednictvím vizuálního rozhraní. Na základ technických možností databázové plat- formy MySQL, kterou bude aplikace primárn využívat, bude vytvo en nástroj pro vizuální editaci databázových struktur a p íslušných vazeb mezi nimi. Nástroj bude mít podobu samostatné webové aplikace.

P ínosem práce je vznik online nástroje, kterému je umožn no spravovat databázi se snadnou instalací a bez nutnosti dodate né konfigurace na stran serveru. Dodržení správné a minimální pot ebné konfigurace serveru je zajiš ováno pomocí nástroje obsaženého v distribuci Nette.

Výsledný nástroj bude schopen zvládat p ipojení k lokálnímu serveru a za použití nepovinné hodnoty portu bude zvládat p ipojení i ke vzdálenému databázovému serveru.

K jednomu konkrétnímu databázovému serveru bude v aplikaci umožn no z jed- noho webového prohlíže e p ipojení více uživatel zárove .

Pomocí jednoduše ovladatelného a intuitivního webového rozhraní bude možné vi- zualizovat obsah databázového serveru od výpisu jednotlivých databází na serveru až po výpis dat z konkrétních tabulek. Vypsaná data z tabulek bude možné editovat.

Aplikace bude schopná vytvá et intuitivn jší schéma databáze oproti existujícím nástroj m za pomocí javascriptové knihovny JointJS pro tvorbu diagram .

Jednotlivým uživatel m s možností p ipojení k databázovému serveru bude možné m nit heslo a oprávn ní od globální úrovn až po úrove jednotlivého sloupce v tabulce.

Nástroj bude možné využívat na libovolném zobrazovacím za ízení od mobilního telefonu, tabletu, laptopu až po klasické monitory protože design bude využívat moderní responzivní technologii.

6 Postup vývoje aplikace

Samotný návrh a realizace ešení probíhaly sou asn , protože nebylo možné dosta- te n dop edu odhalit všechny souvislosti a problémy, které jsou s tvorbou aplikace spojeny. Aktuální ešení problému p icházelo vždy po absolvované konzultaci s vedou- cím bakalá ské práce.

Postup vývoje aplikace je vy len n do n kolika následujících kapitol, které ešenou problematiku podrobn popisují a objas ují.

6.1 Kontrola p ed spušt ním aplikace

P ed samotným spušt ním aplikace je nutné zajistit, aby byly spln ny alespo mi- nimální požadavky pro b h aplikace. Jelikož je celá aplikace vytvá ena pomocí Nette, je nutné, aby server spl oval minimální požadavky pro spušt ní Nette.

Sou ástí distribu ního balí ku Nette je samostatný nástroj nazvaný Requirement Checker. Tento nástroj po nahrání na server otestuje b hové prost edí, konfiguraci

serveru a informuje o možnostech a omezeních využití funkcí frameworku.

Nástroj provádí testování nad t mito požadavky [5]:

• Verze PHP – ke spušt ní je pot eba minimáln verze PHP 5.3.1 nebo vyšší

• .htaccess ochrana soubor – zkontroluje, zda je za pomocí .htaccess zakázán p ístup do chrán ných složek

• .htaccess mod_rewrite – kontrola p ítomnosti mod_rewrite pro podporu routování

• Funkce ini_set() a error_reporting() – p ítomnost t chto funkcí je z bezpe nostních d vod d ležitá

• Funkce flock() – tuto funkci vyžaduje cache pam

• Register_globals – jedná se o nebezpe nou direktivu PHP, která musí být vypnutá

• Zend.ze1_compatibility_mode – zajišt ní, aby byla kompatibilita s PHP

• Automatický start session prom nných – na základ bezpe nostních d vod je doporu eno nepoužívat

• Rozší ení Reflection, SPL, PCRE, ICONV, PHP tokenizer – jedná se o roz- ší ení PHP vyžadované frameworkem

• Rozší ení PDO – rozší ení PHP vyžadované Nette\Database

• Rozší ení Multibyte String – rozší ení PHP využívané funkcemi

Strings::lower() a Strings::upper()

• Rozší ení Memcache – rozší ení PHP podporované úložišt m cache

• Rozší ení GD – rozší ení PHP vyžadované p i použití Nette\Image

• Rozší ení GD Bundled – rozší ení PHP vyžadované p i použití metod

Nette\Image::filter()a Nette\Image::rotate()

• Rozší ení fileinfo nebo mime_content_type() – funkce využívaná pro zjiš o- vání MIME typu u nahrávaných soubor

Requirement Checker nebyl použit jako samostatný nástroj, ale stal se sou ástí apli- kace. P ed spušt ním aplikace nástroj provede otestování prost edí a konfigurace serveru.

V p ípad , že nastane n jaká závažná chyba, nebo nejsou spln ny minimální požadavky pro spušt ní Nette aplikace, dojde k zobrazení podrobností o chybách, které nastaly v pr - b hu testování. Teprve, když prob hnou všechny testy bez chyby, dojde ke spušt ní samotné aplikace.

Obrázek 4: Ukázka kontroly serveru p ed spušt ním aplikace v Nette

6.2 Vytvo ení p ipojení k databázovému serveru

Vstupním bodem do celé aplikace je vytvo ení p ipojení k databázovému serveru.

K tomuto ú elu slouží p ihlašovací formulá , který získává p ihlašovací údaje od uživatele. Na základ t chto údaj je vytvá eno p ipojení k databázovému serveru.

Pro p ipojení k databázovému serveru je nutné znát jeho umíst ní, v našem p ípad IP adresu ve verzi 4. Je možné uvést i íslo portu pro up esn ní, jedná se však o nepovinný údaj. Dále se získává jméno a heslo uživatele s nastaveným oprávn ním s možností p i- pojení na server. Posledním údajem je název databáze, který musí být shodný s názvem databáze na serveru.

V p ípad bezchybného zadání všech p ihlašovacích údaj dochází k p ipojení k da- tabázovému serveru. Pokud je n jaký z údaj vypln n chybn , dojde k výpisu chybové hlášky.

P i vývoji b žných webových aplikací v Nette se využívá toho, že jsou p ihlašovací údaje k MySQL databázi, se kterou po celou dobu aplikace pracuje ve výchozím stavu definované v konfigura ním souboru. V Nette se tyto údaje ukládají do konfigura ního souboru se syntaxí NEON.

nette:

database:

dsn: ‘mysql:host=localhost;port=3306;dbname=test’

user: ‘root’

password:

Zdrojový kód 3: P ihlašovací údaje k databázi v konfigura ním souboru NEON

Tento zp sob nebylo možné p i vývoji aplikace využít, jelikož se od aplikace o e- kává, že je schopná samostatného a automatického p ipojení k r zným databázovým server m. Nebylo možné využít statickou informaci uloženou v konfigura ním souboru pro p ipojení vždy pouze k jedné databázi, proto bylo nutností navrhnout vlastní zp sob vytvá ení p ipojení.

( ! " ) * + ,$ , - - .

Vlastní zp sob p ipojení zpracovává získané údaje z p ihlašovacího formulá e a vy- tvá í z nich p ipojení k databázovému serveru.

Nette disponuje knihovnou Nette\Database\Connection reprezentující propojení mezi PHP a databázovým serverem, která obsahuje konstruktor. Za využití konstruktoru je možné vytvo it p ipojení k databázi [13].

public __construct($dsn, $user = NULL, $password = NULL, array $options = NULL)

Zdrojový kód 4: Konstruktor Nette\Database\Connection

Pomocí konstruktoru z výše uvedené knihovny a p ihlašovacích údaj , bylo možné vytvo it p ipojení k databázi bez nutnosti použití konfigura ního souboru. Navíc byla za- chována možnost p ipojení se k více r zným server m.

6.3 Session prom nné

K tomu, aby bylo možné vytvá et p ipojení k serveru opakovan , je nutné získané údaje z p ihlašovacího formulá e uchovávat. Jelikož se má aplikace p ipojovat k r zným databázovým server m, není možné tyto údaje na ítat z konfigura ního souboru.

Nejvhodn jším zp sobem je využití session prom nných, kde se každý z údaj použitých v p ihlašovacím formulá i uloží do p íslušné prom nné. P ipojení k databázo- vému serveru je následn vytvá eno z t chto uložených údaj vždy, když vznikne požadavek na provedení n jaké operace nad databází.

( /0 1 , 2

Na rozdíl od istého PHP, kde je uložišt se session prom nnými realizováno jako pole p ístupné p es globální prom nnou $_SESSION, je v Nette toto úložišt d leno do sekcí. Sekce jsou objekty Nette\Http\SessionSection. Každá ást programu m že používat svou vlastní sekci s unikátním jménem a p edcházet tím vznik m kolizí v názvech.

Správu session prom nných obstarává objekt t ídy Nette\Http\Session, který nevy- tvá í instanci p ímo, ale získává tuto instanci t ídy jako službu session ze systémového DI kontejneru [14].

Nastává obdobný problém jako s vytvá ením p ipojení k databázi. V b žné webové aplikaci je sekce session prom nné definována vždy na za átku jedné ze t íd modelové vrstvy. Pokud by se p ihlašovací údaje více uživatel ukládaly do stejné session sekce, docházelo by k p emazání aktuáln uložených údaj nov p ipojeným uživatelem, což je nežádoucí efekt.

Pokud by se název session sekce náhodn generoval, vznikl by sice vždy originální název pro session sekci, ale p i op tovném p ipojení uživatele neexistuje zp sob, jak se k tomuto vygenerovanému názvu zp tn dostat.

( ! 3- 4 56 , 7 , * ) . 4 + ,14 4 7 8

Problém spojený s vytvo ením originálního názvu pro session sekci vy ešilo jedno z dalších vlastních ešení. Jelikož se každý uživatel p ihlašuje k databázovému serveru pod vlastním uživatelským jménem, bylo práv uživatelské jméno využito p i vytvá ení názvu session sekce.

Název session sekce je vytvo en pomocí hashe z uživatelského jména konkrétního uživatele, ímž je zajišt no op tovné vytvo ení názvu session sekce i p i uživatelov op - tovném p ipojení. Uživatelské jméno je p enášeno v celé aplikaci prost ednictvím parametru v URL adrese, aby se bylo možné kdykoliv p ipojit do konkrétní session sekce a z údaj v ní uložených vytvo it p ipojení k databázovému serveru. Tento zp sob eší problém hromadného p ipojení více uživatel z jednoho webového prohlíže e najednou, protože se vždy pro každého uživatele vytvo í originální název session sekce, do které si ukládají vlastní data.

public static function calculateHash($user) { if ($user === Strings::upper($user)) { $user = Strings::lower($user);

}

$user = substr($user, 0, self::PASSWORD_MAX_LENGTH);

return sha1($user);

}

Zdrojový kód 5: Funkce pro vytvo ení hashe z uživatelského jména

public function setSectionName($user) {

$this->sectionName = $this->calculateHash($user);

$this->section = $this->session->getSection($this->sectionName);

}

Zdrojový kód 6: Nastavení názvu session sekce pomocí uživatelského jména

6.4 Výpis databází na serveru

Aplikace je nyní ve fázi, kdy se dokáže bezpe n p ipojit k libovolnému databázo- vému serveru a zvládne p ipojení více uživatel prost ednictvím jednoho webového prohlíže e.

Po p ipojení aplikace k databázovému serveru je zobrazen výpis všech dostupných databází na serveru s dopl ujícími informacemi jako je název databáze, kódování, druh porovnání, velikost databáze a po et tabulek.

Pomocí následujícího SQL dotazu [15] jsou zjišt ny všechny názvy databází vy- skytujících se na serveru.

SHOW DATABASES;

Zdrojový kód 7: Výpis názv databází obsažených na serveru

Informace o kódování a porovnaní databáze jsou získávány ze systémových pro- m nných MySQL prost ednictvím následujících SQL dotaz [16].

SHOW VARIABLES LIKE 'character_set_database';

SHOW VARIABLES LIKE 'collation_database';

Zdrojový kód 8: Získání kódování a porovnání databáze

Využívá se zde informa ní databáze INFORMATION_SCHEMA, která poskytuje p ístup k metadat m databáze. Z databázových metadat je vypo ítáván údaj o velikosti databáze. V informa ní databázi je umíst na tabulka TABLES obsahující informace o ta- bulkách v databázích. Výsledkem sou tu hodnot ve sloupcích DATA_LENGTH, INDEX_LENGTH je velikost databáze v jednotkách bajt .

Hodnota výsledku v jednotkách bajt je následn p i výpisu v šablon , za pomocí nov vytvo ené funkce kibytes umíst né v knihovn s filtry Latte, p evedena na hodnotu

Pro zjišt ní po tu tabulek v databázi se op t využívá tabulka TABLES. Výpis dat je ovlivn n podmínkou. Hodnota ve sloupci TABLE_SCHEMA musí odpovídat názvu data- báze, pro kterou je zjiš ován po et tabulek. Výsledný po et tabulek odpovídá sou tu všech vypsaných ádk .

6.5 Tabulky v databázi

Obdobn jako výpis všech databází na serveru funguje i zobrazení všech tabulek v dané databázi, s tím rozdílem, že místo databází se zobrazují tabulky.

Veškeré informace o jednotlivých tabulkách jsou op t získávány z informa ní da- tabáze INFORMATION_SCHEMA z tabulky TABLES.

V následující tabulce jsou znázorn ny všechny sloupce, které byly pro výpis infor- mací o jednotlivé tabulce použity.

Tabulka 1: INFORMATION_SCHEMA.TABLES

TABLE_NAME - název tabulky

TABLE_ROWS - celkový po et ádk v tabulce ENGINE - typ úložišt

TABLE_TYPE - typ tabulky TABLE_COLLATION - porovnání DATA_LENGTH - velikost dat INDEX_LENGTH - velikost index DATA_FREE - volné místo

AUTO_INCREMENT - hodnoty auto increment TABLE_COMMENT - komentá

6.6 Struktura tabulky

Dalším bodem v procházení hierarchické struktury databáze je zobrazení struktury tabulky.

SHOW FULL COLUMNS FROM `databaze`.`tabulka`;

Zdrojový kód 9: Zobrazení struktury tabulky

Pro zobrazení struktury tabulky je použit výše uvedený SQL dotaz [17], pomocí n hož se zobrazí veškeré informace o struktu e jednotlivých sloupc v tabulce.

Výsledkem zpracovaného dotazu jsou informace o názvu sloupce, p íslušném da- tovém typu a jeho velikosti, v p ípad íselného datového typu znaménkové omezení.

U textových datových typ je uveden typ použitého porovnání. Každý sloupec uvádí, zda m že jeho hodnota obsahovat nulovou hodnotu, nebo jestli má p i azenou klí ovou hod- notu. Struktura tabulky obsahuje i informace o výchozí nastavené hodnot . Pole EXTRA obsahuje veškeré rozši ující informace, které jsou u sloupce k dispozici. Poslední dv pole obsahují informaci o p id litelném oprávn ní sloupci a komentá .

Obrázek 5: Ukázka zobrazení struktury tabulky

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á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.

{ifset $openEditModal}

<script>

$('#editModal').modal({

show: true, keyboard: true, backdrop: false });

</script>

{/ifset}

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">

&times;

</button>

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

{$table|upper}

<span class="glyphicon glyphicon-chevron-right small"> </span> Editace

</h4>

</div>

<div class="modal-body">

{ifset $openEditModal}

{control rowEdit}

{/ifset}

</div>

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

</div>

</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žadavk . Tohoto zp sobu by nebylo možné u editace 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í formulá 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 formulá odeslá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 komponenta 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 kompo- nent, do již existující kreslící plochy, vznikne výsledné požadované schéma databáze.

P i vytvá ení port v jednotlivé komponent typu joint.shapes.devs.Model, bylo v p vodním ešení realizováno obarvení jednotlivých port podle p íslušné skupiny datového typu sloupce v databázové tabulce. Obarvování m la na starosti ást ve zdrojo- vém kódu, u které se po testování zjistilo, že celý proces vykreslování schéma velmi zpož uje. Proces vykreslování schéma databáze se u složit jších databází, obsahujících velké množství vazeb mezi tabulkami, dostával až za hranici desítek vte in. Proto nebylo grafické zvýrazn ní jednotlivých port dle dané skupiny datového typu v aplikaci imple- mentováno a aplikace je schopná celé schéma databáze vykreslit až t ikrát rychleji oproti p vodnímu zamýšlenému ešení.

Obrázek 8: Ukázka vizuálního schéma testovací databáze SAKILA