ONLINE APLIKACE PRO TRANSFORMACI XML

ONLINE APLIKACE PRO TRANSFORMACI XML

Bakalářská práce

Studijní program: B2646 - Informační technologie Studijní obor: 1802R007 - Informační technologie Autor práce: Martin Hetver, DiS.

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

Leden 2015

ONLINE APPLICATIONS FOR RANSFORMING XML

Bachelor Thesis

Study programme: B2646 - Information Technology Study branch: 1802R007 - Information Technology Author: Martin Hetver, DiS.

Supervisor: Ing. Mojmír Volf

Leden 2015

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:

39

Poděkování

Rád bych na tomto místě poděkoval vedoucímu práce, panu Ing. Mojmíru Volfovi a všem ostatním, kteří se na ní podíleli, za poskytnutý čas, ochotu a trpělivost během konzultací.

Abstrakt

Tato práce seznamuje čtenáře se základní syntaxí a strukturou jazyka XML a jeho transformací pomocí XSL šablony. Dále porovnává výhody a nevýhody jednotlivých způsobů využití technologií pro transformaci jak na lokálním počítači, tak na vzdáleném serveru v závislosti na rychlosti internetového připojení.

V neposlední řadě také popisuje vznik a testování webového nástroje pro tuto transformaci a zároveň porovnává několik, již existujících, řešení.

Klíčová slova

XML, XSL, XSLT, PHP, JavaScript

Abstract

This thesis introduces the basic syntax and structure of XML and XSL transformations using templates. Shows the advantages and disadvantages of different transformation technologies both on the local computer and the remote server, depending on the speed of Internet connection. Also compares several existing solutions, and describes the creation and testing of custom Web tools for this transformation.

Keywords

XML, XSL, XSLT, PHP, JavaScript

Obsah

Zadání ... 3

Prohlášení ... 5

Poděkování ... 6

Abstrakt ... 7

Klíčová slova ... 7

Obsah ... 6

1 Úvod ... 8

2 Cíl práce ... 9

3 Úvod do problematiky zadání, porovnání již existujících řešení a technik ... 10

3.1 Průzkum již existujících online řešení ... 11

3.2 Ukázky jednotlivých řešení ... 12

3.2.1 http://www.w3schools.com/xsl/tryxslt.asp?xmlfile=cdcatalog&xsltfile=cdcatalog ... 12

3.2.2 http://www.freeformatter.com/xsl-transformer.html ... 13

3.2.3 http://xslt.online-toolz.com/tools/xslt-transformation.php ... 14

3.2.4 Tato aplikace ... 15

4 XML ... 16

5 XSL ... 18

5.1 Šablony XSL a transformace ... 18

5.1.1 Struktura a některé prvky XSLT ... 18

<xml:stylsheet> ... 18

<xsl:template> ... 18

<xsl:value-of…> ... 19

<xsl:apply-templates> ... 19

6 Vývojové prostředí ... 22

6.1 XHTML ... 22

6.2 CSS ... 24

6.3 CSS3 ... 24

6.4 PHP ... 24

6.5 JavaScript ... 26

6.6 JQuery ... 27

7 Postup řešení a problémy s ním svázané ... 28

7.1 CodeMirror ... 29

7.1.1 Deklarace textového editoru pomocí CodeMirror ... 29

7

7.2 Vstup a výstup ... 30

7.3 Detekce chyb ... 31

7.4 Realtime transformace ... 31

7.5 Potíže s JavaScriptem ... 32

7.6 Formátování výstupu ... 34

7.7 Vzhled ... 35

7.7.1 Verze1 ... 35

7.7.2 Verze2 ... 35

7.7.3 Verze3 ... 36

8 JavaScript vs. PHP ... 38

9 Testy ... 39

9.1 Sestava ... 39

9.2 Postup měření ... 39

10 Závěr ... 43

Zdroje informací ... 44

Příloha obsahu přiloženého CD ... 45

Datová struktura... 45

Text bakalářské práce ... 45

PHP server ... 45

Aplikace ... 45

8 1 Úvod

XML je velice rozšířený a hojně užívaný souborový formát, který má široké využití. Ať už se jedná o databázi v textové podobě určenou pro pozdější zpracování, možnou lokalizaci programu, export zpráv, případně nastavení rozložení grafického rozhraní k tomu přizpůsobené aplikace, vždy lze sáhnout po XML.

Jedná se o jeden ze základních a velmi jednoduchých značkovacích jazyků.

Jeho asi největšími výhodami je jednoduchost, přehlednost a fakt, že jej lze vytvářet nebo pouze upravovat v libovolném textovém editoru. Není tedy potřeba žádného speciálního vývojového prostředí, které bývá poměrně často poskytováno formou komerčního produktu, i když mnohdy obsahujícího spousty drobných vylepšení usnadňujících práci.

Tato bakalářská práce si klade za úkol vytvořit online aplikaci, která bude s těmito dokumenty pracovat a upravovat je v závislosti na vložené šabloně.

Online zpracování také nabízí, díky dostupnosti přes web, velice elegantně vyřešený problém kompatibility mezi jednotlivými operačními systémy.

9 2 Cíl práce

Cílem této práce by tedy mělo být seznámení se s rodinou dokumentů XML, porovnání již existujících řešení, zvolit správnou technologii a navrhnout a realizovat plně funkční a na prohlížeči nezávislé řešení transformace XML dokumentu s výstupem závislým na vložené šabloně, včetně jeho exportu do souboru. Dále ověření zátěže systému při zpracování a tím i porovnání rychlostí jednotlivých prohlížečů.

10 3 Úvod do problematiky zadání, porovnání již existujících řešení a

technik

Dle zadání je potřeba vytvořit online aplikaci pro transformaci XML dokumentů. Jde o široký a různě zpracovatelný požadavek, na nějž lze použít mnoho různých technologií, které ale s sebou přinášejí i nejrůznější komplikace (viz další kapitoly). Úkolem této práce bylo najít a porovnat již existující webová řešení, poučit se z jejich chyb a vybrat nejlepší možný způsob zpracování.

Základní rozhodnutí bylo určit, jakým způsobem aplikaci vytvořit.

Bude se vše zpracovávat na vzdáleném serveru a na PC se zobrazí pouze výsledek (PHP) nebo se má vše zpracovávat přímo na lokálním počítači (JavaScript)? Po několika pokusech s velice problematickým výstupem PHP[3] bylo rozhodnuto využít druhé možnosti, JavaScriptu. Díky tomuto řešení má aplikace ohromnou výhodu v tom, že po načtení není většina jejich funkcí závislá na internetovém připojení. Toto je hlavní problém naprosté většiny již hotových řešení, jelikož fungují pouze jako klient a požadovaný soubor odesílají na vzdálené zařízení ke zpracování. Serverové zpracování sice ulehčí klientskému počítači, ale vrácení výsledku může trvat déle

