ˇ ´ VYSOKE ´ UCEN ˇ ´I TECHNICKE ´ V PRAZE CESK E FAKULTA STAVEBN´I
´ RSK ˇ A ´ PRACE ´ BAKALA
PRAHA 2012
Michal MED
ˇ ´ VYSOKE ´ UCEN ˇ ´I TECHNICKE ´ V PRAZE CESK E FAKULTA STAVEBN´I ´ OBOR GEODEZIE A KARTOGRAFIE
´ RSK ˇ A ´ PRACE ´ BAKALA ´ MAPOVA ´ APLIKACE PRO SDRUZEN ˇ ´I BUDEJOVICE ˇ WEBOVA KULTURN´I
Vedouc´ı pr´ace: Ing. Jiˇr´ı Cajthaml, Ph.D. Katedra mapov´an´ı a kartografie
ˇcerven 2012
Michal MED
ˇ LIST ZADAN ´ ´I ZDE VLOZIT
Z d˚ uvodu spr´avn´eho ˇc´ıslov´an´ı str´anek
ABSTRAKT V r´amci bakal´aˇrsk´e pr´aci byla vyhotovena webov´a aplikace kulturn´ıho informaˇcn´ıho syst´emu ˇ e Budˇejovice. S aplikac´ı je propojena datab´aze obsahuj´ıc´ı jednotliv´e kulturn´ı pro mˇesto Cesk´ ud´alosti, m´ısta kon´an´ı, typy ud´alost´ı a informace o uˇzivatel´ıch. Aplikace m´a uˇzivatelsk´e rozhran´ı pro vyhled´av´an´ı ud´alost´ı podle atribut˚ u i v mapˇe a administrativn´ı rozhran´ı pro vkl´ad´an´ı ud´alost´ı samotn´ymi organiz´atory. Technick´e prostˇredky pouˇzit´e k tvorbˇe aplikace jsou podrobnˇe pops´any v textov´e ˇc´asti pr´ace. V r´amci pr´ace byl tak´e vytvoˇren popis aplikace pro laiky. Pr´ace d´ale obsahuje rozbor aplikaˇcn´ıho programov´eho rozhran´ı Google Maps pro JavaScript.
ABSTRACT ˇ e Budˇejovice In this bachelor work, web application of culture information system for city of Cesk´ was created. The application is connected to the database, which contains informations about cultural events, places and informations about users. Application has user interface for searching cultural events according to attributes and for seaching from map and administrative interface for inserting new events by organisers themselves. Technical resources used to create application are described in the text part of work. To the work belongs description of application for laics and analysis of application programming interface of Google Maps for JavaScript.
´ SEN ˇ ´I PROHLA
Prohlaˇsuji, ˇze jsem tuto bakal´aˇrskou pr´aci vypracoval samostatnˇe pod veden´ım Ing. Jiˇr´ıho Cajthamla, Ph.D. Pouˇzitou literaturu a dalˇs´ı zdroje uv´ad´ım v seznamu zdroj˚ u.
M´e podˇekov´an´ı patˇr´ı pˇredevˇs´ım vedouc´ımu pr´ace a to za pˇripom´ınky, konstruktivn´ı n´avrhy a pomoc pˇri zpracov´an´ı t´eto pr´ace. Kromˇe toho bych chtˇel podˇekovat rodinˇe a pˇr´atel˚ um za trpˇelivost a podporu.
Neofici´ aln´ı logo JavaScriptu pouˇzit´e na konferenci JSConf EU 2011 . . . . 60
4.5
Uk´ azka mapy s markerem a otevˇren´ ym informaˇcn´ım oknem . . . . . . . . . 61
8
ˇ CVUT v Praze
1
´ KAPITOLA 1. UVOD
´ Uvod
Webov´ a aplikace, kterou jsem vytvoˇril v r´amci t´eto bakal´aˇrsk´e pr´ace a kter´e jsem dal pro potˇreby tohoto textu pracovn´ı n´azev Culture, se zab´ yv´a kulturn´ım dˇen´ım ve mˇestˇe ˇ e Budˇejovice. Jedn´ Cesk´ a se o kulturn´ı pˇrehled, jehoˇz obsah je vytv´aˇren samotn´ ymi organiz´atory kulturn´ıch ud´ alost´ı. Do aplikace je zakomponov´ana interaktivn´ı mapa, kter´ a slouˇz´ı uˇzivatel˚ um k zobrazov´ an´ı v´ ysledk˚ u a organiz´ator˚ um k pˇrid´av´an´ı nov´ ych m´ıst. Aplikace uchov´ av´ a informace o kulturn´ıch ud´alostech, o m´ıstech, ve kter´ ych se tyto ud´alosti odehr´avaj´ı, a o typech tˇechto ud´ alost´ı.
Hlavn´ımi technick´ ymi prostˇredy pˇri tvorbˇe aplikace byly skriptovac´ı jazyky JavaScript a PHP a datab´ aze PostgreSQL. V aplikaci je pouˇzita mapa Google a jej´ı aplikaˇcn´ı programov´e rozhran´ı, kter´e vyuˇz´ıv´ a JavaScript. K programov´an´ı funkˇcn´ı ˇc´asti webov´eho dokumentu bych mohl pouˇz´ıt i jin´e skriptovac´ı jazyky (napˇr´ıklad Flash nebo Java), ale zvolil jsem JavaScript, protoˇze ho pouˇz´ıv´am pro tvorbu mapy a jej´ıch ovl´adac´ıch prvk˚ u a kromˇe toho jsem s JavaScriptem uˇz v minulosti pracoval a zn´am jeho syntaxi. Skriptovac´ı jazyk PHP byl zvolen d´ıky ˇsirok´e ˇsk´ale pˇreddefinovan´ ych metod pro pr´aci s datab´az´ı a s relacemi a velk´emu mnoˇzstv´ı pˇrehledn´ ych pˇr´ıklad˚ u a referenc´ı na internetu. S t´ımto skriptovac´ım jazykem jsem pracoval poprv´e aˇz pˇri tvorbˇe aplikace Culture. A koneˇcnˇe datab´azi PostgreSQL jsem si vybral proto, ˇze jsem s n´ı v minulosti uˇz pracoval a jedn´a se o Open Source projekt.
Tato textov´ a dokumentace je tematicky rozdˇelena do tˇr´ı ˇc´ast´ı. Prvn´ı z nich se zab´ yv´ a aplikaˇcn´ım programov´ ym rozhran´ım projektu Google Maps. Nejprve jsou nast´ınˇeny pˇr´ıklady vyuˇzit´ı aplikaˇcn´ıch programov´ ych rozhran´ı z rodiny Google APIs, kter´e souvis´ı s tvorbou interaktivn´ıch mapov´ ych aplikac´ı, d´ale jsou zde rozebr´any z´akladn´ı tˇr´ıdy Google Maps JavaScript API V3 formou jednoduch´eho tutorialu jak zobrazit mapu, marker a informaˇcn´ı okno, a nakonec je nast´ınˇeno vyuˇzit´ı Google Maps JavaScript API V3 v aplikaci Culture.
Druh´ a ˇc´ ast textov´e dokumentace se zab´ yv´a praktick´ ym pouˇz´ıv´an´ım aplikace Culture z hlediska uˇzivatel˚ u i organiz´ ator˚ u. Je v n´ı vysvˇetleno, jak´ ym zp˚ usobem pomoc´ı aplikace
9
ˇ CVUT v Praze
´ KAPITOLA 1. UVOD
vyhled´ avat v datab´ azi, jak pˇrid´ avat do datab´aze nov´e z´aznamy a tak´e jak se zaregistrovat jako nov´ y uˇzivatel a pot´e pˇrihl´asit. Tato ˇc´ast je napsan´a takov´ ym zp˚ usobem, aby ji porozumnˇel i laik.
V posledn´ı ˇc´ asti textov´e dokumentace jsou pops´any principy fungov´an´ı aplikace Culture z technick´eho hlediska. Je zde pops´ana struktura a fungov´an´ı datab´aze PostgreSQL, vyuˇzit´ı skript˚ u napsan´ ych v PHP i v JavaScriptu a je zde i letm´a zm´ınka o vyuˇzit´ı styl˚ u.
Snahou bylo vytvoˇrit aplikaci Culture tak, aby byla co nejpˇrehlednˇejˇs´ı, ovl´adan´ı bylo intuitivn´ı a aby byly poˇzadavky na administraci ze strany provozovatele pokud moˇzno minim´ aln´ı.
10
ˇ CVUT v Praze
2
KAPITOLA 2. GOOGLE MAPS API V3
Google Maps API V3
API znamen´ a Aplication Programming Interface, tedy aplikaˇcn´ı programov´e rozhran´ı. Pouˇz´ıv´ a se pro zjednoduˇsen´ı pr´ ace program´atora pˇri integraci aplikace do sv´eho programu.
Jako mapov´ y podklad jsem pouˇzil mapy Google, k pr´aci s obsahem mapy a s mapov´ ymi prvky jsem pouˇzil JavaScriptov´e API verze 3. Zvolil jsem je z nˇekolika d˚ uvod˚ u:
• S Google Maps API jsem uˇz v pr˚ ubˇehu studia pracoval. Spoleˇcnˇe se spoluˇz´akem ˇ ep´ Stˇ anem Turkem jsme Google mapy pouˇzili jako mapov´ y podklad pro naˇsi semestr´ aln´ı pr´ aci v pˇredmˇetu 153INKA – Interaktivn´ı kartografie (pod veden´ım Ing. Jiˇr´ıho Cajthamla Ph.D.), ve kter´e jsme zpracov´avali formou interaktivn´ı mapy program Budˇejovick´eho Maj´ alesu 2011. Proto jsem se bˇehem pr´ace nemusel znovu seznamovat se z´ aklady a mohl jsem rovnou ˇreˇsit konkr´etn´ı probl´emy t´ ykaj´ıc´ı se t´eto bakal´aˇrsk´e pr´ ace. • Velk´e mnoˇzstv´ı snadno pouˇziteln´ ych pˇreddefinovan´ ych objekt˚ u a tˇr´ıd. Spoleˇcnost Google je podle mˇe hodnˇe otevˇren´a program´ator˚ um, kteˇr´ı chtˇej´ı vyuˇz´ıvat jej´ıch sluˇzeb, a proto jsou API jej´ıch produkt˚ u velice dobˇre proveden´e. To se net´ yk´a zdaleka jenom Google Maps, ale i Google Calendar, Google Chrome, Google+ nebo Google Earth. Spoleˇcnost Google podporuje i program´atory aplikac´ı do sv´eho operaˇcn´ıho syst´emu pro mobiln´ı zaˇr´ızen´ı Android, pro kter´ y vytvoˇrila obrovsk´e mnoˇzstv´ı knihoven zjednoduˇsuj´ıc´ıch v´ yvoj aplikac´ı v jazyce Java. • Pˇrehlednˇe zpracovan´e reference k tˇr´ıd´am i objekt˚ um. Kromˇe toho, ˇze je dobˇre zpracovan´e API, jsou velice dobˇre zpracovan´e i reference a dokumentace. Na str´ank´ach Google Developers je u kaˇzd´e tˇr´ıdy pops´an konstruktor, metody, vlastnosti a ud´alosti a jak s nimi pracovat. Orientace mezi jednotliv´ ymi prvky je zde velmi jednoduch´a a intuitivn´ı. • Velk´e mnoˇzstv´ı pˇr´ıklad˚ u a ˇreˇsen´ ych probl´em˚ u v internetov´ ych diskuz´ıch. Tento bod je dvouseˇcnou zbran´ı, protoˇze i pˇres to, ˇze se v diskuz´ıch d´a naj´ıt t´emˇeˇr vˇse, ne vˇzdy najdete to, co hled´ ate. Zrovna v pˇr´ıpadˇe Google Map to ale u ´plnˇe neplat´ı, protoˇze
11
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
probl´emy vˇetˇsinou b´ yvaj´ı dost konkr´etn´ı, a tak se daj´ı snadno formulovat i vyhledat v diskuz´ıch a odpovˇedi b´ yvaj´ı dost jednoznaˇcn´e. Stejnˇe jsem vˇetˇsinou hledal ovˇeˇren´e odpovˇedi na webu stackoverflow.com nebo na str´ank´ach Google Developers. Nav´ıc tento zp˚ usob vyhled´ av´ an´ı ˇreˇsen´ı probl´em˚ u dost ˇcasto vyˇzaduje celkov´e porozumˇen´ı jak probl´emu, tak i technick´emu prostˇredku, kter´ ym se probl´em ˇreˇs´ı. Nav´ıc se mi ˇcasto st´ avalo to, ˇze jsem musel hledat ˇreˇsen´ı probl´emu po ˇc´astech, jednotliv´e ˇc´asti spojit a v´ ysledn´e ˇreˇsen´ı pˇrizp˚ usobit vlastn´ı aplikaci. Navzdory tˇemto nev´ yhod´am je moˇzn´e naj´ıt velice rychle elegantn´ı ˇreˇsen´ı t´emˇeˇr kaˇzd´eho probl´emu. Mapov´ ych server˚ u dobˇre pouˇziteln´ ych pro aplikaci podobn´eho typu jako je tato pr´ace je v´ıce, pro pˇrehlednost bych zde uvedl nejzn´amˇejˇs´ı: • UMN MapServer (Open Source) • Open Street Maps API (otevˇren´a mapa svˇeta) • ArcGIS server (produkt firmy ESRI, pouˇz´ıv´a napˇr´ıklad informaˇcn´ı server mˇesta Stuttgart) • Mapy.cz API (nejzn´ amˇejˇs´ı ˇcesk´ y mapov´ y server)
2.1
Google APIs
Google Maps API je vhodn´e pro nˇekolik druh˚ u aplikac´ı a je propojen´a s ˇradou dalˇs´ıch API. V t´eto ˇc´ asti se budu vˇenovat tˇem, kter´e maj´ı co doˇcinˇen´ı s tvorbou mapov´ ych aplikac´ı.
2.1.1
Google Places API
Slouˇz´ı k pr´ aci s datab´ az´ı Google Places, ve kter´e jsou zaneseny miliony bod˚ u po cel´em svˇetˇe. Vzhledem k tomu, ˇze v datab´azi Google jsou m´ısta rozˇclenˇena do nejr˚ uznˇejˇs´ıch typ˚ u a sama datab´ aze je dost obs´ahl´a, m˚ uˇze vyuˇzit´ı t´eto datab´aze dost ulehˇcit pr´aci. Na druhou stranu si mysl´ım, ˇze se tato datab´aze ned´a vyuˇz´ıt vˇzdy. Kdyˇz jsem proch´azel m´ısta, kter´a by mˇela b´ yt obsaˇzena v kulturn´ı datab´azi aplikace, vˇetˇsinu z nich jsem v Google datab´azi naˇsel. Ale datab´ aze Google Places se v´ıce neˇz na kulturu zamˇeˇruje na businesses ” and points of interest“ (pˇrevzato z [1]). Tedy hlavnˇe na obchody, s´ıdla a poboˇcky firem, historick´e a pˇr´ırodn´ı pam´ atky, restaurace, hotely a podobnˇe. Hudebn´ı kluby, koncertn´ı
12
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
s´aly, v´ ystavn´ı s´ınˇe a divadla jsou v datab´azi samozˇrejmˇe tak´e, ale z n´ahodn´eho v´ ybˇeru pˇeti mnˇe zn´ am´ ych m´ıst poˇradaj´ıc´ıch kulturn´ı akce jsem v datab´azi Google Places naˇsel jen tˇri. Jedn´ım z tˇech, kter´e jsem nenaˇsel, je dokonce nejvˇetˇs´ı mˇestsk´ y Kulturn´ı d˚ um, coˇz je m´ısto, kter´e by v datab´ azi rozhodnˇe mˇelo b´ yt.
S datab´ az´ı se pracuje pomoc´ı Google Places API, kter´e je zat´ım pouze experiment´aln´ı. Zobrazovan´ a m´ısta je moˇzn´e selektivnˇe vyb´ırat podle kategori´ı, coˇz je v´ yhodn´e, pokud nˇekdo chce v mapˇe zobrazovat t´ematick´e vrstvy napˇr´ıklad pro restaurace nebo historick´e pam´atky. U m´ıst poˇr´ adaj´ıc´ıch kulturn´ı akce ale doch´az´ı k probl´emu, ˇze v datab´azi Google Places mohou b´ yt klasifikov´ any v´ıcem´enˇe jakkoliv. B´ yv´a bˇeˇznou prax´ı, ˇze v kav´arn´ach prob´ıhaj´ı divadeln´ı pˇredstaven´ı, na n´amˇest´ıch koncerty a v restaurac´ıch vernis´aˇze. Samozˇrejmˇe nejde o neˇreˇsiteln´ y probl´em, ale mysl´ım si, ˇze pro u ´ˇcely t´eto pr´ace je jednoduˇsˇs´ı a rychlejˇs´ı vytv´ aˇret vlastn´ı datab´ azi m´ıst.
Google Places API je n´ astrojem ke komunikaci mezi uˇzivatelem a datab´az´ı Google Places, mezi kter´ ymi komunikuje pomoc´ı dotaz˚ u (requests). Jsou dostupn´e ˇctyˇri z´akladn´ı typy dotaz˚ u: • Place Search – vrac´ı seznam bl´ızk´ ych m´ıst na z´akladˇe polohy uˇzivatele • Place Detail request – vrac´ı detailnˇejˇs´ı informace o dan´em m´ıstˇe • Place Check-ins – slouˇz´ı ke zjiˇst’ov´an´ı popularity m´ıst. Zjiˇst’uje, zda uˇzivatel o dan´e m´ısto projevil z´ ajem. M´ıst˚ um s vˇetˇs´ım poˇctem check˚ u“ se zvyˇsuje hodnocen´ı pˇri ” vyhled´ av´ an´ı. • Place Reports – umoˇzn ˇuje pˇrid´avat do datab´aze nov´a m´ısta a mazat m´ısta, kter´ a uˇzivatel pˇridal. K m´ıst˚ um je moˇznost pˇriˇrazovat ud´alosti. Toto se ˇreˇs´ı pomoc´ı Events in the Places API. V´ ystupy z dotaz˚ u jsou bud’ ve form´atu XML, nebo JSON. Parametry vyhled´avac´ıho dotazu jsou souˇradnice polohy (location) a polomˇer (radius), ve kter´em budou vyhled´ana m´ısta. Voliteln´ ymi parametry jsou pak jazyk (language), kl´ıˇcov´e slovo pro vyhled´av´an´ı (keyword), jm´eno (name) nebo typ hledan´eho m´ısta (types) a podle ˇceho budou v´ ysledky seˇrazeny (rankby) – zda podle d˚ uleˇzitosti, nebo podle vzd´alenosti (prominence, distance).
13
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
U ostatn´ıch typ˚ u dotaz˚ u jsou parametry podobn´e. U dotazu na detailn´ı popis m´ısta je povinn´ ym parametrem identifik´ ator (reference), voliteln´ ym parametrem je jazyk (language). Dalˇs´ı dva dotazy se odes´ılaj´ı metodou POST. Parametrem pˇred´av´an´ ym touto metodou pro Place Check-in request je identifik´ator (reference), pro pˇrid´av´an´ı m´ıst pomoc´ı Place report je parametr˚ u v´ıce. Jsou to souˇradnice polohy (location), pˇresnost (accuracy), jm´eno (name), typ (types) a jazyk (language). Pro maz´an´ı m´ıst je parametrem jen identifik´ator (reference).
Povinn´ ymi parametry u vˇsech dotaz˚ u jsou nav´ıc API kl´ıˇc a sensor (key, sensor). API kl´ıˇc slouˇz´ı k identifikaci aplikace, takˇze u vˇsech pˇridan´ ych m´ıst je jasnˇe definov´an autor. Sensor definuje, zda dotaz pˇrich´ az´ı z pˇr´ıstroje, kter´ y dok´aˇze urˇcit polohu (napˇr´ıklad GPS). M˚ uˇze b´ yt nastaven na hodnotu true nebo false.
2.1.2
Google Images API
Do Google Image API patˇr´ı Google Static Maps API, kter´e slouˇz´ı k um´ıstˇen´ı statick´e mapy do aplikace, a Google StreetView Image API, kter´e slouˇz´ı k vloˇzen´ı obr´azku z Google Street View. Tyto API nepotˇrebuj´ı k pr´aci JavaScript, m´ısto toho vyuˇz´ıvaj´ı html tag s parametrem src. V z´avislosti na uveden´ ych parametrech je moˇzn´e statick´e mapˇe nastavit souˇradnice stˇredu mapy (center), u ´roveˇ n pˇribl´ıˇzen´ı (zoom), velikost obr´azku (size), mˇeˇr´ıtko (scale), form´at obr´azku (format), typ a jazyk mapy (maptype a language) a region, kter´ y se zobraz´ı (region). Do statick´e mapy mohou b´ yt vkl´ad´any i markery (body) a cesty, coˇz jsou seˇrazen´e sady bod˚ u. U Street View tolik moˇznost´ı nen´ı. V parametrech je moˇznost nastavit jenom souˇradnice polohy kamery (location), velikost obr´azku (size) a pootoˇcen´ı kamery ve 3D prostoru (heading, fov a pitch). Kromˇe toho jsou povinn´ ymi parametry opˇet API kl´ıˇc a sensor (key, sensor).
2.1.3
Elevation API
Elevation API poskytuje v´ yˇskopisn´a data na cel´em zemsk´em povrchu vˇcetnˇe moˇr´ı a oce´an˚ u, kde vrac´ı z´ aporn´e hodnoty. V pˇr´ıpadˇe dotazu na m´ısto, kde nen´ı zanesena v´ yˇska, je v´ yˇska vypoˇc´ıt´ ana interpolac´ı z okoln´ıch bod˚ u. Je vhodn´e pro v´ yvoj turistick´ ych a cyklistick´ ych map nebo pro zemˇemˇeˇrick´e aplikace vyˇzaduj´ıc´ı n´ızkou pˇresnost. Do Elevation
14
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
API se d´ a pˇristupovat bud’ pˇres Google Maps JavaScript API V3, nebo pˇr´ımo pomoc´ı objektu ElevationService().
Elevation API poskytuje v´ yˇskov´a data vztaˇzen´a k dotazovan´ ym objekt˚ um. To mohou b´ yt body, nebo cesty. V z´ avislosti na tom, zda jde o body nebo o cesty, se tak´e mˇen´ı parametry. Pro body je zde parametr locations, kter´ y m˚ uˇze obsahovat jeden bod ve form´atu zemˇepisn´ a ˇs´ıˇrka/d´elka oddˇelen´e ˇc´arkou, nebo v´ıce bod˚ u ve formˇe pole. Pro cesty existuj´ı parametry path a samples, kter´e urˇcuj´ı cestu, na kter´e budou zjiˇstˇeny v´ yˇskopisn´e hodnoty, a specifikuj´ı poˇcet bod˚ u, kter´e budou na cestˇe. Cesta je tˇemito body rozdˇelena na stejnˇe dlouh´e u ´seky. Posledn´ım povinn´ ym parametrem jak pro body, tak pro cesty je sensor (sensor). V´ ystup je ve form´atu XML, nebo JSON.
2.1.4
Google Maps JavaScript API V3, vyuˇ zit´ı pro mobiln´ı zaˇ r´ızen´ı
Google Maps API je od zaˇca´tku navrˇzen´e tak, aby mapov´e aplikace j´ım vytvoˇren´e a spravovan´e byly podporov´ any v mobiln´ıch zaˇr´ızen´ıch se syst´emem Android nebo iOS. Google Maps jsou tak´e jedin´ a mapov´a platforma, kter´a nab´ız´ı SDK (Software Development Kit) jak pro Android, tak pro iOS. Pro spr´avu a pˇr´ıstup do datab´aze Google Places je k dispozici Google Places API, takt´eˇz optimalizovan´e i pro vyuˇzit´ı v mobiln´ıch zaˇr´ızen´ıch. Obr´azky vytvoˇren´e pomoc´ı Google Images API jsou v mobiln´ıch zaˇr´ızen´ıch samozˇrejmˇe tak´e plnˇe podporovan´e. Google Maps JavaScript API V3 bude pops´ana samostatnˇe.
2.2
Pr´ ace s Google Maps API V3 a jeho pouˇ zit´ı v t´ eto pr´ aci
V t´eto ˇc´ asti podrobnˇe rozeberu Google Maps JavaScript API V3 a podrobnˇe pop´ıˇsu ty ˇc´asti, kter´e jsou v aplikaci pouˇzity.
2.2.1
Zobrazen´ı mapy na str´ ance a tˇ r´ıda Map
Z´akladn´ım prvkem Google Maps JavaScript API je tˇr´ıda Map. Z´akladn´ım u ´kolem je potom zobrazen´ı mapy na str´ ance. K tomu je potˇreba nejprve naˇc´ıst v html str´ance Google Maps API. Do hlaviˇcky html souboru mus´ı b´ yt vloˇzen n´asleduj´ıc´ı k´od:
Kdyˇz je API naˇcten´e, je moˇzn´e naˇc´ıst do str´anky mapu. Vzhledem k tomu, ˇze se JavaScript nespust´ı s´ am, ale mus´ı b´ yt zavol´ an, pouˇz´ıv´am k naˇcten´ı mapy funkci initializeMap(), kter´a se spouˇst´ı pˇri naˇc´ıt´ an´ı tˇela str´anky.
Funkce pro naˇcten´ı mapy je velice kr´atk´a a jednoduch´a. Nejdˇr´ıv je tˇreba vytvoˇrit instanci tˇr´ıdy Map. Konstruktor vypad´ a takto: Map(mapDiv:Node, opts?:MapOptions)
Parametr mapDiv urˇcuje, ve kter´em divu v html k´odu se mapa zobraz´ı, a v opts? je seznam vlastnost´ı (properties) objektu MapOptions, kter´ y urˇcuje, jak se mapa zobraz´ı. ´ Upln´ y seznam properties zde uv´ adˇet nebudu, uvedu jen nejˇcastˇeji pouˇz´ıvan´e: • center – urˇcuje souˇradnice stˇredu zobrazen´e ˇc´asti mapy. Uvad´ı se jako instance tˇr´ıdy LatLng, obsahuj´ıc´ı ˇc´ıseln´e hodnoty zemˇepisn´e ˇs´ıˇrky a d´elky (lat a lng) v souˇradnicov´em syst´emu WGS-84. Toto je povinn´ y parametr. • zoom – urˇcuje u ´roveˇ n pˇribl´ıˇzen´ı mapy. Uv´ad´ı se jako ˇc´ıseln´a hodnota, pˇribl´ıˇzen´ı roste se zvyˇsuj´ıc´ı se hodnotou. Nejvyˇsˇs´ı moˇzn´a hodnota pˇribl´ıˇzen´ı je 21, nejmenˇs´ı je 0. Pˇri zad´ an´ı vyˇsˇs´ıho nebo niˇzˇs´ıho ˇc´ısla je zoom nastaven na nejbliˇzˇs´ı moˇznou hodnotu. Toto je povinn´ y parametr. • MapTypeId – urˇcuje typ mapy. Uv´ad´ı se jako instance tˇr´ıdy MapTypeId. Moˇznosti nastaven´ı jsou: – HYBRID – ROADMAP – SATELLITE – TERRAIN Toto je povinn´ y parametr.
16
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
• draggable – urˇcuje, zda je moˇzn´e mapu uchopit kursorem. Uv´ad´ı se jako hodnota typu bool. Implicitnˇe je nastaven na true. • heading – urˇcuje pootoˇcen´ı mapy v˚ uˇci severu. Uv´ad´ı se jako ˇc´ıseln´a hodnota azimutu od severu ve stupn´ıch po smˇeru hodinov´ ych ruˇciˇcek. • scrollwheel – urˇcuje, zda je moˇzn´e mapu pˇribliˇzovat a oddalovat koleˇckem myˇsi. Uv´ ad´ı se jako hodnota typu bool. Implicitnˇe je nastaven na true. A d´ale uvedu nˇekolik dalˇs´ıch, jejichˇz funkce je zˇrejm´a: • maxZoom – ˇc´ıslo • minZoom – ˇc´ıslo • disableDoubleClickZoom – bool • overviewMapControl – bool • scaleControl – bool • streetViewControl – bool Pro zobrazen´ı mapy na str´ ance je zde uvedeno jiˇz vˇse potˇrebn´e, uvedu tedy praktick´ y pˇr´ıklad. Toto je html k´ od str´ anky, ve kter´e bude mapa zobrazena: <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> <script type="text/javascript" src="map.js">
JavaScriptov´ y soubor map.js vypad´a n´asledovnˇe: var map;
function initializeMap() {
17
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
var myOptions = { center: new google.maps.LatLng(56.83, 15.16), zoom: 7, mapTypeId: google.maps.MapTypeId.HYBRID, streetViewControl: false, draggable: false }; map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions); }
Pˇri otevˇren´ı str´ anky se naˇctou dva JavaScriptov´e soubory. Jedn´ım z nich je mnou vytvoˇren´ y soubor map.js, druh´ y zajiˇst’uje pˇr´ıstup ke Google Maps API. V souboru map.js je definov´ana promˇenn´ a map a d´ ale je v nˇem funkce initializeMap(). Pˇri spuˇstˇen´ı skriptu se tedy pouze vytvoˇr´ı pr´ azdn´ a promˇenn´a map. Je to z toho d˚ uvodu, aby promˇenn´a existovala po celou dobu bˇehu str´ anky (kdyby byla definov´ana uvnitˇr funkce, jej´ı platnost by skonˇcila s pr˚ ubˇehem funkce).
V okamˇziku, kdy se zaˇcne naˇc´ıtat tˇelo html souboru, je spuˇstˇena funkce initializeMap. Ta nejprve vytvoˇr´ı promˇennou myOptions se zvolen´ ymi vlastnostmi a pot´e napln´ı promˇennou map. Prvn´ı parametr konstruktoru ˇr´ık´a, ˇze mapa bude naˇctena v prvku definovan´em id=mapCanvas, druh´ y parametr naˇc´ıt´a objekt myOptions, podle kter´eho se mapa bude ˇr´ıdit. Pˇri naˇcten´ı str´ anky v prohl´ıˇzeˇci se objev´ı hybridn´ı mapa s u ´rovn´ı pˇribl´ıˇzen´ı 7, se stˇredem v bodˇe o souˇradnic´ıch 56.83◦ s.ˇs. a 15.16◦ v.d., bez moˇznosti posunov´an´ı mapy uchopen´ım myˇs´ı a bez moˇznosti pouˇz´ıvat Street View.
Ke vˇsem vlastnostem mapy se pˇristupuje ˇclensk´ ymi metodami pˇres instanci tˇr´ıdy Map. Metody jsou ˇctyˇr r˚ uzn´ ych typ˚ u: • get – pomoc´ı metod typu get se z´ısk´avaj´ı informace o vlastnostech mapy. Vlastnosti mapy jsou vˇetˇsinou nastaveny v objektu MapOptions a metody, kter´e z´ısk´avaj´ı jejich hodnotu, jsou pojmenov´ any podle nich. Mezi metody typu get patˇr´ı napˇr´ıklad: – getCenter() – vr´ at´ı souˇradnice stˇredu mapy jako instanci tˇr´ıdy LatLng – getBounds() – vr´ at´ı souˇradnice jihoz´apadn´ıho a severov´ ychodn´ıho rohu mapy jako instanci tˇr´ıdy LatLngBounds – getDiv() – vr´ at´ı uzel DOM, ve kter´em se mapa nach´az´ı
18
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
Obr. 2.1: Mapa vytvoˇren´a na z´akladˇe funkce initializeMap() – getMapTypeId() – vr´ at´ı typ mapy (HYBRID, ROADMAP, SATELLITE nebo TERRAIN) – getZoom() – vr´ at´ı hodnoty pˇribl´ıˇzen´ı mapy – a dalˇs´ı (pojmenovan´e analogicky k n´azv˚ um vlastnost´ı) • set – slouˇz´ı k nastaven´ı nebo pˇrenastaven´ı vlastnost´ı mapy. Maj´ı hodnˇe spoleˇcn´eho s metodami typu get. Patˇr´ı mezi nˇe napˇr´ıklad: – setCenter(latlng:LatLng) – nastav´ı souˇradnice stˇredu mapy na hodnotu instance tˇr´ıdy LatLng – setMapTypeId(mapTypeId:MapTypeId|string) – nastav´ı typ mapy na hodnotu HYBRID, ROADMAP, SATELLITE nebo TERRAIN – setZoom(zoom:number) – nastav´ı pˇribl´ıˇzen´ı mapy na hodnotu zoom:number – setOptions(options:MapOptions) – pˇrenastav´ı vlastnosti mapy podle objektu MapOptions – a dalˇs´ı (pojmenovan´e analogicky k n´azv˚ um vlastnost´ı) • pan – slouˇz´ı k posunu stˇredu mapy. V pˇr´ıpadˇe, ˇze pozice bodu, do kter´eho se stˇred posunuje, je viditeln´ a uˇz pˇred posunem, probˇehne posun plynul´ ym pohybem. V opaˇcn´em pˇr´ıpadˇe je mapa posunuta skokovˇe. Metody tohoto typu jsou tˇri: – panBy(x:number, y:number) – posune stˇred mapy o hodnoty x a y – panTo(latlng:LatLng) – posune stˇred mapy do bodu latlng
19
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
– panToBounds(bounds:LatLngBounds) – posune mapu tak, aby v n´ı byly viditelnˇe meze nastaven´e instanc´ı tˇr´ıdy LatLngBounds, kter´a definuje meze souˇradnicemi jihoz´ apadn´ıho a severov´ ychodn´ıho rohu • fit – nastavuje zobrazovanou ˇc´ast mapy. Patˇr´ı sem jedin´a metoda: – fitBounds(bounds:LatLngBounds) – nastavuje meze mapy dle zadan´e instance tˇr´ıdy LatLngBounds. D´ale tˇr´ıda map obsahuje nˇekter´e vlastnosti (properties), kter´e umoˇzn ˇuj´ı napˇr´ıklad pˇrid´av´an´ı ovl´ adac´ıch prvk˚ u mapy nebo spravuj´ı registr mapov´ ych typ˚ u. Tyto vlastnosti jsem bˇehem pr´ ace nepouˇz´ıval, proto se zde o nich nebudu podrobnˇeji rozepisovat.
Posledn´ı d˚ uleˇzitou souˇc´ ast´ı tˇr´ıdy Map jsou ud´alosti (events). Ud´alosti jsou podnˇety, na z´akladˇe kter´ ych je provedena nˇejak´a akce. V praxi jsem ud´alosti pouˇz´ıval jako parametr pro Listener, kter´ y kontroluje, zda se provede ud´alost, a pot´e vykon´a pˇr´ısluˇsnou akci (spust´ı funkci). Mezi nejpouˇz´ıvanˇejˇs´ı ud´alosti patˇr´ı: • clicked – ud´ alost se spust´ı kliknut´ım myˇs´ı do mapy • dblclicked – ud´ alost se spust´ı dvojit´ ym kliknut´ım myˇs´ı do mapy • rightclick – ud´ alost se spust´ı kliknut´ım do mapy prav´ ym tlaˇc´ıtkem myˇsi • drag – tato ud´ alost se opakuje, dokud uˇzivatel drˇz´ı kursorem mapu • dragstart – tato ud´ alost se provede pouze jednou v okamˇziku, kdy uˇzivatel chyt´ı kursorem mapu • mousemove – ud´ alost se spust´ı, kdykoliv uˇzivatel pohne myˇs´ı v mapˇe • mouseover – ud´ alost se spust´ı, kdyˇz uˇzivatel pˇrejede myˇs´ı nad mapu • bounds changed – ud´ alost se spust´ı, kdyˇz se zmˇen´ı meze mapy • center changed – ud´ alost se spust´ı, kdyˇz se zmˇen´ı souˇradnice stˇredu mapy • maptypeid changed – ud´ alost se spust´ı, kdyˇz se zmˇen´ı typ mapy • zoom changed – ud´ alost se spust´ı, kdyˇz se zmˇen´ı u ´rovˇen ˇ pˇribl´ıˇzen´ı mapy
20
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
• resize – ud´ alost se spust´ı, kdyˇz se zmˇen´ı velikost divu, ve kter´em se mapa nach´az´ı Pouˇzit´ı ud´ alost´ı demonstruji v n´ asleduj´ıc´ım pˇr´ıkladu: google.maps.event.addListener(map, ’click’, function(event) { map.setCenter(event.latLng); });
V tomto pˇr´ıkladu vytv´ aˇr´ım Listener, kter´ y pˇri kliknut´ı (click) do promˇenn´e map, kter´ a je instanc´ı tˇr´ıdy Map, spust´ı funkci, kter´a nastav´ı souˇradnice stˇredu mapy map na m´ısto, kam uˇzivatel klikl.
Tˇr´ıda Map je tedy naprost´ ym z´akladem pˇri pr´aci s Google Maps JavaScript API V3 a vˇsechny dalˇs´ı prvky, kter´e k mapˇe patˇr´ı, mus´ı b´ yt identifikov´any instanc´ı tˇr´ıdy Map, aby bylo jasn´e, ke kter´e mapˇe patˇr´ı.
2.2.2
Zobrazen´ı markeru na mapˇ e a tˇ r´ıda Marker
V aplikaci, kterou jsem vytvoˇril v r´amci t´eto bakal´aˇrsk´e pr´ace, jsou velmi d˚ uleˇzitou souˇc´ast´ı znaˇcky, kter´e na mapˇe oznaˇcuj´ı urˇcit´e m´ısto, tedy markery. K vytv´aˇren´ı, pouˇz´ıv´an´ı a editov´ an´ı marker˚ u slouˇz´ı v Google Maps JavaScript API V3 tˇr´ıda Marker.
Pˇri vytvoˇren´ı instance tˇr´ıdy Marker se nejprve spust´ı konstruktor. Konstruktor tˇr´ıdy Marker vypad´ a takto: Marker(opts?:MarkerOptions)
Parametr opts? zde obsahuje seznam vlastnost´ı (properties) objektu MarkerOptions. Mezi tyto vlastnosti patˇr´ı: • position – obsahuje souˇradnice bodu, na kter´em se marker zobraz´ı. Tento atribut je povinn´ y • map – instance tˇr´ıdy Map, ve kter´e se marker zobraz´ı • flat – pokud je nastavena na hodnotu true, st´ın markeru se nezobrazuje • icon – urˇcuje obr´ azek, kter´ ym bude marker v mapˇe reprezentov´an
21
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
• shadow – urˇcuje obr´ azek, kter´ ym bude v mapˇe zobrazen st´ın markeru • title – text, kter´ y se zobraz´ı pˇri podrˇzen´ı myˇsi nad markerem • visible – pokud je nastaven na hodnotu true, marker je viditeln´ y • cursor – urˇcuje, jak se zmˇen´ı kursor myˇsi pˇri podrˇzen´ı nad markerem • optimized – pokud je nastavena na hodnotu true, vˇsechny markery se vykresluj´ı najednou jako samostatn´ y prvek. Nastavuje se na false pouze v pˇr´ıpadech, kdy je jako ikona nastaven animovan´ y .gif, nebo v pˇr´ıpadˇe, kdy je potˇreba kaˇzd´ y marker rendrovat jako samostatn´ y prvek DOM • raiseOnDrag – pokud je nastavena na hodnotu true, po uchopen´ı markeru kursorem myˇsi se ikona markeru zvˇetˇs´ı Pro zobrazen´ı markeru na mapˇe je zde uˇz uvedeno vˇse potˇrebn´e, uvedu tedy pˇr´ıklad. Do mapy, kterou jsem vytvoˇril dˇr´ıve, vloˇz´ım marker na fixn´ı bod pomoc´ı funkce addMarker(), kter´a vypad´ a takto: function addMarker() { var marker = new google.maps.Marker({ position: new google.maps.LatLng(55.68, 12.57), map: map, title: "Marker", icon: "icons/jazzclub.png" }); }
K tomu, aby se funkce spustila, ji mus´ım zavolat. To udˇel´am na posledn´ım ˇr´adku funkce initializeMap(). Pˇri naˇcten´ı mapy se tedy v mapˇe map na souˇradnic´ıch 55,68◦ s.ˇs. a 12,57◦ v.d. zobraz´ı marker s obr´ azkem jazzclub.png, kter´ y je ve sloˇzce icons a s titulkem Marker.
K ovl´ ad´ an´ı markeru slouˇz´ı ˇclensk´e metody. Ve tˇr´ıdˇe Marker jsou pouze dva typy ˇclensk´ ych metod. Jsou to metody typ˚ u get a set a slouˇz´ı k z´ısk´av´an´ı nebo nastavov´an´ı vlastnost´ı objektu MarkerOptions. Existuje 13 metod get, kter´ ymi se daj´ı nastavit vˇsechny vlastnosti markeru s v´ yjimkou optimized a raiseOnDrag. Metod set je o jednu v´ıc, protoˇze je moˇzn´e nastavit vˇsechny vlastnosti objektu MarkerOptions najednou (slouˇz´ı k tomu metoda setOptions( options:MarkerOptions)).
22
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
Obr. 2.2: Marker vytvoˇren´ y funkc´ı addMarker() Tˇr´ıda Marker tak´e obsahuje jednu konstantu (Constant). Je j´ı MAX ZINDEX, kter´ y urˇcuje maxim´ aln´ı hodotu z-indexu, kterou je moˇzn´e markeru nastavit. Marker s vyˇsˇs´ı hodnotou bude zobrazen v´ıce v popˇred´ı.
Kromˇe ud´ alost´ı typu clicked, mouseover a podobn´ ych, kter´e se daj´ı vzt´ahnout k t´emˇeˇr libovoln´emu prvku, m´ a i tˇr´ıda Marker nˇekolik ud´alost´ı, kter´e souvis´ı pˇr´ımo s jej´ımi vlastnostmi. Podobnˇe jako vlastnosti tˇr´ıdy Map vˇetˇsinou souvis´ı se zmˇenou vlastnost´ı. Jsou to tyto ud´ alosti (na co ud´ alost reaguje je zˇrejm´e z n´azv˚ u): • animation changed • clickable changed • cursor changed • draggable changed • flat changed • icon changed • position changed • shadow changed • shape changed • title changed
23
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
• visible changed • zindex changed Tˇr´ıda Marker je rozhodnˇe jednou z nejpouˇz´ıvanˇejˇs´ıch tˇr´ıd v Google Maps JavaScript API V3 v˚ ubec. S jej´ı pomoc´ı se daj´ı vytv´aˇret a spravovat markery, kter´e jsou ale vˇzdy vztaˇzen´e k nˇejak´e mapˇe (tedy instanci tˇr´ıdy Map). S tˇr´ıdou Marker d´ale velice u ´zce souvis´ı tˇr´ıdy MarkerImage a Animation, dˇr´ıve zmiˇ novan´ y objekt MarkerOptions a doposud nezmiˇ novan´ y objekt MarkerShape. ObjektMarkerOptions jsem probral podrobnˇeji, k ostatn´ım zde nap´ıˇsu jenom m´ alo. Ani jeden z nich jsem nikdy nepouˇz´ıval.
Tˇr´ıda MarkerImage reprezentuje ikonu markeru. Vlastnosti t´eto tˇr´ıdy jsou napˇr´ıklad ukotven´ı obr´ azku vzhledem k souˇradnic´ım, ke kter´ ym se marker vztahuje, velikost a mˇeˇr´ıtko obr´ azku a jeho um´ıstˇen´ı. Tˇr´ıda Animation reprezentuje animaci, kter´a m˚ uˇze b´ yt pˇriˇrazena k markeru. Animace se pˇriˇrazuje zavol´an´ım metody setAnimation ze tˇr´ıdy Marker. Jedn´ a se o animace BOUNCE (marker se tˇrese, dokud nen´ı animace zastavena) a DROP (marker spadne na sv´e m´ısto a po dopadu se zatˇrese). Objekt MarkerShape definuje tvar markeru ve smyslu oblasti, do kter´e je moˇzn´e kliknout. Tvar je definov´an vlastnostmi coords a shape, kde shape m˚ uˇze b´ yt kruˇznice, polygon, nebo obd´eln´ık a coords definuje relativn´ı polohu prvk˚ u tvaru objektu v pixelech od lev´eho horn´ıho rohu markeru (napˇr´ıklad kruˇznice je definov´ ana souˇradnicemi stˇredu a polomˇerem).
2.2.3
Zobrazen´ı informaˇ cn´ıho okna na markeru a tˇ r´ıda InfoWindow
InfoWindow je informaˇcn´ı pole v mapˇe, kter´e ˇcasto obsahuje text nebo html k´od, a zpravidla b´ yv´ a pˇripojeno k markeru, ale m˚ uˇze se vyskytnout i samostatnˇe. Pro vytvoˇren´ı instance tˇr´ıdy InfoWindow je pouˇzit n´asleduj´ıc´ı konstruktor: InfoWindow(opts?:InfoWindowOptions)
Podobnˇe jako MapOptions a MarkerOptions i objekt InfoWindowOptions obsahuje vlastnosti, kter´e definuj´ı konkr´etn´ı InfoWindow. Mezi tyto vlastnosti patˇr´ı: • content – definuje obsah okna. Obsahem m˚ uˇze b´ yt string, html k´od, nebo jejich kombinace. Obsahem m˚ uˇze b´ yt i uzel DOMu, jehoˇz obsah je definov´an nˇekde jinde • position – obsahuje souˇradnice, ke kter´ ym je informaˇcn´ı okno vztaˇzeno
24
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
• zIndex – definuje z-index informaˇcn´ıho okna. Vˇetˇs´ı hodnota z-indexu znamen´ a, ˇze okno bude na mapˇe zobrazeno nad okny s menˇs´ı hodnotou z-indexu • maxWidth – maxim´ aln´ı ˇs´ıˇrka okna, kter´a nez´aleˇz´ı na ˇs´ıˇrce obsahu. Projev´ı se pouze tehdy, je-li nastavena pˇred otevˇren´ım okna (zavol´an´ım metody open). Pokud je nastavena pozdˇeji, je tˇreba okno zavˇr´ıt a pot´e znovu otevˇr´ıt • pixelOffset – slouˇz´ı k nastaven´ı rozsahu okna v pixelech • disableAutoPan – bez nastaven´ı hodnoty false t´eto vlastnosti je pˇri otevˇren´ı okna mapa vˇzdy posunuta tak, aby bylo otevˇren´e okno cel´e viditeln´e v mapˇe V popisu vlastnost´ı objektu InfoWindowOptions jsem zm´ınil metodu open. Spoleˇcnˇe s metodou close jsou to jedin´e metody tˇr´ıdy InfoWindow, kter´e nejsou typu get nebo set. • open(map?:Map|StreetViewPanorama , anchor?:MVCObject) – tato metoda slouˇz´ı k otevˇren´ı informaˇcn´ıho okna. Kromˇe toho, ˇze stejnˇe jako kaˇzd´a ˇclensk´a metoda mus´ı b´ yt zavol´ ana instanc´ı tˇr´ıdy, m´a metoda open jeˇstˇe dva parametry. Mezi vlastnostmi objektu InfoWindowOptions nen´ı definov´ana mapa, ve kter´e se bude informaˇcn´ı okno zobrazovat, ta se totiˇz nastavuje aˇz pˇri jeho otev´ır´an´ı. Kromˇe mapy m˚ uˇze b´ yt informaˇcn´ı okno otevˇreno i v instanci tˇr´ıdy StreetViewPanorama, kter´ a slouˇz´ı k zobrazen´ı Google Street View na z´akladˇe polohy kamery, u ´hlu pohledu, adresy a podobnˇe. Druh´ ym parametrem metody open je ukotven´ı (anchor). V j´adru API je jedinou moˇznost´ı ukotven´ı informaˇcn´ıho okna marker, ale prakticky je moˇzn´e ukotvit informaˇcn´ı okno k libovoln´e instanci tˇr´ıdy MVCObject. • close() – slouˇz´ı k zavˇren´ı informaˇcn´ıho okna odstranˇen´ım ze struktury DOM • get – metody typu get zde slouˇz´ı k z´ısk´an´ı hodnoty vlastnost´ı content, position, nebo z-index. Jsou to tyto metody: – getContent() – getPosition() – getZIndex() • set – metody tohoto typu slouˇz´ı k nastavov´an´ı vlastnost´ı.
25
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
– setContent(content:string|Node) – setPosition(position:LatLng) – setZIndex(zIndex:number) – setOptions(options:InfoWindowOptions) – slouˇz´ı k nastaven´ı v´ıce vlastnost´ı najednou naˇcten´ım objektu InfoWindowOptions Stejnˇe, jako jsem uv´ adˇel pˇr´ıklad k vytvoˇren´ı mapy a markeru, uvedu zde i pˇr´ıklad na vytvoˇren´ı a otevˇren´ı informaˇcn´ıho okna. Informaˇcn´ı okno pˇriˇrad´ım k markeru, takˇze budu muset vytvoˇrit Listener, kter´ y bude reagovat na ud´alost clicked na markeru. V souboru map.js jsem tedy vytvoˇril novou funkci createInfoWindow(marker), kterou jsem zavolal na posledn´ım ˇr´ adku funkce addMarker(). function createInfoWindow(marker){ var infowindow = new google.maps.InfoWindow({ content: "New InfoWindow" }); google.maps.event.addListener(marker, ’click’, function() { infowindow.open(map, marker); }); }
Funkce createInfoWindow(marker) vytvoˇr´ı nov´e informaˇcn´ı okno, kter´e bude obsahovat text New InfoWindow“, a pot´e zavol´a statickou metodu addListener z jmenn´eho pros” toru google.maps.event, kter´ a pˇriˇrad´ı uvedenou funkci k ud´alosti clicked a k instanci marker. Jin´ ymi slovy – pˇri kliknut´ı na marker se spust´ı funkce open(map, marker), kter´ a otevˇre informaˇcn´ı okno pro instanci map tˇr´ıdy Map a instanci marker tˇr´ıdy Marker. Pro u ´plnost zde jeˇstˇe uv´ ad´ım celou definici metody addListener a nˇekolika dalˇs´ıch uˇziteˇcn´ ych funkc´ı z jmenn´eho prostoru google.maps.event: • addListener(instance:Object, eventName:string, handler:Function) – pˇriˇrad´ı funkci zadan´e ud´ alosti a zadan´e instanci a vrac´ı identifik´ator tohoto Listeneru, kter´ y m˚ uˇze b´ yt pouˇzit funkc´ı removeListener • addListenerOnce(instance:Object, eventName:string, handler:Function) – stejn´ a jako addListener, ale po prvn´ım pouˇzit´ı odstran´ı handler • clearInstanceListeners(instance:Object) – odstran´ı vˇsechny Listenery zadan´e instance
26
ˇ CVUT v Praze
KAPITOLA 2. GOOGLE MAPS API V3
• clearListeners(instance:Object, eventName:string) – odstran´ı vˇsechny Listenery pro zadanou ud´ alost zadan´e instance • removeListener(listener:MapsEventListener) – odstran´ı Listener podle identifik´ atoru, kter´ y vr´ atila funkce addListener
Vzhledem k tomu, ˇze akc´ı, kter´e se daj´ı prov´adˇet s informaˇcn´ım oknem, nen´ı mnoho, je seznam ud´ alost´ı tˇr´ıdy InfoWindow oproti ud´alostem tˇr´ıd Map a Marker dost omezen´ y. Nejsou zde ˇz´ adn´e ud´ alosti typu clicked ˇci mouseover, protoˇze ty se nevztahuj´ı na samotn´e okno, ale pˇr´ımo na jeho obsah. Seznam ud´alost´ı tˇr´ıdy InfoWindow je zde: • closeclick – ud´ alost je spuˇstˇena se stisknut´ım kˇr´ıˇzku v informaˇcn´ım oknˇe • content changed – ud´ alost je spuˇstˇena pˇri zmˇenˇe vlastnosti content • domready – ud´ alost je spuˇstˇena v okamˇziku, kdy je
obsahuj´ıc´ı InfoWindow pˇrid´ an do DOM. Tato ud´ alost je velice uˇziteˇcn´a zejm´ena v pˇr´ıpadech, kdy je obsah oken sestavov´ an dynamicky • position changed – ud´ alost je spuˇstˇena pˇri zmˇenˇe vlastnosti position • zindex changed – ud´ alost je spuˇstˇena pˇri zmˇenˇe vlastnosti zIndex
27
ˇ CVUT v Praze
2.2.4
KAPITOLA 2. GOOGLE MAPS API V3
Vyuˇ zit´ı Google Maps Javascript API V3 v aplikaci Culture
´ Uloha Google Maps JavaScript API V3 v t´eto bakal´aˇrsk´e pr´aci je dost z´asadn´ı. Jsou v n´ı pouˇzity vˇsechny tˇri tˇr´ıdy, kter´e byly pops´any dˇr´ıve, tedy tˇr´ıdy Map, Marker a InfoWindow. Vˇsechny tˇri tˇr´ıdy jsou vyuˇz´ıv´any pro vyhled´av´an´ı kulturn´ıch ud´alost´ı a pro pˇrid´av´ an´ı m´ıst jsou pouˇzity instance tˇr´ıd Map a Marker.
Tˇr´ıda Map je poprv´e pouˇzita hned v hlavn´ım oknˇe aplikace, kde je od zaˇc´atku zobrazena hlavn´ı mapa slouˇz´ıc´ı pro vyhled´ av´an´ı kulturn´ıch ud´alost´ı. Pˇri inicializaci t´eto mapy jsou zobrazeny markery oznaˇcuj´ıc´ı m´ısta, ve kter´ ych je pro aktu´aln´ı datum napl´anov´ana nˇejak´ a kulturn´ı akce. Pokud je v zadan´em rozmez´ı na jednom m´ıstˇe akc´ı v´ıc, marker se zobraz´ı pouze jeden. Pro kaˇzd´ y marker je vytvoˇren Listener, kter´ y pˇri kliknut´ı na marker otevˇre informaˇcn´ı okno. Okno obsahuje seznam kulturn´ıch ud´alost´ı na dan´em m´ıstˇe v zadan´em ˇcasov´em rozmez´ı. Obsah (content) okna je vkl´ad´an jako html k´od, kter´ y obsahuje seznam (
) a pˇri kliknut´ı na poloˇzku seznamu (
) jsou zobrazeny podrobnosti o ud´alosti.
Druh´ a mapa, kter´ a je v aplikaci vytvoˇrena, slouˇz´ı k vkl´ad´an´ı nov´ ych m´ıst. Je k dispozici pouze pro nˇekter´e uˇzivatele. K vkl´ad´an´ı nov´ ych m´ıst mus´ı m´ıt uˇzivatel opr´avnˇen´ı. Mapa se nach´ az´ı ve formul´ aˇri, kter´ ym se m´ısta pˇrid´avaj´ı. Pˇri kliknut´ı do t´eto mapy je na m´ıstˇe vytvoˇren marker oznaˇcuj´ıc´ı vybranou polohu. Pˇri opˇetovn´em kliknut´ı je p˚ uvodn´ı marker smaz´an a nahrazen nov´ ym. Pˇri vkl´ad´an´ı m´ısta do datab´aze je pot´e z markeru metodou getPosition pˇrevzata poloha. Souˇradnice markeru jsou uloˇzeny do datab´aze.
28
ˇ CVUT v Praze
3
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
Aplikace Culture – uˇ zivatelsk´ y pohled
Aplikace Culture by mˇela slouˇzit k snadn´emu a rychl´emu vyhled´av´an´ı kulturn´ıch akc´ı podle n´azvu, data, typu a m´ısta kon´an´ı. Z´aroveˇ n by mˇela slouˇzit organiz´ator˚ um ke snadn´emu pˇrid´av´ an´ı kulturn´ıch ud´ alost´ı do datab´aze a k jejich propagaci. Cel´a aplikace by se tak dala rozdˇelit na dvˇe ˇc´ asti. Jednou z nich je vyhled´av´an´ı, druhou pak pˇrid´av´an´ı kulturn´ıch ud´ alost´ı. V t´eto kapitole rozeberu obˇe dvˇe sekce z uˇzivatelsk´eho hlediska, vˇcetnˇe jednoduch´ ych n´ avod˚ u pro vyhled´av´an´ı i vkl´ad´an´ı.
Obr. 3.1: Uk´ azka u ´vodn´ı obrazovky uˇzivatele s opr´avnˇen´ım guest
3.1
Prvn´ı pohled na aplikaci
Pˇri prvn´ım otevˇren´ı aplikace n´ avˇstˇevn´ıka uv´ıt´a logo se sloganem, pˇri jehoˇz stisknut´ı dojde k obnoven´ı str´ anky. Pod logem uˇz se nach´az´ı pˇrihlaˇsovac´ı formul´aˇr a jednoduch´a nab´ıdka, ˇ ych kter´a ovl´ ad´ a formul´ aˇre pod n´ı. Pˇri naˇcten´ı str´anky je ve formul´aˇri zobrazena mapa Cesk´ Budˇejovic. Aplikace je rozdˇelena do dvou sloupc˚ u. V lev´em, uˇzˇs´ım, se nach´az´ı pˇrihlaˇsovac´ı formul´ aˇr a seznam vyhledan´ ych kulturn´ıch ud´alost´ı. V tom druh´em, ˇsirˇs´ım sloupci, je v z´ahlav´ı menu a pod n´ım prostor pro mapu nebo vyhled´avac´ı a vkl´adac´ı formul´aˇre. Jeˇstˇe n´ıˇze se nach´ az´ı hlavn´ı blok str´anky, do kter´eho se vypisuj´ı podrobnosti o vybran´ ych ud´alostech. Uˇz pˇri spuˇstˇen´ı aplikace je provedeno prvn´ı vyhled´av´an´ı, pˇri kter´em se ve
29
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
spodn´ı ˇc´ asti lev´eho panelu zobraz´ı kulturn´ı akce, kter´e prob´ıhaj´ı v aktu´aln´ı den, a z´aroveˇ n jsou v mapˇe zobrazeny markery m´ıst, ve kter´ ych se tyto ud´alosti odehr´avaj´ı.
Obr. 3.2: N´ahled na celou str´anku
3.2
Vyhled´ av´ an´ı kulturn´ıch akc´ı
Vyhled´ av´ an´ı kulturn´ıch ud´ alost´ı by mˇelo b´ yt nejpouˇz´ıvanˇejˇs´ı a nejd˚ uleˇzitˇejˇs´ı souˇc´ast´ı aplikace. Vyhled´ avat se d´ a nekolika r˚ uzn´ ymi zp˚ usoby. Pˇri naˇcten´ı str´anky, pˇri obnoven´ı str´anky, nebo pˇri volbˇe Mapa“ v hlavn´ı nab´ıdce se provede automatick´e vyhled´av´an´ı. ” Moˇznost´ı pro podrobnˇejˇs´ı vyhled´ av´an´ı je potom vyhled´avac´ı formul´aˇr pod poloˇzkou Vy” hledat“. Obˇe tyto poloˇzky jsou pˇr´ıstupn´e i pro nepˇrihl´aˇsen´e uˇzivatele.
3.2.1
Automatick´ e vyhled´ av´ an´ı
Automatick´e vyhled´ av´ an´ı je provedeno vˇzdy, kdyˇz je znovu naˇctena u ´vodn´ı str´anka aplikace. Kromˇe prvn´ıho naˇcten´ı s pˇr´ıchodem na str´anky se automatick´e vyhled´av´an´ı provede i pˇri opˇetovn´em naˇcten´ı str´ anky, pˇri kliknut´ı myˇs´ı na logo aplikace a pˇri volbˇe moˇznosti Mapa“ v hlavn´ı nab´ıdce. Pˇri spuˇstˇen´ı automatick´eho vyhled´av´an´ı jsou v datab´azi vy” hled´any vˇsechny kulturn´ı ud´ alosti, kter´e se odehr´avaj´ı v aktu´aln´ı den nez´avisle na m´ıstˇe
30
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
kon´an´ı ˇci typu ud´ alosti. Parametry v´ ybˇeru tedy splˇ nuj´ı i ud´alosti, kter´e trvaj´ı d´ele neˇz jeden den, ale prob´ıhaj´ı v aktu´ aln´ı den.
3.2.2
Vyhled´ av´ an´ı pomoc´ı formul´ aˇ re
Obr. 3.3: Vyhled´avac´ı formul´aˇr K vyhled´ av´ an´ı kulturn´ıch ud´ alost´ı je moˇzm´e vyuˇz´ıt vyhled´avac´ı formul´aˇr, kter´ y je moˇzn´e otevˇr´ıt stisknut´ım tlaˇc´ıtka Vyhledat“ v menu nad zobrazenou mapou. Ve formul´aˇri nen´ı ” ˇz´adn´a povinn´ a poloˇzka. Pokud uˇzivatel nevypln´ı ˇz´adn´ yu ´daj, v´ ysledkem vyhled´av´an´ı bude seznam vˇsech akc´ı prob´ıhaj´ıc´ıh v n´asleduj´ıc´ım t´ ydnu. Vyhled´av´an´ı kulturn´ıch ud´alost´ı je moˇzn´e podle n´ asleduj´ıc´ıh parametr˚ u: • N´ azev ud´ alosti – upravuje dotaz pˇr´ımo podle jm´ena ud´alosti. Slouˇz´ı sp´ıˇse pro vyhled´ av´ an´ı podrobnost´ı pro jiˇz zn´amou ud´alost neˇz pro zjiˇst’ov´an´ı nov´ ych ud´alost´ı. • M´ısto – vybere pouze ud´ alosti, kter´e se konaj´ı pˇr´ımo na konkr´etn´ım m´ıstˇe. M´ısto je vybr´ ano z roletov´eho menu, kde je i moˇznost Vˇse“. ” • Od data/do data – urˇcuje ˇcasov´e rozmez´ı vyhled´av´an´ı ud´alost´ı. Pˇri nevyplnˇen´ı data zaˇc´ atku je automaticky doplnˇeno aktu´aln´ı datum, pˇri nevyplnˇen´ı data ukonˇcen´ı
31
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
ˇcasov´eho rozmez´ı je automaticky doplnˇeno datum sedm dn´ı po aktu´aln´ım datu. Datum je vybr´ ano z kalend´aˇre, vybran´e datum je vyps´ano pod n´ım. • Typ – umoˇzn ˇuje vyhled´ avat ud´alosti podle specifick´eho typu. Typem zde m˚ uˇze b´ yt napˇr´ıklad koncert, divadlo, vernis´aˇz, prom´ıt´an´ı a podobnˇe. Typ je vybr´an z roletov´eho menu, kde je i moˇznost Vˇse“. ” Samotn´e vyhled´ an´ı ud´ alosti se provede aˇz po potvrzen´ı formul´aˇre tlaˇc´ıtkem Hledat“, ” kter´e se nach´ az´ı ve formul´ aˇri u ´plnˇe dole.
3.2.3
Zobrazen´ı v´ ysledk˚ u
Obr. 3.4: Uk´azka seznamu v´ ysledk˚ u V´ ysledky jsou vyps´ any v lev´em sloupci aplikace. V´ ysledky jsou seˇrazeny automaticky podle data zaˇc´ atku, coˇz znamen´ a, ˇze na prvn´ıch m´ıstech budou vˇetˇsinou zobrazeny dlouhodobˇejˇs´ı ud´ alosti. V tomto sloupci jsou zobrazeny jen nˇekter´e atributy. Jsou to n´azev kulturn´ı ud´ alosti, m´ısto, kde se odehr´av´a, datum kon´an´ı a typ ud´alosti. V´ıce podrobnost´ı je moˇzn´e zjistit pˇri poklep´ an´ı myˇs´ı na poloˇzku v seznamu. Poklep´an´ı spust´ı nˇekolik dalˇs´ıch akc´ı. Za prv´e je mapa posunuta a pˇribl´ıˇzena k m´ıstu, kde se akce kon´a. To je vhodn´e pro snadnou orientaci. Kromˇe toho jsou v hlavn´ım bloku aplikace zobrazeny podrobnosti jak o poˇr´ adan´e akci, tak o m´ıstˇe kon´an´ı. U vybran´e ud´alosti jsou kromˇe informac´ı, kter´e byly zobrazeny uˇz v seznamu ud´alost´ı, nav´ıc uvedeny podrobnosti o ud´alosti,
32
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
odkaz na internetov´e str´ anky ud´alosti a plak´at. D´ale jsou zde zobrazeny obecn´e informace o m´ıstˇe kon´ an´ı ud´ alosti. Je zde zobrazen n´azev, adresa, popis m´ısta (kter´ y by mˇel obsahovat charakteristiku m´ısta, otv´ırac´ı dobu, pˇr´ıpadnˇe dalˇs´ı informace, kter´e by mohly potenci´ aln´ıho n´ avˇstˇevn´ıka zaj´ımat), odkaz na internetov´e str´anky a logo nebo fotografie m´ısta. Odkaz na internetov´e str´ anky ud´alosti nebo m´ısta je pˇri poklep´an´ı myˇs´ı automaticky
Obr. 3.5: Zobrazen´ı podrobnost´ı o ud´alosti otevˇren v nov´em oknˇe, aby mohl uˇzivatel d´ale neruˇsenˇe zobrazovat dalˇs´ı ud´alosti. Plak´ at se v hlavn´ım bloku zobraz´ı pouze zmenˇsen´ y, ale je moˇzn´e prohl´ednout si i obr´azek v pln´e velikosti. Pˇri poklep´ an´ı na zmenˇseninu plak´atu je pˇres celou v´ yˇsku obrazovky otevˇrena origin´aln´ı verze obr´ azku. Pokud je obr´azek vyˇsˇs´ı, neˇz v´ yˇska prohl´ıˇzeˇce, objev´ı se vedle obr´azku posuvn´ a liˇsta, kterou je moˇzn´e cel´ y obr´azek prohl´ednout. Obr´azek je zavˇren, pokud uˇzivatel poklepe myˇs´ı na tlaˇc´ıtko Zavˇr´ıt“, nebo na samotn´ y obr´azek. ”
33
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
Vyhled´ av´ an´ı i zobrazov´ an´ı akc´ı jsem se pokouˇsel udˇelat tak, aby bylo jednoduch´e a uˇzivatelsky pˇr´ıvˇetiv´e. Co se t´ yˇce intuitivnosti, vˇeˇr´ım, ˇze i bez n´apovˇedy je snadno pochopiteln´e, jak vyhledat kulturn´ı ud´alosti v urˇcit´em ˇcasov´em obdob´ı. Propojen´ı textov´eho vyhled´ av´ an´ı s mapou ulehˇcuje orientaci.
3.3
Vkl´ ad´ an´ı kulturn´ıch ud´ alost´ı, m´ıst a typ˚ u
Obr. 3.6: Formul´aˇr pro pˇrid´av´an´ı kulturn´ıch ud´alost´ı K vkl´ ad´ an´ım prvk˚ u do datab´ aze mus´ı b´ yt uˇzivatel pˇrihl´aˇsen s odpov´ıdaj´ıc´ım opr´avnˇen´ım. V t´eto aplikaci existuj´ı tˇri druhy opr´avnˇen´ı:
34
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
• guest – z´ akladn´ı opr´ avnˇen´ı. Vˇsichni nepˇrihl´aˇsen´ı uˇzivatel´e maj´ı toto opr´avnˇen´ı. Uˇzivatel´e s opr´ avnˇen´ım guest sm´ı v datab´azi pouze vyhled´avat a nemaj´ı ˇz´adnou moˇznost pˇrid´ avat kulturn´ı ud´alosti, m´ısta, ani nov´e typy. • organiser – vˇetˇsina uˇzivatel˚ u, kteˇr´ı budou pravidelnˇe pˇrisp´ıvat do datab´aze, bude m´ıt toto opr´ avnˇen´ı. Uˇzivatel s opr´avnˇen´ım organiser m˚ uˇze pˇrid´avat kulturn´ı ud´alosti pˇr´ımo do datab´ aze. S m´ısty a typy je to odliˇsn´e. Organiz´ator m˚ uˇze pˇrid´avat m´ısta i typy do vedlejˇs´ı tabulky, ve kter´e nen´ı moˇznost vyhled´avat. Z t´eto vedlejˇs´ı tabulky je nov´e m´ısto nebo typ pˇresunuto do pˇr´ıstupn´e tabulky m´ıst nebo typ˚ u aˇz po potvrzen´ı spr´ avce. Pˇrid´ an´ım nov´eho m´ısta nebo typu uˇzivatelem s opr´avnˇen´ım organiser je vygenerov´ an e-mail na adresu [email protected], kter´ y obsahuje odkaz, jehoˇz otevˇren´ı pˇresune nov´ y prvek do pˇr´ıstupn´e tabulky. • admin – uˇzivatel´e s t´ımto opr´avnˇen´ım m˚ uˇzou pˇrid´avat ud´alosti, m´ısta i typy pˇr´ımo do pˇr´ıstupn´ ych tabulek a zmˇeny kter´e provedly se ihned projev´ı. Toto opr´avnˇen´ı by nemˇel dostat nikdo jin´ y neˇz provozovatel aplikace. Pro pˇrid´ av´ an´ı kulturn´ıch ud´ alost´ı, m´ıst a typ˚ u jsou v hlavn´ı nab´ıdce moˇznosti + Ud´alost“, ” + M´ısto“ a + Typ“. Pˇri jejich v´ ybˇeru jsou zobrazeny pˇrid´avac´ı formul´aˇre. ” ”
3.3.1
Vkl´ ad´ an´ı nov´ ych kulturn´ıch ud´ alost´ı
Jak uˇz jsem psal v´ yˇse, k pˇrid´ an´ı ud´alosti rovnou do pˇr´ıstupn´e tabulky staˇc´ı m´ıt opr´avnˇen´ı organiser. Do budoucna by bylo v´ yhodnˇejˇs´ı, aby kaˇzd´ y organiz´ator mˇel moˇznost pˇrid´avat ud´alosti jen na urˇcit´ a m´ısta. U kaˇzd´eho m´ısta by mˇel b´ yt seznam uˇzivatel˚ u, kteˇr´ı k nˇemu mohou pˇriˇrazovat ud´ alosti. Zat´ım m˚ uˇze kaˇzd´ y, kdo m´a opravnˇen´ı organiser, pˇriˇrazovat ud´alost k libovoln´emu m´ıstu. Jedin´ ym za´ım funguj´ıc´ım oˇsetˇren´ım tohoto probl´emu je pˇrid´av´ an´ı jm´ena autora ke kaˇzd´e vytvoˇren´e ud´alosti. Pˇri pˇr´ıpadn´e sabot´aˇzi je tak moˇzn´e vyhledat vin´ıka a omezit mu opr´ avnˇen´ı.
Samotn´e pˇrid´ av´ an´ı ud´ alost´ı prob´ıh´a pomoc´ı formul´aˇre. Ve formul´aˇri je nˇekolik povinn´ ych a nˇekolik voliteln´ ych poloˇzek. Povinn´e poloˇzky jsou ty, kter´e ud´alost jednoznaˇcnˇe identifikuj´ı. Ve formul´ aˇri jsou oznaˇceny hvˇezdiˇckou. • N´ azev ud´ alosti – Urˇcuje n´ azev, pod kter´ ym bude ud´alost uloˇzena do datab´aze, pod kter´ ym ji bude moˇzn´e vyhledat a kter´ y bude zobrazen ve v´ ysledc´ıch.
35
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
• Typ akce – Typ akce je vyb´ır´an z roletov´eho menu. Typem ud´alosti je napˇr´ıklad koncert, divadlo, vernis´ aˇz a podobnˇe. • Popis – V popisu ud´ alosti jsou uvedeny vˇsechny informace, kter´e jsou pro pˇr´ıpadn´e n´ avˇstˇevn´ıky uˇziteˇcn´e, jako popis ud´alosti, ˇcas zaˇc´atku, cena vstupn´eho a podobnˇe. Pro zalomen´ı odstavce v popisu ud´alosti je tˇreba pouˇz´ıt HTML tag . ´ • Datum zaˇc´ atku/datum konce – Udaje o zaˇc´atku a ukonˇcen´ı akce jsou vyb´ır´any z kalend´ aˇre. U jednodenn´ıch akc´ı konˇc´ıc´ıch po p˚ ulnoci, coˇz je ˇcast´e tˇreba u koncert˚ u, by mˇelo b´ yt datum ukonˇcen´ı uvedeno stejn´e jako datum zaˇc´atku. • M´ısto kon´ an´ı – M´ısto je vyb´ır´ano z roletov´eho menu. Urˇcuje, na kter´em m´ıstˇe se bude ud´ alost odehr´ avat. Kaˇzd´a akce m˚ uˇze m´ıt pˇriˇrazeno pouze jedno m´ısto. Nepovinn´e poloˇzky jsou takov´e, kter´e uˇz jen prohlubuj´ı informace o ud´alosti, ale nejsou nezbytn´e. • Webov´e str´ anky ud´ alosti – Pokud m´a ud´alost nˇejak´e ofici´aln´ı webov´e str´anky, je vhodn´e je sem uv´est. Pˇri zobrazov´an´ı podrobnost´ı je zobrazen hypertextov´ y odkaz, kter´ y pˇri kliknut´ı otevˇre novou kartu prohl´ıˇzeˇce a otevˇre v n´ı ofici´aln´ı str´anku. Pˇri zad´ av´ an´ı adresy mus´ı b´ yt na zaˇc´atku uvedeno http://, jinak se prohl´ıˇzeˇc pokus´ı dosadit adresu za aktu´ aln´ı pozici na serveru. • Plak´ at – Ke kaˇzd´e kulturn´ı ud´alosti m˚ uˇze b´ yt pˇriloˇzen plak´at ve form´atu .jpeg, .png nebo .gif. Pˇri vloˇzen´ı obr´ azku dojde k pˇrizp˚ usoben´ı velikosti do form´atu 800 × 800 pixel˚ u pro velk´ y plak´ at a 300 × 300 pixel˚ u na zmenˇseninu. Formul´ aˇr se potvrzuje tlaˇc´ıtkem Pˇridat“, kter´e je um´ıstˇeno pod formul´aˇrem. Po potvrzen´ı ” formul´ aˇre se na str´ ance objev´ı jeˇstˇe potvrzovac´ı okno se souhrnem vˇsech pˇrid´avan´ ych poloˇzek a s tlaˇc´ıtky Zavˇr´ıt“ a Potvrdit“. ” ” Pˇri kliknut´ı na tlaˇc´ıtko Zavˇr´ıt“ je formul´aˇr skryt. Uˇzivatel m˚ uˇze v pˇrid´avac´ım for” mul´aˇri pozmˇenit parametry, kter´e byly vyplnˇeny nespr´avnˇe, nebo odej´ıt. V potvrzovac´ım formul´ aˇri jsou dobˇre vidˇet u ´pravy vzhledu vytvoˇren´e HTML tagy. Po stisknut´ı tlaˇc´ıtka Potvrdit“ je zkontrolov´ ano, zda je formul´aˇr vyplnˇen spr´avnˇe, nechyb´ı ˇz´adn´e povinn´e ” poloˇzky a vkl´ adan´ y obr´ azek je v podporovan´em form´atu. Pokud nejsou vˇsechny poloˇzky vyplnˇen´e, uˇzivatel je na to upozornˇen varovn´ ym oknem a z´aznam nen´ı pˇrid´an. U kulturn´ıch
36
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
Obr. 3.7: Potvrzovac´ı formul´aˇr pˇrid´av´an´ı akc´ı ud´alost´ı je moˇzn´e, ˇze se dvˇe budou jmenovat stejnˇe (narozd´ıl od typ˚ u a m´ıst), takˇze to nen´ı oˇsetˇreno. Pokud jsou vˇsechny poloˇzky vyplnˇeny spr´avnˇe, z´aznam je pˇrid´an do datab´aze, a uˇzivatel je na to upozornˇen vyskakovac´ım oknem s textem Nov´ a ud´ alost byla ´ uspˇ eˇ snˇ e ” pˇ rid´ ana!“. Po potvrzen´ı potvrzovac´ıho formul´aˇre jsou zmˇeny okamˇzitˇe provedeny a je provedeno automatick´e vyhled´ av´ an´ı. T´ım je proces pˇrid´an´ı kulturn´ı ud´alosti hotov.
3.3.2
Vkl´ ad´ an´ı nov´ ych m´ıst
Vkl´adat nov´ a m´ısta m˚ uˇzou uˇzivatel´e s opr´avnˇen´ım organiser nebo admin. Uˇzivatel´e s opr´avnˇen´ım admin vkl´ adaj´ı m´ısta pˇr´ımo do pˇr´ıstupn´e tabulky, uˇzivatel´e s opr´avnˇen´ım organiser m´ısta vkl´ adaj´ı do vedlejˇs´ı tabulky, kde jsou data uchov´avan´a, ale nepˇr´ıstupn´ a pro vyhled´ av´ an´ı. Z t´eto tabulky mohou b´ yt pˇresunuta do pˇr´ıstupn´e tabulky spr´avcem aplikace. Zp˚ usob pˇrid´ av´ an´ı m´ıst je vˇsak pro vlastn´ıky obou opr´avnˇen´ı stejn´ y. Slouˇz´ı k tomu formul´ aˇr pod tlaˇc´ıtkem + M´ısto“. Formul´aˇr obsahuje nˇekolik povinn´ ych a nˇekolik vo” liteln´ ych poloˇzek. Povinn´e poloˇzky jsou takov´e, kter´e jednoznaˇcnˇe definuj´ı m´ısto a jsou oznaˇceny hvˇezdiˇckou. • N´ azev m´ısta – Urˇcuje n´ azev, pod kter´ ym bude m´ısto uloˇzeno do datab´aze, pod kter´ ym ho bude moˇzne pˇriˇradit ud´alosti a pod kter´ ym ho bude moˇzn´e vyhled´avat.
37
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
Obr. 3.8: Formul´aˇr pro pˇrid´av´an´ı nov´ ych m´ıst N´ azev m´ısta mus´ı b´ yt unik´ atn´ı, to znamen´a, ˇze dvˇe r˚ uzn´a m´ısta se nesm´ı jmenovat stejnˇe. • Adresa – Tato poloˇzka obsahuje adresu m´ısta. Slouˇz´ı jen k orientaci. • Popis – Popis m´ısta by mˇel obsahovat bliˇzˇs´ı informace o m´ıstˇe, jak´a je jeho otev´ırac´ı doba, v pˇr´ıpadˇe klub˚ u a kav´aren jak´e toˇc´ı pivo a podobnˇe. • Poloha – Poloha je vybr´ ana na mapˇe. Kliknut´ım do mapy je vytvoˇren marker, ze kter´eho je pˇreb´ır´ ana poloha. Pˇri nov´em kliknut´ı do mapy p˚ uvodn´ı marker zmiz´ı a je nahrazen nov´ ym. V mapˇe je moˇznost pˇrep´ınat mezi typem ROADMAP a SATELLITE, aby bylo snaˇzˇs´ı pˇresnˇe lokalizovat budovu. Mapa umoˇzn ˇuje pˇrepnut´ı do Street View, ale v tomto m´ odu nen´ı moˇzn´e pˇridat marker.
38
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
Kromˇe povinn´ ych poloˇzek obsahuje formul´aˇr i nepovinn´e poloˇzky. Ty bl´ıˇze specifikuj´ı charakter m´ısta a pˇribliˇzuj´ı ho potenci´aln´ım n´avˇstˇevn´ık˚ um. • Webov´e str´ anky – Tato poloˇzka sice nen´ı povinn´a, ale rozhodnˇe je doporuˇcen´ a. V dneˇsn´ı dobˇe m´ a vˇetˇsina m´ıst, kter´e poˇr´adaj´ı pravidelnˇe kulturn´ı akce, sv´e webov´e str´ anky. Adresa tˇechto str´ anek by mˇela b´ yt obsahem t´eto poloˇzky. Pˇri zobrazov´an´ı podrobnost´ı je zobrazen hypertextov´ y odkaz, kter´ y pˇri kliknut´ı otevˇre novou kartu prohl´ıˇzeˇce a v n´ı je otevˇrena webov´a str´anka m´ısta. Pˇri zad´av´an´ı internetov´e adresy mus´ı b´ yt na zaˇc´ atku uvedeno http://, jinak se prohl´ıˇzeˇc pokus´ı dosadit adresu za aktu´ aln´ı pozici na serveru. • Obr´ azek nebo logo – Pokud m´a m´ısto nˇejak´e ofici´aln´ı logo, mˇelo by b´ yt vloˇzeno sem. Bˇehem vloˇzen´ı je velikost obr´azku zmˇenˇena do form´atu 400 × 400 pixel˚ u. Vkl´adan´ y obr´ azek m˚ uˇze b´ yt ve form´ atu .jpeg, .png nebo .gif. Logo je pot´e zobrazov´ano pˇri zobrazov´ an´ı v´ ysledk˚ u v podrobnostech o m´ıstˇe. V pˇr´ıpadˇe, ˇze m´ısto ˇz´adn´e logo nem´ a, je moˇzn´e vloˇzit m´ısto nˇej fotografii m´ısta. • Ikona v mapˇe – Obr´ azek, kter´ ym bude m´ısto reprezentov´ano v mapˇe. Mezi povolen´e form´ aty patˇr´ı .jpeg, .png a .gif. Ikona je automaticky zmˇenˇena velikost na 40 × 40 pixel˚ u. Formul´ aˇr je potvrzen stisknut´ım tlaˇc´ıtka Pˇridat“ ve spodn´ı ˇc´asti formul´aˇre. Po potvrzen´ı ” odesl´an´ı je jeˇstˇe zobrazen pˇrehled vˇsech pˇrid´avan´ ych u ´daj˚ u. Ten slouˇz´ı ke kontrole, zda je vˇsechno vkl´ ad´ ano spr´ avnˇe. V t´eto f´azi je jeˇstˇe moˇzn´e stisknout tlaˇc´ıtko Zavˇr´ıt“, vr´atit ” se do pˇrid´ avac´ıho formul´ aˇre a upravit u ´daje. Pokud jsou vˇsechny u ´daje vyplnˇeny podle pˇredstav uˇzivatele, vloˇzen´ı je potvrzeno stisknut´ım tlaˇc´ıtka Pˇridat“. Aplikace zkontroluje, ” zda jsou spr´ avnˇe vyplnˇeny vˇsechny u ´daje a zda jsou vkl´adan´e obr´azky v podporovan´em form´atu. Pokud ne, uˇzivatel je na to upozornˇen varovn´ ym oknem a u ´daje nejsou pˇrid´any. Pokud nebyla pˇri kontrole nalezena ˇz´adn´a chyba, je z´aznam pˇrid´an do odpov´ıdaj´ıc´ı tabulky (z´avis´ı na opr´ avnˇen´ı). Uˇzivatel na to bude upozornˇen vyskakovac´ım oknem s textem Nov´ e m´ ısto bylo ´ uspˇ eˇ snˇ e pˇ rid´ ano!“ (v pˇr´ıpadˇe opr´avnˇen´ı admin) nebo Nov´ e m´ ısto ” ” bude pˇ rid´ ano po schv´ alen´ ı administr´ atorem!“ (v pˇr´ıpadˇe opr´avnˇen´ı organiser). Pˇri u ´spˇeˇsn´em vloˇzen´ı m´ısta je do tabulky nav´ıc vloˇzeno jm´eno uˇzivatele, kter´ y m´ısto pˇridal. Po potvrzen´ı pˇrid´ avac´ıho formul´ aˇre je str´anka znovu naˇctena a je provedeno automatick´e vyhled´ avan´ı ud´ alost´ı. T´ım je pˇrid´an´ı m´ısta kompletn´ı.
39
ˇ CVUT v Praze
3.3.3
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
Vkl´ ad´ an´ı nov´ ych typ˚ u
Pravidla pro pˇrid´ av´ an´ı nov´ ych typ˚ u jsou stejn´a jako pravidla pro pˇrid´av´an´ı m´ıst. Uˇzivatel´e s opr´avnˇen´ım typu organiser vkl´adaj´ı typy do vedlejˇs´ı tabulky, kter´a nen´ı pˇr´ıstupn´a pro vyhled´ av´ an´ı. Uˇzivatel´e s opr´ avnˇen´ım typu admin vkl´adaj´ı nov´e typy pˇr´ımo a nov´e typy jsou rovnou pˇr´ıstupn´e pro dalˇs´ı akce. K vkl´ad´an´ı nov´ ych typ˚ u kulturn´ıch ud´alost´ı slouˇz´ı formul´ aˇr, kter´ y je pˇr´ıstupn´ y z hlavn´ı nab´ıdky pod tlaˇc´ıtkem + Typ. Formul´aˇr pro pˇrid´av´an´ı nov´ ych typ˚ u m´ a pouze jednu poloˇzku, kter´a je povinn´a. • N´ azev nov´eho typu – Urˇcuje n´azev nov´eho typu, kter´ y je zobrazov´an ve formul´aˇri pro vyhled´ av´ an´ı, je pˇriˇrazov´an jednotliv´ ym kulturn´ım ud´alostem a je zobrazov´ an v podrobnostech ud´ alosti. N´azev typu mus´ı b´ yt p˚ uvodn´ı, coˇz znamen´a, ˇze dva typy se nesm´ı jmenovat stejnˇe. Vzhledem k tomu, ˇze n´azev je jedin´a vlastnost typu, bylo by nesmysln´e, aby se dva typy jmenovaly stejnˇe. Vzhledem k charakteru typu se zde neuv´ ad´ı autor.
Obr. 3.9: Formul´aˇr pro pˇrid´av´an´ı nov´ ych typ˚ u Nov´ y typ je pˇrid´ an tlaˇc´ıtkem Pˇridat“ a n´asledn´ ym potvrzen´ım kontroln´ıho formul´aˇre. ” V pˇr´ıpadˇe nevyplnˇen´ı jedin´e poloˇzky je uˇzivatel upozornˇen varovn´ ym oknem a nov´ y typ nen´ı pˇrid´ an. V opaˇcn´em pˇr´ıpadˇe je nov´ y typ pˇrid´an a ve varovn´em oknˇe je n´apis Nov´ y typ ” byl ´ uspˇ eˇ snˇ e pˇ rid´ an!“. Po potvrzen´ı pˇrid´avac´ıho formul´aˇre je str´anka znovu naˇctena a je provedeno automatick´e vyhled´avan´ı ud´alost´ı. T´ım je pˇrid´an´ı nov´eho typu kompletn´ı.
3.4
Registrace a pˇ rihl´ aˇ sen´ı
V pˇredchoz´ım textu jsem se uˇz zm´ınil o pˇrihlaˇsov´an´ı a o uˇzivatelsk´ ych pr´avech. Uˇzivatel, kter´ y otevˇre aplikaci poprv´e, ˇz´ adn´e uˇzivatelsk´e jm´eno, heslo ani opr´avnˇen´ı nem´a. K z´ısk´an´ı tˇechto u ´daj˚ u se mus´ı zaregistrovat. Pˇri prvn´ım spuˇstˇen´ı aplikace se v lev´em horn´ım rohu
40
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
nach´az´ı pˇrihlaˇsovac´ı formul´ aˇr. Ve formul´aˇri se nach´az´ı pole pro uˇzivatelsk´e jm´eno, pole pro heslo, do kter´eho je samozˇrejmˇe heslo vpisov´ano skrytˇe, a tlaˇc´ıtka pro potvrzen´ı hesla a pro registraci.
Obr. 3.10: Formul´aˇr pro pˇrihl´aˇsen´ı
3.4.1
Registrace
K registraci slouˇz´ı registraˇcn´ı formul´aˇr, kter´ y se objev´ı po stisknut´ı tlaˇc´ıtka pro registraci. Vˇsechny poloˇzky ve formul´ aˇri jsou povinn´e, kromˇe poloˇzky Kdy, co a jak ˇ casto ”
Obr. 3.11: Formul´aˇr pro pˇrihl´aˇsen´ı organizuji“. Ta se objev´ı pouze po zatrhnut´ı poloˇzky Jsem organiz´ ator akc´ ı“, po ” jej´ım zatrhnut´ı je ale tak´e povinn´a. Poloˇzky ve formul´aˇri jsou tyto: • Uˇzivatelsk´e jm´eno – Uˇzivatelsk´e jm´eno mus´ı b´ yt p˚ uvodn´ı. Kaˇzd´emu pˇrihl´aˇsen´emu uˇzivateli se v aplikaci zobrazuje jeho pˇrihlaˇsovac´ı jm´eno a jeho opr´avnˇen´ı. Nav´ıc je uˇzivatelsk´e jm´eno pˇrid´ ano ke kaˇzd´e ud´alosti i m´ıstu, kter´e uˇzivatel pˇrid´a.
41
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
• Email – Do tohoto pole uˇzivatel zad´a svou emailovou adresu. Adresa se nijak neovˇeˇruje, ale pokud uˇzivatel poˇz´ad´a o opr´avnˇen´ı typu organiser, nebo bude pˇrid´ avat m´ısta a typy, v potvrzovac´ım emailu bude tato adresa uvedena jako odes´ılatel a provozovatel aplikace na tuto adresu m˚ uˇze pos´ılat pˇr´ıpadn´e pˇripom´ınky. • Heslo – Heslo, kter´ ym uˇzivatel pˇri pˇrihlaˇsov´an´ı potvrzuje svoji identitu. Do datab´aze se heslo ukl´ ad´ a zaˇsifrovan´e. • Potvrzen´ı hesla – Potvrzen´ı pˇredchoz´ı poloˇzky, aby se uˇzivatel kv˚ uli pˇreklepu nezaregistroval s heslem, kter´e si nepamatuje. • Kdy, co, a jak ˇcasto organizuji – Tato poloˇzka je voliteln´a. K jej´ımu zobrazen´ı je tˇreba zaˇskrtnout moˇznost Jsem organiz´ ator akc´ ı“. To, co uˇzivatel nap´ıˇse do t´eto ” poloˇzky, je pot´e odesl´ ano emailem administr´atorovi aplikace pro posouzen´ı, zda mu pˇridˇelit opr´ avnˇen´ı organiser, nebo ne. Po stisknut´ı tlaˇc´ıtka Registrovat“ aplikace zkontroluje, zda jsou vyplnˇeny vˇsechny poloˇzky, ” zda se heslo shoduje s jeho potvrzen´ım a zda uˇz neexistuje uˇzivatel se stejn´ ym uˇzivatelsk´ ym jm´enem. Pokud je nalezen konflikt, je na nˇej uˇzivatel upozornˇen varovn´ ym oknem. Pokud k ˇz´adn´emu konfliktu nedojde, je uˇzivatel pˇrid´an do datab´aze a m˚ uˇze se ihned pˇrihl´asit s opr´avnˇen´ım guest. Pokud poˇz´adal o opr´avnˇen´ı organiser, mus´ı poˇckat, dokud jeho ˇz´adost nepotvrd´ı administr´ ator. Do t´e doby m´a opr´avnˇen´ı guest.
3.4.2
Pˇ rihl´ aˇ sen´ı
Obr. 3.12: Informace o pˇrihl´aˇsen´em uˇzivateli K pˇrihl´ aˇsen´ı staˇc´ı zadat do pˇrihlaˇsovac´ıho formul´aˇre pˇrihlaˇsovac´ı jm´eno a odpov´ıdaj´ıc´ı heslo. Pokud vˇsechno probˇehne v poˇr´adku, je uˇzivatel pˇrihl´aˇsen a m´ısto pˇrihlaˇsovac´ıho formul´ aˇre jsou zobrazeny informace o pˇrihl´aˇsen´em uˇzivateli a tlaˇc´ıtko pro odhl´aˇsen´ı. Pokud je pˇri pˇrihl´ aˇsen´ı ˇspatnˇe zadan´e pˇrihlaˇsovac´ı jm´eno nebo heslo, uˇzivatel nen´ı pˇrihl´aˇsen
42
ˇ CVUT v Praze
ˇ ´ POHLED KAPITOLA 3. APLIKACE CULTURE – UZIVATELSK Y
a je upozornˇen varovn´ ym oknem. V z´avislosti na opr´avnˇen´ı je tak´e znovu vygenerov´ana hlavn´ı nab´ıdka. Uˇzivatel´e s opr´ avnˇen´ım admin a organiser v n´ı nav´ıc naleznou poloˇzky pro pˇrid´ av´ an´ı kulturn´ıch ud´ alost´ı, m´ıst a typ˚ u. Stisknut´ım tlaˇc´ıtka Log Out“ je uˇzivatel ” odhl´aˇsen. Na m´ıstˇe informac´ı o uˇzivateli se znovu objev´ı pˇrihlaˇsovac´ı formul´aˇr.
43
ˇ CVUT v Praze
4
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
Aplikace Culture – technick´ eˇ reˇ sen´ı
K tomu, aby vznikla aplikace Culture, bylo zapotˇreb´ı pouˇz´ıt nˇekolik programovac´ıch jazyk˚ u a datab´ azi. Data, se kter´ ymi aplikace pracuje, jsou uloˇzena v datab´azi PostgreSQL. Pouˇzit´e programovac´ı jazyky jsou PHP, JavaScript a HTML. HTML tagy jsou v t´eto aplikaci generov´ any pomoc´ı PHP nebo JavaScriptu. Kromˇe toho je souˇc´ast´ı aplikace i CSS soubor, kter´ y zajiˇst’uje vzhled. V t´eto kapitole rozeberu podrobnˇeji datab´azi a kaˇzdou ˇc´ast aplikace podle pouˇzit´eho programovac´ıho jazkyka.
4.1
Datab´ aze PostgreSQL
V t´eto ˇc´ asti se budu vˇenovat obecnˇe datab´azi PostgreSQL a hlavnˇe jej´ımu vyuˇzit´ı v t´eto bakal´aˇrsk´e pr´ aci. PostgreSQL je objektovˇe relaˇcn´ı datab´aze s velk´ ym mnoˇzstv´ım moˇznost´ı a rozˇs´ıˇren´ı.
4.1.1
Z historie PostgreSQL
Projekt PostgreSQL je jedn´ım z nejvˇetˇs´ıch a nejpouˇz´ıvanˇejˇs´ıch Open Source projekt˚ u na svˇetˇe. Jedn´ a se o objektovou relaˇcn´ı datab´azi, kter´a vznikla na University of California at Berkeley (UCB). V roce 1986 byla profesorem informatiky Michaelem Stonebrakerem vytvoˇrena datab´ aze Postgres. Vych´azela z projektu Ingres a odtud poch´az´ı i jej´ı n´azev. Ingres vznikal na UCB v letech 1977–1985 pro cviˇcen´ı tvorby datab´azov´ ych syst´em˚ u. Postgres vznikal v letech 1986–1994 s c´ılem poloˇzit nov´e z´aklady pro datab´aze jako objektov´e relace. V roce 1995 byl dosavadn´ı jazyk, kter´ ym byly pokl´ad´any dotazy, nahrazen jazykem SQL a pˇrejmenov´ an na Postgres95. V roce 1996 opustil Postgres95 zdi univerzity a zaˇcal se d´ ale vyv´ıjet jako Open Source projekt. Dalˇs´ıho v´ yvoje Postgresu se ujala skupina v´ yvoj´ aˇr˚ u mimo Berkeley, kter´a sest´avala z lid´ı z t´emˇeˇr cel´eho svˇeta. Do projektu vloˇzili hodnˇe ˇcasu a schopnost´ı a radik´alnˇe Postgres zmˇenili. V´ıce jak osm let sjednocovali k´ od, sestavili mailing list pro oznamov´an´ı bug˚ u, valnou vˇetˇsinu bug˚ u opravili, pˇridali mnoho nov´ ych vlastnost´ı a sestavili rozs´ahlou dokumentaci pro v´ yvoj´aˇre i uˇzivatele (souˇcasn´ a verze dokumentace m´ a t´emˇeˇr dva a p˚ ul tis´ıce stran). D´ıky jejich tvrd´e pr´aci se z PostgreSQL stal datab´ azov´ y syst´em s rozs´ahlou podporou a reputac´ı solidn´ıho a velice
44
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
stabiln´ıho projektu. Od t´e doby je PostgreSQL neust´ale vylepˇsov´an a pouˇz´ıv´an mnoha spoleˇcnostmi, organizacemi a u ´ˇrady po cel´em svˇetˇe.
Obr. 4.1: Symbolem projektu PostgreSQL je slon, kter´ y je zn´am´ y svou dokonalou pamˇet´ı
4.1.2
Struktura datab´ aze v aplikaci Culture a vyhled´ avac´ı dotaz
Datab´ aze aplikace Culture obsahuje ˇsest propojen´ ych datab´azov´ ych tabulek. Tˇri z tˇechto tabulek (tabulky events, places a types) jsou pouˇz´ıv´any pro vyhled´av´an´ı kulturn´ıch akc´ı, dvˇe z nich (places tmp a types tmp) slouˇz´ı k pˇrid´av´an´ı nov´ ych z´aznam˚ u uˇzivateli s opr´avnˇen´ım organiser. Posledn´ı tabulka users obsahuje data o uˇzivatel´ıch a slouˇz´ı mimo jin´e k pˇrihlaˇsov´ an´ı. Pˇri vyhled´av´an´ı kulturn´ıch ud´alost´ı pomoc´ı formul´aˇre je pˇres PHP skript proveden n´ asleduj´ıc´ı datab´azov´ y dotaz: SELECT p.place_name AS p_name, p.description AS p_desc, e.event_name AS e_name, * FROM places AS p JOIN events AS e ON p.place_id = e.place_id JOIN types ON e.type_id = types.type_id WHERE e.event_name LIKE ’$event_name%’ AND p.place_id = $place_id
AND (e.date_begin, e.date_end)
OVERLAPS (DATE ’$beg_date’, DATE ’$end_date’) AND e.type_id=$genre ORDER BY e.date_begin;
Pro u ´plnost mus´ım doplnit, ˇze tvar dotazu z´avis´ı na tom, kter´e poloˇzky vyhled´avac´ıho formul´ aˇre jsou vyplnˇeny. Promˇenn´e $event name, $place id, $beg date, $end date a $genre jsou pˇrevzaty z vyhled´ avac´ıho formul´aˇre metodou GET. Z dotazu je vidˇet, ˇze zat´ımco jm´eno ud´ alosti (promˇenn´a $event name) je pˇred´av´ano jako string, typ ud´alosti a m´ısto jsou pˇred´ av´ any jako ˇc´ıslo. To je zp˚ usobeno t´ım, ˇze ve vyhled´av´ac´ım formul´aˇri jsou jm´ena m´ısta a typu ud´ alosti vyb´ır´any z roletov´eho menu. Z tohoto menu se do PHP skriptu nepˇred´ av´ a n´ azev, ale hodnota zvolen´e poloˇzky, kter´a je v tˇechto roletov´ ych menu reprezentov´ ana hodnotou id. V dotazu jsou pouˇzity n´asleduj´ıc´ı pˇr´ıkazy a oper´atory jazyka SQL: • SELECT – Znaˇc´ı, ˇze n´ asleduj´ıc´ı dotaz bude v datab´azi vyhled´avat.
45
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
Obr. 4.2: N´ azorn´e zobrazen´ı tabulek a vztah˚ u mezi nimi • AS – Alias. Slouˇz´ı pouze ke zkr´acen´ı dotaz˚ u. Libovoln´a tabulka nebo atribut m˚ uˇze b´ yt pomoc´ı pˇr´ıkazu AS v dotazu nahrazena n´azvem aliasu. • FROM – Urˇcuje, z kter´e tabulky ˇci tabulek budou hled´any odpov´ıdaj´ıc´ı v´ ysledky. • JOIN ON – Slouˇz´ı k propojov´an´ı tabulek. Parametrem klauzule JOIN je jm´eno pˇripojovan´e tabulky. Po pˇr´ıkazu ON mus´ı b´ yt uvedeny atributy, kter´ ymi budou propojeny ˇr´ adky tabulek. • WHERE – Po klauzuli WHERE jsou uvedeny omezuj´ıc´ı podm´ınky dotazu. • LIKE – Oper´ ator slouˇz´ıc´ı k porovn´an´ı textov´ ych ˇretˇezc˚ u (datov´e typy character ˇ ıslen´e hodnoty jsou porovn´av´any oper´atory =, < a >. varying, text a dalˇs´ı). C´ • AND – Oper´ ator spojuj´ıc´ı jednotliv´e podm´ınky. Pˇri pouˇzit´ı oper´atoru AND mus´ı b´ yt splnˇeny vˇsechny podm´ınky. Dalˇs´ım pouˇziteln´ ym oper´atorem je OR, pˇri jehoˇz pouˇzit´ı staˇc´ı, aby byla splnˇena alespoˇ n jedna podm´ınka.
46
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
• OVERLAPS – Oper´ ator slouˇz´ıc´ı k porovn´an´ı ˇcasov´eho rozsahu. Z kaˇzd´e strany oper´atoru OVERLAPS mus´ı b´ yt dvojice hodnot typu DATE. Oper´ator OVERLAPS porovn´av´a, zda se ˇcasov´e rozsahy urˇcen´e tˇemito dvojicemi pˇrekr´ yvaj´ı, nebo ne. • ORDER BY – Tato klauzule slouˇz´ı k seˇrazen´ı v´ ysledk˚ u podle hodnoty zadan´eho parametru. V tomto pˇr´ıkazu jsou pomoc´ı klauzule JOIN propojeny tabulky events, places a types. Kl´ıˇcem k propojen´ı tabulek events a places je atribut place id, k propojen´ı tabulek events a types je pouˇzit kl´ıˇcov´ y atribut type id. V´ ysledky jsou seˇrazeny podle atributu date begin. K tomu je pouˇzita klauzule ORDER BY.
Pro vyhled´ av´ an´ı ud´ alost´ı slouˇz´ı jeˇstˇe jeden dotaz. Je proveden vˇzdy, kdyˇz je spuˇstˇeno automatick´e vyhled´ av´ an´ı. Vzhledem k tomu, ˇze je spouˇstˇen automaticky, nem´a ˇz´adn´e voliteln´e parametry. Vyb´ır´ a z datab´aze poloˇzky pouze v z´avislosti na aktu´aln´ım datu. SELECT p.place_name AS p_name, p.description AS p_desc, e.event_name AS e_name, * FROM places AS p JOIN events AS e ON p.place_id = e.place_id JOIN types ON e.type_id = types.type_id WHERE (e.date_begin, e.date_end) OVERLAPS (DATE ’$beg_date’, DATE ’$end_date’) ORDER BY e.date_begin;
V´ ysledkem tohoto dotazu budou informace o ud´alostech, kter´e se odehr´avaj´ı v urˇcit´em ˇcasov´em u ´seku a jejich typech a m´ıstech kon´an´ı. Promˇenn´e $beg date a $date end jsou v JavaScriptu nastaveny na hodnotu aktu´aln´ıho data a hodnotu data t´ yden po aktu´aln´ım datu.
4.1.3
Podrobn´ y rozbor tabulky events a dotaz pro pˇ rid´ an´ı ud´ alosti
Tabulka events obsahuje veˇsker´e informace o ud´alostech. Obsahuje n´asleduj´ıc´ı atributy, kter´e reprezentuj´ı jednotliv´e informace ud´alosti: y z´aznam. • event id – typ SERIAL – Prim´arn´ı kl´ıˇc tabulky. Jednoznaˇcnˇe definuje kaˇzd´ Kaˇzd´emu z´ aznamu je automaticky pˇridˇeleno unik´atn´ı ˇc´ıslo, kter´e jeˇstˇe ˇz´adn´emu z´ aznamu nebylo pˇridˇeleno. To znamen´a, ˇze i v pˇr´ıpadˇe, kdy jsou vˇsechny z´aznamy smaz´ any, dalˇs´ı vloˇzen´ y z´ aznam dostane pˇridˇelen´e id o jedna vyˇsˇs´ı, neˇz bylo id posledn´ aho z´ aznamu, kter´ y byl pˇrid´an.
47
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
• event name – typ CHARACTER VARYING – Hodnota tohoto atributu definuje jm´eno kaˇzd´e ud´ alosti. • date begin – typ DATE – Definuje datum, ve kter´em ud´alost zaˇc´ın´a. Datum je ve form´ atu YYYY-MM-DD. • date end – typ DATE – Definuje datum, ve kter´em ud´alost konˇc´ı. Datum je ve form´atu YYYY-MM-DD. • description – typ TEXT – Tento atribut obsahuje podrobn´e informace o ud´alosti. • place id – typ INTEGER – Obsahuje id m´ısta, ke kter´emu je ud´alost pˇriˇrazena. Pomoc´ı tohoto atributu jsou ke kaˇzd´e ud´alosti pˇriˇrazov´any informace o m´ıstu, ke kter´emu je pˇriˇrazena. • type id – typ INTEGER – Obsahuje id typu, ke kter´emu je ud´alost pˇriˇrazena. Pomoc´ı tohoto atributu jsou ke kaˇzd´e ud´alosti pˇriˇrazov´any informace o typu, ke kter´emu je pˇriˇrazena. • web page url – typ CHARACTER VARYING – V tomto atributu jsou uchov´av´any internetov´e adresy. • poster url – typ CHARACTER VARYING – Obsahuje relativn´ı cestu ke grafick´emu souboru s plak´ atem uloˇzen´emu na serveru. • owner – typ CHARACTER VARYING – Obsahuje jm´eno uˇzivatele z tabulky users, kter´ y ud´ alost vytvoˇril.
Uˇzivatel´e mohou v tabulce events u ´daje vyhled´avat nebo je do n´ı vkl´adat. Vyhled´av´an´ı z´aznam˚ u jsem popsal jiˇz dˇr´ıve. K vkl´ad´an´ı z´aznamu je pouˇz´ıv´an skript v jazyce PHP, kter´ y obsahuje n´ asleduj´ıc´ı SQL dotaz: INSERT INTO events (event_name, date_begin, date_end, place_id, type_id, description, web_page_url, poster_url, owner) VALUES (’$event_name’, DATE ’$date_begin’, DATE ’$date_end’, $place_id, $type_id, ’$description’, ’$event_URL’, ’$event_poster’, ’$owner’);
Pˇr´ıkaz INSERT slouˇz´ı k pˇrid´ av´ an´ı z´aznam˚ u do datab´aze. Klauzule INTO definuje tabulku, do kter´e budou hodnoty vloˇzeny. Za n´azvem tabulky je v z´avorce v´ yˇcet atribut˚ u, do kter´ ych
48
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
budou z´ aznamy pˇrid´ av´ any, a kter´ y tak´e urˇcuje jejich poˇrad´ı. Klauzule VALUES definuje hodnoty, kter´e budou do tabulky zaps´any. Podle poˇrad´ı hodnot v z´avorce jsou hodnoty pˇriˇrazov´ any k atribut˚ um. Hodnoty promˇenn´ ych pˇrid´avan´ ych do datab´aze jsou pˇrevzaty z HTML formul´ aˇre metodou POST.
4.1.4
Podrobn´ y rozbor tabulek places a places tmp a dotaz pro pˇ rid´ an´ı m´ısta
Tabulka places obsahuje informace o m´ıstech. Slouˇz´ı pro vyhled´av´an´ı akc´ı a vkl´adaj´ı se do n´ı nov´ a m´ısta. Tabulka places tmp je totoˇzn´a, aˇz na to, ˇze neslouˇz´ı k vyhled´av´an´ı, ale pouze k vkl´ ad´ an´ı. Uˇzivatel´e s opr´avnˇen´ım organiser totiˇz do tabulky places nemohou pˇrid´avat ud´ alosti pˇr´ımo. M´ısta jimi pˇridan´a jsou pˇrid´ana pouze do tabulky places tmp. V pˇr´ıpadˇe, ˇze administr´ ator potvrd´ı pˇrid´an´ı m´ısta, je spuˇstˇen n´asleduj´ıc´ı PHP skript (zkr´ aceno). query("SELECT * FROM places_tmp WHERE place_id=$place_id"); ... } $p->query("SELECT * FROM places WHERE place_name LIKE ’$place_name’"); if($p->nextrow()){ $p->query("DELETE FROM places_tmp WHERE place_name LIKE ’$place_name’"); ... } else{ $p->query("DELETE FROM places_tmp WHERE place_id = $place_id"); $p->query("INSERT INTO places (place_name, adress, n_coordinate, e_coordinate, description, marker_image_url, logo_url, web_url, owner) VALUES (’$place_name’,
Skript se pˇripoj´ı k datab´ azi (k tomu slouˇz´ı tˇr´ıda Pgsql) a zkontroluje, zda v tabulce places uˇz m´ısto stejn´eho n´ azvu neexistuje. Pokud ano, je z´aznam z tabulky places tmp vymaz´ an a do tabulky places nen´ı vloˇzen. V opaˇcn´em pˇr´ıpadˇe je z´aznam odstranˇen z tabulky places tmp a je vloˇzen do tabulky places.
49
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
Obˇe dvˇe tabulky tedy obsahuj´ı stejn´e atributy. • place id – typ SERIAL – Prim´arn´ı kl´ıˇc tabulky. Jednoznaˇcnˇe definuje kaˇzd´ y z´aznam v tabulce places nebo places tmp. Kaˇzd´emu z´aznamu je automaticky pˇridˇeleno unik´ atn´ı ˇc´ıslo podle stejn´ ych pravidel, jako je pˇridˇelov´ano event id v tabulce events. • place name – typ CHARACTER VARYING – N´azev m´ısta. V datab´azi nen´ı oˇsetˇreno, ˇze by se dvˇe m´ısta nemohla jmenovat stejnˇe, ale pˇri pˇr´ıstupu do datab´aze pˇres PHP skripty aplikace Culture (coˇz je pro vˇsechny uˇzivatele vlastnˇe jedin´a moˇznost) to oˇsetˇreno je. V tabulce by se tedy nemˇely objevit dvˇe m´ısta se stejnou hodnotou atributu place name. • adress – typ CHARACTER VARYING – Tento atribut uchov´av´a adresu kaˇzd´eho m´ısta. • n coordinate – typ DOUBLE PRECISION – Tento atribut uchov´av´a hodnotu zemˇepisn´e ˇs´ıˇrky v syst´emu WGS-84. Vzhledem k zemˇepisn´ ym ˇs´ıˇrk´am, pro kter´e je aplikace urˇcena, n´ azev odkazuje na severn´ı polokouli, ale samozˇrejmˇe je moˇzn´e vkl´adat i m´ısta na polokouli jiˇzn´ı. Staˇc´ı k tomu zapsat hodnotu se z´aporn´ ym znam´enkem. • e coordinate – typ DOUBLE PRECISION – Uchov´av´a hodnotu zemˇepisn´e d´elky v syst´emu WGS-84. Stejnˇe jako pˇredchoz´ı atribut m˚ uˇze obsahovat i z´aporn´e hodnoty. • description – typ TEXT – Obsahuje podrobn´e informace o m´ıstˇe. • logo url – typ CHARACTER VARYING – Obsahuje relativn´ı cestu ke grafick´emu souboru s logem m´ısta uloˇzen´emu na serveru. • web url – typ CHARACTER VARYING – V tomto atributu je uchov´av´ana internetov´ a adresa m´ısta. • marker image url – typ CHARACTER VARYING – Obsahuje relativn´ı cestu ke grafick´emu souboru s mapovou ikonou uloˇzen´emu na serveru. • owner – typ CHARACTER VARYING – Obsahuje jm´eno uˇzivatele z tabulky users, kter´ y m´ısto vytvoˇril.
Jako posledn´ı vˇec, kterou je potˇreba zm´ınit k tabulk´am places a places tmp, je zp˚ usob vkl´ad´an´ı nov´ ych z´ aznam˚ u do tˇechto tabulek. Ke vkl´ad´an´ı z´aznam˚ u slouˇz´ı PHP skript, kter´ y nejprve zkontroluje opr´ avnˇen´ı uˇzivatele, kter´ y nov´e m´ısto pˇrid´av´a. Podle toho je nov´ y
50
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
z´aznam pˇrid´ an bud’ do tabulky places, nebo places tmp. SQL dotaz slouˇz´ıc´ı k pˇrid´an´ı z´aznamu do tabulky se potom liˇs´ı jenom v tabulce, do kter´e je z´aznam pˇrid´an. INSERT INTO places_tmp (place_name, adress, n_coordinate, e_coordinate, description, marker_image_url, logo_url, web_url, owner) VALUES (’$place_name’,
ych V tomto pˇr´ıpadˇe jsou z´ aznamy vloˇzeny do tabulky places tmp. Hodnoty promˇenn´ pˇrid´avan´ ych do datab´ aze jsou pˇrevzaty z HTML formul´aˇre metodou POST.
4.1.5
Podrobn´ y rozbor tabulek types a types tmp a dotaz pro pˇ rid´ an´ı typu
Tabulky types a types tmp obsahuj´ı stejn´e atributy, rozd´ıl mezi nimi je stejn´ y jako mezi tabulkami places a places tmp. M´ısta pˇridan´a uˇzivatelem s opr´avnˇen´ım organiser do tabulky types tmp jsou po potvrzen´ı administr´atorem pˇrevedena do tabulky places pomoc´ı PHP skriptu. Skript pracuje stejnˇe jako skript pro pˇresunov´an´ı z´aznam˚ u z tabulky places tmp do tabulky places.
Tabulky types a types tmp obsahuj´ı jen dva atributy. • type id – typ SERIAL – Prim´arn´ı kl´ıˇc tabulky. Jednoznaˇcnˇe definuje kaˇzd´ y typ. Pravidla pˇridˇelov´ an´ı hodnoty jsou stejn´a jako u pˇredchoz´ıch tabulek. • type name – typ CHARACTER VARYING – N´azev typu. Datab´aze nikomu nebr´an´ı, aby byly dva n´ azvy totoˇzn´e, ale v PHP skriptech, kter´e k tabulce pˇristupuj´ı, je to oˇsetˇreno, takˇze by se v tabulce nemˇely objevit dva z´aznamy se stejn´ ym n´azvem. Vzhledem k tomu, ˇze n´ azev je jedin´ ym atributem tabulky, kter´ y m˚ uˇze uˇzivatel vidˇet, ned´avalo by ani smysl, aby v tabulce byly dva typy se stejnou hodnotou atributu type name.
Dotazy, kter´ ymi jsou pˇrid´ av´ any z´aznamy do tabulek types a types tmp, se liˇs´ı zase jenom v tom, do kter´e tabulky jsou data pˇrid´av´ana. To z´avis´ı na opr´avnˇen´ı uˇzivatele. Dotaz je velice kr´ atk´ y. INSERT INTO types (type_name) VALUES (’$genre_name’);
51
ˇ CVUT v Praze
4.1.6
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
Podrobn´ y rozbor tabulky users, dotaz pro registraci a dotaz pro pˇ rihl´ aˇ sen´ı
Tabulka users se od ostatn´ıch tabulek v mnoh´em liˇs´ı. V tabulce jsou uchov´av´any informace o uˇzivatel´ıch. Pˇri registraci uˇzivatele jsou do tabulky uloˇzeny pˇrihlaˇsovac´ı u ´daje. Pˇri pˇrihlaˇsov´ an´ı jsou tyto u ´daje v tabulce vyhled´any a porovn´any s hodnotami z pˇrihlaˇsovac´ıho formul´ aˇre. Tabulka users obsahuje tyto atributy: • user id – typ SERIAL – Prim´arn´ı kl´ıˇc tabulky. Jednoznaˇcnˇe definuje kaˇzd´eho uˇzivatele. Pˇriˇrazov´ an´ı hodnoty user id se ˇr´ıd´ı stejn´ ymi pravidly jako v pˇredchoz´ıch tabulk´ ach. • username – typ CHARACTER VARYING – Uˇzivatelsk´e jm´eno. Pˇri pˇrihlaˇsov´an´ı je podle nˇej vyhled´ an z´ aznam v tabulce. Pˇri pˇrid´av´an´ı nov´ ych kulturn´ıch ud´alost´ı a m´ıst je vloˇzeno do nov´eho z´ aznamu do atributu owner. • passwd – typ CHARACTER VARYING – Zaˇsifrovan´e heslo. Kv˚ uli bezpeˇcnosti nen´ı do tabulky zad´ av´ ano heslo tak, jak ho uˇzivatel nap´ıˇse, ale je zaˇsifrov´ano PHP funkc´ı crypt(string $str [, string $salt ] ). Pˇri ovˇeˇrov´an´ı hesla je potom podle stejn´eho kl´ıˇce zaˇsifrov´ ana hodnota zadan´a uˇzivatelem do pˇrihlaˇsovac´ıho formul´aˇre a je porovn´ ana s hodnotou atributu passwd pro odpov´ıdaj´ıc´ı uˇzivatelsk´e jm´eno. • permissions – typ CHARACTER VARYING – Podle hodnoty tohoto atributu z´ısk´av´ a uˇzivatel pˇr´ıstup k formul´ aˇr˚ um pro pˇrid´av´an´ı u ´daj˚ u do tabulek events, places, places tmp, types a types tmp. Hodnoty opr´avnˇen´ı jsou n´asleduj´ıc´ı: – guest – nesm´ı pˇrid´ avat z´aznamy do ˇz´adn´e tabulky – organiser – sm´ı pˇrid´ avat z´aznamy do tabulek events, places tmp a types tmp – admin – sm´ı pˇrid´ avat z´aznamy do tabulek events, places a types • email – typ CHARACTER VARYING – Obsahem tohoto atributu je emailov´a adresa uˇzivatele. Emaily, kter´e jsou generovan´e pˇri ˇz´adosti o opr´avnˇen´ı organiser nebo pˇri pˇrid´ av´ an´ı m´ıst do tabulky places tmp a types tmp, maj´ı v poloˇzce odes´ılatel tuto adresu.
Vyuˇzit´ı t´eto tabulky v aplikaci je pˇredevˇs´ım pˇri registraci nov´ ych uˇzivatel˚ u a pˇri jejich pˇrihlaˇsov´ an´ı. Pokud uˇzivatel nem´a uˇzivatelsk´e jm´eno ani heslo, m˚ uˇze se zaregistrovat.
52
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
K registraci slouˇz´ı n´ asleduj´ıc´ı PHP skript (zkr´acen´ y o k´od, kter´ y nen´ı pro problematiku datab´aze d˚ uleˇzit´ y): query("SELECT username FROM users;"); while($q->nextrow()){ $act_username = $q->getfield("username"); if ($act_username == $username) $unique_name = false; } if ($unique_name == true) { $p->query("INSERT INTO users (username, passwd, permissions, email) VALUES (’$username’, ’$crypted_passwd’, ’$permissions’, ’$email’);"); ... } ... } ... } ... ?>
Tento skript provede pˇripojen´ı k datab´azi a do promˇenn´ ych pˇred´a hodnoty z registraˇcn´ıho formul´ aˇre. Pot´e zkontroluje, zda jsou vyplnˇeny vˇsechny poloˇzky, zda jsou hodnoty hesla a potvrzen´eho hesla stejn´e a zda uˇzivatelsk´e jm´eno v datab´azi jiˇz nen´ı. Pokud jsou vˇsechny podm´ınky splnˇeny, jsou u ´daje o uˇzivateli pˇrid´any do tabulky users a uˇzivatel se jiˇz m˚ uˇze pˇrihl´ asit. Pˇrihlaˇsov´ an´ı prob´ıh´a pˇres pˇrihlaˇsovac´ı formul´aˇr. Hodnoty z formul´aˇre jsou pˇred´ any metodou GET tomuto PHP skriptu (zde je zkr´acen´ y o k´od, kter´ y se nevztahuje k problematice datab´ az´ı): query("SELECT * FROM users WHERE username LIKE ’$username’;");
53
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
Tento skript se pˇripoj´ı k datab´azi, vyhled´a zaˇsifrovan´e heslo n´aleˇz´ıc´ı uˇzivatelsk´emu jm´enu a porovn´ a se zaˇsifrovan´ ym heslem z pˇrihlaˇsovac´ıho formul´aˇre. V pˇr´ıpadˇe, ˇze jsou hesla shodn´ a, je do asociativn´ıho pole $ SESSION zaps´ano uˇzivatelsk´e jm´eno a opr´avnˇen´ı. T´ım je uˇzivatel pˇrihl´ aˇsen. Dalˇs´ı chov´an´ı str´anky po pˇrihl´aˇsen´ı uˇzivatele ˇr´ıd´ı PHP.
4.2
Pouˇ zit´ı PHP v aplikaci Culture
PHP, nebo–li Hypertext Preprocessor“, je skriptovac´ı jazyk, kter´ y je spouˇstˇen na stranˇe ” serveru (narozd´ıl tˇreba od JavaScriptu, kter´ y je spouˇstˇen z prohl´ıˇzeˇce). K´od je kompilov´ an na stranˇe serveru, takˇze na serveru mus´ı b´ yt nainstalov´an kompil´ator. V aplikaci Culture je PHP pouˇzito k sestaven´ı HTML k´odu str´anky a k pr´aci s datab´az´ı.
Obr. 4.3: Logo PHP
54
ˇ CVUT v Praze
4.2.1
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
Tˇ r´ıda Builder a sestaven´ı str´ anky
Pro sestaven´ı k´ odu str´ anky jsem napsal tˇr´ıdu Builder, kter´a obsahuje ˇradu ˇclensk´ ych metod generuj´ıc´ıch HTML k´ od. Metody jsou vytvoˇreny tak, aby dok´azaly vygenerovat ˇ str´anku pro uˇzivatele vˇsech opr´ avnˇen´ı. Clensk´ e metody tˇr´ıdy Builder vˇsechny obsahuj´ı pouze HTML k´ od. Na pˇr´ıkladech uk´aˇzu dvˇe z nich, vˇsechny ostatn´ı se chovaj´ı a jsou pouˇz´ıv´ any u ´plnˇe stejn´ ym zp˚ usobem. • build head() – Tato metoda sestav´ı hlaviˇcku dokumentu. Obsahuje seznam styl˚ u (CSS) a JavaScriptov´ ych soubor˚ u a tak´e <meta> tagy. Jedin´e co obsahuje je HTML k´ od, stejnˇe jako vˇsechny ostatn´ı metody tˇr´ıdy Builder. function build_head() { ?> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Culture <script type="text/javascript" src="js/main_functions.js"> <script type="text/javascript" src="js/jsDatePick.min.1.3.js"> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
• build body onload() – Velice jednoduch´a metoda, kter´a pouze otevˇre ˇc´ast a nastav´ı, kter´e metody se maj´ı spustit pˇri ud´alosti onLoad. function build_body_onload() { ?>
V pˇr´ıpadˇe, ˇze by se uˇzivatel˚ um s urˇcit´ ym opr´avnˇen´ım mˇela pˇri naˇcten´ı tˇela HTML dokumentu spustit jin´ a funkce, staˇcilo by nahradit metodu build body onload() novou metodou, kter´ a by pˇri naˇcten´ı tˇela provedla jinou funkci.
55
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
ˇ Clensk´ e metody tˇr´ıdy Builder jsou vol´any z instance t´eto tˇr´ıdy, kter´a je vytvoˇrena v souboru index.php, tedy souboru, kter´ y je zkompilov´an a spuˇstˇen pˇri otevˇren´ı aplikace. Zde je zobrazen okomentovan´ y zdrojov´ y k´od tohoto souboru:
// spust´ ı novou session, nebo zavol´ a st´ avaj´ ıc´ ı session_start();
// vytvoˇ rı ´ novou instanci tˇ r´ ıdy builder require("src/class.builder.php"); $builder = new builder;
// je sestavena hlaviˇ cka dokumentu, otevˇ reno tˇ elo dokumentu a z´ ahlav´ ı str´ anky $builder->build_head(); $builder->build_body_onload(); $builder->build_body_header();
// pokud je uˇ zivatel pˇ rihl´ aˇ sen, zobraz´ ı jeho pˇ rihlaˇ sovac´ ı u ´daje if (isset($_SESSION[’username’])) { $builder->build_logout_form(); } // pokud nen´ ı pˇ rihl´ aˇ sen, je sestaven pˇ rihlaˇ sovac´ ı formul´ aˇ r else { $builder->build_login_form(); }
// je sestaven seznam v´ ysledk˚ u $builder->build_result_box();
// pokud je uˇ zivatel pˇ rihl´ aˇ sen, zkontroluje opr´ avnˇ en´ ı, a podle nˇ ej sestav´ ı menu if (isset($_SESSION[’username’])) { if ($_SESSION[’permissions’] == ’guest’) { $builder->build_guest_menu(); } elseif ($_SESSION[’permissions’] == ’organiser’) { $builder->build_organiser_menu(); } elseif ($_SESSION[’permissions’] == ’admin’) { $builder->build_admin_menu(); } } else { $builder->build_guest_menu();
56
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
}
// je sestaven prostor pro formul´ ar ˇe a pro v´ ysledky a z´ apat´ ı dokumentu $builder->build_permanent_elements();
// uzav´ ır´ a tˇ elo dokumentu a cel´ y dokument $builder->build_tail(); ?>
Tento kr´ atk´ y soubor otevˇre asociativn´ı pole $ SESSION a podle uˇzivatelsk´eho jm´ena a opr´avnˇen´ı vol´ a ty ˇclensk´e metody tˇr´ıdy Builder, kter´e jsou pˇr´ıstupn´e uˇzivateli s odpov´ıdaj´ıc´ım opr´ avnˇen´ım. T´ım je sestaven HTML k´od cel´e str´anky.
Ke spr´ avn´emu sestaven´ı str´ anky je zde vyuˇzito asociativn´ı pole $ SESSION. Mezi asociativn´ı pole v PHP patˇr´ı tˇreba i dˇr´ıve zmiˇ novan´e $ GET a $ POST, nebo $ FILES, kter´e je v aplikaci Culture pouˇzito pro nahr´av´an´ı obr´azk˚ u na server. Konkr´etnˇe $ SESSION je specifick´e t´ım, ˇze obsahuje promˇenn´e relace, kter´e jsou pˇr´ıstupn´e v cel´em skriptu do t´e doby, neˇz vyprˇs´ı platnost relace (timeout). To je v´ yborn´a vˇec pro uchov´av´an´ı dat, kter´e je tˇreba uchovat po celou dobu bˇehu skriptu, jako je napˇr´ıklad opr´avnˇen´ı uˇzivatele. Pˇred zapisov´ an´ım do nebo ˇcten´ım z asociativn´ıho pole mus´ım pole vytvoˇrit nebo zavolat jiˇz vytvoˇren´e. K oboj´ımu slouˇz´ı metoda session start(). Mezi dalˇs´ı metody asociativn´ıho pole $ SESSION pouˇzit´e v aplikaci Culture patˇr´ı metody isset($ SESSION[$var]) a session unset(). Metoda isset($ SESSION[$var]) vrac´ı hodnotu true v pˇr´ıpadˇe, ˇze je do promˇenn´e $var dosazena nˇejak´a jin´a hodnota neˇz null. V pˇr´ıpadˇe, ˇze nen´ı, vrac´ı hodnotu false. Tato metoda byla pouˇzita pˇri stavˇen´ı str´anky v k´odu v´ yˇse. Metoda session unset() vypr´ azdn´ı vˇsechny promˇenn´e asociativn´ıho pole. V aplikaci Culture je pouˇzita v souboru logout.php, kter´ y slouˇz´ı k odhl´aˇsen´ı uˇzivatele. Vypad´a takto:
V aplikaci Culture jsou v asociativn´ım poli $ SESSIONS uchov´av´any informace o pˇrihl´aˇsen´ı, konkr´etnˇe uˇzivatelsk´e jm´eno a opr´avnˇen´ı. Uˇzivatelsk´e jm´eno i opr´avnˇen´ı jsou po pˇrihl´aˇsen´ı zobrazeny na hlavn´ı str´ance spolu s tlaˇc´ıtkem Log Out.
57
ˇ CVUT v Praze
4.2.2
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
Tˇ r´ıda Pgsql a pˇ ripojen´ı k datab´ azi
Tˇr´ıdu Pgsql jsem nenapsal s´ am, poskytl mi ji vedouc´ı t´eto bakal´aˇrsk´e pr´ace Ing. Jiˇr´ı Cajthaml, Ph.D. a j´ a jsem ji poupravil pro potˇrebu t´eto bakal´aˇrsk´e pr´ace. Tˇr´ıda Pgsql obsahuje ˇradu ˇclensk´ ych promˇenn´ ych, kter´e definuj´ı pˇripojen´ı, kromˇe nich obsahuje i ˇclensk´e metody, kter´e zprostˇredkov´ avaj´ı komunikaci mezi skriptem PHP a samotnou datab´az´ı. ˇ V tˇr´ıdˇe jsou vyuˇzity PHP metody pˇreddefinovan´e pro pr´aci s datab´az´ı PostgreSQL. Clensk´ ymi promˇenn´ ymi tˇr´ıdy Pgsql jsou: • $host, $port, $db, $user, $password – obsahuj´ı informace o pˇripojen´ı • $link – do t´eto promˇenn´e je uloˇzena n´avratov´a hodnota metody pg connect, do kter´e vstupuj´ı jako parametry informace o pˇripojen´ı • $resource – do t´eto promˇenn´e je uloˇzen v´ ysledek metody pg query($query) • $row – do t´eto promˇenn´e je uloˇzen v´ ysledek metody pg fetch assoc($resource) • $rowno – oznaˇcuje ˇc´ıslo ˇr´ adky pˇri prohled´av´an´ı v´ ysledk˚ u SQL dotazu
ˇ Clensk´ e metody tˇr´ıdy Pgsql slouˇz´ı k manipulaci s ˇclensk´ ymi promˇenn´ ymi a k ˇclenˇen´ı v´ ysledk˚ u. Konstruktor tˇr´ıdy je naps´an tak, aby pˇri vytvoˇren´ı instance bylo rovnou vytvoˇreno pˇripojen´ı k datab´ azi. function pgsql() { $this->link = pg_connect("host=".$this->host." port=".$this->port." dbname=".$this->db." user=".$this->user." password=".$this->password); if($this->link === FALSE) { return; } register_shutdown_function( array( &$this, "end" ) ); }
Dalˇs´ımi metodami tˇr´ıdy Pgsql jsou: • query($query) – Tato metoda provede SQL dotaz a v´ ysledek uloˇz´ı do promˇenn´e $resource. Z´ aroveˇ n nastav´ı ˇc´ıslo ˇr´adku na 0 a promˇennou $resource vr´at´ı. • nextrow() – Tato metoda pˇrevezme aktu´aln´ı ˇr´adek v´ ysledk˚ u dotazu. Potom zkontroluje, zda ve v´ ysledc´ıch existuje dalˇs´ı ˇr´adek. Pokud ano, ˇc´ıslo ˇr´adku inkrementuje, pokud ne, je metoda ukonˇcena bez inkrementace.
58
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
• getfield($col) – Tato metoda vrac´ı hodnotu atributu z aktu´aln´ıho ˇr´adku. • end() – Tato metoda uzav´ır´a spojen´ı s datab´az´ı.
Instance tˇr´ıdy Pgsql jsou v aplikaci Culture pouˇz´ıv´any ve vˇsech ostatn´ıch .php souborech. Slouˇz´ı jak k pˇrid´ avan´ı, tak k vyhled´av´an´ı z´aznam˚ u v datab´azi. Tˇechto soubor˚ u je pomˇernˇe dost a nˇekter´e jsou kv˚ uli velk´emu mnoˇzstv´ı podm´ınek a vedlejˇs´ım efekt˚ um, kter´e se provedou pˇri urˇcit´ ych podm´ınk´ach, dost sloˇzit´e, ale princip vyuˇzit´ı tˇr´ıdy Pgsql je ve vˇsech pˇr´ıpadech stejn´ y. Uvedu zde proto jako pˇr´ıklad jen jeden jednoduch´ y skript. Jedn´ a se o skript, kter´ y vr´ at´ı vˇsechny poloˇzky z tabulky types.
$p->query("SELECT * FROM types"); while($p->nextrow()) { $type_name =
Nejprve je vytvoˇrena instance tˇr´ıdy Pgsql, pot´e je proveden SQL dotaz a nakonec jsou ze seznamu v´ ysledk˚ u po ˇr´ adc´ıch vypisov´any nalezen´e hodnoty. Co se s nimi bude d´ıt d´ale, je vˇec´ı JavaScriptu.
4.3
Pouˇ zit´ı JavaScriptu v aplikaci Culture
JavaScript je objektovˇe orientovan´ y skriptovac´ı jazyk pouˇz´ıvan´ y jako interpretovan´ y programovac´ı jazyk pro tvorbu WWW str´anek. Na rozd´ıl od PHP je JavaScript interpretov´an na stranˇe klienta, takˇze vˇsechny skripty v tomto jazyce jsou pˇri spuˇstˇen´ı str´anky doˇcasnˇe staˇzeny do prohl´ıˇzeˇce. To zp˚ usobuje urˇcit´a bezpeˇcnostn´ı rizika, takˇze JavaScript napˇr´ıklad nem˚ uˇze pracovat se soubory. Obecnˇe plat´ı, ˇze HTML zajiˇst’uje obsah dokumentu, CSS jeho vzhled a JavaScript funkˇcnost. JavaScript byl p˚ uvodnˇe vyv´ıjen ve spoleˇcnosti Netscape v´ yvoj´ aˇrem Brendanem Eichem pod n´azvem Mocha. Poprv´e byl podporov´ an v beta verzi prohl´ıˇzeˇce Netscape Navigator 2.0 (vydan´ ym v z´aˇr´ı 1995) pod jm´enem
59
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
LiveScript. Jeho souˇcasn´ y n´ azev JavaScript vyvol´av´a dojem, ˇze m´a nˇeco spoleˇcn´eho s programovac´ım jazykem Java. Spoleˇcnou maj´ı pouze podobnou syntaxi, coˇz je d˚ usledkem toho, ˇze oba jazyky vych´ azej´ı z jazyka C++. Jednalo se tedy sp´ıˇse o marketingov´ y tah. V souˇcasnosti je JavaScript obchodn´ı zn´amkou spoleˇcnosti Oracle Corporation.
Obr. 4.4: Neofici´ aln´ı logo JavaScriptu pouˇzit´e na konferenci JSConf EU 2011
V aplikaci Culture je JavaScript pouˇz´ıv´an pˇredevˇs´ım k zobrazov´an´ı mapy a pr´aci s n´ı, k pr´aci s v´ ysledky PHP skript˚ u vracej´ıc´ıch v´ ysledky z datab´aze pomoc´ı AJAXu, k pr´aci s kalend´ aˇrem a d´ ale k pr´ aci s uˇzivatelsk´ ym prostˇred´ım.
4.3.1
Zobrazen´ı mapy a pr´ ace s n´ı
K pr´aci s mapou pouˇz´ıv´ am Google Maps JavaScript API V3, kter´e bylo podrobnˇe pops´ano v samostatn´e kapitole. Zde se tedy zamˇeˇr´ım hlavnˇe na konkr´etn´ı pˇr´ıklady pouˇzit´ı v aplikaci Culture. V aplikaci jsou dvˇe instance tˇr´ıdy Map. Prvn´ı z nich je mainMap a je zobrazena v hlavn´ım oknˇe aplikace pˇri naˇcten´ı str´anky, po kaˇzd´em vyhled´av´an´ı a pˇri volbˇe Mapa“ v hlavn´ım menu. Slouˇz´ı k zobrazov´an´ı m´ıst nalezen´ ych SQL dotazem. Druh´ a ” mapa, addPlaceMap, je souˇc´ ast´ı formul´aˇre pro pˇrid´av´an´ı m´ıst. Slouˇz´ı k v´ ybˇeru polohy nov´eho m´ısta. Obˇe dvˇe mapy jsou zobrazeny jako ROADMAP a maj´ı nastaven stˇred na stejn´e souˇradnice.
60
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
Obr. 4.5: Uk´ azka mapy s markerem a otevˇren´ ym informaˇcn´ım oknem Hlavn´ı mapa se inicializuje funkc´ı initializeMap(), kter´a obsahuje promˇennou mainMap Options s nastaven´ım mapy. Jedin´a vˇec, kterou funkce nakonec vykon´a, je zobrazen´ı mapy se zvolen´ ym nastaven´ım v prvku
definovan´ ym id mapCanvas. function initializeMap() { var mainMapOptions = { center: new google.maps.LatLng(48.975, 14.474), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }; mainMap = new google.maps.Map(document.getElementById("mapCanvas"), mainMapOptions); }
K inicializaci mapy addPlaceMap je pouˇzita funkce initializePlaceMap, kter´a je v z´ akladu totoˇzn´ a (v nastaven´ı je hodnota zoom nastavena na 15 a mapa je zobrazena v jin´em prvku
), ale nav´ıc mapˇe pˇrid´av´a Listener, kter´ y pˇri kliknut´ı do mapy vytvoˇr´ı marker. V k´ odu vypad´ a pˇrid´ an´ı Listeneru n´asledovnˇe: google.maps.event.addListener(addPlaceMap, ’click’, function(event) { addPlaceMarker(event.latLng); });
61
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
Pˇri kliknut´ı do mapy addPlaceMap je tedy spuˇstˇena funkce addPlaceMarker(location) s hodnotou parametru event.latLng, kter´a obsahuje souˇradnice m´ısta v mapˇe, kam uˇzivatel kliknul. Podobnou funkci jako je addPlaceMarker(event.latLng) vyuˇz´ıv´a i mapa mainMap. Jedn´ a se o funkci showMarker(location, p name, content, icon). Tato metoda m´ a kromˇe parametru location, kter´ y definuje polohu markeru, jeˇstˇe parametry p name a icon, kter´e obsahuj´ı n´ azev markeru a cestu k ikonˇe, a parametr content, kter´ y je uvnitˇr funkce pˇred´ av´ an d´ al funkci createInfoWindow(map, marker, content). Oproti tomu funkce addPlaceMarker(location) zobraz´ı marker bez n´azvu, bez informaˇcn´ıho okna a s implicitn´ı ikonou, ale souˇradnice markeru uloˇz´ı do HTML tag˚ u typu . Pˇri potvrzen´ı formul´aˇre pro pˇrid´an´ı m´ısta jsou tyto souˇradnice uloˇzeny do tabulky places jako poloha nov´eho m´ısta. Vˇsechny tyto funkce jsou rozeps´any zde: function showMarker(location, p_name, content, icon){ var marker = new google.maps.Marker({ position: location, map: mainMap, title: p_name, }); if (icon) { marker.setIcon(icon); } markersArray.push(marker); createInfoWindow(mainMap, markersArray[markersArray.length-1], content); }
function addPlaceMarker(location) { clearMarkers(addMarkersArray); var marker = new google.maps.Marker({ position: location, map: addPlaceMap }); addMarkersArray.push(marker); var coordsLatLng = addMarkersArray[0].getPosition(); document.getElementById("addNCoord").value = coordsLatLng.lat(); document.getElementById("addECoord").value = coordsLatLng.lng(); }
function createInfoWindow(map, marker, content){ var infowindow = new google.maps.InfoWindow({ content: content }); infoWindowsArray.push(infowindow);
62
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
google.maps.event.addListener(marker, ’click’, function() { for (var i = 0 ; i < infoWindowsArray.length; i++) { infoWindowsArray[i].close(); } infowindow.open(map, marker); }); }
Funkce createInfoWindow(map,marker, content) vytvoˇr´ı nov´e informaˇcn´ı okno a pˇrid´a mu Listener, kter´ y pˇri kliknut´ı na marker zavˇre vˇsechna otevˇren´a informaˇcn´ı okna a otevˇre jen to, kter´e je pˇriˇrazeno tomuto markeru.
4.3.2
Pr´ ace s AJAXem
Pod zkratkou AJAX se skr´ yv´ a Asynchronous JavaScript and XML“ a je to oznaˇcen´ı pro ” technologie, kter´e prov´ ad´ı zmˇeny ve str´ance dynamicky, tedy bez nutnosti znovunaˇc´ıt´an´ı. V aplikaci Culture je AJAX pouˇz´ıv´an k odesl´an´ı PHP skriptu a k dalˇs´ımu zpracov´an´ı textu, kter´ y PHP vyp´ıˇse. Jin´ ymi slovy – JavaScriptov´a funkce pˇrevezme hodnoty z HTML formul´aˇre, metodou GET je pˇred´ a PHP skriptu. V´ ysledky, kter´e PHP skript vyp´ıˇse konstruktem echo, uloˇz´ı do instance tˇr´ıdy XMLHttpRequest, se kterou potom m˚ uˇze JavaScript d´ale pracovat. Pouˇzit´ı XMLHttpRequestu v aplikaci Culture je vˇzdy reprezentov´ano t´ımto obecn´ ym k´ odem: var xmlhttp; xmlhttp.open("GET","skript.php?promenna1="+promenna1+"&promenna2="+promenna2,true); xmlhttp.send(); if (window.XMLHttpRequest) {// pro IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// pro IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var info = xmlhttp.responseText; // v´ ypis z~HTML je uloˇ zen do promˇ enn´ e info // dalˇ sı ´ zpracov´ an´ ı v´ ysledk˚ u JavaScriptem
63
ˇ CVUT v Praze
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
} }
V aplikaci Culture je PHP skriptem zpracov´an SQL dotaz a v´ ysledky jsou odesl´any jako ˇ text konstruktem echo. Clensk´ a metoda tˇr´ıdy XMLHttpRequest responseText tento text pˇrijme a d´ ale zpracuje.
4.3.3
Pr´ ace s kalend´ aˇ rem JsDatePick
Kalend´ aˇr, kter´ y se zobrazuje ve formul´aˇri pro vyhled´av´an´ı a ve formul´aˇri pro pˇrid´av´an´ı nov´ ych kulturn´ıch ud´ alost´ı, napsal v roce 2009 izraelsk´ y v´ yvoj´aˇr Itamar Arjuan a zpˇr´ıstupnil ho pod licenc´ı GNU General Public License. Pouˇzit´ı kalend´aˇre obn´aˇs´ı pˇrid´an´ı tˇechto dvou ˇr´ adek do hlaviˇcky k´ odu: <script type="text/javascript" src="js/jsDatePick.min.1.3.js">
T´ım je do dokumentu pˇrid´ an zdrojov´ y k´od kalend´aˇre. Kalend´aˇr je do dokumentu pˇrid´ an vytvoˇren´ım instance tˇr´ıdy JsDatePick s nastaven´ ymi vlastnostmi. V aplikaci Culture jsou n´asleduj´ıc´ım vlastnostem pˇrid´ any tyto hodnoty: • useMode:1 – nastaven´ı zobrazen´ı cel´eho kalend´aˇre rovnou (dalˇs´ı moˇznost je zobrazen´ı kalend´ aˇre aˇz po kliknut´ı do prvku c´ıle) • isStripped:true – nastaven´ı zobrazen´ı kalend´aˇre bez nadbyteˇcn´ ych ovl´adac´ıch prvk˚ u, jako je napˇr´ıklad pro tento pˇr´ıpad neˇz´adouc´ı kˇr´ıˇzek, kter´ y kalend´aˇr zavˇre • target:DOM element – nastaven´ı HTML prvku, ve kter´em bude kalend´aˇr zobrazen
T´ım je kalend´ aˇr zobrazen na str´ance. Dalˇs´ı vˇec´ı, kterou je d˚ uleˇzit´e oˇsetˇrit, je z´ısk´an´ı vybran´eho data. K tomu slouˇz´ı ˇclensk´a metoda getSelectedDate(). Vˇsechny funkce, kter´e jsou potˇreba k zobrazen´ı kalend´aˇre a z´ısk´an´ı vybran´eho data, jsou obsaˇzeny ve funkci initializeSearchCalendar() pro zobrazen´ı kalend´aˇre ve formul´aˇri pro vyhled´av´an´ı a ve funkci initializeAddCalendar() pro zobrazen´ı kalend´aˇre ve formul´aˇri pro pˇrid´av´an´ı kulturn´ıch akc´ı. Tyto funkce jsou spouˇstˇeny po vygenerov´an´ı odpov´ıdaj´ıc´ıho formul´aˇre.
64
ˇ CVUT v Praze
4.3.4
´ RE ˇ SEN ˇ ´I KAPITOLA 4. APLIKACE CULTURE – TECHNICKE
Pr´ ace s uˇ zivatelsk´ ym prostˇ red´ım
Prac´ı s uˇzivatelsk´ ym prostˇred´ı m´am na mysli bˇeˇznou funkˇcnost str´anky, jako to, ˇze pˇri potvrzen´ı formul´ aˇre pro vkl´ ad´ an´ı nov´ ych z´aznam˚ u je zobrazen kontroln´ı formul´aˇr, nebo ˇze pˇri v´ ybˇeru poloˇzky ze seznamu nalezen´ ych kulturn´ıch akc´ı jsou v hlavn´ım bloku zobrazeny podrobnosti o ud´ alosti a m´ıstˇe. To je ˇreˇseno vloˇzen´ım ud´alosti onClick k prvku dokumentu.
Tento tag vytvoˇr´ı tlaˇc´ıtko s popisem Log In“. Pˇri stisknut´ı tlaˇc´ıtka je spuˇstˇena funkce ” login(username, passwd) s hodnotami parametr˚ u pˇrevzat´ ymi z prvk˚ u definovan´ ych id username a pwd. Vzhled prvk˚ u dokumentu m´a v reˇzii CSS.
4.4
Vzhled a styly
Vzhled dokumentu zajiˇst’uje jazyk CSS, tedy Cascade Style Sheets“. Jazyk navrhl norsk´ y ” v´ yvoj´aˇr H˚ akon Wium Lie (v souˇcasnosti CTO ve spoleˇcnosti Opera Software) z podnˇetu standardizaˇcn´ı organizace W3C ( World Wide Web Consortium“), kter´a vyv´ıj´ı standardy ” pro World Wide Web. Smyslem CSS je oddˇelen´ı vzhledu dokumentu od jeho obsahu a funkˇcnosti. P˚ uvodnˇe mˇel vzhled zajiˇst’ovat HTML k´od a v nˇekter´ ych starˇs´ıch verz´ıch HTML opravdu obsahuje tagy, kter´e se staraj´ı i o vzhled str´anky. V dneˇsn´ı dobˇe je vˇsak standardem k zajiˇst’ov´ an´ı vzhledu str´ anky jazyk CSS.
K ˇreˇsen´ı vzhledu aplikace Culture byla pouˇzita ˇsablona Consistent, kterou jsem st´ahnul z webu http://www.freecsstemplates.org/ a upravil pro potˇreby aplikace. Jedn´a se o dvouˇ sloupcov´ y vzhled s pevnou ˇs´ıˇrkou a tmav´ ym barevn´ ym sch´ematem. Sablona je distribuov´ana zdarma pod licenc´ı Creative Commons Attribution 3.0.
65
ˇ CVUT v Praze
5
´ ER ˇ KAPITOLA 5. ZAV
Z´ avˇ er
V r´amci t´eto bakal´ aˇrsk´e pr´ ace byla vytvoˇrena aplikace, kter´a umoˇzn ˇuje vyhled´av´an´ı v datab´ azi, zobrazov´ an´ı v´ ysledk˚ u na mapˇe, pˇrid´av´an´ı nov´ ych z´aznam˚ u do datab´aze a obsahuje spr´ avu uˇzivatel˚ u. Prvky v aplikaci jsou uspoˇr´ad´any tak, aby aplikace byla pˇrehledn´ a a ovl´ad´ an´ı jednoduch´e.
Pˇri zpracov´ av´ an´ı t´eto pr´ ace jsem se nauˇcil pˇrem´ yˇslet nad probl´emy jin´ ym zp˚ usobem. Kl´ıˇcovou ˇc´ ast´ı ˇreˇsen´ı probl´emu je nalezen´ı nejlepˇs´ıho ˇreˇsen´ı. Jeho implementace do k´odu je potom uˇz sp´ıˇse jen manu´ aln´ı prac´ı. Na probl´em je potˇreba d´ıvat se komplexnˇe z pohledu cel´e aplikace a ne jenom z pohledu jednotliv´ ych ˇc´ast´ı. Kdyˇz jsem zaˇcal dodrˇzovat tato pravidla, pr´ ace mi ˇsla mnohem rychleji a probl´emy jsem ˇreˇsil efektivnˇeji. Kromˇe toho jsem si potvrdil svoji teorii, ˇze pˇri znalosti nˇekolika programovac´ıch jazyk˚ u je mnohem jednoduˇsˇs´ı nauˇcit se dalˇs´ı.
Aplikace Culture je v souˇcasn´em stavu provozuschopn´a, ale poˇr´ad je moˇzn´e ji vylepˇsit. Bˇehem pr´ ace jsem neust´ ale vym´ yˇslel novinky a vylepˇsen´ı a nˇekter´e z nich se mi do aplikace ve vymezen´em ˇcase podaˇrilo pˇridat. Mezi ty ostatn´ı patˇr´ı napˇr´ıklad: • Pˇrid´ an´ı moˇznosti editovat informace o kulturn´ıch ud´alostech a m´ıst tˇem uˇzivatel˚ um, kteˇr´ı je vytvoˇrili. • V podrobnostech o kulturn´ıch ud´alostech evidovat poˇcet uˇzivatel˚ u, kteˇr´ı se ud´alosti z˚ uˇcastn´ı. • Pro rychlejˇs´ı vkl´ ad´ an´ı kulturn´ıch akc´ı pˇridat moˇznost exportu kulturn´ıch akc´ı z aplikace Google Calendar. • Vytvoˇren´ı diskuze u kulturn´ıch ud´alost´ı a m´ıst pro zaregistrovan´e uˇzivatele. • Vytvoˇren´ı dalˇs´ıho opr´ avnˇen´ı, jehoˇz drˇzitel´e by mˇeli moˇznost psan´ı report´aˇz´ı a recenz´ı na kulturn´ı ud´ alosti. Ty by se zobrazovaly pˇri naˇcten´ı str´anky v hlavn´ım panelu aplikace. • Vytvoˇren´ı nov´e tabulky pro archivaci akc´ı, kter´e uˇz nejsou aktu´aln´ı. • Vytvoˇren´ı aplikace pro mobiln´ı zaˇr´ızen´ı.
66
ˇ CVUT v Praze
6
˚ KAPITOLA 6. SEZNAM CITAC´I A ZDROJU
Seznam citac´ı a zdroj˚ u
Citace 1. Google Places API References. In: Google Developers [online]. 2011 [cit. 2012-05-15]. Dostupn´e z: https://developers.google.com/maps/documentation/places/
Publikace • ZAKAS, Nicholas C., Jeremy MCPEAK a Joe FAWCETT. AJAX Profesion´ alnˇe. Brno: Zoner Press, 2007. ISBN 978-80-86815-77-0. • MOMJIAN, Bruce. PostgreSQL: praktick´y pr˚ uvodce. 1. vyd. Brno: Computer Press, 2003, 402 s. ISBN 80-722-6954-2.
Web • PostgreSQL 9.1.3 Documentation. POSTGRESQL GLOBAL DEVELOPMENT GROUP. Dokumentace PostgreSQL [online]. 2011 [cit. 2012-05-13]. Dostupn´e z: http://www.postgresql.org/files/documentation/pdf/9.1/postgresql-9.1A4.pdf • STACK EXCHANGE INC. Stack Overflow [online]. [cit. 2012-05-15]. Dostupn´e z: http://stackoverflow.com/ • REFSNES DATA. W3Schools [online]. 1999 [cit. 2012-05-15]. Dostupn´e z: http://www.w3schools.com/ • GOOGLE INC. Google Developers [online]. 2011 [cit. 2012-05-15]. Dostupn´e z: https://developers.google.com/ • PHP GROUP. PHP [online]. 2001 [cit. 2012-05-15]. Dostupn´e z: http://php.net/ • POSTGRESQL GLOBAL DEVELOPMENT GROUP. PostgreSQL [online]. 1996 [cit. 2012-05-15]. Dostupn´e z: http://www.postgresql.org/
67
ˇ CVUT v Praze
˚ KAPITOLA 6. SEZNAM CITAC´I A ZDROJU
• WIKIMEDIA. Wikipedia [online]. 2001 [cit. 2012-05-15]. Dostupn´e z: http://www.wikipedia.org/
