Mendelova univerzita v Brně Provozně ekonomická fakulta
Webová aplikace pro vytváření logických herních úloh a jejich sdílení Bakalářská práce
Vedoucí práce: Ing. Jiří Lýsek, Ph.D.
Jakub Vlachovský
Brno 2015
Děkuji panu doktoru Jiřímu Lýskovi za cenné konzultace při přípravě této bakalářské práce a za jeho výuku v rámci předmětu Webové aplikace, jež byl i díky němu velmi přínosným zdrojem do praxe. Také bych chtěl poděkovat panu doktoru Davidu Procházkovi, neboť jeho výuka Základů objektově orientovaného programování a programovacího jazyka C++ mi velmi pomohla lépe chápat objektové programování i v jiných programovacích jazycích. V neposlední řadě bych rád poděkoval mé nejbližší rodině a přítelkyni za jejich podporu jak při studiu, tak při tvorbě této práce.
Čestné prohlášení Prohlašuji, že jsem tuto práci: Webová aplikace pro vytváření logických herních úloh a jejich sdílení vypracoval/a samostatně a veškeré použité prameny a informace jsou uvedeny v seznamu použité literatury. Souhlasím, aby moje práce byla zveřejněna v souladu s § 47b zákona č. 111/1998 Sb., o vysokých školách ve znění pozdějších předpisů, a v souladu s platnou Směrnicí o zveřejňování vysokoškolských závěrečných prací. Jsem si vědom/a, že se na moji práci vztahuje zákon č. 121/2000 Sb., autorský zákon, a že Mendelova univerzita v Brně má právo na uzavření licenční smlouvy a užití této práce jako školního díla podle § 60 odst. 1 Autorského zákona. Dále se zavazuji, že před sepsáním licenční smlouvy o využití díla jinou osobou (subjektem) si vyžádám písemné stanovisko univerzity o tom, že předmětná licenční smlouva není v rozporu s oprávněnými zájmy univerzity, a zavazuji se uhradit případný příspěvek na úhradu nákladů spojených se vznikem díla, a to až do jejich skutečné výše. V Brně dne 3. února 2015
_______________________________
Abstract VLACHOVSKÝ J. Web application for logic games creation and sharing. Bachelor thesis. Brno: Mendel University, 2015. This thesis contains the concept of implementation and description of executing a web application providing a general interface to create and play certain types of logic games. It also includes the description of technology applied to create the application. Keywords Web application, PHP, HTML, CSS, JavaScript, jQuery, games, logic games
Abstrakt VLACHOVSKÝ J. Webová aplikace pro vytváření logických herních úloh a jejich sdílení. Bakalářská práce. Brno: Mendelova univerzita v Brně, 2015. Tato práce obsahuje návrh na realizaci a popis realizace webové aplikace, ve které lze pomocí obecného rozhraní tvořit a hrát určité typy logických her. Také se rámcově zabývá popisem technologií použitých pro tvorbu aplikace. Klíčová slova Webová aplikace, PHP, HTML, CSS, JavaScript, jQuery, hry, logické hry
Obsah
9
Obsah 1
Úvod
13
2
Cíl práce
14
3
JavaScript
15
3.1
JavaScript frameworky/knihovny obecně.............................................................. 15
3.2
jQuery.................................................................................................................................... 16
3.2.1 3.3
5
Ostatní JavaScript frameworky ................................................................................... 18
3.3.1
Modernizr .................................................................................................................. 18
3.3.2
Bootstrap ................................................................................................................... 19
3.3.3
MooTools ................................................................................................................... 19
3.3.4
Prototype ................................................................................................................... 19
3.3.5
YUI Library................................................................................................................ 19
3.3.6
Dojo Toolkit .............................................................................................................. 19
3.4 4
jQuery UI .................................................................................................................... 18
JavaScript MVC frameworky ........................................................................................ 20
Další použité technologie
21
4.1
PHP......................................................................................................................................... 21
4.2
HTML ..................................................................................................................................... 21
4.3
CSS .......................................................................................................................................... 21
4.4
(My)SQL ............................................................................................................................... 22
4.5
VPS ......................................................................................................................................... 22
4.6
Debian s ISPConfig ........................................................................................................... 23
Návrh aplikace 5.1
24
Volba technologií .............................................................................................................. 24
5.1.1
Programové pozadí editoru a hry .................................................................... 24
5.1.2
Ukládání dat a jejich zpětné načítání .............................................................. 24
5.1.3
Registrace, přihlašování ...................................................................................... 24
5.2
Návrh databáze ................................................................................................................. 25
10
Obsah
5.2.1
Hra ................................................................................................................................ 25
5.2.2
Uživatel ....................................................................................................................... 25
5.2.3
Vazba entit Hra – Uživatel ................................................................................... 26
5.3
6
5.3.1
Editor........................................................................................................................... 27
5.3.2
Hra ................................................................................................................................ 27
Realizace aplikace 6.1
8
28
WordPress ........................................................................................................................... 28
6.1.1
Instalace ..................................................................................................................... 28
6.1.2
Nastavení ................................................................................................................... 28
6.1.3
Plugin na přihlašování .......................................................................................... 29
6.1.4
Plugin na vylepšení emailů ................................................................................. 29
6.1.5
Šablona ....................................................................................................................... 29
6.2 7
Návrh ovládání .................................................................................................................. 27
Engine systém .................................................................................................................... 29
Ukázky z aplikace
30
7.1
Navigace – přihlášen X nepřihlášen .......................................................................... 30
7.2
Editor..................................................................................................................................... 30
7.3
Rubrika článků & článek ................................................................................................ 31
Závěr
32
8.1
Dosažené výsledky ........................................................................................................... 32
8.2
Přínos použitých technologií ....................................................................................... 32
8.3
Dostupnost .......................................................................................................................... 32
8.4
Alternativní využití .......................................................................................................... 33
8.5
Možnosti rozšíření ........................................................................................................... 33
8.5.1
Modifikace ovládání .............................................................................................. 33
8.5.2
Modifikace herního prostředí ............................................................................ 33
8.5.3
WordPress ................................................................................................................. 33
9
Literatura
34
A
Obsah přiloženého CD
37
Obsah
B
Logo aplikace
11
38
Úvod
13
1 Úvod Rád bych se krátce zmínil o tom, co mne vedlo k této bakalářské práci, protože to považuji za naprosto zásadní podnět. V průběhu svého života jsem se setkal s mnoha lidmi, kterým jsem hůře vysvětloval některé věci, které byli, z jejich pohledu, velmi složité a určené pro IT specialisty. Přitom, z pohledu mého, to byli ve skutečnosti věci jen základního logického rázu. Jelikož to většinou byli lidé s inteligenčním kvocientem vyšším, než je běžný průměr, došel jsem k závěru, že zde pochybilo základní vzdělávání a že je tedy potřeba nějakým způsobem podpořit možnost logického vzdělání. Jako příznivec školy hrou, respektive školy obrazovými vjemy, jsem tedy zvolil věnovat se této problematice v bakalářské práci, neboť jde zde potenciál přínosu širší veřejnosti. Především, ale rozhodně ne pouze, té adolescentního věku.
14
Obsah
2 Cíl práce Jako jedním z hlavních cílů práce jsem si zvolil návrh realizace webové aplikace, která by naprosto záměrně neměla být robustní, ale naopak velmi lehká. Praktickým cílem by totiž mělo být vytvoření základního editačního prostředí, jehož ovládání se půjde dát poměrně intuitivně naučit. Také by mělo být převážně ovladatelné jen myší. Podobné platí i pro ovládání hry při hraní. Hra by měla být velmi snadno ovladatelná jednoduchým ovládáním klávesnice a myši. Pokud se tvůrce zaregistruje a přihlásí, měl by mít možnost vidět svůj seznam vytvořených her, případně i možnost vytvořené hry smazat. Následující hlavní cíl je vytvořit webovou aplikaci pro moderní prohlížeče, která bude odpovídat zmíněnému návrhu. Dalším z hlavních cílů je zhodnocení vytvořeného návrhu, příkladu realizace a také zhodnocení přínosu použitých technologií. Vedlejším cílem je poté rámcové představení použitých technologií PHP, HTML, CSS, v neposlední řadě pak především JavaScriptu a některých frameworků pro webové prohlížeče v něm napsaných – hlavně frameworku jQuery a jeho nadstavby jQuery UI (jQuery user interface).
JavaScript
15
3 JavaScript JavaScript je interpretovaný objektový programovací jazyk založený na ECMAScript skriptovacím jazyce, pro jehož implementaci jsou průběžně vydávány standardy společností Ecma International®. Je vyvíjen společnostmi Netscape Communications Corporation a Mozilla Foundation. V jazyce JavaScript se dá programovat jak procedurálně, tak objektově. Jeho syntaxe patří do rodiny C-like a nejvíce se podobá asi programovacím jazykům Java a C++. Na rozdíl od např. C++ je však postaven na prototypovém objektovém systému – vytvořené objekty jsou dynamicky měnitelné a lze z nich vytvářet další podobné objekty. Nejvíce se využívá na klientské straně webových stránek; umožňuje např. komunikaci klientské strany se serverem i po načtení stránek (např. prostřednictvím asynchronního XML požadavku nebo vyžádáním zdroje po uživatelské reakci a podobně). Dále umožňuje různé další dynamické akce na klientské straně, čímž odlehčuje serveru z výpočetního výkonu a je dobrým nástrojem pro zlepšení uživatelského zážitku. JavaScript lze ale také využít i jako serverový jazyk.
3.1
JavaScript frameworky/knihovny obecně
Zásadní odlišení knihovny od frameworku je v tom, že ji používáme k tomu, abychom něco teprve vytvářeli, a říkáme jak. U frameworku je to spíše určovaní, kde se co má udělat. V JavaScriptových nadstavbách se ale tento rozdíl často smývá už v knihovně, nehledě na to, že některé knihovny mají např. přímo nadstavbu pro uživatelská okna, dialogy apod. A vzhledem k tomu, že ani sami autoři často nemají v tomto jasno, zásadní je ve výsledku jenom to, jak danou nadstavbu využíváme přímo my – zda jako knihovnu, framework nebo hybrida. Přestože spousta věcí se dá naprogramovat, jak se říká, v „čistém“ JavaScriptu velmi snadno, není tomu tak vždy. Jako zářný příklad je využití technologie AJAX – asynchronní JavaScript a XML (dnes bývá XML často nahrazováno JSON – JavaScriptovou objektovou notací). Pro využití této technologie bez pomocného frameworku je potřeba využít ne příliš čitelné konstrukce. Navíc AJAX objekt zajišťující AJAX požadavek je modul, který byl sjednocen až v novějších prohlížečích, byl to tedy opět frameworkem velmi snadno řešitelný problém. Většina nejpoužívanějších frameworků (které dále zmíním) totiž buď přímo poskytuje sjednocené rozhraní pro všechny aktuálně běžné prohlížeče, nebo alespoň nabízejí možnost prohlížeč nějak rozlišit a podle toho reagovat (např. Modernizr). Nejvíce se však budu věnovat frameworku, resp. knihovně jQuery, neboť z praxe vím, že je nejpoužívanější. To konec konců potvrzuje i následující statistika z únoru 2015:
16
Obsah
Obrázek 1 Diagram využití JavaScript frameworků ( Zdroj: http://w3techs.com/technologies/overview/javascript_library/all ) Zajisté za povšimnutí stojí více jak třetina z celkového využití JavaScriptu, která žádný framework nepoužívá. Nevyužití frameworku může mít více důvodů, z hlavních důvodů je dobré uvést jednoduchost aplikace – pokud je aplikace velmi triviální, framework nemá význam. Jako další důvod pak bývá výkon – JavaScriptové knihovny bývají někdy zbytečně robustní a provádějí akce, které reálně nejsou potřeba, jsou například jen pro usnadnění. Není tomu však tak vždy, existují frameworky resp. knihovny optimalizované pro výkon, které slouží jen jako pomůcka, ne jako přímo nástroj pro tvorbu. Velké srovnání licencí a funkcionalit je možné shlédnout na stránce anglické Wikipedie (http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks), tato encyklopedická stránka má sice kvalitní seznam zdrojů, je však nutno ji brát s rezervou, neboť nevíme jakým systémem autor při sběru informací postupoval, navíc informace zde uvedené především nemusí být aktuální…
3.2
jQuery
jQuery je jeden z nejpoužívanějších JavaScript frameworků vůbec a to i přesto, že to je jeden z těch robustnějších. Důvod pro to je jasný z jeho webové dokumentace.
JavaScript
17
Za prvé je už sama dokumentace velmi dobře zpracovaná, za druhé tento framework přináší veliké usnadnění pro programátora. Framework volí dobře zapamatovatelné názvy funkcí, resp. metod a názvů struktur objektů, z čehož tedy i trochu vyplývá, že poskytuje obecné rozhraní společné pro všechny hlavní webové prohlížeče – až na výjimky, které ale bývají většinou uvedeny v dokumentaci. Velmi snadno se tedy v jQuery řeší AJAX požadavky apod. Také pokud není možnost konfliktu s jinou knihovnou, poskytuje zjednodušený zápis – místo jakéhokoli volání jQuery stačí zavolat jen $. Další velkou výhodou je možnost používání CSS selektorů, což velmi usnadňuje výběr elementů z objektového modelu dokumentu (dále jen DOM). Ať už elementy vstoupí do jQuery pomocí CSS selektorů, nebo přímo jako elementy z DOMu, jQuery vrátí objekt, který obaluje vybrané elementy. Z tohoto obalového objektu (dále jen jQuery element) je pak možno volat jQuery metody. Pokud se jQuery element ukládá do proměnné, je pro jednoznačnost často použit prefix proměnné „$“. jQuery metody lze volat i přímo na jQuery framework. Je to totiž sám o sobě objekt, který kromě toho, že funguje jako továrna na jQuery elementy a jejich metody, má i svoje vlastní metody. Poměrně zajímavou záležitostí je, že, i přes zmiňovanou „obalovost“ je možné zpětně získat původní objekt v DOMu. Toto se děje buď přes speciální klíčové slovo this v rámci nějakého kontextu, nejčastěji vyvolaného nějakou událostí, nebo pomocí metody jQuery elementu get(#index). jQuery také poskytuje metody, které nahrazují konstrukce chybějící v základním JavaScriptu, nebo jen velmi těžko v něm realizovatelné. Za zmínku stojí zajisté metoda each(), která se dá použít buď z jQuery elementu nebo přímo z frameworku – jedná se o podobný systém jako v PHP foreach(), který zde nahrazuje zbytečnou práci s for()cyklem. V obou případech volání pak metoda iteruje nad buď zvoleným objektem či polem (přímé volání), nebo nad elementy, které jQuery element obaluje (volání z jQuery elementu). Kromě navazování událostí pomocí metody bind, která velmi připomíná základní JS metodu addEventListener(), má jQuery tzv. „zkratky“, jedná se o metody, které ve skutečnosti volají opět metodu bind (metoda click(), mousemove(),…). Také existuje metoda on(), jenž může přijmout dokonce několik událostí zaráz (v podobě řetězce s oddělovačem mezera) a všem přiřadit stejný ovladač události (tzv. event handler) – to se velice hodí, protože kromě nějakých společných událostí mají prohlížeče některé události jinak pojmenované. Pro speciální mobilní události dokonce existuje rozšíření jQuery Mobile. Toto vše (a také obsažení základních animací a obecně nastavitelné metody animace animate()) dále usnadňuje tvorbu dalších rozšíření ve formě jQuery pluginů, jež se obvykle za běhu integrují jako metody jQuery elementů. Metody jQuery elementů (ať už originální přidané pomocí pluginů) mají zajímavou vlastnost v tom, že pokud z elementu nečerpají nějaké informace, ale informace naopak nastavují, nebo s elementem nějak jinak pracují, po jejich ukončení vrací opět jQuery element a často i ten původní (existují metody, které umí jQuery element přefiltrovat). Metody se tedy dají za sebou v celku neomezeně ře-
18
Obsah
tězit. Demonstrativní příklad by bylo nastavení všech elementů seznamu na zelenou barvu, poté profiltrování elementů jen na sudé a na ty aplikovat žluté pozadí, kód by pak mohl vypadat následovně: $('ul li, ol li') .css('color','green') .filter(':even') .css('background-color','yellow'); Framework je aktuálně vyvíjen ve dvou větvích – pro moderní prohlížeče a pro zastaralé prohlížeče. Pokud je potřeba aktualizovat framework, ale na předchozí verzi je zároveň závislý jiný kód, pak na tuto situaci jQuery má řešení ve formě tzv. „migrate“, tedy „stěhovacího“, zásuvného modulu (dále jen plugin). 3.2.1
jQuery UI
Za formu rozšíření se dá považovat i nadstavba jQuery pro uživatelské prostředí – jQuery UI. Toto rozšíření jednak nadstavuje některé metody již v původním jQuery (např. přidává průběhy animací), ale jednak také přináší spoustu nových metod. Pomocí toho rozšíření lze velmi snadno ovládat různé „drag&drop“ činnosti, vytvářet modální okna, různé animace (a jejich průběhy) a obecně mnoho dalších věcí, díky kterým lze webovou aplikaci poměrně snadno připodobnit aplikaci desktopové. Tento balíček je možné před stažením omezit jen na potřebné komponenty. Před stažením lze také navolit osobní vzhled jQuery UI prvků prostřednictvím webového rozhraní, nebo zvolit již z přednastavených stylů (balíček je pak distribuován spolu s těmito styly a základními obrázky).
3.3 3.3.1
Ostatní JavaScript frameworky Modernizr
Velmi lehká, spíše testovací nadstavba. Usnadňuje zjišťování prohlížeče, přidává třídy do html elementu za účelem zacílení CSS na prohlížeč. S rozšířením YepNope.js pak přibývá možnost podmínečného načítání CSS stylů nebo JavaScript skriptů. Příklad použití YepNope.js s Modernizrem: yepnope({ test : Modernizr.geolocation, //je k dispozici geolokace? yep : 'normalni.js', //pokud ano, přidej norm. skript nope : 'specialni.js' //pokud ne, přidej spec. skript });
JavaScript
3.3.2
19
Bootstrap
Bootstrap je open source framework pro celkovou stavbu designu webových stránek – od HTML, přes použití CSS preprocesorů k JavaScript frameworku, se kterým se hodí využít pluginy přímo prezentované Bootstrap. Tyto pluginy pak možňují např. modální okna, slidery, či dynamické boční menu. Tento framework si zakládá na responzivním zobrazení. Je to tedy minimálně dobrý základ, pokud chceme vytvořit rychle jednoduchý responzivní web. 3.3.3
MooTools
Tento framework je zajímavý svým přístupem k věci. Chová se spíše jako programátorův pomocník. Do jisté míry v základech funguje jako jQuery, ale svou syntaxí připomíná spíše základní JavaScript a nezaměřuje se zároveň na grafické záležitosti. Spíše pomáhá snáze pracovat s DOMem. Tedy pokud si chce programátor jen usnadnit práci, ale s menší zátěží na výkon MooTools bude dobrá volba (je lehčí než jQuery). 3.3.4
Prototype
Podobně jako MooTools, je tento framework jen základní pomůckou pro snazší práci s JavaScriptem. Snaží se rozšiřovat přímo původní objekty DOMu (od toho pravděpodobně název Prototype) a kromě toho vytváří i další pomocné třídy ke snadnějšímu použití některých věcí – opět např. AJAX je pak velmi snadno použitelný: new Ajax.Request('/adresa', { method:'get' }); Rozšíření script.aculo.us pak dokáže z Prototype udělat něco, co má již podobné funkcionality jako jQuery a část jQuery UI – animační framework, drag&drop, ajax, stavěč HTML pomocí JavaScript objektů,… 3.3.5
YUI Library
Framework vyvíjený primárně společností Yahoo! Inc., který je ale open source. Firma Yahoo! Inc. přestala kvůli technologickému pokroku a i z jiných důvodů projekt podporovat ve smyslu vyvíjení nových věcí. V budoucnu tak možná vyjdou jen opravy aktuální verze. 3.3.6
Dojo Toolkit
Vzhledem k tomu, co je sní možno dokázat, velmi lehká knihovna, spíše vhodná pro tvorbu desktopových aplikací, ne-li přímo simulaci grafického rozhraní operačního systému. Projekt je open source, zaštiťován nadací Dojo Foundation.
20
3.4
Obsah
JavaScript MVC frameworky
Vzhledem k rozvoji MVC přístupu je snaha přesunou tento přístup i do JavaScriptu, internetová stránka s názvem „Best JavaScript MVC Frameworks 2013-2014“ (http://jonathanmh.com/best-javascript-mvc-frameworks-2013-2014/) zmiňuje například Angular.js který je plně nezávislý a poté Backbone.js a Ember.js, které ke svému fungování potřebují jQuery jako základ. Tyto frameworky jsou ale poměrně málo využívané, je dobré je využít spíše u větších projektů, kde to může vést k lepšímu rozdělení práce na projektu.
Další použité technologie
21
4 Další použité technologie 4.1
PHP
Zkratka PHP značí hypertextový preprocesor. Z toho lze odvodit, že to je programovací jazyk na straně serveru. Stejně jako JavaScript patří do rodiny C-like, ale jeho syntaxe je odlišná. Obsahuje spoustu předprogramovaných funkcí a metod, respektive celých tříd, což na jednu stranu usnadňuje práci na serverové straně WWW aplikací. Na stranu druhou je to jazyk interpretovaný, má tedy mnohem větší nároky na výkon. Původní jazyk nebyl plně objektový, ale od verze PHP5 byl celý objektový model přepsán na přehlednější verzi, mnohem více připomínající například syntaxi JAVA nebo C++. Masivně se používá ve webových aplikacích na vytváření dynamických hypertextových dokumentů.
4.2
HTML
HTML je značkovací jazyk založený na velmi obecném značkovacím jazyce SGML. Je určen především pro vytváření stránek v systému WWW, ale lze ho použít i pro offline dokumenty. Původně HTML nerozlišoval styl a obsah, což se ale zásadně změnilo od verze HTML4. V posledních letech se začala, za spolupráce vývojářů hlavních webových prohlížečů, vyvíjet moderní verze jazyka označovaná jako HTML5. HTML dokument je textový dokument, tudíž ho lze editovat i s naprosto základním textovým editorem (např. Poznámkový blok ve Windows). Existují ovšem také tzv. WYSIWYG (volně přeloženo „co vidíš, to dostaneš“), v nichž lze vytvářet HTML dokumenty bez jakékoliv předchozí znalosti HTML značek. Tyto editory, ale většinou produkují zbytečně dlouhý kód a ne vždy zaručují kompatibilitu napříč všemi hlavními webovými prohlížeči.
4.3
CSS
Aby byl oddělen obsah od stylu začal se k HTML dokumentům přidávat kód definující styly dokumentu – tzv. kaskádové styly, zkráceně CSS. Ty jsou aplikovány na základě tzv. CSS selektorů – speciálního zápisu posloupnosti tagů, tříd, id a jiných speciálních selektorů určujících, pro které elementy konkrétní styl platí. Kaskádové jsou proto, že pro jejich aplikaci platí určité systémy dědičnosti; např. pokud přiřadíme velikost písma hlavnímu obsahovému elementu body tak to znamená (pokud neurčíme jinak), že bude styl aplikován na všechny v něm vnořené elementy. Styly se dají k HTML přiřadit 3 způsoby:
22
Obsah
1. Externí stylový soubor, přiřazený k HTML pomocí tagu link – nejnižší priorita. 2. Interní styl v rámci HTML, uvnitř tagu style – má střední prioritu. 3. Interní styl pro konkrétní element do atributu style, tohoto konkrétního elementu – zde již nefungují CSS selektory, píší se sem už jen konkrétní CSS vlastnosti; má nejvyšší prioritu.
4.4
(My)SQL
Poslední použitou technologií je databázový dotazovací jazyk SQL, respektive jeho implementace MySQL. Jazyk jako takový přímo neřeší implementaci daného požadavku, to řeší až konkrétní databázový stroj. Je tedy vhodný pro možnost použití jakési abstrakce při vytváření požadavků do databáze. Jazyk se dá rozdělit na 3 části: 1. Jazyk pro definici dat 2. Jazyk pro vkládání, úpravu a mazání dat 3. Dotazovací jazyk Přestože základ jazyka neobsahuje procedurální programování, existují rozšíření, která procedurální programování v rámci jazyka SQL umožňují (např. PL/SQL). Stroj MySQL pak implementuje různé ukládací databázové stroje, z nichž nejpoužívanější jsou pravděpodobně MyISAM, který obsahuje fulltextové vyhledávání, ale chybí mu možnost operací transakčního rázu a podpora vazeb mezi tabulkami pomocí tzv. cizích klíčů. To naopak má druhý stroj – InnoDB. Tomu ovšem zase schází ono fulltextové vyhledávání. Za zmínku stojí ještě ukládací stroj EXAMPLE, který vlastně sám o sobě nic nedělá. V kódové distribuci MySQL je tento stroj uveden jen jako ukázka toho, jak začít s tvorbou ukládacího stroje. Zajímavostí také je, že každá tabulka v té samé MySQL databázi může mít nastavený jiný způsob ukládání – jiný ukládací stroj. Tedy je možné volit v jedné aplikaci různé typy manipulace s daty, podle toho co je vhodnější pro daný typ dat.
4.5
VPS
Virtuální privátní server = VPS je uměle vytvořený systém, který se z pohledu správce chová a správce ho vidí jako celý fyzický server. Samozřejmě se může stát náhoda, že zrovna nějaký fyzický server bude obsahovat pouze jeden VPS, ale většinou jsou fyzické zdroje sdíleny mezi více virtuálními servery. Výhodou je cenová dostupnost oproti pronájmu fyzického serveru (nebo nákupu několika standardních webhostingů) a výkon oproti standardnímu webhostingu. Na rozdíl od standardního webhostingu je na VPS možné nastavit téměř cokoliv co se týče využívaného softwaru (stejně jako u fyzického serveru). Nevýhodou může být snížený výkon ve špičce nebo větší šance na hardwarový útok
Další použité technologie
23
kvůli sdílení hardwaru s jinými VPS. Výhoda možnosti hostovat více webů na jednom VPS se pak stává nevýhodou v momentě, kdy začne být nějaká komponenta chybová/nedostupná kvůli jednomu webu, zároveň totiž bude chybová/nedostupná i pro všechny ostatní weby na stejném VPS (například potřeba aktualizace PHP).
4.6
Debian s ISPConfig
Debian je název pro Linuxovou distribuci operačního systému, jejíž historie sahá až do roku 1993. Systém je ale dodnes aktivně vyvíjen velkou komunitou lidí a firem. Hlavní autoři Debianu mají evidentně velmi rádi film Toy Story (Příběh hraček), neboť po postavách z této filmové série pojmenovávají hlavní vydání Debianu. S pouhými 7 hlavními verzemi za téměř 2 dekády je tento operační systém jeden z těch umírněnějších, ale také stabilnějších. Je jednoduchý na údržbu, tudíž je poměrně vhodný a oblíbený pro webové servery. Webové rozhraní ISPConfig pak ze základních úkonů jako je tvorba webhostingu, databáze, či FTP účtu dělá pouze GUI (grafické uživatelské prostředí) nastavovací záležitost. Některé věci, především update softwaru, je, za normálních okolností, stále nutno provádět z příkazového řádku, ale vzhledem k repozitnímu systému instalace a aktualizace softwaru, na kterém bývá Linux obvykle postaven, ani toto není problém. Zajímavostí je, že jedna z velmi oblíbených linuxových distribucí pro stolní počítače – Ubuntu – je odvozeninou právě od Debianu.
24
Obsah
5 Návrh aplikace 5.1
Volba technologií
Obecně byly zvoleny nejpoužívanější technologie pro tvorbu webových aplikací, neboť k nim existují velmi kvalitní materiály jako dokumentace a příklady použití. Také je k nim velmi kvalitní podpora minimálně ve formě komunity lidí, kteří se těmito technologiemi zabývají. Zvolené technologie nejsou vždy nejvýkonnější, ale tato případná nevýhoda by neměla mít na tento ráz aplikace vliv, ale především tuto nevýhodu předčí jejich přehlednost a jejich rozsáhlé možnosti. 5.1.1
Programové pozadí editoru a hry
Pozadí editoru bude dobré realizovat pomocí JavaScriptu, respektive nadstavby jQuery, z důvodu předpokládané manipulace s DOM objekty a událostmi klávesnice a myši. Jelikož pravděpodobně budeme používat funkcionalitu drag&drop, bude dobré pomoci si zde nadstavbou pro jQuery – jQuery UI, která poskytuje přehledné nastavení této funkcionality. 5.1.2
Ukládání dat a jejich zpětné načítání
Zde je k zamyšlení zda aplikace bude dělat něco, na co by vyžadovala MVC přístup. Vzhledem k tomu, že aplikace bude fungovat především na klientské straně a serverová vyžaduje pouze uložení, validaci a načtení dat, není dle mého názoru MVC třeba. Co ale potřeba bude, je nějaké usnadnění práce s databází a textovým obsahem, jelikož je zde pravděpodobné, že časem přibydou nějaké články o logice a podobně. Toto jsou důvody, které jasně směřují na svobodný otevřený redakční systém WordPress, založený na PHP, MySQL a JavaScriptu. WordPress má přívětivé administrační prostředí a velké portfolio možností v různých formách jako je např. snadná tvorba šablon, widgetů nebo tzv. shortcodes (značkovací mini-jazyk nejen pro WYSIWYG editor, který umožňuje volání speciálních funkcí bez znalosti kódování HTML či PHP). Zároveň se ze strany PHP programátora chová i jako PHP Framework poskytující spoustu funkcí a objeků usnadňujících tvorbu webu, především pak rozhraní pro práci s (nejen) WordPress databází. 5.1.3
Registrace, přihlašování
Jelikož bude potřeba možnost nějaké registrace, aktivace účtu a přihlášení a zároveň již máme k dispozici WordPress, bude vhodné využít nějaké rozšíření pro
Návrh aplikace
25
WordPress, které se zabývá správou uživatelů. Rozšíření je mnoho, stačí jen vybrat to, co nám nejvíce vyhovuje.
5.2 5.2.1
Návrh databáze Hra
Pro uložení hry potřebujeme především ID, pod kterým budeme hru ukládat, a pomocí kterého budeme pak hru zpětně zobrazovat. Dále budeme potřebovat ID autora – tato možnost bude moci mít i speciální prázdnou hodnotu NULL. Je to z toho důvodu, že hru může nahrávat i anonym. Pokud se však uživatel přihlásí, naopak potřebujeme vědět, zda nemá již nějaké uložené hry. Ke hře by bylo dobré znát také nějaké popisné informace jako je název hry a informace o hře. Co je nutné, je mít záznam pro kód hry, co naopak není nutné je uložení data a času, kdy byla hra uložena. Ovšem to se nám teoreticky může hodit pro statistiky užívání editoru. Vytvoříme tedy speciální tabulku pro hry. Vytvoříme ji ve stejné databázi jako má tabulky WordPress proto, abychom mohli snadno s tabulkou manipulovat za pomocí nástrojů, které WordPress v PHP poskytuje.
Obrázek 2 Grafické znázornění tabulky hry a užitých datových typů 5.2.2
Uživatel
U uživatele v podstatě potřebujeme ukládat jen jeho ID, přihlašovací údaje, aktivační klíč, a zda byl jeho účet již aktivován či nikoli. Jak si ale budeme moci všimnout na následujícím obrázku, WordPress ukládá i nějaké informace navíc.
26
Obsah
Obrázek 3 Grafické znázornění uživatelské tabulky WordPressu WordPress tedy ukládá navíc jen jakési „pěkné jméno“ což je z pozorování sanitizovaný login (bez speciálních znaků jako je např. „@“ u emailu), uživatelskou url a jméno jaké se má zobrazovat. Také souběžně ukládá login a email kvůli případu kdy někdo má jiný login, než je jeho email. Jestliže takto rozšířený systém má základ tabulky téměř stejný jako jsem navrhl, můžeme částečně předpokládat, že jsem ji navrhl správně, jen triviálnější – opravdu základní verzi. 5.2.3
Vazba entit Hra – Uživatel
Aplikace nesmí čerpat zásadní data pro manipulační databázové dotazy od uživatele, naopak musí tyto údaje získávat sama ze zdrojů serveru – např. sezení uživatele tzv. „session“ a to buď přímo, nebo je možné využít WordPress funkci, která zajišťuje obecné rozhraní get_current_user_id(). Zmiňuji se zde o tom kvůli tomu, že vlastně není třeba ustavovat (vzhledem k charakteru aplikace) nějaké vazby mezi tabulkami. Pokud bychom tak ale chtěli učinit, museli bychom nejprve obě tabulky převést na typ ukládacího stroje MySQL, který podporuje vazbu tzv. cizími klíči – tedy InnoDB. Může nastat otázka, jak by to bylo s anonymními hrami. Pokud nastavíme položku autora u herní tabulky tak, aby nevyžadovala vždy nějakou hodnotu, tedy aby mohla obsahovat hodnotu NULL. Pak není problém, protože InnoDB vazby fungují jenom na záznamy, které neobsahují tuto prázdnou hodnotu. Tedy bychom naprosto standardně u herní tabulky nastavili cizí klíč odkazující se na id v uživatelské tabulce. Tímto bychom zamezili nesmyslným vstupům do databáze přímo na databázové úrovni.
Návrh aplikace
27
Obrázek 4 Grafické znázornění možné vazby mezi tabulkou her a uživatelů
5.3
Návrh ovládání
Jelikož jsou cílovou skupinou této aplikace spíše mladí lidé, je potřeba udržet určitou jednoduchost ovládání. 5.3.1
Editor
U editoru by bylo dobré poskytnout nějaké nástrojové prostředí s přednastavenými ovládacími prvky ovladatelnými snadno myší, případně jen doplnění hodnot by se potom dělo pomocí vstupu z klávesnice. 5.3.2
Hra
V rámci hry by se už nic tvořit nemělo. Jediné co by se mělo dít je volení a přesouvání objektů z místa na místo. Protože myš může být pro přesný pohyb pro některé lidi obtížná a mohla by jim kazit skóre ve hře např. ve formě počtu pohybů k dokončení hry. Myš by zde tedy měla sloužit jenom jako volba objektu, se kterým se bude dále hýbat, ale již pomocí klávesnice, neboť krátký stisk klávesnice je motoricky snazší záležitost, než přesný pohyb myši. Tato aplikace ale nemá za cíl přímo namáhat motoriku hráče/tvořiče. Pro nápady na možné rozšíření viz závěr této práce.
28
Obsah
6 Realizace aplikace 6.1
WordPress
6.1.1
Instalace
Instalace WordPress je velmi jednoduchá, stačí stáhnout přímo českou verzi z https://cs.wordpress.org/ , což je komprimovaný archiv ZIP, archiv obsahuje složku „wordpress“, jejíž obsah nahrajeme tam, kde chceme mít kořenový adresář pro wordpressový web. Zde tedy přímo do kořenového adresáře webu. Následně navštívíme odpovídající místo přes HTTP protokol v prohlížeči. Zjistíme, že aktuální verze WordPress neočekává zákaz přístupu o jednu úroveň složky výš, snaží se kontrolovat, zda nemáme již o úroveň výš WordPress nainstalován, což ale v momentě umístění WordPress do kořenového adresáře webu způsobí chybu, neboť skripty by neměly mít přístup jinam než do webové složky. Jelikož víme, že jsme na čisté instalaci, upravíme soubor setup-config.php v adresáři wp-admin – u aktuální verze (WordPress 4.1) stačí zakomentovat řádky 56 a 57. Nyní, po aktualizaci vstupní instalační stránky, by se již neměli zobrazovat žádné chyby – můžeme tedy projít celou instalací. Na závěr budeme vyzváni k přihlášení. 6.1.2
Nastavení
WordPress přichází s již nějakým výchozím nastavením (v administračním menu „Nastavení“) určeným především pro rychlý start blogu – toto nastavení upravíme pro naše potřeby: 1. Obecné – rozhodně nahradíme text v popisu „Další web používající WordPress“ jiným, vhodnějším textem. Zvolíme, že zaregistrovat se může kdokoliv, neboť chceme využít WordPress uživatelského systému pro naši aplikaci. Nastavíme časové pásmo na „Praha“. 2. Zobrazování – jako úvodní stránku zobrazíme nějakou statickou a to bez stránky příspěvků. 3. Komentáře – vypneme jakékoli povolení přidávání komentářů a pro jistotu ho podmíníme přihlášením, komentáře se pak dají zapnout pro konkrétní stránku, či článek. Dále je dobré vypnout oznámení e-mailem pro administrátory a „Automatické zadržování“ nastavit na 1 (neboť za normálních okolností stačí v komentáři jen jeden odkaz…). 4. Trvalé odkazy – nastavíme jednu z variant „pěkných“ URL, já jsem zvolil „Název příspěvku“. Samozřejmě se nastavení dá kdykoli dle potřeb změnit, či nastavit jinak, pro běh aplikace jako takové to velký vliv nemá.
Realizace aplikace
6.1.3
29
Plugin na přihlašování
Chceme, aby se uživatel mohl přihlašovat přímo z webu a po přihlášení na něm také zůstal (aby nemusel do WordPress administrace svého profilu, ani navštěvovat kvůli přihlášení výchozí WordPress přihlašovací stránku. Za tímto účelem jsem zvolil plugin Profile Builder. Má velmi dobré hodnocení od ostatních uživatelů v oficiálním repozitáři WordPress pluginů, zcela plní účel, verze zdarma má i možnost žádat od uživatelů nějaké informace navíc, lze přeložit a již jsem k němu měl částečný překlad k dispozici. Verze placená má potom další užitečná rozšíření. 6.1.4
Plugin na vylepšení emailů
Emailové spamové filtry velmi často nevyhodnocují jen obsah emailu, ale i jeho formu, resp. nastavení. WordPress sám od sebe nepřidává například do HTML emailů i textovou verzi, neobaluje HTML email do html značek a vkládá automaticky svoje výchozí nastavení odesílatele – pokud toto všechno chceme změnit, lze to i programově, ale lepší je využít plugin, který se tímto přímo zabývá a má i další využitelné funkcionality („obalovací“ šablona,…)- WP Better Emails. Nastavení odesílatele je ale i tak pro jistotu nastaveno ve funkcích šablony. Také bylo třeba podvrhnout nastavení typu obsahu odesílaných emailů na text/plain, neboť plugin není ochoten dávat obsah odesílaného emailu do „obalovací“ šablony pokud již má nastaven typ obsahu na text/html – zrovna HTML emaily totiž odesílá plugin profile builder (aktivační odkaz apod.). 6.1.5
Šablona
Celá aplikace byla realizována jako šablona vzhledu pro WordPress, což značně usnadnilo většinu práce se správou obsahu a navigace. Navíc tento způsob realizace umožňuje snadný přenos šablony na jinou instalaci WordPress. Toto je zajištšno i tím, že je naprogramován vznik herní tabulky, pokud již neexistuje.
6.2
Engine systém
Javascriptová, hlavní, část aplikace je napsána jako obecnější herní stroj, jemuž se po jeho inicializaci předává nějaké nastavení a ovladače událostí, načež hlavní skript pak volá metody herního stroje na ustanovení editačního prostředí.
30
Obsah
7 Ukázky z aplikace 7.1
Navigace – přihlášen X nepřihlášen
Obrázek 5 Navigace - nepřihlášen
Obrázek 6 Navigace - přihlášen
7.2
Editor
Ukázky z aplikace
7.3
31
Rubrika článků & článek
Obrázek 7 Rubrika článků
Obrázek 8 Ukázkový článek "Lorem Ipsum"
32
Obsah
8 Závěr 8.1
Dosažené výsledky
Oproti návrhu se nakonec podařilo zhotovit jen editor, který se sice dá použít zároveň i jako hrací plocha, ovšem neobsahuje monitoring událostí, tedy řešení to je, ale bohužel není ideální. Na druhou stranu byla možnost mazání objektů rozšířena i o mazání objektů z palety objektů, čímž se velmi usnadnila tvorba hrací plochy. Také bylo vytvořeno stavové tlačítko nastavení objektu, do něhož stačí navázat nastavování objektů a tím rozšířit možnosti tvorby. Na jednu stranu se nepodařilo vyhotovit ukládání přímo na server, ale editor je spustitelný i offline – je čistě na klientské straně – tudíž ho stačí jen prostřednictvím webového prohlížeče uložit. Aplikace by si asi zasloužila lepší ochranu například proti útokům hrubou silou, ale základní bezpečnost zde ustanovena je. Naopak za velký zdar považuji celkově návrh aplikace jako takové, jenž kdyby se realizoval přesně podle plánu, může mít aplikace do budoucna veliký potenciál, především může inspirovat ostatní lidi vytváření obdobných projektů.
8.2
Přínos použitých technologií
Jsem toho názoru, že technologie byly vybrány vhodně, neboť jsou přehledné a názorné. Vzhledem k charakteru aplikace nám spoustu zbytečného kódu ušetřila především nadstavba jQuery UI díky které jsme jen „říkali“ kam se mají námi vytvořené objekty přesunout, ale již jsme nemuseli říkat jak. WordPress sice přinesl veliké usnadnění z hlediska tvorby šablony celého webu a šablon podstránek, rubrik a článků, ale jako přímý nástroj pro práci s databází se neukázal tolik efektivní, resp. sám o sobě až na vkládání do databáze neposkytuje ošetření vstupních dat – což značně snižuje efektivitu kódu aplikace. Na druhou stranu jeho již zmíněný přínos v podobě emailového pluginu a pluginu na správu uživatelů je na tolik velký, že není v tomto třeba přemýšlet nad jiným řešení. Tím že je však aplikace postavena na PHP, můžeme do budoucna použít obecné rozhraní PDO.
8.3
Dostupnost
Aplikace je a měla by být stále dostupná na webové adrese http://jake.javeismy.name/ . Je zde hostována na virtuálním privátním serveru, tedy i teoretický vyšší příliv uživatelů by neměl činit žádný problém. V průběhu času se ale může stát, že kvůli změně hostingu bude aplikace dočasně nedostupná. Úplné zrušení domény a aplikace ale prozatím rozhodně neplánuji. Maximálně do budoucna nějaké rozšíření.
Závěr
8.4
33
Alternativní využití
Ačkoli je aplikace primárně určena ke tvorbě a hraní některých logických her, lze ji využít i k jiným účelům. Kupříkladu její editor, díky možnosti vytvořit si jakousi paletu objektů a objekty po vložení na herní plochu posouvat, případně je z herní plochy odstranit, využít i jako nástroj k vytváření obrazů, obrazců a piktogramů.
Obrázek 9 Jednoduchý obrazec vytvořený pomocí herního editoru
8.5 8.5.1
Možnosti rozšíření Modifikace ovládání
Tato aplikace se snaží motoriku pro hraní a tvorbu spíše usnadnit, neboť jejím záměrem je dobrá hratelnost i pro osoby s nižší motorikou. Zajímavé rozšíření by tedy mohlo být např. přepnutí do módu přesunu objektů při hraní myší, ne klávesnicí. Hraní některých her by pak dostalo úplně jiný rozměr. 8.5.2
Modifikace herního prostředí
Dalším zajímavým rozšířením by byla možnost nabídnout (samozřejmě jen přihlášeným) uživatelům nějakou možnost nahrání vlastní grafiky objektů, aby mohla být hra zpestřena např. vtipnou hráčskou postavičkou. 8.5.3
WordPress
Tím, že byl použit kompletní CMS, je možné web do budoucna rozšířit o cenný textový obsah – např. o články a stránky zabývajícími se logikou. Pro tento systém také existuje spousta rozšiřujících zásuvných modulů jako např. ankety, fotosoutěže a podobně, které mohou web aplikace velmi obohatit, tudíž i zvýšit šanci na zvýšení jeho návštěvnosti. Modulů je samozřejmě více, ale jen jejich kategorizaci by se mohla věnovat celá bakalářská práce.
34
Obsah
9 Literatura ARLOW, J. -- NEUSTADT, I. UML 2 a unifikovaný proces vývoje aplikací. Praha: Computer Press, 2007. 568 s. Dojo Foundation . Dojo Toolkit 1.10 : Unbeatable JavaScript Tools [online]. 2015 [cit. 2015-02-05]. Dostupné z: http://dojotoolkit.org/ GUTMANS, A. -- BAKKEN, S S. -- RETHANS, D. Mistrovství v PHP 5. 1. vyd. Brno: CP Books, 2005. 655 s. ISBN 80-251-0799-X. JLECOMTE-YAHOO . Yahoo Engineering : Important Announcement Regarding YUI [online]. 2014 [cit. 2015-02-05]. Dostupné z: http://yahooeng.tumblr.com/post/96098168666/important-announcementregarding-yui JONATHANMH . JonathanMH - Digital Media : Best JavaScript MVC Frameworks 20132014 [online]. 2013 [cit. 2015-02-05]. Dostupné z: http://jonathanmh.com/best-javascript-mvc-frameworks-2013-2014/ JQUERY FOUNDATION - jquery.org . JQuery [online]. 2015 [cit. 2015-02-05]. Dostupné z: http://jquery.com/ JQUERY FOUNDATION - jquery.org . JQuery UI [online]. 2015 [cit. 2015-02-05]. Dostupné z: http://jqueryui.com/ MODERNIZR TEAM. Modernizr [online]. 2009—2015 [cit. 2015-02-05]. Dostupné z: http://modernizr.com/ MOZILLA DEVELOPER NETWORK . Mozilla Developer Network : JavaScript [online]. 2005-2015 [cit. 2015-02-05]. Dostupné z: https://developer.mozilla.org/enUS/docs/Web/JavaScript/ OTTO MARK, THORNTON JACOB, AND BOOTSTRAP CONTRIBUTORS. Bootstrap: JavaScript [online]. 2014 [cit. 2015-02-05]. Dostupné z: http://getbootstrap.com/javascript/ PROIETTI VALERIO & MOOTOOLS DEVELOPERS. MooTools [online]. 2006-2015 [cit. 2015-02-05]. Dostupné z: http://mootools.net/ PROTOTYPE CORE TEAM . Prototype JavaScript framework: a foundation for ambitious web applications [online]. 2006–2014 [cit. 2015-02-05]. Dostupné z: http://prototypejs.org/ SCRIPT.ACULO.US . web 2.0 javascript : Web.reload! Web 2.0 Javascript. [online]. 2010 [cit. 2015-02-05]. Dostupné z: http://script.aculo.us/ SPI a ostatní. Debian: The Universal Operating System [online]. 1997-2014 [cit. 2015-02-05]. Dostupné z: https://www.debian.org/ STRONGLOOP. StrongLoop: Getting Started with Node.js for the PHP Developer [online]. 2014 [cit. 2015-02-05]. Dostupné z: http://strongloop.com/strongblog/node-js-php-get-started/
Literatura
35
VRÁNA, J. 1001 tipů a triků pro PHP. 1. vyd. Brno: Computer Press, 2010. 456 s. ISBN 978-80-251-2940-1. WEDOS INTERNET, A.S. Hosting WEDOS: Balíček Debian 6.0 ISP [online]. 2015 [cit. 2015-02-05]. Dostupné z: http://hosting.wedos.com/cs/virtual/debianisp.html WORDPRESS.ORG . WordPress: WordPress Codex [online]. 2015 [cit. 2015-02-05]. Dostupné z: https://codex.wordpress.org/ YAHOO! Inc. YUI Library [online]. 2014 [cit. 2015-02-05]. Dostupné z: http://yuilibrary.com/
36
Přílohy
Obsah přiloženého CD
A Obsah přiloženého CD Na přiloženém CD jsou k dispozici: 1. Zdrojové kódy z realizace aplikace 2. Export struktury databáze 3. ER diagram základu aplikace a ER diagram WordPressu 4. Loga aplikace
37
38
B Logo aplikace
Logo aplikace