a v případě výpadku internetu na libovolné straně, výpadku serveru nebo odstávce služby je použitelnost ztracená. Dále je zde potencionální bezpečnostní problém s možným odposlechem na síti.

Bohužel lokální zpracování přináší i pár problémů, jako například různorodost zpracování JavaScriptu v jednotlivých prohlížečích nebo výpočetní náročnost odvíjející se od množství zadaných dat. I tímto se tato práce bude v pozdějších částech zabývat. Aplikace projde několika testy v různých prohlížečích a proběhne porovnání výsledků. V důsledku tohoto porovnání bude nakonec možné určit také prohlížeč, který se s JavaScriptem poradí nejrychleji a výsledek porovnat s oficiálními a veřejně dostupnými testy.

11

Na internetu je samozřejmě k dispozici spousta, již hotových, řešení. Jejich zpracování je v základu velice podobné, nakonec vycházejí ze stejné technologie, ale zároveň se dost liší.

Drtivá většina všech online aplikací využívá pro svůj chod kombinaci jednoho ze serverových jazyků, jako je PHP či ASP kontejner, a JavaScriptu, ale jádro, pro transformaci jako takovou, je vždy umístěno na vzdáleném serveru.

Z této skutečnosti by se dalo usoudit, že v rámci kompatibility mezi jednotlivými prohlížeči je problém různých pohledů na zpracování JavaScriptu všeobecně znám a proto jej k této činnosti využívá málokdo.

Jedná se sice pouze o domněnku, ale domněnku založenou na základě průzkumu existujících a volně dostupných transformačních nástrojů.

Na všech zde ukázaných webech proběhlo testování největším XML souborem, použitým při testu aplikace (tj.10MB) a ani v jednom z případů nebylo dosaženo výsledku. Proces byl vždy ukončen chybovou hláškou o překročení přiděleného času. I tato předběžná zkouška tedy potvrdila závěrečné hodnocení testování. Tj. serverový jazyk není (alespoň ve standardní konfiguraci ne) vhodným řešením pro datově objemnější XML soubory a je na místě uvažovat o lokálním zpracování.

12

3.2.1 http://www.w3schools.com/xsl/tryxslt.asp?xmlfile=cdcatalog&xsltfile=cdcatalog

Graficky příjemně jednoduchý editor[7] využívající kontejner ASP, umožňující vložení vstupních informací a stiskem jediného tlačítka získání požadovaného výsledku. Na rozdíl od následující ukázky však nezobrazuje výsledek v podobě kódu, ale vykreslený v grafické podobě, což sice dává přehlednější a graficky upravený výstup, ale pro mnohé potřeby je tato varianta zcela nevyhovující. Další, relativně závažný problém, je absence validity vloženého datového souboru. Veškerá kontrola syntaxe a konzistence kódu totiž probíhá až během transformace. Není tedy možné ověřit si případné chyby ještě před potvrzením akce. Také zde kompletně chybí zvýraznění jednotlivých tagů. Tato zdánlivě nedůležitá funkce je velice užitečným a neocenitelným nástrojem při případné editaci vloženého dokumentu, jelikož za její přítomnosti je uživateli okamžitě znázorněn každý překlep nebo neukončený či překřížený tag.

Obrázek 1 - w3schools.com transformator

13

3.2.2 http://www.freeformatter.com/xsl-transformer.html

Až na pár detailů se v podstatě jedná o obdobu této práce. Aplikace[8]

obsahuje dvě okna pro vkládání vstupních souborů, tj. XML a XSL[1][2], umožňuje upload souborů a jejich následnou transformaci a částečnou možnost volby tvaru výstupu. Transformace je prováděna pomocí JavaScriptu, ale na straně serveru. Nikoliv u klienta.

Informaci o možné chybě v XML souboru nebo XSL šabloně se však dozvíme až během transformace, opět bohužel ne okamžitě po jejím vytvoření. Dále není obsažen nástroj pro zvýrazňování tagů a možnost výstupu v grafické podobě. Výstup v „čistém kódu“ je sice velice praktická věc, ale například v případě výstupu ve tvaru HTML souboru je zobrazení aktuálního vzhledu webové stránky velice šikovná záležitost.

Obrázek 2 - freeformatter.com transformator

14

3.2.3 http://xslt.online-toolz.com/tools/xslt-transformation.php

Zcela nejjednodušší varianta transformátoru[9]. Převod je založen na PHP, detekce chyb téměř chybí a formát nebo odsazení výstupního textu není žádný. Pokud je tedy vstup bezchybný, na výstupu lze získat změť textu, který je alespoň odřádkovaný.

Všechny tyto editory mají jednu společnou a velice výraznou vadu. Pokud dojde při načtení stránky k výpadku spojení se serverem nebo jde o transformaci datově náročnějších souborů na pomalejším připojení, stanou se nepoužitelnými. Transformace jako taková totiž probíhá na straně serveru. Tzn při každém pokusu o její provedení proběhne upload požadovaných dat a výsledek je vrácen po jejich zpracování a opětovném stažení.

Obrázek 3 - xslt.online-toolz.com transformator

15

3.2.4 Tato aplikace

Pro porovnání zde přidávám ještě informace o aplikaci, kterou se zaobírá tato práce.

Tato aplikace umožňuje ruční vložení vstupních dat, případně jejich upload.

Dále automaticky provede kontrolu syntaxe XML i XSL souboru při jakékoliv jejich změně aniž by byla spuštěna transformace, kterou lze provádět buď vzdáleně pomocí PHP nebo lokálně s využitím JavaScriptu.

Druhá varianta nevyžaduje rychlé připojení a po načtení webu není internet potřeba vůbec.

Vložený kód má zvýrazněny tagy a volbu výstupu mezi čistým, formátovaným, kódem a grafickým režimem. Dále umožňuje výstup uložit do souboru.

Jednu vlastnost ale mají všechny tyto nástroje společnou. A to jednoduchou a uživatelsky nenáročnou obsluhu, přehledné rozhraní, snadno čitelný výstup a požadavek na validní vstup XML a XSL souborů.

16 4 XML

XML[6] je základní strukturovaný značkovací jazyk, který je určen pro velmi široké využití napříč všemi systémy.

Pod pojmem „strukturovaný“ si můžeme představit něco, co by se dalo nazvat textová databáze. Jedná se o textové informace roztříděné do jednotlivých kategorií a bloků podle předem definovaných požadavků.

