MATURITNÍ PRÁCE dokumentace Správa a rezervace sedadel k kině (systém PHP, MySQL, Ajax, Jquery)

MATURITNÍ PRÁCE dokumentace

Správa a rezervace sedadel k kině (systém PHP, MySQL, Ajax, Jquery) Michal Kovařík

školní rok: 2012/2013

obor: třída:

Elektronické Zpracování Informací ZI4B

Toto cestou bych chtěl poděkovat panu Haplovi a panu Biolkovi, že coby konzultanti byli k dispozici v případě, že bych při tvorbě potřeboval pomoc. Především bych chtěl poděkovat Pavlu Pilmajerovi a Martinu Krutákovi za rady a tipy při tvorbě databáze a PHP.

Prohlašuji, že odevzdaná verze dokumentace maturitní práce a verze elektronická, nahraná do systému MATPRAC, jsou totožné. Při zpracování jsem vycházel z informačních zdrojů uvedených v seznamu na konci dokumentace a také prohlašuji, že je tato práce původní. ------------------------podpis žáka

ABSTRAKT Práce se zabývá vývojem webové aplikace ke správě promítání a rezervace sedadel v kině. Byť je projekt postaven na dnes již běžných technologiích jako PHP, MySql, hlavním cílem bylo vytvořit aplikaci (nejen běžnou webovou stránku), která je jedinečná díky své funkčnosti a maximálně by využívala potenciálu nových technologiích HTML5, JavaScript, AJAX, CSS3, atd... S nadsázkou lze říct, že se jedná o technologické demo, protože na počátku vývoje stály experimenty s novými funkcemi těchto nových technologií. Zároveň bylo důležité tento projekt zastřešit uživatelsky velmi přívěživým, jednoduchým a přehledným vzhledem.

Obsah ÚVOD .................................................................................................................................... 7 1 CÍLE PRÁCE .................................................................................................................... 8 2 VÝBĚR TECHNOLOGIÍ PRO ŘEŠENÍ ....................................................................... 9 2.1 JAZYKY, FRAMEWORKY, TECHNOLOGIE .................................................... 9 2.1.1 HTML5 .................................................................................................................. 9 2.1.2 CSS3 ...................................................................................................................... 9 2.1.3 LESS CSS .............................................................................................................. 9 2.1.4 JAVASCRIPT ............................................................................................................ 9 2.1.5 JQUERY 1.9.1........................................................................................................ 10 2.1.6 AJAX................................................................................................................... 10 2.1.7 PHP 5.3 ................................................................................................................ 10 2.1.8 MYSQL................................................................................................................. 10 2.2 PROGRAMY ............................................................................................................ 10 2.2.1 SUBLIME TEXT 2................................................................................................... 10 2.2.2 XAMPP ............................................................................................................... 11 2.2.3 NAVICAT FOR MYSQL .......................................................................................... 11 2.2.4 DROPBOX ............................................................................................................. 12 2.2.5 GOOGLE CHROME ................................................................................................ 12 3

ZPŮSOBY ŘEŠENÍ A POUŽITÉ POSTUPY ....................................................... 13 3.1 NÁVRH DATOVÉ STRUKTURY ......................................................................... 13 3.1.1 TENKÝ VS TLUSTÝ KLIENT.................................................................................... 13 3.1.2 FORMÁT JSON ..................................................................................................... 13 3.1.3 DATABÁZE MYSQL .............................................................................................. 14 3.1.4 KONCEPCE VYUŽITÍ DAT JAVASCRIPTEM .............................................................. 16 3.1.5 OFF-LINE BĚH APLIKACE ..................................................................................... 17 3.2 TVORBA A PROGRAMOVÁNÍ............................................................................ 18

3.2.1 NAČÍTÁNÍ DAT Z DATABÁZE DO PHP .................................................................... 18 3.2.2 JAVASCRIPT A AJAXOVÉ NAČÍTÁNÍ ..................................................................... 21 3.2.3 ODESÍLÁNÍ DAT SERVERU ..................................................................................... 22 3.2.4 SPUŠTĚNÍ JAVASCRIPTU ....................................................................................... 23 3.2.5 ZPRACOVÁNÍ DAT A VYKRESLENÍ ......................................................................... 24 3.2.6 ÚVODNÍ STRÁNKA ................................................................................................ 25 3.2.7 REZERVACE SEDADEL........................................................................................... 26 3.2.8 LESS CSS ............................................................................................................ 30 3.3 OPTIMALIZACE .................................................................................................... 31 3.3.1 JAVASCRIPT .......................................................................................................... 31 3.3.2 CSS ...................................................................................................................... 34 4

ZHODNOCENÍ DOSAŽENÝCH VÝSLEDKŮ .................................................... 36

5

PŘÍRUČKA UŽIVATELE ...................................................................................... 37

6

SHRNUTÍ .................................................................................................................. 48

SEZNAM POUŽITÝCH INFORMAČNÍCH ZDROJŮ ................................................ 49 SEZNAM POUŽITÝCH SYMBOLŮ A ZKRATEK ..................................................... 50 SEZNAM OBRÁZKŮ ....................................................................................................... 51 SEZNAM PŘÍLOH............................................................................................................ 53

Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm

7

ÚVOD Tato práce se zabývá vývojem software pro kina, který běží v internetovém prohlížeči. To s sebou oproti vývoji klasickým programům pro operační systém přináší různé překážky, ale díky novým technologiím lze dostáhnout podobných výsledků. Donedávna by apříklad nebylo možné takové webové služby provozovat Offline, což se ale s příchodem HTML5 změnilo. Služby se pomalu ale jistě přesouvají do cloudu a důkazem tomu může být například Google Docs, Chrome OS. Autor se tedy snažil jít stejným směrem, využít výhody obou světů a vytvořil aplikaci pro administraci kina, která funguje v internetovém prohlížeči, kde je spojená se serverem, ale v případě výpadku internetu je nadále provozuschopná a nezávislá na připojení. Kinům poskytuje správu nad promítáními a uživatelé si mohou přes internet zarezervovat sedadlo. Důležité při vývoji byla tvorba promyšleného jádra, které staví na několika na sobě nezávislých vrstvách dat, jež lze flexibilně načítat, upravovat a předávat dál. Díky tomu je možno na těchto základech do budoucna pokračovat ve vývoji. Aplikace staví na modelu Tlustý klient. Většina zdrojového kódu je psána v JavaScriptu za pomocí frameworku jQuery a PHP slouží pouze jako dodavatel dat, které namísto serveru zpracovává přímo počítač uživatele. To je mimichodem jeden ze základních předpokladů pro offline funkcionalitu, která je právě pro zájemce tohoto software stěžejní. Autor se při vývoji potýkal s obtížemi nesoucí právě netradiční přístup a vybrané technologie. Jednou z nevýhod je například kompilace zdrojového kódu až v samotném prohlížeči. Kód je tedy čitelný, kompiluje se za chodu a tím pádem jej může kdokoliv napadnout, spustit své vlastní skripty, změnit proměnné a podobně. Na to se také navazují další potíže ohledně bezpečnosti a čerstvosti lokálně uložených dat a podobně. Zároveň bylo jednou z priorit klást důraz na snížení nároků na načítání; optimalizaci kódu a běhu aplikace; eliminace zbytečných prvků; zpříjemnění využívání; přehledné GUI (prostředí, vzhled) a celkovou jednoduchost. Velkou inspirací pro autora byla slova Matiase Duarta, hlavního designéra OS Android, (který stál za velkou inspiraci při tvorbě grafiky aplikace). Tvrdí, že přístroje by měly být jednoduché a měly by uživatele okouzlit a zjednodušit mu život. „Enchant me. Simplify my life. Make me awesome.“