XML vzhledem i syntaxí vychází z jazyku HTML, který je vyvíjen stejným týmem, a který působí pod záštitou W3C konsorcia. Hlavním impulzem pro započetí vývoje byla absence jakéhokoliv způsobu přenosu informací v obecném tvaru, tj. bez použití speciálního, v mnoha případech uzavřeného, formátu, charakteristického pro danou aplikaci, který je často obtížně zpracovatelný aplikací jinou. Výsledkem snažení se stal souborový formát čitelný v libovolném textovém editoru a pro svou editaci vyžadující minimum odborných vědomostí, XML. Již od počátku vývoje bylo myšleno na potencionální možné rozšíření do všech zemí, tudíž jako standardní znaková sada byla definována sada Unicode, obsahující veškeré existující symboly všech světových jazyků.

Jeho struktura má stromový charakter. Pod tímto si lze představit vždy jeden kořenový prvek, který obsahuje podmnožiny následujících elementů rozdělených a pojmenovaných podle požadavků uživatele.

Stejně jako XHTML, i XML má jisté základní požadavky na validitu dokumentu.

Mezi několik základních patří: a) Neprázdné prvky musí být označeny párovým tagem a všechny tagy musí být uzavřeny. (<element> a <Element> jsou brány jako dva, rozdílné, elementy)

b) Veškeré atributy musí být uzavřeny v uvozovkách. Použití jednoduchých nebo dvojitých uvozovek není přesně

17

vyžadováno a mohou se vnořovat, ale jednotlivé typy se nesmí křížit

c) Jednotlivé elementy se mohou vnořovat do sebe, ale nesmí se křížit

d) Dokument musí obsahovat vždy a pouze jenom jeden kořenový element

<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet type="text/xsl" href="stranka-tridena- rekurzi.xsl" ?>

<catalog>

<cd>

<title>Empire Burlesque</title>

<artist>Bob Dylan</artist>

<country>USA</country>

<company>Columbia</company>

<price>10.90</price>

<year>1985</year>

</cd>

</catalog>

18 5 XSL

XSL (Extensible Stylesheet Language) byl původně zamýšlen jako robustnější CSS pro XML dokumenty zajišťující jejich formátování a celkový vzhled. Během vývoje se ale ukázalo, že se projekt prakticky rozdělil do dvou samostatných celků: na kód zajišťující transformaci dokumentu podle v něm definovaných pravidel a instrukcí, tzv. XSLT a stylový návrh formátování tohoto výstupu, XSL-FO. Obě tyto části jsou umístěny v jednom souboru a na první pohled je patrné, kde jedna končí a druhá začíná.

Syntaxe XSL dokumentu je založena na značkovací syntaxi jazyku XML, tudíž se na jeho validaci dá celkem obstojně použít stejný mechanismus jako u XML dokumentu.

5.1 Šablony XSL a transformace

Základ XML transformace tvoří XSL šablona, která se aplikuje na XML dokument a v závislosti na její struktuře bude vytvořen validní výstup.

Výstup může být čistý text, HTML kód, XML se zcela odlišnou strukturou, SVG obrázek nebo spousta jiných věcí.

Každá šablona obsahuje dvě základní informace: Na jaké části XML bude použita a způsob zpracování dané části, tzv. XSLT.

5.1.1 Struktura a některé prvky XSLT

Jak bylo zmíněno dříve, XML i XSL mají stromovou strukturu s hlavním požadavkem na uzavření tagů. XSLT, jakožto část XSL dokumentu, není výjimkou.

<xml:stylsheet>

Nepovinná informace říkající procesoru, s jakou verzí XSL má pracovat a kde najde připojenou stylovou šablonu pro daný dokument.

<xsl:template>

Předloha, určující nad jakými prvky bude provedena transformace.

Každý element obsahuje atribut „match“, který identifikuje všechny cílové prvky aktuálního kroku transformace.

19

<xsl:value-of…>

Elementy z XSLT mají přístup ke všem údajům z původního XML dokumentu, které mohou libovolně vkládat do výstupu. K tomuto účelu slouží prvek value-of. Value-of obsahuje atribut select, říkající, na jaký element se má procesor zaměřit a ze kterého má brát text. Přebíraným textem je myšlen čistý textový řetězec, jenž je zbaven veškerých formátovacích znaků a symbolů.

<xsl:apply-templates>

Procesor XSLT standardně zpracovává dokument postupně, odshora dolů a postupně se zanořuje do jednotlivých elementů. V tomto pořadí se také aplikují šablony na jednotlivé prvky.

Díky prvku apply-templates lze tento průchod do značné míry ovlivnit nebo kompletně pozměnit. Umožňuje totiž kdykoliv během transformace definovat, který prvek bude zpracován v následujícím kroku nebo dokonce který prvek bude vynechán.

20

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<meta http-equiv="Content-Type" content="text/html;

charset=UTF-8"/>

<body>

<h2>

Katalogy CD </h2>

<hr/>

<br/>

<table>

<tr>

<th>titul</th>

<th>umělec</th>

<th>rok vydání</th>

</tr>

<xsl:apply-templates />

</table>

</body>

</html>

</xsl:template>

<xsl:template match="catalog/cd">

<tr>

<td><xsl:value-of select="title"/></td>

<td><xsl:value-of select="artist"/></td>

<td><xsl:value-of select="year"/></td>

</tr>

</xsl:template>

</xsl:stylesheet>

21

Jak bylo zmíněno výše, XSL soubory se používají převážně v souvislosti s transformací XML dokumentů. V podstatě se jedná o převod XML souboru do lehce odlišné, nebo zcela jiné, struktury.

Ať už se jedná o drobnou úpravu ve smyslu odstranění několika položek či o kompletní přeformátování do html kódu, případně čistého textu nebo čehokoliv jiného, výsledný formát a postup je vždy popsán v XSL šabloně.

Celý proces transformace je realizován pomocí XSLT procesoru, který je dnes nedílnou součástí spousty vyšších programovacích jazyků nebo webových prohlížečů. Pro vykonání transformace existuje mnoho nástrojů, ale cílem této práce je využít JavaScriptový XSLT procesor integrovaný v nejčastěji používaných internetových prohlížečích a XSLT procesor integrovaný v jazyce PHP.

Bohužel každý prohlížeč provádí transformaci pomocí JavaScriptu trochu jiným způsobem a je třeba se vypořádat s následky oněch rozdílných postupů. Tomuto problému bude ale věnován prostor v pozdějších částech, stejně jako pokusům o jejich řešení.

22 6 Vývojové prostředí

Pro usnadnění vývoje programu existuje spousta různých textových editorů.

Od obyčejného poznámkového bloku (který je mimochodem jednoduchý a velice snadno použitelný) přes nespočet dalších freeware aplikací jako je PSPad nebo Eclipse až po licencované programy, mezi které patří například Rapid PHP a spousty dalších.

V této práci byl využit především velice oblíbený PSPad, který je volně ke stažení a podporuje všechny programovací jazyky, které jsou v tomto případě potřeba. Jedná se především o XHTML, PHP, CSS a JavaScript.

6.1 XHTML

XHTML je značkovací jazyk, který vychází z jazyka HTML. HTML jazyk se používá k vývoji webových stránek. Jeho vývoj byl nejprve ukončen ve verzi nesoucí označení 4.01, ale v roce 2007 založilo konsorcium W3C skupinu, jejímž cílem bylo pokračovat ve vývoji HTML jazyka a ve druhé polovině roku 2014 jej představit v 5. verzi. Tento úkol byl nakonec 28.10.2014 úspěšně splněn.

XHTML (Extensible HyperText Markup Language) tedy má velice podobnou strukturu kódu s jazykem HTML. V určitých pravidlech se liší, ale příkazy (tagy) jsou ve většině případů totožné.

Mezi hlavní rozdíly patří: -nutnost opatřit zdrojový kód stránky hlavičkou ve správném formátu

-Všechny tagy musí být řádně ukončené, a to včetně tagů nepárových, které se ukončují znakem „/“

-zákaz používání samostatných hodnot (například vyřazení textboxu v HTML se provedlo příkazem disabled. XHTML vyžaduje zápis disabled=’disabled’)

-nemožnost použití některých formátovacích tagů

23

Existují ovšem i pravidla, která vyžadují oba jazyky:

-zákaz křížení tagů (tagy musí být ukončeny v opačném pořadí, než byly otevřeny)

-hodnoty jednotlivých parametrů musí být v uvozovkách

Hlavním důvodem vzniku XHTML byla snaha o oddělení datové a grafické části kódu. V samotném kódu stránky není povolené použít většinu formátovacích tagů, jako například <center> nebo <align>. Předpokládá se, že všechna tato formátování budou provedena pomocí jazyka CSS, jehož kód je umístěn v externím souboru a informace o něm je vložená to hlavičky stránky.

XHTML se dělí do třech kategorií:

-Strict (předpokládá oddělení grafické a datové části kódu, ale některé formátovací značky umožňuje)

-Transitional (navržen pro starší prohlížeče, umožňuje použití formátovacích tagů)

-Frameset (rozšířená verze Transitional, která umožňuje vkládání jiných stránek pomocí rámců)

Správně napsaná stránka v jazyce XHTML se označuje jako validní.

Pro kontrolu validity existují nástroje, tzv. validátory, které prověří stránku řádek po řádku a určí, zda je vše v pořádku.

24

Velice jednoduchý jazyk, který umožňuje grafické formátování webové stránky se zachováním validity.

Do stránky se vkládá v hlavičce, buď pomocí tagu <style> nebo se vloží odkaz na externí soubor, který obsahuje formátovací kód.

Příkaz vypadá následovně:

<link rel="stylesheet" type="text/css" href="styl.css" />

Mezi základní formátovací tagy patří DIV nebo SPAN s vlastností „id“ nebo

„class“. Těmito příkazy se „orámuje“ blok textu nebo jakéhokoliv jiného obsahu a následně se upravuje jeho vzhled.

<div id=’styl’>obsah bloku</div>

Pomocí CSS lze ovšem formátovat jakýkoliv tag použitý v těle stránky.

6.3 CSS3

Nová verze CSS[4], která je stále ještě ve vývoji. Finální verze je plánována na rok 2015, ale již dnes jej podporuje drtivá většina prohlížečů a lze se poměrně často setkat s weby využívajícími vlastností CSS3. Nová verze kaskádového stylu přináší množství novinek a zjednodušení, co se grafiky webu týče. Mezi dnes asi nejpoužívanější patří zaoblené rohy, stínování a pohyb objektů bez použití JavaScriptu.

Hlavní novinka CSS3 je ale jeho modularita. Tzn. celý projekt je rozdělen na menší moduly zajišťující různé funkce. Tím je zaručena snadná rozšiřitelnost bez nutnosti vydávání nových a nových verzí nebo neustálého rozšiřování původní specifikace.

6.4 PHP

Jedná se o velice rozšířený skriptovací jazyk, který se používá hlavně na tvorbu jednoduchých i složitých dynamických webových stránek nebo aplikací.

PHP se řadí mezi vyšší programovací jazyky, je velice oblíbený a hlavně není nijak těžké se jej naučit. Jedna z jeho hlavních výhod spočívá v tom,

25

že svou syntaxí vychází z mnoha jiných programovacích jazyků, jako je například C, JavaScript a další.

Mezi další kladné vlastnosti patří:

-Platformová nezávislost (nezáleží na jakém operačním systému se stránka zobrazuje)

-Proměnné není nutné deklarovat v hlavičce programu a není nutné ani určovat typ proměnných. V okamžiku přiřazení hodnoty se proměnná sama vytvoří a navíc jí lze kdykoliv přetypovat.

-Kód je zabezpečen proti krádeži. Je totiž zpracováván interpreterem na straně serveru a k uživateli se dostane až výsledek.

-Není vyžadována kompilace kódu

PHP je sice velice oblíbený a rozšířený jazyk. To ovšem neznamená, že je dokonalý a bezchybný. Při podrobnějším zkoumání lze nalézt několik více či méně závažných chyb. Mezi ty drobnější patří například slabší podpora unicode, nekonzistentnost pojmenování funkcí (strchr() vs. str_replace()) nebo neschopnost zachování hodnot proměnných bez použití speciálních nástrojů. Pokud totiž nepoužijeme například session, po znovunačtení stránky dojde k vymazání hodnot všech proměnných. .

PHP se aktuálně (duben 2014) nachází ve stabilní verzi 5.5 s tím, že vývoj nadále pokračuje, ale data vydání následujících verzí nejsou předběžně určena.

26

Kód napsaný v PHP je od zbytku stránky oddělen značkami „<?php“ a „?>“.

Lze v něm kombinovat jazyk HTML s vlastním programem a tím získávat zajímavé výsledky. Malá ukázka, vypisující pozdrav:

<?php

$promenna=’world’;

Echo ‘<h2>Hallo ’.$promenna.’</h2>’;

?>

Výsledný HTML kód bude vypadat takto:

<h2>Hallo world</h2>

6.5 JavaScript

JavaScript je mnohdy zaměňován s jazykem Java. Tyto dva jazyky mají ale pouze podobnou syntaxi, jinak se jedná o dvě odlišná vývojová prostředí.

Stejně jako PHP, je JavaScript objektový skriptovací jazyk využívaný při tvorbě webových stránek. Od PHP se však liší jednou podstatnou věcí:

PHP je zpracováváno na serveru interpreterem a k uživateli se dostane až výsledek operace, takže celý kód je skrytý.

JavaScript je v naprosté většině případů uložen v těle webové stránky a server jej nevidí. Kód je tedy zpracován, až po stažení do počítače, pomocí webového prohlížeče. Proto je uživateli volně přístupný. V nedávné době ale byl vypuštěn i JavaScript fungující na straně serveru, ovšem ten je mimo profesionální webové aplikace využíván minimálně.