8

1 CÍLE PRÁCE Cílem práce je vytvoření webové aplikaci na správu rezervaci sedadel s kině s použitím jazyků Javascript a za pomocí JSON, jQuery a dalších. Jako úložiště dat bude sloužit databáze MySQL. Aplikace bude umět spravovat databázi filmových představení a k nim i vizualizaci sedadel, jejich číselné označení, rezervace, rozmístění, počet, bude umět odlišit rezervovaná, nebo blokovaná sedadla. Dále spočítá a zobrazí cenu za vstupenky, které lze následně objednat. Autor si také klade za cíl implementovat a co nejvíce využít funce nových verzí HTML5, CSS3. Jednotlivé cíle práce: 1. Navrhnout a implementovat engine aplikace 2. Navrhnout a implementovat databázové řešení 3. Navrhnout a implementovat grafické rozhraní 4. Zajistit funkčnost systému dle konkretizace zadání 5. Zpracovat technickou dokumentaci a uživatelskou příručku


9

2 VÝBĚR TECHNOLOGIÍ PRO ŘEŠENÍ 2.1

Jazyky, frameworky, technologie 2.1.1

HTML5

HTML je značkovací jazyk pro prezentaci obsahu na webových stránkách. Jeho předností je jednoduchá čitelnost a zároveň snadná zpracovatelnost počítačem. Verze 5 přináší spoustu novinek, které autor ve své práci využívá. Např. offline ukládání zálohy dat a souborů (AppCache, LocalStorage); rozpoznávání online/offline stavu prohlížeče; změna adresy (window.history.pushState) a další. 2.1.2

CSS3

Prosřtednictvím jazyku CSS se definuje vzhled webové stránky a jednotlivým html tagům html lze nadefinovat např. jejich velikost, barvu, odsazení, apod... CSS3 také obsahuje mnoho výhod z nichž největší je například animace, průhlednost, RGBA a HSLA barvy, Zaoblené okraje, stíny, rozšířené možnosti obrázků pozadí, a další... 2.1.3

LESS CSS

LESS je nadstavba rozšiřující CSS o dynamické funkce jako proměnné, funkce, mixins. Jedná se o tzv. Pre-Proccesor, který po naprogramování svou syntaxi „zkompiluje“ do CSS. 2.1.4

Javascript

Programovací jazyk běžící v internetovém prohlížeči, (lze jej ale využít i na serveru). dříve byl často zavrhován jako primitvní. Jeho vývoj však neustal a obzvláště díky moderním JavaScriptovým Enginům jako V8 (Google Chrome) a dále pak framworkům jako jQuery nabyl na obrovském výkonu, využitelnosti a popularitě.

Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 2.1.5

10

Jquery 1.9.1

JavaScriptová knihovna, neboli framework navržen ke zjednodušení client-side skritování. Syntaxe jQuery je navržena k jednoduchému výběru a modifikaci elementů v DOM, ovládání události (eventů), AJAXovým voláním, atd... 2.1.6

AJAX

Techniku získávání obsahu nezávisle (asynchroně) na původním načtení, či obnovení stránky. 2.1.7

PHP 5.3

Programovací jazyk vykonávaný na serveru (server-side) pro tvorbu dynamických webových stránek. Díky svému provozu na serveru je program uchráněn před čtením zdrojového kódu, spoštění cizích skriptů a jiným formám napadání narozdíl od JavaScriptu. 2.1.8

MySql

Serverová relační databáze typu vycházející z jazyka SQL. Umožňuje ukládání dat (texty, binární data), s nimiž lze dále jednoduše pracovat (třídit, řadit, filtrovat apod.). Nejčastěji se MySQL používá ve spojení s jazykem PHP, které umožňuje přístup k uloženým datům.

2.2

Programy 2.2.1

Sublime Text 2

Sublime text je jedním z nejlepších multiplatformních editorů textu a zdrojového kódu. jeho hlavními přednostmi jsou jednoduchost, přehlednost a rychlost. Taktéž je vybaven nespočtem užitečných funkcí jako například několik kurzorů (umožňující označit více částí textu a upravovat je najednou), mini mapa kódu a obzvláště užitečný Go-To Anything panel, který pod zkratkou Ctrl+P otevře panel se všemi sobory projektu a umožňuje mezi nimi snadné vyhledávání a přecházení.


11

Obr. 1. - Sublime text. Univerzální textový editor pro programátory 2.2.2

XAMPP

Jednoduchý instalační balík zahrnující Apache server (jež je nezbytý pro spouštění PHP na localhostu), PHP, MySql databáze (včetně oblíbeného správce databází PhpMyAdmin, jehož ale autor nevyužil) a další. 2.2.3

Navicat for MySql

Navicat je rozsáhlý software pro správu a tvorbu databází.

Obr. 2. – Navicat for MySql


12

Dropbox

Multiplatformní program k synchronizaci dat do tzv. Cloudu a napříč zařízeními. Autorovi poskytl flexibilitu při práci z domova, školy, protože se zdrojové soubory maturitní práce, databází a nastavení programů synchronizovaly vzájemně mezi domácím desktopovém počítači, notebooku, mobilním telefonem (s rozšířením Android DropSync) a internetem. Bylo tak možno pracovat kdykoliv a odkukoliv 2.2.5

Google Chrome

Chrome je velmi rychlý a stabilní prohlížeč postavený na open-source jádře WebKit, jež si autor oblíbil hlavně díky skvělé podpoře většiny funkcí moderních standardů HTML5 a CSS3. Také disponuje skvělými nástroji pro vývojáře. Umožňují například úpravu HTML a CSS kódu, sledování načítání zdrojů, dat a souborů (např. LocalStorage, Cache). Obzvláště důležitá pro vývoj je ale konzole, která zaznamenává XHR dotazy, chyby, objekty a další informace důležité pro analýzu dění při debugování.

Obr. 3. – Vývojářské nástroje Google Chrome


13

3 ZPŮSOBY ŘEŠENÍ A POUŽITÉ POSTUPY 3.1

Návrh datové struktury 3.1.1

Tenký vs Tlustý klient

Webové stránky jsou zpravidla tzv. Tenký klient, jelikož všechny jejich výpočty a zpracovávání dat proběhne na serveru. K uživateli (klientovi) se dostanou pouze finální HTML a CSS kódy, které prohlížeč vykreslí. Naopak tato maturitní práce přijímá surové data a výpočty se tedy přesouvají ke klientovi. Od toho si lze odvodit název této techniky – Tlustý klient. Proto se velká část vývoje soustředila na vymýšlení (obzvláště pak neustálým úpravám a změnám v jádře) vhodného formátu a struktury dat, aby s nimi bylo možno pohodlně pracovat, ukládat je aniž by zabíraly mnoho místa a aby byly rychle a jednoduše čitelné. 3.1.2

Formát JSON