Tento způsob s sebou ovšem nese jednu nevýhodu. Vzhledem k velkému počtu různých internetových prohlížečů je prakticky nemožné zajistit 100%

kompatibilitu při zpracování (o tomto problému bude zmínka později v souvislosti s výsledkem transformace).

Další překážky kladou tomuto jazyku do cesty prohlížeče samotné.

Umožňují totiž JavaScript blokovat. Tato funkce sice omezí nebo v mnoha případech dokonce znemožní funkčnost webové stránky, ale na druhé straně je uživatelský počítač poté mnohem méně ohrožen před útoky škodlivých kódu umístěných na internetových stránkách.

27

JavaScript často na stránkách vykonává pouze estetickou funkci, jakou jsou například různá animovaná menu, dotazovací dialogy a jim podobné. Může ale plnit také důležitější úkoly, mezi které patří třeba základní funkcionalita toho projektu.

6.6 JQuery

Jedná se o volně šiřitelný framework, který je založen na JavaScriptu a značně ulehčuje práci při programování. Jeho základní myšlenka je velice podobná XHTML. Snaží se oddělit datovou část kódu od programové.

V hlavičce stránky stačí vložit informaci o načtení externího souboru a poté pouze pomocí parametrů v tagu odkazovat na jednotlivé funkce.

JQuery podporuje mnoho pluginů, které z něj dělají velice účinný a neuvěřitelně jednoduchý nástroj.

Zavolání knihovny JQuery:

<script src="scripts/jquery.js" type="text/javascript">

</script>

Zápis textu do elementu DIV pomocí JavaScriptu:

document.getElementById('muj_div').innerHTML = 'Vložený text';

Zápis textu do elementu pomocí jQuery:

$(‘#muj_div‘).text(‘Vložený text’)

28 7 Postup řešení a problémy s ním svázané

Jak bylo zmíněno výše, jako první bylo potřeba vybrat správnou technologii a jazyk pro vytvoření aplikace. Vzhledem k požadovanému zadání a ke zkušenostem se jako první nabídl scriptovací jazyk PHP ve standardním spojení s XHTML a částečně JavaScriptem.

Po vytvoření testovací aplikace a provedení několika zkoušek sice vše fungovalo, ale vracející se výsledky byly často neúplné nebo chybné.

Toto platilo především pro transformace podle složitější šablony využívajících například třídění pomocí rekurze atd. Nelze tvrdit, že transformace pomocí PHP není funkční, můžeme ale prohlásit, že při testech na několika freehostingových serverech byly výsledky značně zmatené.

Převážně z tohoto důvodu nakonec bylo rozhodnuto aplikaci napsat v JavaScriptu, i když toto řešení s sebou nese spousty dalších problémů (viz dále).

Základ celé aplikace tvoří dvě okna pro textový vstup a jedno pro výstup transformačního procesu. Pro začátek byly použity čisté elementy textarea, které ale časem přestaly vyhovovat požadavkům kladeným na vzhled a potřebné funkce. Mezi vyžadované vlastnosti, jež standardní prvek textarea nesplňuje, patří mimo jiné:

-zvýrazňování syntaxí

-kontrola uzavřenosti tagů

-počítání řádků a pozice kurzoru

-zvýrazňování aktivního řádku

Na internetu je k dispozici mnoho nástrojů, které tyto problémy řeší, ale žádný z nich není universální. Tj. vybaven všemi potřebnými funkcemi.

Po delším pátrání byla nalezena knihovna CodeMirror, která toto vše, po zapojení potřebných pluginů, poskytuje.

29

CodeMirror[5] je volně šiřitelná JavaScriptová knihovna fungujicí na principu nahrazení elementu textarea vlastním, podstatně vylepšeným, textboxem. Obsahuje množství srozumitelných, snadno pochopitelných a hlavně

ve většině případů jednoduše odhadnutelných API, vysokou přizpůsobivost vzhledu pomocí CSS a spousty dalších příjemných a práci usnadňujících funkcí. Jeho největší výhoda ale je v tom, že je šířen jako opensource pod licencí MIT. MIT licence povoluje libovolné šíření kódu s podmínkou zachování a přiložení znění této licence.

Použití je zcela jednoduché. Do HTML kódu se vloží obyčejná textarea s parametrem ID, který je níže pomocí JavaScriptu rozpoznán a nahrazen novým textovým editorem s požadovaným nastavením.

7.1.1 Deklarace textového editoru pomocí CodeMirror var editor =

CodeMirror.fromTextArea(document.getElementById("xml"), { mode: "xml",

lineNumbers: false, lineWrapping:true, styleActiveLine: true,

matchTags: {bothTags: true}, extraKeys: {

"'<'": completeAfter, "'/'": completeIfAfterLt, "' '": completeIfInTag, "'='": completeIfInTag, "Ctrl-Space": function(cm) {

CodeMirror.showHint(cm, CodeMirror.hint.xml, {schemaInfo: tags});

} } });

30

Jak bylo zmíněno výše, CodeMirror obsahuje množství pluginů, které lze použít a tuto knihovnu libovolně rozšířit o mnoho funkcí. Jednou, v tomto projektu velice podstatnou, je kontrola uzavřenosti párových tagů a částečná kontrola tagů nepárových. Jedná se o velice užitečný nástroj, který odhalí spousty chyb vznikajících při editaci jak XML dokumentů, tak XSL šablon.

7.2 Vstup a výstup

Pro vkládání dat do vstupních formulářů lze využít dvě odlišné možnosti:

-Přímý vstup: XML a XSL obsah lze jednoduše napsat nebo vložit přes schránku OS. CodeMirror kód analyzuje a provede označení jednotlivých syntaxí, zkontroluje ukončení všech párových tagů a v případě doplňování nabídne našeptávač usnadňující práci.

Během libovolné editace je stále sledována konzistence syntaxí.

-Upload: Druhý způsob je možnost využití formuláře pro upload. Upload probíhá na pozadí pomocí PHP scriptu. V tomto případě je využita technologie Ajax.

Script ověří, zda má zvolený soubor správnou koncovku (xml/xsl) a poté provede upload. Dále je s textem pracováno stejně, jakoby byl vložen nebo napsán.

Výstup je směrován do jednoho ze dvou kontejnerů, v závislosti na uživatelově volbě:

-Transformovat: Je zobrazena třetí instance CodeMirror s vlastností ReadOnly, do které je nasměrován výstup transformace. Výsledkem je čistý kód v požadovaném tvaru. Výsledek transformace ale není nijak formátovaný, proto bylo nutné napsat nový podprogram, který vytvoří odsazení jednotlivých řádků kódu.

31

-Formátovaný výsledek: Ve výstupním kontejneru je zobrazen DIV, do kterého se vloží kód generovaný v předchozí volbě, ale není označen jako text, tudíž se (například v případě HTML) zobrazí správně zformátovaná a kompletní webová stránka.

V každém případě je po zvolení akce „Uložit“ generován txt soubor s textovým výstupem, který je nabízen volně ke stažení.

7.3 Detekce chyb

Aplikace je schopna detekovat a ohlásit velké množství možný chyb na straně vstupu a tím zamezit neplatným hodnotám na výstupu. V první řadě je použita klasická vlastnost MirrorCode, detekce uzavřených tagů.

Tento plugin odchytí většinu chyb, ale zdaleka ne všechny. Jako pomoc se ukázala vhodná volba v podobě zjednodušeného jádra transformace samotné, které se volá ve vlastnosti onChange vstupního okna. V podstatě je na pozadí proveden pokus o transformaci a v závislosti na jeho výstupu se ohlásí chyba nebo korektní kód. Díky tomuto řešení je chybové hlášení téměř důvěryhodné, i když zcela určitě ne neomylné.

7.4 Realtime transformace

Pro jednodušší a názorné úpravy šablony nebo XML dokumentu je připraven nástroj „Realtime transformace“, který po každé provedené změně na vstupu okamžitě přepočítá výsledek a změnu ihned projeví na výstupu.

Jedná se výpočetně náročnější část, nicméně s velice efektním výsledkem.

Nicméně tato funkce způsobovala potíže s rychlostí transformace v InternetExploreru, proto je v tomto prohlížeči potlačena.

32

Jak bylo zmíněno dříve, hlavní funkční část aplikace je napsána v jQuery, respektive v JavaScriptu. Toto rozhodnutí se sice podepíše na výkonu, který bude vysoce závislý na výkonu počítače a na použitém prohlížeči, ale bude zajištěno, že uživatel dostane požadovaný výsledek i s případným problematickým internetovým připojením.

Zvolený postup se jevil jako správná cesta, ale s postupným přibýváním a rozšiřováním funkcí se začal výstup čím dál tím více vzdalovat od požadovaného výsledku. Tento problém byl způsoben různými jádry prohlížečů, starajícími se o zpracování JavaScriptu.

Jako příklad lze uvést:

FireFox: -Zpracování rychlé, výstup čistého i formátovaného kódu zcela v pořádku, odsazení korektní

Opera: -Zpracování rychlé, výstup čistého i formátovaného kódu žádný

Chrome: -Zpracování rychlé, výstup čistého i formátovaného kódu nepoužitelný – zobrazil se vždy pouze první řádek, odsazení nevhodné

IE: -Nulová funkcionalita

S výjimkou IE proběhla transformace zcela v pořádku a bezchybně ve všech prohlížečích, problémy nastaly až při pokusu onen výsledný kód vypisovat.

Každý prohlížeč obsahuje ladící nástroj pro JavaScript, který zahrnuje inspektora DOM dokumentů. Po zobrazení obsahu aktuálního dokumentu se vše zdálo správně, dokument obsahoval správný výsledek se vším všudy, bohužel při pokusech o jeho vypsání standardní cestou se projevovaly výše zmíněné problémy.

33

Problematický výstup se podařilo nahradit vytvořením parseru DOM dokumentu. Jednoduše řečeno, namísto spolehání na jeden příkaz zajišťující výpis, byl vytvořen kód, který rozebere DOM dokument a požadovaný výsledek postupně sestaví.

Writer je složen z jednoho „switche“, který slouží jako jakási křižovatka volající 3 různé funkce zajišťující složení validního výstupu.

DOM je postupně procházen a jsou v něm vyhledávány 3 kategorie:

Element_node, Text_node a Document_fragment_node, které se postupně vkládají do proměnné později vložené do výstupního kontejneru.

Toto řešení je sice trochu náročnější na čas, ale představuje elegantní způsob, jak se téměř vyhnout všem problémům. Jeho implementací byl zprovozněn výpis ve všech prohlížečích včetně Internet Exploreru, se kterým byla asi největší potíž. Bohužel ani toto řešení není zcela ideální, jelikož každý prohlížeč má jinou strukturu NODu a toto se projevilo chybějícím prvním a posledním řádkem výstupu v Opeře a Google Chrome. Firefox a paradoxně Internet Explorer s tímto problém nemají a vše funguje.

Nabízelo se zde řešení zapracovat do aplikace knihovny standardní desktopové javy, která transformaci také umožňuje. Toto řešení se ale ukázalo ještě náročnější na výkon než aktuální, proto od něho bylo odstoupeno.

Vzhledem k tomu, že základ programu je napsán v JavaScriptu a problémy s kompatibilitou mezi jednotlivými prohlížeči jsou z předchozích zkušeností dobře známy, bylo rozhodnuto u tohoto stavu zůstat a zahrnout jej do závěrečného porovnání rychlosti a kvality zpracování JS jednotlivými prohlížeči.

Z důvodu logického požadavku na správný výstup a zadání, bylo nakonec rozhodnuto do aplikace zapracovat i zpracování na straně serveru, tedy pomocí PHP. Předchozí problémy se ukázaly jako chyba na straně hostingu, tudíž je možné použít i transformaci online. Na stránce je umístěn select box, jenž přepíná mezi zpracováním lokálním nebo vzdáleným, díky čemuž

34

lze porovnávat jak jednotlivé výsledky, tak čas potřebný k transformaci jako takové.

7.6 Formátování výstupu

Výstup po transformaci byl dlouhý text bez jakéhokoliv odřádkování nebo odsazení a pokud se již nějaký náznak o formát objevil, ve většině případů byl zcela nepoužitelný. Proto bylo nutné vytvořit vlastní funkci, která bude zajišťovat korektní vzhled výstupního kódu. V první řadě bylo nutné odfiltrovat veškeré přebytečné mezery a odřádkování a po té je nahradit vlastními, na správném místě. I zde se projevila dříve zmiňovaná nekompatibilita. V Opeře a Firefoxu vše fungovalo, ale v Google Chrome se objevilo vždy odřádkování navíc a Internet Exploreru pro jistotu odřádkování nefungovalo vůbec. U Chromu stačilo vložit na správné místo mezikrok odstraňující nadbytečné odřádkování, u IE bylo nalezení problému horší. Později se ukázalo, že Internet Explorer nepoužívá k zajištění odřádkování klasický symbol „\n“, ale symbol „\r“. Po jeho implementaci vše začalo fungovat.

Internet Explorer jako takový si v podstatě vyžádal v několika případech celkovou duplikaci kódu, jelikož potřeboval úpravy čistě na míru, které jinde nefungovaly nebo naopak způsobovaly funkční chyby.

35

Vzhled je nedílnou součástí každého webu nebo webové aplikace, tohoto projektu nevyjímaje. Stránka během vývoje postupně vystřídala 3 CSS šablony, z nichž každá byla zcela odlišná od šablon ostatních, ale žádná z dříve použitých zcela nevyhovovala požadovanému a hlavně funkčnímu řešení.

7.7.1 Verze1

Zcela jednoduchý web s hlavičkou a levým postranním panelem obsahujícím menu. Layout se od jeho následovníků lišil především animovaným menu a přechodem mezi jednotlivými okny. Jako jediný totiž obsahoval záložky pro jednotlivé vstupy, respektive výstupy a přechod mezi nimi byl zprostředkován jakýmsi zasunutím s využitím knihovny jQuery. Tento vzhled ale byl poměrně brzy nahrazen z důvodu nepřehlednosti a problematického ovládání

7.7.2 Verze2

Zde bylo přistoupeno ke kompletnímu přepracování rozložení. Tzn. již nebylo jedno vstupní okno na stránku, ale byla zobrazena obě okna včetně třetího, výstupu, najednou. Dva vstupní panely byly umístěny nad sebou a pod nimi byl výstupní kontejner. Toto zpracování bylo výrazně přehlednější a jednodušší na ovládání, ale postrádalo jakousi originalitu a oživení. To byla hlavní záminka k pokusům se zcela jinou grafikou.

Obrázek 4 - verze 2

36

7.7.3 Verze3

Třetí verze, finální, je výsledkem snahy o uživatelsky příjemné a přehledné prostředí s intuitivním ovládáním a důrazem na jednoduchost. Na stránce opět jsou dvě vstupní okna, tentokrát vedle sebe, s výstupem pod nimi.

Jedná se o jedinou šablonu, ve které je použita nová verze CSS 3, konkrétně efekt stínování, zaoblení rohů a gradientu. V tomto bodě je nutné podotknout, že je podmínka, aby prohlížeč CSS 3 podporoval, ale i přes to, že tato verze ještě není zcela standardizována, v drtivé většině prohlížečů vše funguje korektně.

Rozvržení webu bylo otestováno a shledáno jako funkční, ale bylo třeba řešit jeho vzhled i na zařízeních s nižším rozlišením než je fullHD, na kterém byl web vyvíjen. Ukázalo se totiž, že grafika se na menších monitorech výrazně deformuje.

Obrázek 5 - verze 3

37

Nabízela se dvě řešení: a) Kompletní úprava CSS pro zobrazení na nižším rozlišení a s tím spojené zmenšení na fullHD monitorech