Výběr formátu byl jednoduchý. I když JQ i PHP umí zpracovávat XML, vhodnější volba byl modernější JSON odvozený z JavaScriptového objektu (asociativní pole. Neplést si s objektově orientovaným programováním). Tato alternativa je především kompaktnější, hodnota se totiž neuzavírá do tagů, čímž se zbytečně zvyšuje objem. Načítání je tím pádem rychlejší. Zjednodušení se ale týká i zápisu polí (Datový typ), které tvoří hranaté závorky. Číselné hodnoty není třeba zapisovat v uvozovkách, čímž by byly převedeny na string, proto při deserializaci odpadá nutnost převádění čísel na integer. Syntaxe JSONu je tvořena složenými závorkami určující objekt, klíčem (název) následovaný dvojtečkou a hodnotou (obsah), jež může být další objekt, string v závorkách, či pole v hranatých závorkách. Jednotlivé hodnoty od sebe pak odděluje čárka. Díky tomu je snadno čitelná jak pro člověka, tak i pro počítač.


14

obr. 4. – Porovnání syntaxe JSON a XML 3.1.3

Databáze MySql

Po vyzkoušení funkčnosti na testovacích souborech bylo třeba vytvořit databázi, ze které by se agregovala data. Protože se jedná o systém pro kina, jsou potřeba data o daném kině, promítáních a rezervacích. Jelikož jeden film může být promítán několikrát, bylo by zbytečné jej pokaždé ukládat jako samostatnou událost se jménem a dalšími informacemi o filmu. Proto se v tabulce Movies nachází filmy a všechni informace o nich, zatímco promítání jsou ukládány do tabulky Screenings kde, kromě ID filmu na který se vážou, jsou specifické data promítání. Všechny tabulky tak na sebe mají různé návaznosti a při načítání je pak možno zvolit právě konkrektní data a ušetřit tak čas načítání. O tom ale více pojednává část dokumentace o náčítání obsahu. Autor v databázi prostřednictvím programu Navicat vytvořil několik tabulek obsahující data nutné k provozu aplikace.  Cinemas – Kina s jejich základními informace - Název, nastavení a defaultní hodnoty pro předvyplňování textových polí  Rooms – váže se na Cinemas, obsahuje totiž informace o sálech kin - název, layout, defaultní hodnoty, a další...


15

 Movies – Filmy promítané v kinech a vedené jako aktivní. Záznm obsahuje informace o filmu (název, cena, žanr, apod…) a návaznosti (ke kterému kinu patři, katalogové číslo, odkaz na plakát, katalogové číslo filmu)  Screenings – podrobnější informace a promítáních - datum, sál (odkazující na záznam v tabulce Rooms), cena, mapa rezervovaných sedadel, atd…  Reservations – jednotlivé rezervace na představeních. Záznamy obsahují informace o uživateli (ID, jméno, příjmení, email) a ID kina a představení  Users – Uživatelé zaregistrovaní do systému. Kromě běžných informací jako jméno, příjmení, heslo, město, nesou záznamy ještě vlastní nastavení uživatelů, privilegia a informace ke generování unikátních hesel.  MoviesCatalog – Centrální katalog filmů sloužící jako zdroj informací a ulehčení správcům kin při tvorbě nových představení, kteří z něj mohou vybírat a čerpat informace. Větší užitek tohoto katalogu přinese další vývoj tohoto projektu.


16

obr. 5. – Diagram struktury MySQL databáze 3.1.4

Koncepce využití dat JavaScriptem

Hlavní myšlenkou projektu je uživateli co nejvíce věcí usnadnit. Za usnadnění se považovat i samotný AJAX, díky nemuž se otevřená stránka může dynamicky měnit, načítat a zobrazovat nový obsah. V případě triviálních věcí jako odesílání formuláře, či hlasování v anketě to usnadnění opravdu je, jelikož se serveru posílá krátká zprává, či pár informací. Jakmile se však jedná o načítání kompletních stránek (obsah), výhody se smývají. Načítání ale trvá stejně dlouhou dobu jako u bežných stránek. Na serveru vygeneruje celá nová stránka, kterou javascript (AJAXová žádost) převezme a vygenerované HTML integruje do stávajícího okna prohlížeče. Autor práce zvolil jiný přístup. Data každého filmu, promítání, apod. se skládají z několika krátých údajů, které jsou všechny nezbytné (a stejné) k načtení


17

jakéhokoliv modulu (rezervace sedadel na promítání, detail filmu, program promítání kina). Proto je zbytečné aby server několikrát z databáze vytáhl data, kterými již uživatel disponuje (ve formě načteného modulu), ale následně mu z nich sestavil jiný modul. Narozdíl od stránek s velkým obsahem (např. dlouhými články, kde je třeba načítat pouze nadpisy článků a teprve když si chce uživatel některý článek přečíst, se načte jeho obsah) tak bylo možné v tomto projektu použít techniku tlustý klient a při otevření stránky (většinou úvodní stránky kina – jeho program) načíst všechny data, které se tak stávají znovu využitelné. Jakmile si totiž chce uživatel zobrazit promítání, není nutné opět načítat datum promítání a jméno filmu, jelikož jsou tyto informace už v JavaScriptu, který z nich akorát vykreslí modul náhledu promítání a tak odpadá zdlouhavá komunikace se serverem a čekání. Kdykoliv je to třeba (přihlásí se správce; uživatel navštíví stránku s nestaženými daty; nebo je vyžadována aktualizace) se automaticky stáhnou doplňující, nebo nové data a přepíší ty stávající. 3.1.5

OFF-Line běh aplikace

Tento přístup (tlustý klient = data zpracovávány javascriptem) navíc umožňuje načtené informace uložit do HTML5 DOM úložiště LocalStorage. Nepředpokládá se, že by to mělo velké využití pro běžného uživatele, jelikož si bez připojení k internetu nezarezervuje sedadla. Využití by se ale našlo například jako program kina do kterého je možno nahlédnout i bez připojení. Hlavním smyslem offline provozu je ale provoz samotného kina. V případě, že dojde k výpadku připojení a systém by byl závislý na serveru, prodej lístků se zhroutí. Díky tomu, že převážná většina funkcionality je naprogramována v JavaScriptu a běží v prohlížeči, kde jsou také uloženy data, není problém veškeré změny dočasně ukládat lokálně a pokračovat tak v provozu. A jakmile se opět naváže připojení k internetu, data se synchronizují se serverem.


3.2

18

Tvorba a programování 3.2.1

Načítání dat z databáze do PHP

Pro načítání dat byly vytvořeny tři PHP, které jsou si vesměs podobné. Kód nejprve zjistí, jestli byl spuštěn s GET hodnotou v url adrese. Pokud ano, můžeme předpokládat, že se jedná o platný požadavek o čtení z databáze a spouští se další kroky. Příkaz require vloží soubor s přístupovými údaji k databázi, následně se nastartují session ve kterých se ukládají informace o přihlášeném uživateli. Pokud nějaký uživatel přihlášen je, uloží se do proměnné $user pro budoucí práci s touto proměnnou.

kód 1. – PHP 1 Z URL adresy se získá ID čísla kin jejichž filmy se budou načítat. Ke zjednodušení čtení z URL a provedení rutiny, escapování obsahu proti potenciálně škodlivému kódu ohrožující databázi, autor vytvořil funkci GETvalue, jež je uložena spolu s dalšími často používanými příkazy v config.php.

kód 2. – PHP funkce GETvalue


19

GETvalue si ověří zda požadovaná proměnná v superglobální proměnné $_GET (URL adrese) vůbec existuje. Pokud ano, v závislosti na jejím typu provede ošetřenní proti závadnému kódu – hacker by do adresy mohl místo hodnoty proměnné zadat SQL příkaz ohrožující nejen bezpečnost, ale i existenci databáze. Tento

krok

je

nazván

escapování

a

dá

se

provést

pomocí

funkce

mysql_real_escape_string(), případně aplikovat na pole s pomocí další funkce array_map(). Po těchto krocích funkce GETvalue navrací ošetřenou hodnotu se správným datovým typem.

kód 3. – načtení a zpracování filmu Následuje samotné načítání z databáze provedené skrz jazyk SQL, kterým na základně podmínek a vstupních dat v superglobální proměnné $_GET definujeme zda načítáme konkrétní filmy pomocí ID, nebo výpis pěti filmů (a proměnná $lastID určuje od kolikátého ID se filmy načítají - kvůli stránkování). Pokud načítání neselže a PHP získá záznamy, každý výsledek zapíše do asociativního pole $data jako hodnotu k číselnému indexu, jež tvoří ID danného filmu. Zároveň se ID dočasně uloží do proměnné $movieID. To z důvodu načítání více filmů kdy je třeba náčitat promítání pouze konkrétního filmu, jelikož se v datové struktuře nevyskytují promítání samostatně ale jako podmnožiny filmů. Následně se opět naváže spojení s databází a pokud k ID filmu patří nějaká promítání, PHP je načte a uloží je do $screening. Přitom se převedou a upraví některé hodnoty do potřebného formátu (hlavně datum a čas).


20

kód 4. – kontrla uživatele, převedení mapy rezervací a zápis do $data V případě, že je uživatel přihlášen se provede pokud o zjištění uživatelových rezervací (nebo všech rezervací pokud je přihlášen správce kina) v promítání a také se uloží k datům promítání do proměnné $screning (potažmo $data). Na závěr se dekomprimuje a dekóduje mapa rezervovaných sedadel pro promítání a identifikační čísla sedadel se zápíší do pole occupied v asociativním poli $screening.