b) Vybavení webu více CSS styly, které se budou automaticky načítat v závislosti na HW konfiguraci zařízení

Byla vybrána druhá možnost, tudíž dva styly. Jeden pro vysoké rozlišení a druhý pro to nižší.

V indexu webu jsou nalinkované oba stylovací soubory, ale každý z nich je opatřen hlavičkou, která udává, za jakých podmínek se má onen konkrétní styl použít. V tomto bodě je opět využita nová verze CSS 3, jelikož CSS 2 neumožňuje podmínky ve stylech.

Pro rozhodování, jaký styl načíst, je použit dotaz @media, který aplikuje nastavení ze svého bloku až po splnění vložených podmínek. Dříve se standardně používaly předvolby @media print (tisk), @media projection (projektor) a další. S CSS 3 přišla možnost dát na místo těchto předvoleb vlastní podmíněný dotaz, například na určité rozlišení.

V tomto případě je použita podmínka na minimální šířku obrazovky:

@media (min-width: 1300px) {} pro monitory s vysokým rozlišením a podmínka pro maximální šířku obrazovky pro monitory s nižším rozlišením @media (max-width: 1299px) { }.

38 8 JavaScript vs. PHP

Během vývoje aplikace bylo, z několika důvodů, na místě očekávání rychlejšího zpracování pomocí PHP:

a) Ne každý počítač disponuje požadovaným výkonem

b) Server má specializovaný HW i SW pro náročné výpočty

V tomto ohledu byly výsledky testu velice překvapivé, jelikož se ukázalo, že zpracování pomocí JavaScriptu je mnohem rychlejší a spolehlivější.

Ano, JavaScript sice zatěžuje místní počítač a výsledek nemusí být, v závislosti na prohlížeči, kompletní, ale nemá žádné časové omezení, pouze je hlídaný prohlížečem, kterému lze oznámit, že delší zpracování je v pořádku.

Toto se bohužel nedá říct o PHP. Při transformaci pomocí PHP je potřeba XML soubor i šablonu uploadovat na server a po té zpracovat a vrátit výsledek. U větších souborů trvá upload neúměrně dlouho a cílový server v mnoha případech ohlásí překročení přiděleného časového kvanta a transformaci ukončí.

U menších souborů je PHP transformace zajisté výhodnější a jednodušší, ale u větších ji nelze doporučit.

Stejně tak se k využití JavaScriptu staví jednotlivé prohlížeče zcela porůznu (viz. průběhy grafů a tabulka průměrných hodnot).

V rychlosti zpracování na celé čáře vedl Google Chrome, ohromné problémy s časem měla Opera a například Internet Explorer 11 nebyl schopen u větších souborů (necelých 500 000 řádků a 10.2MB) ani pořádně načíst zadání.

39 9 Testy

9.1 Sestava

Základní deska: Gigabyte GA-MA790X-UD4P CPU: AMD Phenom II X4 955, 3.2GHz

RAM: 6GB

OS: Windows 7 Professional, 64bit

9.2 Postup měření

Měření probíhalo na šesti různých XML souborech (212 řádků / 4.6kB, 4530 řádků / 100kB, 22852 řádků / 500kB, 46962 řádků / 1MB, 90976 řádků / 1.9MB, 477545

řádků / 10.2 MB) se vždy stejnou šablonou. Každý měřící pokus byl 10x zopakován a zprůměrovaný výsledek byl zanesen

do tabulky.

Každý jednotlivý krok měření je také zobrazen na ose grafu. U větších souborů byla PHP transformace

nepoužitelná

z důvodu nastavení serveru. Proto testování probíhalo převážně na lokálním PHP serveru, kde byl maximální povolený čas vykonávání zvýšen z třiceti vteřin na neomezeno. Bohužel i zde trvaly větší soubory neúměrně dlouhou dobu.

JS [ms] PHP [ms] lokalPHP [ms]

FireFox 69,9 313 62

Opera 40 272 65

Chrome 41,1 276 75

IE 65,2 256 68

FireFox 101 / 950

Opera 122,6 / 952

Chrome 103 / 968

IE 115 / 931

Firefox 317 / 58000

Opera 801 / 57000

Chrome 401 / 58000

IE 397 / 56000

FireFox 622 / 250000

Opera 2423 / 241000

Chrome 855 / 258000

IE 909 / 253000

FireFox 1448 / /

Opera 7559 / /

Chrome 1471 / /

IE 1917 / /

FireFox 12146 / /

Opera 209188 / /

Chrome 8783 / /

4.6 kB

1.9 MB

10.2 MB 100 kB

500kB

1MB

40

0 20 40 60 80 100 120

1 2 3 4 5 6 7 8 9 10

Doba zpracování (ms)

Měření

XML - 212 řádků, 4.6kB (JavaScript)

FireFox Opera Chrome IE 11

0 20 40 60 80 100 120 140 160

1 2 3 4 5 6 7 8 9 10

Doba zpracování (ms)

Měření

XML - 4530 řádků, 100kB (JavaScript)

FireFox Opera Chrome IE 11 Graf 1 - 212 řádků

Graf 2 - 4530 řádků

41

0 100 200 300 400 500 600 700 800 900

1 2 3 4 5 6 7 8 9 10

Doba zpracování (ms)

Měření

XML - 22582 řádků, 500kB (JavaScript)

FireFox Opera Chrome IE 11

0 500 1000 1500 2000 2500 3000

1 2 3 4 5 6 7 8 9 10

Doba zpracování (ms)

Měření

XML - 46962 řádků, 1MB (JavaScript)

FireFox Opera Chrome IE 11 Graf 3 - 22582 řádků

Graf 4 - 46962 řádků

42

0 1 2 3 4 5 6 7 8 9

1 2 3 4 5 6 7 8 9 10

Doba zpracování (s)

Měření

XML - 90976 řádků, 1.9MB (JavaScript)

FireFox Opera Chrome IE 11

0 50 100 150 200 250 300

1 2 3 4 5 6 7 8 9 10

Doba zpracování (s)

Měření

XML - 477545 řádků, 10.2MB (JavaScript)

FireFox Opera Chrome IE 11

Graf 6 - 477545 řádků Graf 5 - 90976 řádků

43 10 Závěr

Ačkoliv se výsledek této práce zdál předem zcela jasný (JavaScript bude plně funkční, nicméně vzhledem k závislosti na uživatelově PC v mnoha případech nepoužitelný a PHP rychlé, odladěné a zcela bezproblémové), výsledek přesvědčil o opaku.

Bez použití externích a specializovaných knihoven je JavaScript na některých prohlížečích lehce problematický co se výstupu transformace týče a z daleka ne jednotný.

Oproti tomu transformace s využitím PHP má výsledek vždy stejný, ale nastává problém s většími soubory, které je nutné uploadovat na vzdálený server.

JavaScript pouze zaneprázdní systém, výsledek se ovšem dostaví téměř vždy. PHP server při delším zpracování úkol ukončí a oznámí timeout, tudíž také není 100% spolehlivý.

S JavaScriptem sice jsou problémy napříč jednotlivými prohlížeči, ale je výrazně spolehlivější než PHP, jelikož data neodesílá na žádný vzdálený počítač, ale veškeré zpracování probíhá lokálně. Není tedy omezen přiděleným serverovým časem, vypršením platnosti spojení atd.

Toto je i jedna z myšlenek, která se vyskytla na počátku projektu: Vytvořit aplikaci, která po kompletním načtení již nebude závislá na internetovém připojení.

44 Zdroje informací

[1] KOSEK, Jiří. XSLT v příkladech. [online]. [cit. 2014-12-14]. Dostupné z:

http://www.kosek.cz/xml/xslt/

[2] KOSEK, Jiří. XSLT – jazyk budoucnosti. XSLT – jazyk budoucnosti [online]. 2009, č. 6, 9.11.2009 [cit. 2015-01-05]. Dostupné z:

http://www.zdrojak.cz/clanky/xslt-jazyk-budoucnosti/

[3] LAHVIČKA, Jiří. PHP - základní informace. PHP - základní informace [online]. 2000, č. 1, 12. 06. 2000 [cit. 2015-01-05]. Dostupné z:

http://interval.cz/clanky/php-zakladni-informace/

[4] ŠIMEČEK, Martin. CSS3 - držte krok s dobou (nové vlastnosti). CSS3 - držte krok s dobou (nové vlastnosti) [online]. 2010, č. 1, 2. 9. 2010 [cit. 2015- 01-05]. Dostupné z: http://programujte.com/clanek/2010070801-css3-drzte- krok-s-dobou-nove-vlastnosti/

[5] Code Mirror [online]. [cit. 2015-01-05]. Dostupné z: http://codemirror.net/

[6] SKONNARD, A.; GUDGIN, M. XML - pohotová referenční příručka : referenční příručka programátora ke XML, XPath, XSLT, XML Schema, SOAP a dalším. 1st ed. Praha : Grada, 2006. ISBN 80-247-0972-4.

[7] W3SCHOOLS. XSLT Tryit Editor v1.0 [online]. [cit. 2014-12-14].

Dostupné z:

http://www.w3schools.com/xsl/tryxslt.asp?xmlfile=cdcatalog&xsltfile=cdcatal og

[8] Free Online XSL Transformer (XSLT) [online]. [cit. 2014-12-14].

Dostupné z: http://www.freeformatter.com/xsl-transformer.html

[9] OUDA, Karim. XSL Transformation [online]. [cit. 2014-12-14]. Dostupné z: http://xslt.online-toolz.com/tools/xslt-transformation.php

45 Příloha obsahu přiloženého CD

Přiložené CD obsahuje kopii této práce ve formátu PDF a DOC, výslednou aplikaci (která je k dispozici také na webové stránce

http://ceeper.php5.cz/new) a SW EasyPHP vytvářející lokální PHP server nutný pro správný chod.

Datová struktura

Text bakalářské práce

Text_BP/BP_2015_Hetver.pdf

Text_BP/BP_2015_Hetver.doc

PHP server

PHP/EasyPHP.exe

Aplikace

Aplikace/*.*

Samotná aplikace je rozdělena do několika adresářů: cm, data, pretty a upload.

Root/ -transform.php -kód starající se o transformaci pomocí PHP

-Upload.php -obstarává upload souborů

Cm/ -datová struktura knihovny CodeMirror

Data/ -CSS styly a JavaScriptové soubory aplikace

Akce.js -obsahuje veškeré akce, které obsluhuje JavaScript

Browser.js -knihovna pro detekci prohlížeče

Form_upload.js -obstarává upload

Hint.js -deklarace CodeMirror

Styl_hr.js -CSS styl pro monitory s vysokým rozlišením

46

Styl_lr.js -CSS styl pro monitory s nižším rozlišením

Transofmr.js -kód zajišťující transformaci pomocí JavaScriptu

Upload.css -CSS styl pro uploadovací formulář

Working.gif -animace při práci

Pretty/ -datová struktura nástroje pro zvýrazňování tagů

Upload/ -složka, do které se umísťují uploadované soubory a exportovaný výstup