kód 5. výpis ve formátu JSON Takto zpracované data všech načtetých filmů a představení uloží do objektu $data, načež jsou vypsány. Pro pohlednější čtení dat při debugování autor přidal možnost export těchto dat nejen ve formátu JSON (dostupné přes odkaz např. http://localhost/movies-load.php?cinemaID=1&ID=69&json), ale i klasickému výpisu print_r. Stejnětak není problém doprogramovat export například v XML, pokud by to bylo nutné.


21

JavaScript a AJAXové načítání

Funkce getData bývá volána pro načtení dat z databáze. Jedná se o tři typy – filmy (včetně promítání a rezervací), kina (včetně sálů), katalog filmů. Po ověření, zdali je nutno danný typ dat načítat se zkonstruuje URL z níž se bude načítat, spolu s přídavnými $_GET parametry v proměnné urlSuffix. Pokud načítání nic nebrání, zavolá se funkce s animací načítání loading(), do konzole se zapíše poznámka opatřená časem díky funkci con() a inicializuje se samotné načítání, které se zapíše do nově dynamicky vytvořené proměnné (na základě jméně balíku načítaných dat), na níž závisí spuštení vyhodnocování a zobrazování dat v jádře programu.

kód 6. – načítací funkce getData Příkaz $.getJSON je AJAXové volání, které zažádá a patřičný odkaz (viz kapitola 3.2.1). V případě navázání spojení následuje callback .done(){} který sloučí data v paměti (pokud již existují, přepíší se) s novými (object) a rozšíří jejich LocalStorage kopii. Pokud je definována, lze ještě vyvolat externí funkci doneFC() s parametrem přijatých dat object.

Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm V případě selhání spojení následuje callback funkce

22

.fail(). Pokud se jedná o

výpadek připojení k internetu a klient má v LocalStorage uloženy alespoň nějaká data, načtou se. Jinak se vypíše hláška o chybě. Případně je opět možno doplnit externí funkcí. V obou případech je AJAX zakončen schováním animace. 3.2.3

Odesílání dat serveru

kód 7. ukládání funkcí formSubmit Podobná jako getData je i funkce formSubmit, která z odesílaného formuláře získá data a URL a zastaví jeho přirozenou funkci přejít na novou stránku. Díky tomu je můžné spustit vlastní AJAXové volání po tom co proběhne nutná kontrola inputů. AJAXový hook $.post() opět vytvoří defered volání (vytvoří objekt nesoucí promise – slib, že tato proměnná bude obsahovat data) na jehož vyhodocení čekají callbacky done a fail.


23

Spuštění JavaScriptu

Aplikace načítání kromě pluginů dva základní soubory. Cinema-pre.js s externími funkcemi a cinema-core.js tvoří hlavní jádro programu. Na začátku cinema-core.js se zavádí globální proměnné se kterými se nadále pracuje uvnitř hlavní funkce loadModule() a externích JS souborů. Jejich obsah se definuje až na základě modulu, ale pokud by nebyly zavene už nyní, z některých míst by nebyly dostupné a JS by selhal.

kód 8. - část inicializace Dále se zjistí barva a jazyk (LocalStorage namísto cookies vyžadující spojení se serverem) ve které má být aplikace zobrazena a načtou se patřičné soubory. Tato funkce sice funguje, ale pořád je v experimentálním stádiu (změny se projeví po refreshi okna). V případě nezadání adresy se automaticky předvyplní pomocí pluginu History.js. Pro každý odkaz je vytvořen listener za pomocí .on(). Jakmile je kliknuto na tag , zjistí se jeho odkaz na jehož základě se změní URL a to ve výsledku vyvolá načtení modulu loadModule(). Jakmile je prohlížeč připraven ($(document).ready(function(){}) a důležité soubory jsou načteny (výjma těch s HTML5 tagem Defered a Async), zjistí se stav připojení a spustí se funkce loadModule().


24

Zpracování dat a vykreslení

kód 9. – inicializace hlavní funkce loadModule loadModule() je základním stavebním kamenem tohoto projektu. Po spuštění vyčistí HTML a proměnné. Z URL zjistí a definuje proměnné na jejichž základě se přepínačem vykreslí danný modul, což je autorovo pojmenování stránek. Těmi jsou například  úvodní strana se seznamem promítáných filmů  náhled na kino a rezervace sedadel  administrace představení  administrace kina  uživatelský profil  a další...


25

Jelikož každý modul skýtá přibližně 300 až 400 řádků kódu, není možné jej celý popsat ani zobrazit v povoleném rozmezí pro tuto dokumentaci. Autor proto některé alespoň stručně nastíní, případně rozebere zajímavé a komplikovanější části. 3.2.6

Úvodní stránka

Za úvodní stránku je momentálně považován program kina. Modul se jmenuje BROWSE. V případě nedostatku dat se načtou pomocí getData() a po jejich obdržení se vygeneruje HTML seznamu na základě každého filmu a jeho promítání. Defaultně se načte pouze pět filmů, na konci stránky se ale nachází tlačítko pro načtení dalších. To se také spouší automaticky při scrollování ke konci stránky.

kod 10. – Funkce pro načítání obsahu při scrollování po stránce


3.2.7

26

Rezervace sedadel

kód 11. – generování sedadel Po zahájení modelu Browse je jednou z prvních akcí vykreslení sedadel ze vstupních dat. Přitom lze ovlivnit Intertování sedadel na ose X a Y, uličky a mezery, ceny. Následně se vykreslí rezervovaná a obsazená sedadla. Také se z dat vyderivují data konrkétního filmu, představení, kina, sálu. Ty poté poslouží pro vygenerování veškerého obsahu a nastavení metod a událostí.


kód 12. – první polovina modulu Reserve

27


Kód 13. – druhá polovina modulu Reserve

28


29

Z dat, kterými JS disponuje se vytvoří proměnné s konkrétním filmem, promítání, kinem, sálem, rezervacemi. V případě špatného zadání URL nesouhlasí vstupní parametry. Skript se proto pokusí sám opravit chyby, změní URL a načte nová data. Pokud je přihlášen administrátor se nezobrazí pouze osobní, ale veškeré rezervace. Dále se vykreslí sál, vyznačení se obsazené a nedostupné sedadla a osobní rezervace. Pokud je na některé sedadlo kliknuto a není obsazeno, zaznačí se modrou barvou a k účtu se připočítá jeho cena. Pokud je sedadlo obsazeno, nebo je překročen limit, zobrazí se varovná hláška. Dále se vykreslí zbytek HTML, převážně pravý panel s informacemi. Po kliknutí na tlačítko rezervace se vyvolá okno s informacemi a žádostí a vyplnění nezbytných údajů (pokud uživatel nění přihlášen, jinak jsou předvyplněny). Nasloucháním zmáčknutí kláves umožňuje zavírat, či potvrzovat tato modální okna klávesami enter a escape.

Jednou ze zajímavých řešení této práce je mimo jiné také například ukládání rezervací. Krom tabulky se všemi rezervacemi, bylo třeba vytvořit jednoduchou „mapu“ rezervovaných sedadel, která by byla součástí záznamu v MySQL tabulce Screenings. Vhodným řešením se stalo vytvoření stringu o délce počtu sedadel z níž každý znak představuje jedno sedadlo a hodnotu zda je, či není obsazeno (1 nebo 0). Takto dlouhou (přibližně 300 znaků) hodnotu pak spíše než ukládat do datového typu VarChar je vhodnější uložit spíše do typu BLOB. Jenže databáze nerozlišuje zda se jedná o string či integer a jelikož se kód skládá z jedniček a nul a tak databáze tuto hodnotu pochopila jako binární data (do databází lze takto ukládat celé soubory, nejen hodnoty) a při zpětném čtení je výsledkem nesmyslná hodnota. Proto se tato hodnota zkomprimuje pomocí GZIP, opatří lomítky pro bezpečné uložení do databáze. Při čtení se provede reverzní proces a hodnotu lze předat do JavaScriptu a pak s ní dále pracovat. Tento postup je rychlý, nenáročný a funguje. A to také díky tomu, že se BLOB v databázi ukládá „bokem“ od ostatních dat a pokud tedy není třeba načítat mapu rezervací, prohledávání databáze bude ještě rychlejší.


30

kód 14. – zpracovávání mapy rezervací a komprese / dekomprese. 3.2.8

LESS CSS

CSS je jednoduchý jazyk, ale někdy by bylo užitečné mít možnost např. sdílet kód. Sdílet opakovaný kód funkcemi (mixins) a např. barvy v proměnných. To a spoustu jiného přináší LESS. Jedná se o tzv. Pre-Proccesor, který po naprogramování svou syntaxi „zkompiluje“ do CSS. Dít se to může na obou stranách, tedy jak u klienta s dodatečným javascriptovým kompilátorem (vhodné pro vývoj a debugging), nebo již na serveru pomocí Node.js, či Rhino. Autor tak byl schopný zjednodušit si práci a sdílet potřebné hodnoty jako barvy. Jednoduše tak lze za běhu upravit celé barevné schéma. Další výhody je práce s barvami a možnosti je např. přibarvovat, odbarvovat, měnit HUE, zesvětlovat, ztmavovat, a pod.

obr. 6. – ukázka jednoduché manipulace s proměnnými v LESS


3.3

31

Optimalizace

Při tvorbě a také následné optimalizaci byla velmi užitečná konzole vývojářských nástrojů v prohlížeči Google Chrome. Umožňovala nahlédnout do proměnných a objektů, zobrazuje XHR načítání, časovou odezvu, chyby, apod... Autor s oblibou využíval příkazu console.log() vytvářející zápis v konzoli – užitečné pro debugování a analýzu průběhu.

obr 7. – konzole a vývojářské nástroj 3.3.1

Javascript

Jednou z hlavních zásad je co nejvíce omezit jakýkoliv přístup do a úpravy DOM! V případě častého volání a prací s některým objektem ve struktuře HTML (jinými slovy DOM) je vhodnější tento objekt uložit to proměnné a tzv ho „nacachovat.“ S každým přístupem se totiž vstupuje do DOM a spouští se hledání. Pokud na element neodkazuje tag, hledání se ještě stíží, protože nelze využít nativní a rychle JS prohledávání getElementByID. To ve větších projektech jako tento může způsobit zpoždění a problémy. Pokud je to možno (objekt není dynamický) je vhodné si element uložit do proměnné (většinou s prefixem $) a místo objektu se pak nadále odkazovat na proměnnou předpřipravenou v paměti. Předejte se tak zbytečným záshům do DOM. Také je vhodné příkazy zřetězit.


kód 15. – Cachování objektů a zřetězení příkazů

32


33

Velkou pomocí byla změna způsobu vytváření eventů. Tedy akci, které se provedou v případě

provedení

nějaké

akce.

Pro příklad poslouží modul Reserve ve kterém se nachází přibližně 300 sedadel. Po kliknutí na sedadlo se provede přibližně 50 rádků kódu. Problém je, že naprosto běžnou praxí je používat jednoduchou metodu .click(). Ta totiž při svém provedení přiřadí všem současně existujícím sedadlům event. Tím pádem existuje 300 totožných eventů, takže prohlížeč najednou sleduje všech 300 sedadel a o je zásadní problém, protože zdržuje provedení jiných akcí. Nemluvě také o tom, že každý nově vytvořené sedadlo tento objekt nemá, protože eventy jsou již přiřazené. Alternativou je v novějších verzí jQuery funkce .on(), což je alternativa na .bind() a .live() a je univerzální neboť zahrnuje různé akce. Hlavním rozdílem oproti .click() (a dalším jako .hover(), .submit(), atd...) je, že nevytváří eventy, ale listener. To znamená, že místo konkrétních 300 objektů sleduje veškerou aktivitu a zjišťuje zda se právě neaktualizoval objekt sedadla, v takovém případě vykoná event. Místo 300 definivně definovaných eventů tedy dynamicky reaguje a to i na nově vytvořené objekty. Tento přístup je kritický pro fungování dynamických AJAX aplikací, neboť nové objekty by zůstaly bez eventů a tím pádem bez interakce.

kód 16. – Eventy vs. Listenery Samozřejmostí při psaní optimalizovaného kódu bylo také měření výsledků a porovnávání výkonu jednotlivých metod a funkcí [4]. Dále pak využívání nativního kódu místo jQuery, selectování objektů v DOM pomocí ID, jelikož je rychlejší za využití nativního getElementByID.


34

CSS

Jednou z důležitých předpokladů pro plynulejší běh aplikace je optimalizace animací. Většinou jí weboví vývojáři programátoři tvoří pomocí JS, což není příliš idální řešení. V případě že je na stráne například 100 odkazů, jQuery jednoduše umožňuje plošně animovat všechny (napříkad po najetí myši), jenže to znamená že vytvoří 100 listenerů a čeká na jejich provedení (viz. Optimalizace javascriptu). Nicméně jakmile myší najedete odkaz, JS jej automaticky několiksetkrát za sekundu změní. Respektive mění mu jeho atribut style=““, což znamená několik set zásahů do DOM čemuž je nejlepší se co nejvíce vyvarovat. Pokud se to týká jednoho odkazu, stále to může být relativně v pořádku. Nicméně pokud je třeba všech 100 prvků animovat najednou, znamená to několik desítek až stovek tisíc úprav struktury DOM a několik set tisíc přerenderování stránky. V lepším případě se animace vůbec neprovede a rovnou se zobrazí výsledný stav, v horším případě může prohlížeč i spadnout. A přesto si vývojáři nejsou vědomi toho, že tyto problémy lze jednodše vyřešit pomocí CSS3. Každému prvku lze přiradit animace (s libovolnými vlastnostmi, rychlostí a easingem), nebo přesněji řečeno transition. Tyto transition zpracovává prohlížeč nativně a není třeba žádného zbytečného JS kódu. A tato nadstavba jednoduše využívá doposud využívaných akci např. :hover, :active, :focus, atd...

kód 17. – Transition CSS3 Další řešení, které autor využil jsou sprity. Někdy je třeba tlačítka, nebo jiné prvky podložit obrázkem na pozadí. Pokud má tlačítko více stavů (základní, po najetí, po kliknutí), může takových obrázků být několik a tím se zvyšuje riziko, že se nějaký nanačte. Obzvláště když jde o několik malých souborů, které se načítají problematičtěji než více, ale zato menších souborů. Autor proto využívá techniku tzv. Sprity. Spočívá v obsažení více takových obrázku v jednom. Lze to udělat pouze s neopakujícími se obrázky (např. přechod pro pozadí) a proto je nutné si dobře rozmyslet, které obrázky použít a proměřit si mřížku ve které se nachází.


35

Autor touto technikou ušetřil místo, zjednodušil načítání a zpracovávání prohlížečem a tím pádem dosáhl většiho bezpečí a rychlosti.

obr. 7 - Sprite obsahující dva prvky (checkbox a radiobox), a jejich deset stavů.

kód 18. – Napozicování obrázku ve Sprite


36

4 ZHODNOCENÍ DOSAŽENÝCH VÝSLEDKŮ Cílem této práce bylo vytvořit webovou aplikaci pro kina. Postupným vývojem se sice pozměnonavaly některé dílčí části, nakonec však došlo ke splnění zadaných cílů. Aplikace je funkční a poskytuje možnost vytvořit představení a několik promítání. Na nichž si mohou návštěvnící zarezervovat sedadlo. Aplikace obsahuje několik bezpečnostních a kontrolním mechanismů chránící například formuláře (registrace uživatel, tvorba představení), které před odesláním zkontrolují obsah (jak u klienta pomocí JS, tak i na serveru v PHP) a případně napoví uživateli, kde udělal chybu. Předávání dat mezi klientem a serverem probíhá pomocí technologie AJAX s využitím úsporného formátu JSON. Povedlo se vytvořit stabilní engine aplikace, který spolu s vhodně navrženým databázovým systémem poskytuje pružný základ aplikace se spoustou „vychytávek“ a připravený pro další vývoj. Autor také dosáhl svého osobního cíle - využití nových funkcí HTML5 (především podpora práce offline, AppCache, DOM storage, vlastní data atributy HTML tagů, a další...) a CSS3 (např. průhlednost, RGBA, animace a transitions, rozšířené možnosti pro pozadí, border, fonty a další...) Zdrojový kód je sice obsáhlý, ale také do jisté míry úsporný, díky značné unifikaci procesů a funkcí. Podstatným úspěchem je také optimalizace a ladění kódu, takže aplikace není náročná, nevykonává zbytečné kroky, nedochází k zacyklení, nebo vytváření zbytečných eventů, callbackům, načítání a apod. Také díky tomu bylo možno vytvořit plynulého prostředí s animacemi a dalšími drobnosti zpříjemňujícími využívání. Současná verze aplikace také obsahuje několik rozpracovaných modulů, jež poukazují na autorův zájem i nadále pokračovat ve vývoji tohoto projektu. Funkční, ale ne zcela dokončené je například přepínání mezi anglickou verzí a bílým vzhledem, nastavení rozložení sálu a další.


37

5 PŘÍRUČKA UŽIVATELE Při spuštění aplikace zjistí, zda je správně zadaná adresa a pokud ne, změní se URL na úvodní stranku kina - v tomto případě je to kino s ID 1. Po načtení se zobrazí úvodní stránka kina (modul s názvem Browse), která se skládá z hlavního obsahu, kterým je v tomto případě program promítání. Seznam filmů se skládá z informací (název, žánr, délka, režie, atd...) na levo a po pravé straně se nachází výčet promítání danného filmu. Jedná se o odkazy, které uživatele přesunou na detailnější stránku o tomto promítání. Pokud je přihlášen správce kina, u každého filmu se také nachází odkaz Upravit, jež vede do nastavení filmu.

obr. 9. - Modul Browse

Na konci stránky se ještě nachází tlačítko pro načtení dalších filmů a ty se zobrazí pod doposud zobrazenými. Tento proces se také spouští automaticky po scrollování (posunutí) na konec stránky, takže pokud uživatel dojede na konec stránky, zobrazí se mu další filmy.

Modul s názvem Reserve umožňuje zarezervovat si sedadlo. V levé části se nachází informace o filmu a konkrétním promítání (datum, čas, místo), spolu s plánkem sálu s vyznačenými nedostupnými sedadly. V případě, že přihlášený uživatel již provedl rezervaci, uvidí také jeho sedadla. Po kliknutí na volné sedadlo se označí a v pravém panelu s informacemi se aktualizuje cena a počet vybraných sedadel.


38

obr. 10. – modul Reserve z pohledu návštěvníka Správci se po pravé straně zobrazí seznam všech rezervací. Pokud jich je více tabulka se stane scrollovatelná a tak má administrátor neustále poholdně přístupnou funkci kdy se mu po najetí na záznam vyznačí sedadla danné rezervace (a naopak, po najetí na sedadlo se vyznačí rezervaci které náleží). Dále v této oblasti nelze pokračovat bez konzultace s kiny, naslouchání jejím potřebám a doprogramování napojení na jejich systémy tisku/výdeje vstupenek.

obr. 11. – modul Reserve z pohledu správce Pokud by uživatel klikl na nedostupné sedadlo, neoznačilo by se a drobná animace s ním zatřepe. V případě pokusu o rezervaci přičemž by nebylo označeno žádné sedadlo se objeví


39

vaorvná háška. Tyto hlášky lze kromě kliknutí na příslušné tlačítko ovládat i pomocí kláves escape pro vypnutí a enter pro potvrzení.

obr. 12. - Varovná hláška Po označení požadovaných sedadel lze přejít k samotné rezervaci. V modálním okně se nachází souhrnné informace včetně vybraných sedadel a pokud je uživatel přihlášen tak i jeho údaje. Jinak je třeba vyplnit jméno, příjmení a email. Po potvrzení se rezervace uloží do systému a u klienta se vyznačí jeho rezervace.

obr. 13. - Potvrzení rezervace


40

Modul s kódovým označením MovieSettings seskládá z několika textových polí defininující promítaný film. Je přístupný pouze pro správce a vytváří představení a promítání pro kino ke kterému má správce oprávnění. Pokud je uživatel na tuto stránku přejde z promítání (které chce upravit) danné promítání se mu pro přehlednost vyznačí.

obr. 14. - Modul MovieSettings v módu editace existujícího filmu Nejdůležitějším polem je Jméno, které při psaní automaticky nabízí výsledky. Takže pokud začne uživatel psát například „Tra,“ aplikace mu z katalogu filmů (v databázi tabulka moviescatalog) napoví několik, které obashují písmena „tra“ ať již v originálním, či českém názvu. V tomto rolovacím menu lze vybírat i šipkami nahorů a dolů, případně označit myší. Pokud si uživatel ze sezanmu vybere, některé informace o filmu dostupné z centrálního katalogu filmů se předvyplní a pokud je k filmu přiřazen i plakát, také se přiřadí k tomuto vytvářenému představení pro danné kino. Všechny údaje (např. země, rok výroby, délka filmu, řežie, herci, atd…) lze samozřejmě libovolně upravovat. Uživatel dále musí vyplnit cenu (pokud je pro všechna prmítání jednotná) a případně omezení kolik vstupenek si lidé mohou zarezervovat (ale to lze opět u každého promítání jednotlivě upravovat).


41

obr. 15. – automatické doplňvání z katalogu filmů

Ve spodní části se nachází promítání. Pokud se vytváří nové představení tak je tabulka prázdná, jinak obsahuje všechny promítání. Ty se skládají z datumu a času, sálu, ceny, jazyka, limitu vstupenek a zaškrtávacích polí titulky a 3D. Dálepak počet aktuálně rezervovaných sedadel na každém promítání, odkaz na detail promítání (modul Reserve) a tlačítko pro smazání záznamu. Některá pole jsou chráněna a kontrolována, zda obsahují jsou psána ve správném formátu, případně nepovolí napsat určité znaky. Například kolonka cena u které se předpokládá pouze číselná hodnota nedovolí napsat písmena. Pole datum obsahuje datepicker (vytvořený pomocí pluginu JQUI) pro snazší výběr data.


42

obr. 16. - datepicker Pole jako cena, nebo limit vstupenek mohou být upraveny jak jednotlivě pro každé promítání zvlášť nebo globálně. Pole místo je tzv. dropdown menu, které nelze stylovat pomocí CSS, jelikož se jedná o systémový prvek (stějnětak zaklikávací políčka – tzv. Checkboxy), proto jej autor nahradil vlastním řešení, které zapadá do celistvého designu stránky. Jedná se o skupinu divů, seznamů a odkazů poháněné JavaScriptem. Při odesílání proběhne kontrola zda jsou správně a hlavně jestli vůbec jsou potřebná pole vyplněna. Pokud ne, vyznačí se červeně a ukládání selže dokud nejdojde k nápravě.

obr. 17. – dropdown menu, upravených checkboxů a chybně vyplněných polí


43

Každý modul (stránku) doprovází odkaz na hlavní stránku, který se nachází v levém horním rohu – Index. Vedle něj se také zobrazuje nápis Offline v případě, že dojde k výpadku internetu.

obr. 18. – Odkaz na Index a offline upozornění

Po pravé straně se nachází odkaz na registrační formulár a tlačítko pro přihlášení. Jakmile myš najede na nápis přihlásit se zobrazí textové pole pro vyplnění uživatelského jména (případně emailu) a hesla. Po přihlášení tento formulář animací zmízí a je nahrazen informacemi o uživateli – jeho jméně a odkaz na nastavení, odhlášení a v případě, že se jedná o administrátora tak ještě administrace.

obr. 19. – Přihlašovací formulář, postup přihlašování


44

Každou interakci se serverem (načtíání, ukládání, přihlašování) doprovází animace načítání. Ty jsou dvě. Velké animované kruhy zobrazující se uprostřed stránky v případě načítání nové sady dat a velkých změn. Dále pak diskrétní načítání tvoří malý kruh v levém horním rohu indikující drobné zásahy a komunikace se serverem.

obr. 20. – animace znázorňující načítání. První obrázek je velké načítání vycentrované na střed stránky. Druhý obrázek je diskrétní načítání.

Pokud si uživatel zobrazí úvodní stránku, automaticky se mu načte všech pět prvních filmů, ze kterých systém bez načítání dalších dat dokáže sestavit stránky pro každé promítání těchto filmů a nezobrazí se tedy žádné načítání. Stejnětak pokud se uživatel vrátí na úvodní stránku nedojde k načítání (a tudíž ani načítací animaci). Pokud si ale uživatel zobrazí nejprve modul rezervací (například mu někdo pošle odkaz), načte se pouze ten konkrétní film a pokud se následně rozhodne návštěvník zobrazit úvodní stránku, aplikace musí načíst zbývající čtyři filmy, kterými uživatelův prohlížeč nedisponuje.


45

I když je aplikace stavená na AJAXu díky čemuž se němení adresa a u většiny takových stránek nelze vytvořit historii a odkazy, které by se daly sdílet. U této aplikace autor dbal na tuto funkcionalitu a proto se při každé změně modulu změní i URL a tím se tvoří historie, kterou lze procházet, takže je možno využít šipku zpět (v prohlížeči), nebo tlačítko backspace pro návrat na předchozí stránku.

obr. 21. – některé z URL adres

Aplikace je také plně funkční offlie, protože si do cache načte všechny potřebné javascritptové soubory, obrázky a další. Při prohlížení se zase do LocalStorage ukládají data,takže pokud dojde k výpadku připojení, vyskočí varovná hláška, ale po jejím zavření lze pokračovat v práci. Tato funkce je funkční hlavně v prohlížeči Google Chrome jelikož jako jeden z mála v současné době integruje tuto HTML5 funkcionalitu správně. Například Mozilla firefox také podporuje Offline, ale nedokáže rozeznat připojení, to lze ovlivnit manuálním nastavením prohlížeče


46

obr. 22. – popupokna upozorňující na změnu připojení

Nastavení (položka v menu uživatele) skýtá informace o uživateli a experimentální přepínání mezi jazyky zobrazení a barvě designu. Tyto funkce nejsou dokončeny a autor je zahrnul pouze jako bonus a ukázku upravitelnosti aplikace.

obr. 23. – Experimentální fukce změny jazyků a barvy


47

Stejnětak není dokončen modul pro úpravu layoutu nacházející se v administrační sekci. Sál 3 obsahuje uličky mezi sedadly a ty lze v tomto návrháři upravit. Po kliknutí na uličky, mezery v pravém menu se nahradí mezery mezi sedadly posuvníky, kterými luze upravovat layout kina. Tyto body lze různě upravovat, seskupovat, měnit jejich velikost a v pravém menu jsou reprezentovány pomocí ukazatelů. Tato funkce je taktéž experimentální a není součástí zadání ani hodnocení maturitní práce.

obr. 24. – Rozpracovaná funkce pro jednoduché nastavení vzhledu sálu


48

6 SHRNUTÍ Vypracování takto rozsáhlého projektu znamenalo značné úsilí a několika set hodinovou práci posledního více než půl roku. Pro autora byla výhodou mnoholetá výborná znalost HTML a CSS, z tohoto důvodu těmto základním věcem nebyla v této dokumentace věnována příliš velká pozornost. Zato velkou výzkou bylo osvojení si nových možností a funkcí jak HTML5 a CSS3, tak hlavně JavaScriptu, hlavně tedy jQuery a PHP. Neustálé samostudium a pročítání dokumentací a odborných příspěvků motivovalo autora ke zdokonalování osvojených znalostí a tím pádem vývoje kvalitnější aplikaci. Učivo střední školy neodpovídá ani zdaleko náročnosti této webové aplikace a proto ji lze označit za velmi složitou a to hlavně díky zvolení netradičních postupů a technik vývoje. Z profesionálního hlediska jistě obsahuje spoustu nedostatků, ale vzhledem k tomu, že podobné projekty tvoří celé skupiny vývojářů, je současná podoba velkým úspěchem. Kvůli obrovské časové náročnosti nedošlo k implementaci některých autorových nápadů. I přesto došlo ke splnění zadání a základních požadavků. Byť to zní jednoduše, vzhledem k odborné výuce na této škole se i tyto základní kroky jako vytvoření databáze, připojení, načítání a ukládání dat prostřednictvím PHP. Autor dále implementoval spoustu různých zlepšení a malých, nadstandatních detailů (rozpoznávání online / offline stavů, nahrazení systémových prvků checkbox a select, načítaí animace, animace prvků, scollovací načítání, a další…) zpříjemňujíci využívání. Současná vere rozhodně není závěrem a autor i nadále plánuje pokračovat ve vývoji, přidávání nových funkcí, ale i přepisováním a optimalizováním stávajícího kódu. V současné době je aplikace využitelná jako administrační systém pro správu představení a promítání kin umožňující uživatelům rezervaci přes internet. Do budoucna by se ale z projektu mohl stát portál s hledáním a komplexním uživatelským systémem a dalšími funkce. Vytvořené prostředí aplikace je jednoduché, plynulé a intuitivní. Moderní přístup k problematice tak splnil svůj záměr být užitečný pro uživatele, který jej bude rád využívat. Základní funkcionalita funguje a cíle byly splněny. Autorovi tento projekt přinesl cenné zkušenosti a zájem v dalším vývoji.


49

SEZNAM POUŽITÝCH INFORMAČNÍCH ZDROJŮ [1]

JQuery API Documentation. [online]. [cit. 2013-03-04]. Dostupné z: http://api.jquery.com/

[2]

JQuery

UI

API

Documentation.

[online].

[cit.

2013-03-04].

Dostupné

z:

http://api.jqueryui.com/

[3]

Stack Overflow [online]. [cit. 2013-03-04]. Dostupné z: http://stackoverflow.com/

[4]

JSperf: JavaScript performance testing. [online]. [cit. 2013-03-04]. Dostupné z: http://jsperf.com/browse

[5]

PHP Documentation. [online]. [cit. 2013-03-04]. Dostupné z: http://php.net/manual/en

[6]

MySQL Documentation. [online]. [cit. 2013-03-04]. Dostupné z: dev.mysql.com/doc

[7]

Dive Into HTML5. [online]. [cit. 2013-03-04]. Dostupné z: diveintohtml5.info

[8]

CSS3 Info. [online]. [cit. 2013-03-04]. Dostupné z: http://www.css3.info/

[9]

HTML5 Rocks. [online]. [cit. 2013-03-04]. Dostupné z: http://www.html5rocks.com/en/

[10]

JQUERY 1.7+ .ON() VS .LIVE() REVIEW. [online]. [cit. 2013-03-04]. Dostupné z: http://www.jquery4u.com/jquery-functions/on-vs-live-review/

[11]

Your jQuery: Now With 67% Less Suck. [online]. [cit. 2013-03-04]. Dostupné z: http://24ways.org/2011/your-jquery-now-with-less-suck/

[12]

MySQL: The maximum value of an integer. [online]. [cit. 2013-03-04]. Dostupné z: http://rpbouman.blogspot.cz/2010/05/mysql-maximum-value-of-integer.html

[13]

Deferreds

Coming

to

jQuery

1.5?.

[online].

[cit.

2013-03-04].

http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

Dostupné

z:


50

SEZNAM POUŽITÝCH SYMBOLŮ A ZKRATEK JQ

jQuery - Javascriptový Framework

JQUI

jQuery UI - Nadtavba framworku jQuery pro vývoj uživatelských prostředí

JS

JavaScript – Programovací jazyk běžící v internetovém prohlížeči

API

Application Programming Interface – Rozhraní pro využití funkcí, tříd a metod programovacího jazyka, framworku, nebo technologie

GUI

Uživatelské prostředí


SEZNAM OBRÁZKŮ Obr. 1. - Sublime text. Univerzální textový editor pro programátory

11

Obr. 2. – Navicat for MySql

11

Obr. 3. – Vývojářské nástroje Google Chrome

12

obr. 4. – Porovnání syntaxe JSON a XML

14

obr. 5. – Diagram struktury MySQL databáze

16

obr. 6. – ukázka jednoduché manipulace s proměnnými v LESS

30

obr 7. – konzole a vývojářské nástroj

31

obr. 8 - Sprite obsahující dva prvky (checkbox a radiobox), a jejich deset stavů

35

obr. 9. - Modul Browse

37

obr. 10. – modul Reserve z pohledu návštěvníka

38

obr. 11. – modul Reserve z pohledu správce

38

obr. 12. - Varovná hláška

39

obr. 13. - Potvrzení rezervace

39

obr. 14. - Modul MovieSettings v módu editace existujícího filmu

40

obr. 15. – automatické doplňvání z katalogu filmů

41

obr. 16. - datepicker

42

obr. 17. – dropdown menu, upravených checkboxů a chybně vyplněných polí

42

obr. 18. – Odkaz na Index a offline upozornění

43

obr. 19. – Přihlašovací formulář, postup přihlašování

43

obr. 20. – animace znázorňující načítání.

44

obr. 21. – některé z URL adres

44

obr. 22. – popupokna upozorňující na změnu připojení

46

obr. 23. – Experimentální fukce změny jazyků a barvy

46

obr. 24. – Rozpracovaná funkce pro jednoduché nastavení vzhledu sálu

47

51


kód 1. – PHP 1

18

kód 2. – PHP funkce GETvalue

18

kód 3. – načtení a zpracování filmu

19

kód 4. – kontrla uživatele, převedení mapy rezervací a zápis do $data

20

kód 5. výpis ve formátu JSON

20

kód 6. – načítací funkce getData

21

kód 7. ukládání funkcí formSubmit

22

kód 8. - část inicializace

23

kód 9. – inicializace hlavní funkce loadModule

24

kod 10. – Funkce pro načítání obsahu při scrollování po stránce

25

kód 11. – generování sedadel

26

kód 12. – první polovina modulu Reserve

27

Kód 13. – druhá polovina modulu Reserve

28

kód 14. – zpracovávání mapy rezervací a komprese / dekomprese.

30

kód 15. – Cachování objektů a zřetězení příkazů

32

kód 16. – Eventy vs. Listenery

33

kód 17. – Transition CSS3

34

kód 18. – Napozicování obrázku ve Sprite

35

52


53

SEZNAM PŘÍLOH 1) CD

se

soubory

aplikace,

databází

a

digitální

kopií

dokumentace

MATURITNÍ PRÁCE dokumentace Správa a rezervace sedadel k kině (systém PHP, MySQL, Ajax, Jquery)

Recommend Documents