Webová fotogalerie. Olga Budnik

eské vysoké u£ení technické v Praze Fakulta elektrotechnická Katedra po£íta£·

Bakalá°ská práce

Webová fotogalerie

Olga Budnik

Vedoucí práce:

Ing. Radek Malinský

Studijní program: Softwarové technologie a management, Bakalá°ský

Obor: Web a multimedia

24. kv¥tna 2012

iv

v

Pod¥kování Tímto bych ráda pod¥kovala vedoucímu své bakalá°ské práce panu Ing. Radku Malinskému za vst°í£ný p°istup, v¥novaný £as a cenné rady, které mi pomohly p°i tvorb¥ této práce. Ráda bych také pod¥kovala své rodin¥ za morální podporu b¥hem studia a moºnost studovat vysokou ²kolu.

vi

vii

Prohlá²ení Prohla²uji, ºe jsem práci vypracoval samostatn¥ a pouºil jsem pouze podklady uvedené v p°iloºeném seznamu. Nemám závaºný d·vod proti uºití tohoto ²kolního díla ve smyslu 60 Zákona £. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o zm¥n¥ n¥kterých zákon· (autorský zákon).

V Praze dne 25. 5. 2012

.............................................................

viii

Abstract The subject of this bachelor thesis is the development of an application which allows users to exchange their photos via web pages. In particular, this application allows users to create albums, upload photos and publish them. The communication between users takes place by creating friend relationship. Thus, the users can limit access to their photos and exchange them with their friends only. In order to strengthen semantic and social aspects of the web, the elements of the third parties, i.e. Facebook and Google, were integrated. In whole, the application is easily accessible and user-friendly.

Abstrakt P°edm¥tem této bakalá°ské práce je vytvo°ení aplikace, která umoº¬uje uºivatel·m sdílet svoje fotograe pomocí webových stránek. Uºivatelé mají moºnost vytvá°et alba, do kterých pak budou nahrávat fotograe a ve°ejn¥ je sdílet. Aplikace poskytuje komunikaci mezi uºivateli pomocí vytvá°ení vztah· p°átelství. Díky tomu m·ºe uºivatel omezit p°ístupová práva ke svým fotograím a sdílet je jenom pro své p°átelé. Pro poskytnutí sociálních a sémantických aspekt· webu do aplikace byly integrovány prvky t°etích stran, a to Facebooku a Googlu. Celková aplikace je snadno ovladatelná a pochopitelná kaºdému uºivateli.

ix

x

Obsah 1

Úvod

1

2

Existující webové fotogalerie

3

2.1

Raj£e

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.2

Picasa

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.3

Facebook fotoalba

2.4

Zhodnocení

3

4 4

Analýza a návrh °e²ení

5

3.1

Poºadavky uºivatel·

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.2

Poºadavky systému . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.2.1

Funk£ní poºadavky . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.2.2

Nefunk£ní poºadavky . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

3.3

Uºivatelské role . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

3.4

P°ípady uºití

7

3.5

Pouºité technologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.5.1

7

3.5.2

3.6

3.7

4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.5.2.1

9

JQuery

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.5.3

Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.5.4

HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.5.5

CSS

3.5.6

MySQL

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Pouºité frameworky

10 10

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

3.6.1

RedBeanPHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

3.6.2

Nette Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

Teoretická informace

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

3.7.1

Sémantický web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

3.7.2

EXIF data

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

3.7.3

Open Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

Implementace

15

4.1

Vývojové prost°edí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

4.2

Struktura aplikace 4.2.1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

xi

xii

OBSAH

4.2.2

Kongurace a spou²t¥ní Nette . . . . . . . . . . . . . . . . . . . . . . .

16

4.2.3

Metody presenteru . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

4.2.4

ablonovací systém Latte

. . . . . . . . . . . . . . . . . . . . . . . . .

17

4.3

Pouºívání HTML 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

4.4

Databáze

4.5

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

4.4.1

Cizí a primární klí£ . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

4.4.2

UNIQUE a NOT NULL . . . . . . . . . . . . . . . . . . . . . . . . . .

19

4.4.3

Databázový model

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

4.4.4

Popis tabulek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

4.4.5

Popis vztahu

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

4.4.6

Realizace vztahu v RedBeanPHP . . . . . . . . . . . . . . . . . . . . .

23

Práce s fotograí

Nahrávání fotograí z pohledu uºivatele

4.5.2

Realizace nahrávání

4.5.3

Práce s rozm¥ry fotograí

6

. . . . . . . . . . . . . . . . .

4.5.4

Extrahování EXIF dat . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25 25 25 26 27

4.6

Propojení s Google Maps

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

4.7

Propojení s Facebookem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

4.8

TagCloud

32

4.6.1

5

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.5.1

Realizace nahrávání

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Testování

29

33

5.1

Lad¥ní aplikace v Nette

5.2

Test s uºivateli

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

5.2.1

Cíl testu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

5.2.2

Poºadovaná skupina participant· . . . . . . . . . . . . . . . . . . . . .

33

5.2.3

Screener . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34

5.2.4

Vybraná skupina participant· . . . . . . . . . . . . . . . . . . . . . . .

34

5.2.5

Pre a post test dotazníky

5.2.6

Výsledky testování a zhodnocení

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Záv¥r

34 34 35

A Seznam pouºitých zkratek

39

B

41

Dotazníky

B.1

C

Screener . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

B.1.1

Ve°ejná £ást screeneru . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

B.1.2

Neve°ejná £ást screeneru . . . . . . . . . . . . . . . . . . . . . . . . . .

42

B.2

Pre test dotazník . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42

B.3

Post test dotazník

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42

B.4

Seznam úkol· . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42

Instala£ní a uºivatelská p°íru£ka

43

C.1

Pot°ebné nastavení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

C.2

Postup p°i instalaci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

OBSAH

D Obsah p°iloºeného CD

xiii

45

xiv

OBSAH

Seznam obrázk· 3.1

Diagram p°ípad· uºití

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.2

Facebook Open Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

4.1

Struktura MVC aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

4.2

Databázový model

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

4.3

Uploader fotograí

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

4.4

Ukázka mapy

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

4.5

TagCloud

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

xv

xvi

SEZNAM OBRÁZK

Seznam tabulek B.1

Neve°ejná £ást screeneru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

xvii

42

xviii

SEZNAM TABULEK

Kapitola 1

Úvod V sou£asné dob¥ se díky své dostupnosti velice roz²i°ují digitální fotoaparáty. Skoro kaºdý £lov¥k vlastní mobilní telefon s integrovaným fotoaparátem. Díky tomu hojn¥ roste zájem o fotografování. Lidé fotografují zajímavé okamºiky svého ºivota, aby v budoucnu m¥li n¥jaké p°íjemné vzpomínky na minulost. Díky tomu má kaºdý na po£íta£i velké mnoºství fotograí, které chce ukázat svým známým, p°íbuzným a kamarád·m. lov¥k pak m·ºe fotograe vytisknout a p°eposílat ostatním, coº je ale náro£né, drahé a zabere to £as. Fotograe lze ale také posílat prost°ednictvím Internetu. Tento zp·sob je ur£it¥ jednodu²²í a rychlej²í, ale p°eposílat kaºdému £lov¥ku stejné fotky ve v¥t²ím po£tu také není ta nejlep²í varianta. Pro usnadn¥ní práce p°icházejí webové fotogalerie. Vybrané fotograe lze nahrát na webové stránky, p°idat k nim n¥jaký popis £i komentá° a sta£í v²em zájemc·m poslat jen odkaz na galerii. Podobných aplikací na Internetu existuje celá °ada. Cílem mé práce bylo vytvo°it a obohatit takovou galerii o dal²í webové prvky a posílit sémantické aspekty této aplikace. Aplikace je propojena s nejpouºívan¥j²í sociální síti Facebook, coº znamená, ºe fotograe se budou ²í°it mezi kamarády uºivatele a jejich známými mimo web samotné galerie. Dal²í d·leºitou vlastností je poskytnutí informací o samotné fotograi, v£etn¥ geo informací, které slouºí k zobrazení fotograí na map¥. Z kaºdé fotograe, po°ízené digitálním fotoaparátem se dají exportovat ur£itá data, tak zvané EXIF data, která v sob¥ obsahují informace o datu po°ízení fotograe, ohniskové vzdálenosti, nastavení clony apod. Takové informace by byly d·leºité t°eba pro zájemce o fotografování a pro fotografy. ást t¥chto dat tvo°í GPS data, která poskytují sou°adnice místa, kde byla daná fotograe po°ízena. Pomocí t¥chto sou°adnic se dá snadno zobrazit konkrétní pozice na map¥. V dané práci byla pouºitá mapa poskytnuta Google Maps.

1

2

KAPITOLA 1.

ÚVOD

Kapitola 2

Existující webové fotogalerie V této kapitole jsou popsané jiº existující webové fotogalerie, jejich základní vlastnosti a práce s nimi. Na konci je provedeno hodnocení a analýza,podle které se ur£í hlavní vlastnosti a poºadavky na fotogalerii.

2.1 Raj£e Nejpouºívan¥j²í a nejpopulárn¥j²í £eská webová fotogalerie je Raj£e.

1 Hned na úvodní stránce

je uveden odkaz na návod k práci s fotogalerií, který popisuje, co je pot°eba ud¥lat pro p°idávání fotograí do galerie. Pro práci s fotogalerií Raj£e se uºivatel musí nejd°íve zaregistrovat a p°ihlásit. Po p°ihlá²ení je uºivateli dostupná moºnost nahrávání fotograí. Fotograe je moºné nahrávat bu¤ p°ímo p°es stránky galerie, nebo je moºné stáhnout speciální program, který poslouºí pro úpravu alb a fotograí. Tento program je ale pot°eba nainstalovat, coº pat°í spí²e do nevýhod aplikace. Po zaloºení u£tu a p°ihlá²ení uºivatel zaloºí sv·j první album. Hned p°i vytvo°ení m·ºe nastavit p°ístupová práva a skrýt album pro ve°ejnost. Po vytvo°ení alba je do n¥j moºné nahrávat fotograe. Raj£e umoº¬uje hromadné nahrávání soubor·. Fotograe se p°i nahrávání zmen²í a nejde ji pak získat v p·vodní kvalit¥. Poté lze fotograe a alba libovoln¥ upravovat, nastavovat jim klí£ová slova, p°idávat popisky k fotograím apod. Uºivatelé mohou k fotograím p°idávat komentá°e, ozna£ovat alba a autory jako oblíbené a poté sledovat jejich aktuality. Album £i fotograi také lze sdílet pomocí Facebooku

2 nebo Twitteru 3 . Aplikace také umoº¬uje výpis metadat ke kaºdé fotograi.

K vyhledávání fotograí slouºí klí£ová slova, která se ale p°idávají k alb·m, ne k jednotlivým fotograím.

2.2 Picasa Picasa

4 je sluºba poskytovaná Googlem 5 pro v²echny své uºivatele. Je to sv¥toznámá a velice

pouºívaná aplikace, slouºící pro sdílení fotograí. Pro pouºívání galerie je pot°eba mít ú£et

Raj£e webová fotogalerie http://www.rajce.idnes.cz/ Facebook sociální sí´ http://www.facebook.com/ 3 Twitter sociální sí´ https://twitter.com/ 4 Picasa webová fotogalerie http://picasa.google.com/ 5 Google - internetová spole£nost http://www.google.com/ 1 2

3

4

KAPITOLA 2.

EXISTUJÍCÍ WEBOVÉ FOTOGALERIE

na Googlu, pomocí kterého se uºivatel p°ihlásí do galerie. Stejn¥ jako u fotogalerie Raj£e lze fotograe nahrávat p°ímo p°es webové stránky nebo pomocí desktopové aplikace. Je tu také moºnost nastavení soukromí alb. Fotograe a alba lze upravovat, komentovat, sdílet a hodnotit. U kaºdé fotograe se evidují informací získané z EXIF

6 souboru, pokud tato

data obsahuje. K fotograi lze p°idat klí£ová slova neboli tagy a také ozna£it fotograi na map¥.

2.3 Facebook fotoalba Facebook je nejznám¥j²í sociální sí´, která krom¥ komunikace mezi uºivateli poskytuje spoustu dal²ích zajímavých a uºite£ných sluºeb. Jednou z nich je sdílení fotograí. Uºivatel musí být registrován na Facebooku, poté m·ºe vyuºívat v²ech jeho sluºeb. Fotograe se p°idávají do alb stejn¥ jako u ostatních galerií. Album se vytvo°í b¥hem nahrávání fotograí a v²echny nastavení lze provést v jednom kroku. Facebook poskytuje mnoho moºností pro nastavení p°ístupových práv. Krom¥ klasických práv, která umoº¬ují p°ístupnost v²em, pouze mn¥ nebo jen pro p°átele, lze nastavit i ur£itý seznam uºivatel·, kte°í budou mít moºnost album zobrazit. Na kaºdé fotograi lze ozna£it uºivatele, kte°í jsou na ni zobrazeni. K fotograi lze p°idat popis a ozna£it ji na map¥. K fotograím mohou uºivatele psát komentá°e a sdílet ji pro své p°átele.

2.4 Zhodnocení Popisované galerie ur£it¥ nejsou jediné, které jsou uºivatel·m na internetu dostupné. Existuje i spousta dal²ích systému, lépe £i h·°e povedených. P°esto má v¥t²ina galerií stejný základ. Po registraci se uºivateli p°id¥lí ur£itý prostor, ve kterém m·ºe vytvá°et alba a nahrávat do nich fotograe. K fotograím pak m·ºe p°idat popisek a klí£ová slova. Ostatní uºivatelé mají moºnost fotograe prohlíºet a komentovat. Uºivatel p°ípadn¥ m·ºe omezit p°ístup ke svým fotograím a zobrazit je pouze p°átel·m £i vybraným skupinám lidí. Je dobré také evidovat u fotograí EXIF metadata, která jsou podrobn¥ji popsána v kapitole 3.7.2. Fotograi by m¥lo být moºné zobrazit na map¥. Na základ¥ provedené re²er²e vznikly ur£ité poºadavky, popsané v kapitolách 3.1 a 3.2.

6

Exchangeable Image File Format

Kapitola 3

Analýza a návrh °e²ení Tato kapitola popisuje analýzu a návrh °e²ení aplikace. Jsou v ní popsané základní poºadavky uºivatel· a systému, p°ípady uºití, pouºité technologie a frameworky. Také obsahuje krátký teoretický úvod o technologii Open Graph a EXIF datech.

3.1 Poºadavky uºivatel· Hlavní vlastnosti, které uºivatelé vyºadují od stránek, jsou p°ehlednost, rychlost a intuitivní ovládání. U fotogalerií je navíc d·leºité mít moºnost hromadného nahrávání fotograí. V¥t²ina uºivatel· chce p°idávat více fotograí do webového alba najednou. Musí být zaji²t¥na komunikace mezi uºivateli v podob¥ psaní komentá°· a hodnocení fotograí. Uºivatel m·ºe p°idávat jiné uºivatele do p°átel, pokud tak u£iní, novému p°íteli se otev°ou dosud pro ve°ejnost neviditelná alba. Uºivatel by m¥l mít moºnost alba a fotograe upravovat, kontrolovat k nim vztaºené komentá°e od jiných uºivatel·. O záznam informací o fotograi se uºivatel nemusí starat. V²echny pot°ebné informace za n¥j vypí²e systém pomocí extrahování dat z EXIF sekce fotograe. Uºivatel má mít také moºnost libovoln¥ editovat sv·j prol a nastavit si úrove¬ sdílení svých dat, a to bu¤ sdílet o sob¥ jenom základní informace, jakými jsou jméno a p°íjmení, nebo podrobn¥ji popsat svoje zájmy a záliby ve fotografování. M·ºe také p°idat více informací o sob¥ a uvést i n¥jaké kontakty.

3.2 Poºadavky systému Poºadavky systému se d¥lí na funk£ní a nefunk£ní neboli obecné a slouºí k zachycení chování aplikace. Funk£ní poºadavky popisují, co bude aplikace umoº¬ovat. Nefunk£ní poºadavky popisují návrhovou £ást, omezení a nároky kladené na samotnou aplikaci nebo systém.

3.2.1 Funk£ní poºadavky •

Vytvo°ení a správa uºivatelského ú£tu.

•

Vytvo°ení, správa a prezentace alb.

5

6

KAPITOLA 3.

ANALÝZA A NÁVRH EENÍ

•

Nahrávání více fotograí najednou.

•

Vytvá°ení náhled· k fotograím.

•

Ukládání fotograí v r·zném rozli²ení.

•

Vytvo°ení vztahu mezi uºivateli.

•

Nastavení p°ístupnosti alb a omezení.

•

P°idávání komentá°· a hodnocení.

•

Kontrola nevhodných komentá°· a fotograí.

•

Ukládání informací o fotograích a jejich následující zpracování.

•

azení fotograí do kategorií.

•

Propojení aplikace s t°etími stranami.

3.2.2 Nefunk£ní poºadavky •

Podpora £e²tiny.

•

Funk£nost aplikace ve v²ech prohlíºe£ích poslední verze.

3.3 Uºivatelské role •

Nep°ihlá²ený uºivatel. Uºivatel, který není registrován nebo se nep°ihlásil do aplikace pomocí svých p°ihla²ovacích údaj·. M·ºe procházet stránkami a prohlíºet si proly a fotograe uºivatel·, které jsou ve°ejné. Je pro n¥j také dostupné vyhledávání fotograí a m·ºe také n¥jakou fotograi nahlásit jako nevhodnou. Takto ozna£ená fotograe poté projde kontrolou administrátora. Nep°ihlá²ený uºivatel má moºnost se p°ihlásit £i zaregistrovat.

•

P°ihlá²ený uºivatel. Je uºivatel, který si na stránkách zaregistroval a p°ihlásil se. Jsou mu umoºn¥ny stejné p°ípady uºití jako nep°ihlá²enému uºivateli, ale navíc m·ºe nahrávat fotograe, editovat svoje alba a nastavovat k nim práva p°ístupu, editovat sv·j prol, p°idávat jiné uºivatele do p°átel, komentovat a hodnotit jejich fotograe.

•

Administrátor. Administrátor je v podstat¥ správce celé galerie. Odpovídá za editaci obsah·, kontroluje obsah komentá°· na nevhodná, sprostá slova, p°ípadn¥ je maºe. Kontroluje fotograe, jestli se na nich neobjevuje nevhodný obsah £i jestli neporu²ují autorská práva. Pokud ano, m·ºe takové fotograe smazat.

3.4.

7

PÍPADY UITÍ

3.4 P°ípady uºití Diagram p°ípad· uºití slouºí k popisu chování aplikace na základ¥ operací provád¥ných uºivatelem. Je rozd¥len podle uºivatelských rolí a odpovídá jednotlivým akcím uºivatele. Na obrázku 3.1 je znázorn¥n diagram p°ípad· uºití pro v²echny uºivatele. Nep°ihlá²ený uºivatel se m·ºe zaregistrovat, p°i£emº je po registraci rovnou p°ihlá²en. Tomu odpovídá ²ipka include na diagramu. Include znamená, ºe akce se musí v kaºdém p°ípad¥ provést. P°ihlá²ený uºivatel stejn¥ m·ºe jako nep°ihlá²ený uºivatel vyhledávat fotograe. Sou£ástí tohoto p°ípadu uºití m·ºe fotograe prohlíºet. Odli²nost od nep°ihlá²eného uºivatele je v moºnosti p°idávání komentá°· nebo ud¥lení hodnocení. T¥mto dv¥ma p°ípad·m uºití odpovídá ²ipka extend na diagramu, coº znamená, ºe akce m·ºe, ale nemusí být provedena. Extend je také pouºíván i v dal²ích p°ípadech uºití. P°ihlá²ený a nep°ihlá²ený uºivatel si m·ºe prohlíºet prol jiného uºivatele, p°ihlá²ený uºivatel ho navíc m·ºe p°idat do p°átel. P°ihlá²ený uºivatel si m·ºe zaloºit album, do kterého pak m·ºe p°idat fotograe. Ke kaºdé fotograi m·ºe p°idat název, popisek a klí£ová slova. P°ihlá²ený uºivatel a administrátor mají n¥které p°ípady uºití spole£né. Mohou mazat fotograe a komentá°e, které p°edtím vybrali. P°ihlá²ený uºivatel má také moºnost smazat celé album a nahlásit nevhodnou fotograi, která pak bude zkontrolována administrátorem. M·ºe také upravovat sv·j prol a editovat osobní informace. P°ihlá²ený uºivatel a administrátor se mohou ze systému odhlásit.

3.5 Pouºité technologie V této kapitole jsou podrobn¥ rozebrány technologie pouºité p°i tvorb¥ aplikace.

3.5.1 PHP PHP

1 skriptovací jazyk pro v²eobecné ú£ely programování, který se zna£n¥ pouºívá pro

vývoj webových aplikací a skriptovaní na stran¥ serveru [11]. V sou£asné dob¥ je podporován p°eváºnou v¥t²inou poskytovatel· hosting· a pat°í mezi lídry programovacích jazyk·, které se pouºívají k programování dynamických webových stránek. PHP pouºívají stovky tisíc vývojá°· a jsou na n¥m postaveny nejv¥t²í webové projekty, p°íkladem mohou slouºit Facebook a Wikipedia. Svoji popularitu v oblasti skriptovacích jazyk· PHP získalo díky své jednoduchosti, rychlosti, výkonu a bohaté funk£nosti a také existenci velké sady vestav¥ných nástroj· pro vývoj webových aplikací. PHP podporuje v¥t²ina opera£ních systém·, v£etn¥ Linuxu a mnohých modikací Unixu, a je do n¥j za°azena podpora v¥t²iny webových server·. PHP generuje nejenom HTML stránky, ale také obrázky, PDF

2

3 soubory a dokonce i ash animace. Dal²í výhodou jazyka je

spolupráce s velkým mnoºstvím databázových systém· (nap°. MySQL, SQLite, PostgreSQL,

PHP: Hypertext Preprocessor HyperText Markup Language 3 Portable Document Format 1 2

8

KAPITOLA 3.


Obrázek 3.1: Diagram p°ípad· uºití

3.5.

POUITÉ TECHNOLOGIE

Oracle, ODBC

9

4 a spousta dal²ích). PHP také podporuje objektov¥ orientované programo-

vání, jehoº plná podpora byla zavedena aº od páté verze.

3.5.2 JavaScript JavaScript je objektov¥ orientovaný skriptovací jazyk [2]. Pomáhá vytvá°et internetové stránky ºivými. Je nej£ast¥ji pouºíván, jako vestav¥ný jazyk pro p°istup k jednotlivým objekt·m aplikace. Pouºívá se na stran¥ klienta (v prohlíºe£i uºivatele). Skript se p°ipojuje p°ímo k HTML dokumentu a spou²tí se hned po na£tení stránky. JavaScript umoº¬uje spoustu v¥cí, nap°íklad p°idávat £i mazat HTML tagy, m¥nit styly element·, reagovat na události provád¥né uºivatelem, dynamicky ov¥°ovat data od uºivatele na validnost bez odesílání na server a mnoho dal²ího. JavaScript je rychlý a výkonný jazyk, ale má i n¥která omezení. Neumí £íst a nahrávat soubory na lokální disk, nem·ºe spou²t¥t instalaci jakýchkoliv program·, a to z d·vodu bezpe£nosti uºivatele, aby úto£ník nemohl získat p°ístup k osobním dat·m uºivatele nebo po²kodit data na jeho po£íta£i.

3.5.2.1

JQuery

JQuery je knihovna zaloºená na spolupráci JavaScriptu a HTML. Umoº¬uje snadný p°ístup k element·m DOM s Ajaxem

6.

5 a následnou práci s nimi. Má také propracované rozhrání pro práci

3.5.3 Ajax Ajax je sada technik pro vývoj rozhraní, která umoº¬uje dynamicky posílat poºadavky na server bez viditelného znovu na£tení stránky, £ili uºivatel neví, ºe jeho prohlíºe£ ºádá £i posílá n¥jaká data [8]. To znamená, ºe probíhá asynchronní komunikace mezi klientem a serverem. Hlavní výhody Ajaxu:

•

et°í provoz díky tomu, ºe se na£ítá jenom jedna zm¥n¥ná £ást stránky, v¥t²inou ne moc velká.

•

Sniºuje zatíºení serveru.

•

Zrychluje práci rozhraní a tím pádem uºivatel m·ºe rychleji vid¥t výsledek provedených zm¥n.

Tato technologie se stala nejvíce populární zejména po její vyuºití spole£ností Google (nap°íklad v Google Maps

7 ).

Open Database Connectivity Document Object Model 6 Asynchronous Javascript and XML 7 http://maps.google.com/ 4 5

10

KAPITOLA 3.


3.5.4 HTML HTML je standardní zna£kovací jazyk dokument· ve World Wide Web [14]. V¥t²ina webových stránek je vytvo°ena pomocí tohoto jazyka. HTML dokument ur£uje, jak a jaké elementy mají být zobrazené na HTML stránce. Internetový prohlíºe£ pak tento dokument zpracuje a zobrazí stránku v £itelné podob¥. Od poslední verze 4.01 se v HTML jasn¥ odd¥lují sémantika jednotlivých £ásti webu od jejich vzhledu. Vzhled stránek se musí upravovat pomocí technologii CSS

8.

V sou£asné dob¥ se také pouºívá nová verze HTML 5, která je ale stále ve vývoji. Jejím hlavním cílem je zlep²it jazyk pomocí p°idání nových uºite£ných tag·, roz²í°ení o podporu multimediálních aplikací a oine aplikací [10]. Posiluje sémantickou stranu webové aplikace. Zahrnuje HTML 4 a JavaScript. Tento standard je £áste£n¥ podporován posledními verzemi prohlíºe£·.

3.5.5 CSS CSS je formální jazyk, který se pouºívá pro popis vzhledu dokumentu, napsaného v zna£kovacím jazyce. Popisuje tedy vzhled HTML, XHTML

9 a XML 10 dokument·. V podstat¥ je

to sada parametr· formátování, která se aplikuje na elementy dokumentu za ú£elem zm¥ny jejich vzhledu [13]. CSS pouºívají tv·rci webových stránek pro úpravu vzhledu stránek. Pomocí CSS se dají m¥nit barvy, nastavovat r·zná písma, m¥nit rozmíst¥ní jednotlivých blok· na stránce apod. CSS umoº¬uje vytvá°et tentýº dokument v r·zných vzhledech nebo pro r·zné výstupy, nap°íklad, odli²ný výstup pro obrazovku a pro tiskárnu. CSS se výborn¥ hodí k odd¥lení logické £ásti aplikace od jejího zobrazení. Díky CSS se zkracuje £as na£ítání stránky, protoºe pravidla zobrazení dat se posouvají do samostatného CSS souboru. Pro p°ípadnou zm¥nu není pot°eba m¥nit celou stránku, sta£í zm¥nit pouze kaskádový styl. CSS umoº¬uje r·zné zp·soby °azení do bloku a následujícího formátování, nap°íklad obtékaní bloku s menu stránky. Poslední verze CSS, která je stále ve vývoji, je CSS 3. Je hodn¥ roz²í°ená v porovnání s p°edchozími verzemi a obsahuje spoustu novinek, které umoº¬ují vytvá°et stránky s je²t¥ lep²ím vzhledem. CSS ale má i svoji nevýhodu a to r·zné zobrazení v r·zných prohlíºe£ích, zejména v jejich star²ích verzích.

3.5.6 MySQL MySQL je multiplatformní rela£ní databázový systém, se kterým se komunikuje pomocí dotazovacího jazyka SQL

11 . V¥t²inou se pouºívá jako server, na který se obracejí jak lokální

tak i vzdálené klienti. MySQL podporuje velké mnoºství typu tabulek, nap°íklad MyISAM a InnoDB.

Cascading Style Sheets Extensible Hypertext Markup Language 10 eXtensible Markup Language 11 Structured Query Language 8 9

3.6.

11

POUITÉ FRAMEWORKY

3.6 Pouºité frameworky Tato kapitola obsahuje teoretický rozbor pouºitých framework·, pro£ byly vybrány a v £em je jich výhoda.

3.6.1 RedBeanPHP ORM

12 je programovací technologie, která spojuje databáze s objektov¥ orientovaným pro-

gramováním a vytvá°í tím virtuální objektovou databázi. Hlavním cílem ORM je transformace objekt· aplikace do podoby vhodné pro ukládání do rela£ní databáze a také transformace rela£ního modelu do objektového s uloºením vlastností objekt· a vztahu mezi nimi [4]. Existují r·zné frameworky pro práci s ORM. RedBeanPHP

13 je jedním z nich. Jak °í-

kají jeho vývojá°i, modelování dat musí být snadné, hbité a navíc zábavné [22]. Na rozdíl od základních ORM framework·, jako je nap°íklad Doctrine

14 , RedBeanPHP nepot°ebuje

manuální konguraci objekt·. Tento Framework vytvá°í on the y tabulky, pole a indexy. RedBeanPHP umoº¬uje denovat modely, kdykoli bude pot°eba. Framework snadno propojí libovolný objekt s jiným objektem. Mezi databázovými systémy, které framework podporuje, pat°í MySQL, SQLite a Postgres. Navíc je to open source knihovna s dob°e napsanou dokumentací a obsahuje jenom jeden soubor se v²emi pot°ebnými funkcemi.

3.6.2 Nette Framework P°i programování bakalá°ské práce byl pouºít PHP framework, který výrazn¥ zrychlíl vývoj aplikace. Rozhodovalo se mezi t¥mito £ty°mi frameworky: Zend Framework

15 , CakePHP

16 , CodeIgniter 17 a Nette Framework 18 . V²echny zmín¥né frameworky jsou mezi sebou 19 model, podporují práci podobné v n¥kterých základních v¥cech, nap°íklad realizují MVC s r·znými databázovými systémy a jsou open source. Pro ú£ely této práce byl zvolen Nette Framework. Hlavním rozhodujícím kritériem bylo to, ºe je framework napsán £eským programátorem, a proto má £eskou dokumentaci s kompletní £eskou podporou. Obsahuje také spoustu uºite£ných plugin·

20 , má své fórum 21 , na

kterém se vývojá° m·ºe ptát na cokoliv a v pom¥rn¥ krátké dob¥ dostane odpov¥¤ a jsou k n¥mu i video návody a p°edná²ky v £e²tin¥ [20]. Dal²í výhoda je pouºití ladicích nástroj·, které pomáhají odhalit a o²et°it jakékoliv chyby. Bezpe£nost je také na vysoké úrovni. Nette Framework má ochranu nap°íklad proti XSS

Object-relational mapping http://redbeanphp.com/ 14 www.doctrine-project.org/ 15 http://framework.zend.com/ 16 http://cakephp.org/ 17 http://codeigniter.com/ 18 http://nette.org/cs/ 19 Model View Controller 20 dopl¬ky 21 http://forum.nette.org/cs/ 22 Cross Site Scripting

12

13

22

12

KAPITOLA 3.

a CSRF


23 útok·m, session hackingu a podobn¥. Je pln¥ objektový a vyuºívá vlastní ²ablo-

novací systém. Nette Framework je nejpopulárn¥j²í a nejpouºívan¥j²í framework v eské Republice, a dokonce jsou v n¥m vytvo°ené i stránky £eského prezidenta.

3.7 Teoretická informace Tato kapitola p°edstavuje krátký teoretický úvod. Jsou v ní popsány základní pojmy, které jsou nutné k pochopení této práce.

3.7.1 Sémantický web Za posledních n¥kolik let se web velice rychle vyvíjel. Nyní je zapln¥n informacemi. Díky jeho popularit¥ roste i objem p°ená²ených dat. V sou£asné dob¥ není formát p°edstavení informací optimalizovaný pro vyhledávací mechanismy a prohlíºe£e. Kv·li tomu nastávají komplikace p°i vyhledávání pot°ebné informace a obnovení databází vyhledávácích systému je neefektivní [3]. Jako °e²ení p°ichází sémantický web, coº je nová technologie zp·sobu poskytování informací na internetu v podob¥, která je vhodná pro strojové zpracování. Jeho cílem je strukturovat informace a usnadnit vyhledávání a zpracovávání dat. Podle tv·rc· musí sémantický web zajistit pochopení informací po£íta£i. Poté po£íta£ dle ur£itých kritérií vybere nejvhodn¥j²í data a nakonec poskytne informace uºivatel·m. Tímto zp·sobem se místo analýzy textového obsahu pouºívá speciální standard RDF

24 , popisující sémantické grafy, které ob-

sahují mezi sebou propojené uzly (objekty). P°íkladem takového sémantického grafu m·ºe slouºit Facebook Open Graph popsaný v kapitole 3.7.3.

3.7.2 EXIF data EXIF je standard, který umoº¬uje p°idávat k obrázk·m a dal²ím multimediálním soubor·m bliº²í informace (metadata) [9]. Tyto informace podrobn¥ji popisují soubor, nap°íklad datum vytvo°ení, pouºité podmínky, autorství apod.EXIF standard za£al být velice pouºívaný díky roz²i°ování digitálních fotoaparát·, které automaticky p°idávají do fotograí metadata. Poslední verze standardu je EXIF 2.2. Zahrnuje technologii automatického spravování barev a zpracování obrazu v souladu s nastavením p°i natá£ení £i fotografování pro následující tisk a zobrazení na displeji. Textová £ást sekce EXIF souboru popisuje ur£itý parametr a jeho hodnotu. Tato data lze poté získat pomocí r·zných nástroj· a program· a pouºit podle vlastních pot°eb. Také obsahuje i GPS

25 záznam o míst¥, kde byla fotograe po°ízena. Aby fotoaparát p°idal

k fotograi GPS data, je nutné, aby m¥l v sob¥ zabudovaný anebo externí GPS modul, který musí být v okamºiku fotografování zapnutý.

Cross Site Request Forgery Resource Description Framework 25 Global Positioning System

23

24

3.7.

TEORETICKÁ INFORMACE

13

3.7.3 Open Graph Open Graph je sociální pavu£ina, která spojuje uºivatele v jedinou sí´ a zahrnuje jejich zájmy, záliby a aktivity. Open Graph umoº¬uje aplikacím modelovat uºivatelské aktivity na základ¥ objekt·. Objektem se jeví n¥co, nad £ímº se provádí n¥jaká akce (aktivita). Objektem m·ºe být nap°íklad stránka [16]. Nejznám¥j²ím p°íkladem pouºití Open Graphu je sociální sí´ Facebook, která poskytuje vývojá°·m sadu nástroj· pro vytvo°ení vlastních objekt· a aktivit. Facebook Open Graph je znázorn¥n na obrázku 3.2.Jakmile se uºivatel p°ípojí k aplikaci, v²echny události spojené s p°ipojením se budou zobrazovat na jeho Facebook prolu a ostatní uºivatelé je mohou sledovat. Open Graph je zaloºen na Open Graph protokolu. Open Graph

Obrázek 3.2: Facebook Open Graph

protokol umoº¬uje p°ipojit webové stránky do sociálního grafu [18]. Aby se toto p°ipojení uskute£nilo, je pot°eba dodat meta tagy do stránky, které z ní vytvo°í uzel Open Graphu a také p°idat tla£ítko líbí se na webové stránky. Po kliknutí na toto tla£ítko se naváºe kontakt mezi stránkou webu a Facebook stránkou uºivatele, který na tla£ítko kliknul.

14

KAPITOLA 3.


Kapitola 4

Implementace V kapitole je popsána implementace aplikace. Popisuje vývojové prost°edí, strukturu aplikace, databázový model a práci s databází pomocí ORM frameworku RedBeanPHP. Kapitola zahrnuje popis implementace nejd·leºit¥j²ích £ásti webu, integraci s t°etími stranami a °e²ení vzniklých problém·.

4.1 Vývojové prost°edí Existuje spousta r·zných editor· a vývojových prost°edí, které umoº¬ují programování v PHP. Jedním z nich je Netbeans IDE

1 , které bylo pouºito i p°i vývoji této aplikace. Jako

jeho výhody m·ºeme jmenovat tvorbu p°ehledného kódu, umoºn¥ní napovídání, zobrazení PHP dokumentace a o²et°ení chyb.

4.2 Struktura aplikace 4.2.1 MVC MVC je návrhový vzor slouºící pro odd¥lení datového modelu, uºivatelského rozhrání a aplika£ní logiky. Na obrázku 4.1 je znázorn¥na struktura MVC aplikace. Model obsahuje data, nap°íklad získané z databáze, a metody práce s nimi. Reaguje na dotazy a v souvislosti s nimi m¥ní sv·j stav. Získaná data posílá dál. Model neobsahuje informací o tom, jak se data zobrazují. View neboli pohled slouºí pro zobrazení dat a stavu modelu v jasné a srozumitelné podob¥ uºivateli. Pomocí View nelze p°ímo m¥nit data. K tomuto ú£elu slouºí komponenta Controller. Controller neboli °adi£ je prost°edek, s jehoº pomocí uºivatel komunikuje se systémem. Je také °ídícím elementem slouºícím pro vým¥nu dat mezi modelem a pohledem. Controller p°ijme poºadavek uºivatele, zpracuje ho a po²le dotaz na model. Tím získá pot°ebná data a p°edá je pro vykreslování pohledu. V Nette Frameworku je obdobou Controlleru Presenter. 1

http://netbeans.org/

15

16

KAPITOLA 4.

IMPLEMENTACE

Obrázek 4.1: Struktura MVC aplikace

Pohled a °adi£ jsou závislé na modelu, ale model na nich závislý není. Toto umoº¬uje rozd¥lení architektury do t°ech vrstev. Model se staví nezávisle od vizuálního p°edstavení a také m·ºe existovat n¥kolik pohled· pro stejný model. Soubory obsahující modely a presentery mají p°íponu *.php a obsahují t°ídy s názvem odpovídajícím názv·m model· nebo presenter·. Pro zobrazení dat v Nette slouºí ²ablonovací systém Latte, který usnad¬uje vykreslování dat do HTML stránky pomocí pouºití takzvaných maker. Tyto soubory mají p°íponu *.latte. ablonovací systém Latte a práce s ním je podrobn¥ji popsán ve podkapitole 4.2.4. V systému jsou evidované dva modely. Model Model slouºí pro zpracování poºadavk· od uºivatele, model AdminModel zpracovává poºadavky administrátora.

4.2.2 Kongurace a spou²t¥ní Nette O konguraci se stará soubor cong.ini, ve kterém se nastavují prom¥nné, sluºby a parametry p°ipojení databáze. Ukázka nastavení databáze:

1 2 3

db . dsn=" mysql : h o s t=l o c a l h o s t ; dbname=g a l l e r y " db . u s e r=" r o o t " db . p a s s=" " V²echny poºadavky prohlíºe£e jdou p°es soubor index.php. Ten se nachází v p°ístupném adresá°i a obsahuje hlavn¥ konstanty nastavující cesty k adresá°·m aplikace. Posledním °ádkem se p°idá °ízení aplikace do souboru bootstrap.php. Soubor bootstrap.php slouºí ke spu²t¥ní aplikace. Na£te se v n¥m samotný framework, loadery a Lad¥nka, nastaví se routování, vytvo°í se p°ipojení k databázi a denují se základní modely. Jako první se na£te framework, pak RobotLoader. T°ída RobotLoader zaji²´uje automatické na£ítání v²ech zdrojových soubor· a t°íd podle pot°eby. Pak se z na£teného kongura£ního souboru získají údaje pot°ebné k p°ipojení k databázi. Tyto parametry jsou p°edané metod¥

setup()

RedBeanPHP a vytvo°í se spojení s databází. Dále se nastaví

routování, jako výchozí stránka se nastaví stránka Homepage s akci slouºí k p°eloºení HTTP

default().

Routování

2 poºadavku do podoby, které bude rozum¥t framework. Pomocí

routování se ur£í, který Presenter má poºadavek zpracovat. Stejn¥ tak vybere i metodu v£etn¥ vstupních parametr·. Nakonec se celá aplikace spustí pomocí p°íkazu 2

Hyper Text Transfer Protocol

$application->run().

4.2.

17

STRUKTURA APLIKACE

4.2.3 Metody presenteru V presenteru se dájí vytvá°et t°i typy metod, t¥mi jsou Metoda render se deklaruje jako

action(), handler()

a

render().

renderView(), kde view je název ²ablony. Tato metoda je

pouºívaná nej£ast¥ji a slouºí pouze pro p°edání dat ²ablon¥ a jejich následnému vykreslování. Jednoduchým p°íkladem slouºí funkce pro vypsání nov¥ p°idaných fotograí.

1 2 3

f u n c t i o n renderNewPhotos ( ) { $ t h i s −>template −>p h o t o s = $ t h i s −>model−>showNewPhotos ( ) ; }

$photos, do které se p°idá pole hodnot získané z databáze. Metoda action je deklarována jako action() a podobá se metod¥ render(). Na rozdíl od ní je ale ur£ena jen pro zpracování poºadavku p°ijatých od uºivatele, ablon¥ NewPhotos se nastaví prom¥nná

ale nic nevypisuje a nevykresluje. Pouºívá se nap°íklad pro p°ihlá²ení nebo odhlá²ení uºivatele. Metoda

action()

render()

a jde v ní nastavit p°esm¥rování

handle<Signal>()

a slouºí pro zpracovávání signál·

se volá d°ív neº metoda

na jiný pohled. Metoda handle je deklarována jako

neboli událostí, které musejí být provedené bez znovuna£tení pohledu. V¥t²inou je pouºita pro zpracování AJAX poºadavk·.

4.2.4 ablonovací systém Latte Jak jiº bylo zmín¥no, Nette vyuºívá vlastní ²ablonovací systém. Jeho výhodou je, ºe umoº¬uje snadno a rychle pracovat s prom¥nnými uvnit° ²ablon. Vloºené prom¥nné se automaticky escapují

3 , coº p°iná²í zabezpe£ení proti útok·m XSS. Vývojá° uº nemusí p°idávat jinou

ochranu proti t¥mto útok·m. Hlavní ²ablona, která obsahuje prvky spole£né pro v²echny ostatní stránky, se nazývá layout.latte. Je v ní denována HTML hlavi£ka, p°ipojuje se hlavní JavaScript soubory a vytvá°í se spole£ná HTML kostra. Bloky, které se budou m¥nit v závislosti na stránce, jsou indikovány pomocí sloºených závorek, do kterých se vloºí název bloku. Nap°íklad pro vloºení bloku content, který bude odpovídat hlavnímu obsahu stránky, slouºí p°íkaz

#content}.

{include

Analogicky se vkládají i prom¥nné získané z presenteru, podmínky a cykly.

Kaºdé stránce webu musí odpovídat jedna ²ablona. Kaºdý presenter ale m·ºe pracovat s více ²ablonami. Pro práci s fotograí slouºí nap°íklad presenter PhotoPresenter, kterému odpovídají r·zné ²ablony, nap°íklad ²ablona NewPhotos pro p°idání fotograí a ²ablona Photo pro zobrazení jednotlivé fotograe. Odkaz na presenter se vytvo°í pomocí následujícího p°íkazu:

Editovat Album:editAlbum je odkaz na metodu tod¥ p°idává parametr

$id_album,

editAlbum()

presenteru Photo, p°itom se me-

odpovídající ID alba. Vygenerovaný odkaz bude mít po-

dobu relativní cesty. 3

Escapování - p°evedení znak· majících speciální význam na jiné odpovídající sekvence.

18

KAPITOLA 4.

IMPLEMENTACE

4.3 Pouºívání HTML 5 P°i tvorb¥ aplikace byl pouºit jazyk HTML5, který slouºí k posílení sémantických aspekt· webu. HTML je p°eváºn¥ pouºíván p°i tvorb¥ struktury stránky. V HTML5 se objevily nové elementy, které slouºí pro nahrazování element·

4

s atributy

class nebo id.

Na rozdíl od HTML4 se pouºití nových element· denuje obsahem dokumentu, namísto jeho vn¥j²í reprezentace. Elementy typu

v sob¥ nemají ºádnou sémantiku. Nové elementy

HTML5 poskytují prohlíºe£·m konkrétní informaci o tom, kde a co se na stránce nachází.

je . Takové objevení doctype je krat²í a p°ehledn¥j²í

HTML5 dokument má rozdílnou denici. Na za£átku dokumentu p°ed tagem nutné uvést pouze °ádek

a hlavn¥ p°epíná reºim na standardní ve v²ech moderních prohlíºe£ích. V prohlíºe£i se ve standardním reºimu snaºí zobrazovat dokumenty v souladu se zadanou specikací [7]. Nyní budou popsány základní HTML5 tagy pouºité p°i tvorb¥ aplikace. Tag

odpovídá záhlaví stránky nebo její £ásti. Krom¥ záhlaví m·ºe obsahovat

logotyp, naviga£ní menu nebo vyhledávácí formulá°.

,

Dal²ím tagem je tag

který je podoben tagu

,

ale slouºí pro denici

pati£ky stránky. V¥t²inou obsahuje jméno autora, autorská práva, kontaktní informace apod. Jednotlivé £ásti stránky (nap°íklad £lánky) mohou také obsahovat tagy

a

nezávislé na stejnojmenných tazích celé stránky. Nový strukturní prvek

je pouºíván k vytvo°ení naviga£ního panelu na webových

stránkách. Na stránce se m·ºe vyskytovat i vícekrát. Naviga£ní panel, vytvo°ený pomocí tagu

obsahuje odkazy na jiné stránky webu, ale nemusí se v n¥m vyskytovat odkazy na

jiný web, reklamu, apod. Blok odkaz· uvnit° naviga£ního panelu je tvo°en pomocí klasického seznamu reprezentovaného elementy Tag

5 pro ne£íslovaný seznam nebo
6 pro £íslovaný.

slouºí jako obal takového seznamu a ukazuje vyhledávácím stroj·m, ºe v tomto

bloku se nachází navigace stránek. Velký význam má nový prvek

<article>.

Je pouºíván na stránkách obsahujících mnoho

informací (nap°íklad £lánk· nebo komentá°·) k ozna£ení jednotlivých nezávislých £ásti stránky. To znamená, ºe obsah uvnit° tohoto elementu m·ºe být zve°ejn¥n v jiných zdrojích bez zve-

<article> m·ºe mít <article>. Tag <article> m·ºe

°ejn¥ní zbytku stránky. Element

vlastní záhlaví a pati£ku, které musí

být uvedeny uvnit°

být pouºíván na stránkách vícekrát.

Obsah umíst¥ný uvnit° tohoto elementu se vizuáln¥ neodli²uje, ale usnad¬uje pochopení stránky vyhledáva£i a prohlíºe£i. Dal²í d·leºitý tag je

<section>.

Tento element slouºí k ozna£ení logicky souvisejícího

obsahu. Slouºí také pro rozd¥lení stránky na sekce, v £emº je podoben elementu tagu

.

Od

se li²í tím, ºe v sob¥ nese sémantický smysl obaluje elementy se shodným

smyslem. Je d·leºité odli²ovat tyto dva tagy, nebo´ tag nikoliv k ozna£ení logického a sémantického obsahu. Tag jako obal n¥kolika tag·

<article>.

Element

<section>

v¥t²inou slouºí k <section> m·ºe slouºit

stylování, nap°íklad

ve v¥t²in¥ p°ípad· musí obsahovat

záhlaví.

<section> a <article> pouºity k ozna£ování
k popsání základní struktury stránek.

V této práci byly tagy

,

a

http://www.w3.org/wiki/HTML/Elements/div http://www.w3.org/wiki/HTML/Elements/ul 6 http://www.w3.org/wiki/HTML/Elements/ol 4 5

komentá°·, tagy

4.4.

DATABÁZE

19

4.4 Databáze Pro ukládání dat byla pouºita databáze MySQL [1]. Pro práci s touto databázi byl vyuºit ORM framework RedBeanPHP usnad¬ující práci díky vytvo°ení tabulek on the y. Kaºdý °ádek tabulky se dá pouºívat jako jednotlivý objekt. Sloupce tabulky odpovídají vlastnostem objektu. V RedBeanPHP se objekt·m databáze °íká bean. Tabulky, jak uº bylo zmín¥no, se vytvá°ejí za letu. RedBeanPHP umoº¬uje p°idat tabulku do databáze, jakmile do ní pot°ebujeme uloºit první záznam. Tím se zbavíme nutnosti psát SQL dotazy na vytvo°ení tabulek nebo jejich manuálního vytvá°ení. Následující °ádek slouºí pro p°ipojení k databázi pomocí RedBeanPHP.

$ r b _ c o n n e c t i o n = R : : s e t u p ( $db [ ' dsn ' ] , $db [ ' u s e r ' ] , $db [ ' p a s s ' ] ) Pole

$db

je získáno z kongura£ního souboru a obsahuje údaje pot°ebné pro p°ipojení:

jméno serveru a databáze, uºivatelské p°ístupové jméno u uºivatelské p°ístupové heslo. P°i návrhu databáze se nejd°ív musí rozhodnout, jaké tabulky budou pot°eba a jaká data v nich budou uloºená. Typ dat ur£uje ORM framework podle hodnoty, kterou do databáze ukládáme. U kaºdé tabulky lze nastavit jediný unikátní identikátor, který obsahuje vygenerovaný systémem sekven£ní hodnoty a jednozna£n¥ identikuje kaºdý °ádek tabulky. Pomocí tohoto identikátoru pak m·ºeme p°istupovat k jednotlivým °ádk·m tabulky. RedBeanPHP pracuje práv¥ s tímto identikátorem a pomocí n¥j jednodu²e extrahuje pot°ebný °ádek z tabulky a p°evádí ho do objektu. Pro zabezpe£ení celistvosti tabulek je pot°eba také nastavit integritní omezení, jakými jsou cizí a primární klí£e a vlastnosti UNIQUE a NOT NULL. Pro podporu £e²tiny je pouºíváno kódování UTF8_unicode.

4.4.1 Cizí a primární klí£ Primárním klí£ je unikátní kombinace jednoho £i více sloupc·, která musí denovat kaºdý °ádek tabulky. Nej£ast¥ji se jako primární klí£ pouºívá identikátor. V této práci jako primární klí£e byly nastaveny atributy id v kaºdé tabulce. Pomocí tohoto klí£e se pak dá propojit více tabulek mezi sebou. Cizí klí£ je sloupec nebo kombinace sloupc·, která slouºí k vytvo°ení vztahu mezi dv¥ma tabulkami. Cizí klí£ v jedné tabulce má stejnou hodnotu jako atribut v tabulce, se kterou musí být propojená. Tím atributem bývá v¥t²inou primární klí£. V RedBeanPHP se primární klí£ vytvo°í automaticky p°i p°idání nového záznamu. Stejn¥ tak tomu je i v p°ípad¥ cizího klí£e. Je pot°eba nastavit jaké objekty budou propojeny a framework se postará o jejich spojení a vytvo°ení cizích klí£· v tabulkách.

4.4.2 UNIQUE a NOT NULL Omezení UNIQUE je podobné primárnímu klí£i. Pouºívá se pro ozna£ení unikátnosti hodnot ve sloupci. Na rozdíl od primárního klí£e m·ºe v jednom °ádku nabývat hodnotu NULL. P°íkladem unikátního atributu m·ºe být p°ihla²ovací jméno uºivatele neboli login. P°i registraci nového uºivatele se kontroluje, jestli jím uvedený login jiº není v tabulce, coº zabrání p°ípadným kolizím jmen.

20

KAPITOLA 4.

IMPLEMENTACE

P°ípustnost hodnot NULL ve sloupci ur£uje, jestli °ádky tabulky mohou mít hodnotu NULL v tomto sloupci. NULL hodnota je r·zná od 0, mezery nebo prázdné °ády. NULL znamená, ºe hodnota není známá nebo není ur£ená. Je lep²í mít nastaveno omezení NOT NULL z d·vod· uleh£ení vyhledávání v databázi. Navíc to zajistí celistvost tabulky, protoºe sloupec bude vºdy obsahovat n¥jakou hodnotu.

4.4.3 Databázový model Databázový model je diagram, který popisuje jednotlivé tabulky, jejich atributy a vztahy mezi nimi. Slouºí k lep²ímu pochopení struktury databáze. Tabulka obsahuje r·zné atributy, u kterých evidujeme typ a jejich p°ípadné omezení. Tabulky jsou propojené vazbami. Ty mají své atributy, které denují po£et ú£astník· vazby. Vztah mezi tabulkami m·ºe být nula nebo jedna k jedné, nula nebo jedna ku mnoho £i mnoho ku mnoho. Na obrázku 4.2 je ukázán databázový model pro fotogalerii.

4.4.4 Popis tabulek •

Tabulka Users. Tabulka Users p°edstavuje uºivatele galerie. U kaºdého uºivatele evidujeme základní údaje, které zadá p°i registraci. Jsou to jméno, p°íjmení, e-mail, p°ihla²ovací jméno a heslo. V²echny musí být denované, ºádný nesmí nabývat hodnoty NULL. P°ihla²ovací jméno je navíc unikátní. Heslo je uloºeno v MD5

7 z d·vodu bezpe£nosti. P°i

registraci systém p°id¥lí uºivatelovi role user a tím se uºivatel stává sou£ástí systému. Ostatní pole uvedené v tabulce slouºí k popisu osobních údaj· uºivatele (nap°. v¥k, pohlaví), jeho kontaktních údaj· (web, icq, telefonní £íslo) a dal²ích informací (nap°. popis zájm·). Pole ID jednozna£n¥ identikuje uºivatele.

•

Tabulka Albums. Tabulka album reprezentuje alba uºivatele. Jednotlivá alba se identikují podle ID. Album obsahuje název (name), který je nutno uvést p°i vytvá°ení alba a tak tato hodnota nesmí být NULL. Dále u alba evidujeme popis (description) a práva (permission). Práva se také nastavují p°i vytvo°ení a jejich výchozí hodnota je nastavena na viditelný pro v²echny. Tomuto záznamu v tabulce odpovídá hodnota 0. Poslední pole je

users_id •

a je cizím klí£em do tabulky Users.

Tabulka Photos. Tabulka Photos obsahuje údaje o fotograích. Identikace je podle ID. Kaºdá fotograe obsahuje povinný atribut link, jehoº hodnota je odkaz na místo uloºení fotograe na serveru. Má uvedený název a popis. V²em nov¥ p°idaným fotograím se na za£átku nastaví atribut spam, který nabývá hodnoty 0. Kaºdá fotograe, která bude nahlá²ena, jako nevhodná poté projde kontrolou administrátora, a p°ípadn¥ bude smazána. U nahlá²ené fotograe se atribut spam nastaví na 1. Pomocí cizího klí£e tabulka propojena s tabulkou Albums.

7

Message Digest 5

albums_id

je

4.4.

21

DATABÁZE

Obrázek 4.2: Databázový model

22

KAPITOLA 4.

•

IMPLEMENTACE

Tabulka Friends.

user_id friend_id. Kaºdý z t¥chto identikátor· je cizím klí£em do tabulky Users a odpovídá

Tato tabulka p°edstavuje p°átelský vztah mezi dv¥ma uºivateli. Obsahuje pole a

uºivatelským ID z této tabulky. Pole state nabývá hodnoty 0 a 1, coº odpovídá stavu p°átelství. Kdyº jeden uºivatel p°idá druhého do p°átel tak se stav nastaví na 0 a bude mít tuto hodnotu, dokud ten druhý uºivatel p°átelství nepotvrdí. V tomto p°ípad¥ se stav zm¥ní na 1. V opa£ném p°ípad¥, kdyº uºivatel p°átelství zamítne, záznam o p°átelství se z tabulky smaºe. To samé se stane, i kdyº uºivatel odstraní n¥koho z p°átel. Realizace vztahu je popsána v podkapitole 4.4.6.

•

Tabulka Info. V této tabulce jsou uloºené dal²í informace k fotograi. Obsahuje údaje, které byly extrahovány z EXIF souboru. Jsou to zem¥pisné sou°adnice, údaje o výrobci a modelu fotoaparátu, datum po°ízení fotograe, expozi£ní £as, ohnisková vzdálenost, clonové £íslo a citlivost ISO.

•

Tabulka Comments. Tabulka slouºí pro ukládání komentá°·. Obsahuje také text komentá°e a pole spam typu boolean. V²echny p°idané komentá°e jsou na za£átku ozna£eny jako spam (pole spam nabývá hodnoty 1). Kaºdý komentá° bude následovn¥ zkontrolován administrátorem, a bu¤ bude smazán, nebo kontrolou projde a stav se nastaví na 0. Pole

photos_id

je cizím klí£em do tabulky Photos.

•

Tabulka Marks. Tabulka obsahuje hodnocení p°idané k fotograi. Má pole

photos_id,

které je cizím

klí£em do tabulky Photos a pole mark, které odpovídá hodnot¥ p°idaného hodnocení. Identikace se provádí zase pomocí ID.

•

Tabulka Tags. Obsahuje seznam tag· neboli klí£ových slov p°idaných k fotce. Název tagu se ukládá do pole title, ID tagu se automatické vygeneruje.

4.4.5 Popis vztahu •

Vztah Users Albums. Vztah mezi uºivateli a alby. Tento vztah je typu jedna ku mnoha. To znamená, ºe kaºdý uºivatel m·ºe a nemusí mít více alb, ale zárove¬ kaºdé album pat°í jenom jednomu konkrétnímu uºivateli. Tabulky Users a Albums jsou propojené pomocí primárního klí£e ID tabulky Users a cizího klí£e

users_id

tabulky Albums. V RedBeanPHP pro

realizaci takového vztahu existují tak zvané own-listy, které budou podrobn¥ji popsané v podkapitole 4.4.6.

•

Vztah Albums Photos. Vztah mezi albem a fotograemi. Je podobný vztahu mezi uºivatelem a alby, také je typu jeden ku mnoha. Album obsahuje více fotograí, ale fotograe pat°í práv¥ do jednoho alba. Princip propojení dvou tabulek je stejný jako u vztahu Users-Albums.

4.4.

•

23

DATABÁZE

Vztah PhotosComments. Vztah mezi fotograí a komentá°i. Op¥t se jedná o vztah jedna ku mnoho. Tabulky jsou spojeny p°es primární klí£ ID tabulky Photo a cizí klí£

photos_id tabulky Comments.

Kaºdá fotograe m·ºe mít více komentá°·, ale kaºdý komentá° pat°í op¥t práv¥ jedné fotograi.

•

Vztah Photos-Marks. Vztah mezi fotograí a hodnocením je typu mnoho ku mnoho Kaºdá z fotograí m·ºe, ale nemusí mít více hodnocení a kaºdé hodnocení m·ºe pat°it k více fotograím.

•

Vztah Photos Tags. Vztah mezi fotograí a klí£ovými slovy. Pro jeho realizaci je pot°eba vytvo°it dal²í tabulku Tags-Photos. Tato tabulka se vytvá°í automaticky a slouºí pro reprezentaci vztah· mezi tagy a fotograí. Fotograe m·ºe mít více tag· a kaºdý z nich m·ºe pat°it více fotograím, proto byla zavedena t°etí tabulka. Obsahuje pouze a

•

tags_id,

photos_id

coº jsou cizí klí£e do tabulek Photos a Tags.

Vztah Photos-Info. Vztah mezi tabulkou Photos a tabulkou Info. Jedná se o jednoduchý vztah jedna ku jedné, kde kaºdá fotograe je podle svého ID spojena s p°íslu²nými informa£ními údaji z tabulky Info. Realizace vztahu je popsána v kapitole 4.4.6.

4.4.6 Realizace vztahu v RedBeanPHP Nejpouºívan¥j²ím vztahem je vztah jedna ku mnoha. Tento vztah se vytvá°í mezi objekty r·zného typu a je pouºíván mezi tabulkami Users a Albums, Albums a Photos, Photos a Comments. Jak jiº bylo zmín¥no v kapitole 4.4.5, pro vytvá°ení tohoto typu vztahu se v RedBeanPHP pouºívají own-listy [23]. List je pole, které m·ºe obsahovat 0 aº n objekt·. P°ed p°edáním objekt· do listu, je pot°eba tyto objekty vytvo°it a uloºit. Pro p°íklad bude pouºit vztah mezi uºivateli a alby. Tento vztah se vytvo°í po p°idání nového alba, a proto je logické umístit ho do t¥la funkce, slouºící k vytvo°ení nového alba. Dále následuje kód této funkce.

1 2 3 4 5 6 7 8 9 10 11

f u n c t i o n addAlbum ( $id_user , $name , $ d e s c r i p t i o n , $ p e r m i s s i o n ) { $albums = $ t h i s −>redbean −>d i s p e n s e ( " albums " ) ; $albums −>name = $name ; $albums −>d e s c r i p t i o n = $ d e s c r i p t i o n ; $albums −>p e r m i s s i o n = $ p e r m i s s i o n ; $ i d = $ t h i s −>redbean −>s t o r e ( $albums ) ; $ u s e r = $ t h i s −>redbean −>l o a d ( " u s e r s " , $ i d _ u s e r ) ; $album = $ t h i s −>redbean −>l o a d ( " albums " , $ i d ) ; $ u s e r −>ownAlbums [ ] = $album ; $ t h i s −>redbean −>s t o r e ( $ u s e r ) ; } Vstupními parametry funkce jsou ID uºivatele, kterému album bude pat°it, název alba, jeho popis a p°ístupová práva nastavená uºivatelem. Funkce dispense (°ádek 2) vytvo°í prázdný bean neboli objekt typu albums, který se dál postupn¥ naplní hodnotami z parametr· funkce

addAlbum

(°ádky 3-5). V p°ípad¥, ºe tabulka albums nebyla zatím vytvo°ena, tak se auto-

maticky vytvo°í a rovnou se v ní vytvo°í i pole název, popis a práva. Funkce store (°ádek 6)

24

KAPITOLA 4.

IMPLEMENTACE

slouºí k uloºení beanu a vrací ID tohoto beanu, které se automatické vytvo°ilo po p°idání do databáze. V dal²ím kroku se pomocí funkce load na£te z databáze objekt typu users podle ID uºivatele uvedeného jako parametr (°ádek 7). Tento objekt bude odpovídat uºivateli, kterému pat°í album. Stejným zp·sobem se na£te i poslední uloºené album (°ádek 8), kde jako parametr bude uvedeno ID alba získané v p°edchozím kroku funkcí store. Dále tyto dva objekty musí propojit. Propojení se realizuje pomocí nastavení own-listu. Objektu, u kterého je pot°eba evidovat dal²í objekty jiného typu, je nutno p°idat vlastnost own<X>, kde X je typ p°idávaného objekt·. V uvedeném p°íkladu se <X> nastavuje jako typ Album (°ádek 9) a own-list se vytvá°í u objektu uºivatele. P°ed tím vytvo°ená alba se p°idají do own-listu uºivatele a od té doby uºivateli pat°í. V tabulce Albums se po vytvo°ení own-listu objeví nový sloupec

users_id, který je cizím klí£em do tabulky Users a odpovídá ID uºivatele, kte-

rému bylo album p°idáno. Pro výpis v²ech aleb uºivatele v£etn¥ jejich informací je pot°eba op¥t na£íst objekt typu users z odpovídajícím ID a pomocí p°íkazu

$user->ownAlbums

se

získají v²echna alba uºivatele, které budou vracené v podob¥ pole. P°i mazání alba se album musí nejd°ív na£íst podle ID a pak pomocí

$this->redbean->trash($album)

smazat. P°i

mazání je t°eba dávat pozor na smazání v²ech fotograí náleºících albu. To samé platí i pro informace k fotograím, klí£ová slova a hodnocení. Nejd°íve musí být smazány v²echny kopie fotograe a její originál ze sloºky na serveru, poté z databáze komentá°e a hodnocení pat°ící k fotograi a nakonec se odstraní záznam o fotograi z databáze. Tímto zp·sobem je pomocí foreach cyklu smazána kaºdá fotograe z alba. Nyní m·ºe být smazáno album z databáze. Dal²ím zajímavým vztahem je vztah mezi dv¥ma uºivateli, který ozna£uje p°átelství mezi nimi. Tento vztah je typu mnoho ku mnoho, ale od jednoduchého vztahu tohoto typu se li²í tím, ºe se vytvá°í mezi dv¥ma objekty stejného typu. Objekt, který se tohoto vztahu ú£astní, je typu Users. Kaºdý uºivatel m·ºe mít libovolný po£et p°átel a zárove¬ m·ºe být p°ítelem pro libovolný po£et uºivatel·. Proto je tento vztah sám na sebe. Nejprve je t°eba z databáze na£íst objekty typu Users podle ID uºivatel· vstupujících do vztahu. První objekt odpovídá uºivateli, který p°idává jiného uºivatele do p°átel, druhý objekt odpovídá p°íteli. Pro vytvá°ení vztahu mezi objekty je nutné vytvo°it samostatný objekt, který bude pojmenován friends a bude slouºit pro spojení dvou uºivatel· jako p°átel. Zárove¬ se p°i vytvo°ení tohoto objektu vytvo°í tabulka Friends v databázi. Tabulka Friends bude obsahovat ID uºivatele, ID p°ítele a stav p°átelství. Hodnoty, kterých m·ºe stav nabývat, a jejich význam jsou popsané v podkapitole 4.4.4. ID uºivatele a ID p°ítele jsou cizími klí£i do tabulky Users. Tyto identikátory pak slouºí k jednoduchému a rychlému p°ístupu seznamu p°átel uºivatele. K získání seznamu v²ech p°átel uºivatele je pot°eba vytvo°it dva dotazy a provést je pomocí RedBeanPHP funkce

1 2 3 4 5 6 7 8 9 10

find().

$ f r i e n d s = R : : f i n d ( ' f r i e n d s ' , ' u s e r _ i d = : i d OR f r i e n d _ i d = : i d f AND s t a t e =1 ' ,

array ( ' : i d ' => $id_user , ' : i d f '=>$ i d _ u s e r ) ) ; foreach ( $ f r i e n d s a s $ f r i e n d ) { i f ( $ i d _ u s e r == $ f r i e n d −>u s e r _ i d ) {

$query = ' i d = ' . $ f r i e n d −>f r i e n d _ i d ; } e l s e i f ( $ i d _ u s e r == $ f r i e n d −>f r i e n d _ i d ) { $query = ' i d = ' . $ f r i e n d −>u s e r _ i d ; } $ f r i e n d s _ a r r a y [ ] = R : : findOne ( ' u s e r s ' , $query ) ; }

4.5.

PRÁCE S FOTOGRAFIÍ

25

První dotaz (°ádky 1-2) vrátí v²echny p°átelství z tabulky Friends, kterých se uºivatel ú£astní a to bu¤ v roli uºivatele, nebo p°ítele. Druhý dotaz (°ádky 4-8) vrátí druhého uºivatele, který je sou£ásti záznamu vraceného v p°edchozím dotazu. Na konci se kaºdý nalezený záznam uloºí do výsledného pole (°ádek 9), obsahujícího v²ichni p°átele uºivatele. Dal²í typ vztahu je mezi tabulkami Tags a Photos.V kódu je realizován pomocí metody

associate(),

která propojí dva objekty a automaticky vytvo°í dal²í tabulku v databázi.

Tagy se p°idávají spole£n¥ s názvem a popiskem fotograe. Níºe je uvedená £ást metody

editPhotoInfo(), 1 2 3 4 5 6 7

odpovídající vytvo°ení vztahu mezi tagy a fotograi.

$photo = $ t h i s −>redbean −>l o a d ( ' p h o t o s ' , $id_photo ) ; i f ( ! empty ( $ t a g s ) ) { foreach ( $ t a g s a s $ t a g ) { $tag_from_table = $ t h i s −>redbean −>l o a d ( ' t a g s ' , $ t a g + 1 ) ; R : : a s s o c i a t e ( $photo , $tag_from_table ) ; } } V modelu se zavolá funkce

editPhotoInfo() (°ádky 1-7), která jako parametry obdrºí hod-

noty získané z formulá°e pro editaci fotograe. Jednou z t¥chto hodnot je pole tag·. Dále je pot°eba na£íst objekt typu Photos (°ádek 1), který odpovídá editované fotograi. Pak se v cyklu projde pole tag· (°ádky 3-6), a kaºdý tag se postupn¥ asociuje s fotograí (°ádek 5). Sou£asn¥ se vytvo°í v databázi tabulka Photos_Tags, ve které budou uloºená ID fotograí a p°íslu²ných tag·.

4.5 Práce s fotograí V této kapitole jsou popsány základy práce s fotograí. Zahrnuje popis nahrávání fotograí, zm¥ny jejich rozm¥ru, extrakce EXIF metadat.

4.5.1 Nahrávání fotograí z pohledu uºivatele Aby mohl uºivatel sdílet své fotograe, musí se nejd°íve zaregistrovat a p°ihlásit. Dal²ím krokem je vytvo°ení alba. Pokud uºivatel nemá ºádné album, vyplní jednoduchý formulá° pro jeho vytvo°ení, ve kterém uvede název a popis alba. Poté jiº m·ºe do alba nahrávat fotograe. Po kliknutí na tla£ítko P°idat fotograe se otev°e nové okénko pro nahrávání fotograí. Uºivatel má moºnost vybrat sloºku s fotograemi na svém po£íta£i a zvolit jednu £i více z nich k nahrání do galerie. Vybrané fotograe se zobrazí v okénku uploaderu. Uºivatel je m·ºe p°ed odesláním na server je²t¥ jednou projít a p°ípadn¥ promazat. Pro dokon£ení operace nahrávání je pot°eba kliknout na tla£ítko nahrát, £ímº se spustí nahrávání. Po jeho dokon£ení bude uºivatel p°esm¥rován na stránku slouºící pro úpravu alba, kde m·ºe p°idat k fotograím název, popisek a klí£ová slova. Na obrázku 4.3 je ukázka vzhledu uploaderu fotograí.

4.5.2 Realizace nahrávání V této £ásti projektu bylo nejd°íve pot°eba rozmyslet, jaký zp·sob nahrávání fotograí si vybrat. V úvahu p°ipadaly dva zp·soby: pouºití standardního HTML formulá°e, který ov²em

26

KAPITOLA 4.

IMPLEMENTACE

Obrázek 4.3: Uploader fotograí

umoº¬uje upload pouze jednoho souboru, nebo vyuºit n¥jaký dopln¥k pro nahrávání více fotograí najednou. Vyuºití prvního zp·sobu by bylo nevhodné z d·vodu dlouhého a komplikovaného nahrávání, nebo´ uºivatel by musel po kaºdé vybírat jeden nový soubor. Proto byl zvolen druhý zp·sob nahrávání pomocí dopl¬ku, umoº¬ujícího vícenásobné nahrávání. Dopl¬k· existuje mnoho, v¥t²ina je vytvo°ena pomocí Java Scriptu nebo Flash anebo kombinací obou technologií. Zde nastává omezení nahrávání pro uºivatele, jehoº prohlíºe£ nepodporuje zmín¥né technologie. Nette Framework má pro hromadné nahrávání fotograí sv·j dopln¥k. Nazývá se MultiFileUpload a je stav¥n na technologiích plupload a jquery [12]. Plupload umoº¬uje nahrávání více soubor· najednou, a to díky vyuºití technologie Flash. Jeho výhodou také je, ºe umoº¬uje rozd¥lení souboru na více £ástí a následné nahrávání tohoto souboru pomoci více dotaz· na server [21]. Pokud má PHP povoleno pouze nahrávání soubor· omezené velikosti, nap°íklad 1MB, fotograe m·ºe být rozd¥lena. Lze také nastavit maximální velikost souboru. Díky technologii Flash to mohou být i velké soubory, nap°íklad 300 MB. V p°ípad¥, ºe prohlíºe£ uºivatele nebude mít podporu Flash nebo vypnutý JavaScript, bude pouºito klasické nahrávání pomocí HTML formulá°e.

4.5.3 Práce s rozm¥ry fotograí P°i nahrávání se fotograe nejd°íve uloºí do adresá°e na serveru v p·vodní velikosti a rozli²ení. Pak následuje její zpracování. Vzhledem k velikosti fotograí uºivatel nepot°ebuje zobrazovat je v plném rozm¥ru a p·vodní kvalit¥. Proto pro kaºdou fotograi musí být vytvo°ené zmen²ené kopie. Jedna kopie bude slouºit pro zobrazení jednotlivé fotograe a bude mít del²í stranu délky 500 pixel·. Druhá kopie se bude zobrazovat pro prohlíºení celého alba, bude mít del²í stranu 75 pixel· a slouºit jako náhled fotky. Kaºdému uºivatelovi se po p°idání první fotograe automatické vytvo°í adresá° na serveru, který bude pojmenován podle id uºivatele. V tomto adresá°e budou uloºené v²echny nahrané fotograe. Fotograe v p·vodní velikosti se nahrávají p°ímo do adresá°e. Jejich zmen²ené kopie se ukládají do podadresá°· Medium a Small. Pro práci s obrázky v Nette existuje t°ída Image, která zahrnuje základní pot°ebné funkce jako na£ítání obrázku, zm¥na velikosti, o°íznutí apod. Dále je uveden kód metody slouºící pro zm¥nu rozm¥ru fotograe.

4.5.

1 2 3 4 5 6 7 8 9 10 11 12

27

PRÁCE S FOTOGRAFIÍ

f u n c t i o n createMediumPhoto ( $id_user , $name ) { $image = Image : : f r o m F i l e (WWW_DIR . ' / u p l o a d s / ' . $ i d _ u s e r . ' / ' . $name ) ; $width = $image −>getWidth ( ) ; $ h e i g h t = $image −>g e t H e i g h t ( ) ; i f ( $width> $ h e i g h t ) { $image −>r e s i z e ( 5 0 0 ,NULL ) ; } else { $image −>r e s i z e (NULL, 5 0 0 ) ; } $newPath = ' / u p l o a d s / ' . $ i d _ u s e r . ' /medium/ ' . $name ; $image −>s a v e (WWW_DIR . $newPath ) ; } Nejprve je obrázek na£ten z adresá°e uºivatele (°ádek 2). Pak je zji²t¥na jeho ²í°ka a délka (°ádky 2 a 3). V¥t²í hodnota z nich je nastavena na ur£itý rozm¥r. Délka druhé strany je dopo£ítána automaticky (°ádky 5-9). Nakonec je obrázek uloºen do pot°ebného podadresá°e (°ádky 10 a 11).

4.5.4 Extrahování EXIF dat Dal²ím krokem po vytvo°ení a uloºení obou zmen²ených kopií fotograe je extrahování EXIF záznamu z fotograe. Jak jiº bylo zmín¥no v kapitole 3.7.2, kaºdá digitální fotograe má v sob¥ ur£itá metadata, která tuto fotograi podrobn¥ji popisují. Tato data se dají extrahovat, a pouºít pro výpis dal²ích informací k fotograi. EXIF data z fotograe jsou získány b¥hem nahrávání a uloºeny do databáze. V PHP slouºí k získání EXIF záznamu funkce

exif_read_data.

Pokud fotograe obsahuje v sob¥ n¥jaký EXIF záznam, funkce vrátí pole

hodnot tohoto záznamu. V opa£ném p°ípad¥ vrátí FALSE. Pole hodnot, vracené funkcí obsahuje dal²í pole, která odpovídají r·zným £ástím informací o fotograi. D·leºitá jsou pole IFD0

8 , EXIF a GPS.

IFD0 je pole obsahující údaje o datu po°ízení fotograe, její velikosti, fotoaparátu, kterým byla vyfotografována nebo o programu, v n¥mº byly provedeny zm¥ny EXIF IFD0. Z t¥chto dat pot°ebujeme pouze výrobce, model fotoaparátu a také datum po°ízení snímku. Pole EXIF je £ást pole IFD0 a obsahuje podroben¥j²í údaje o fotograi, p°esn¥ji o nastavení fotoaparátu v dob¥ fotografování. Z tohoto pole pot°ebujeme získat nastavení clony, ohniskovou vzdálenost, citlivost ISO a expozi£ní £as. Pro získání t¥chto údaj· slouºí metoda

getExifInfo(). Tato metoda je p°evzata z oci-

álních stránek PHP a je poupravena [6]. Jako parametr dostává jméno souboru (fotograe), toto jméno se poté pouºívá jako parametr ve funkci dat. ást Metody

1 2 3 4 5 6 7 8

getExifInfo()

exif_read_data

je uvedena dále:

i f ( @array_key_exists ( ' Make ' , $ i f d 0 ) ) {

...

$cameraMaker = $ i f d 0 [ ' Make ' ] ; } else { $cameraMaker = " " ; }

i f ( @array_key_exists ( ' ExposureTime ' , $ e x i f ) ) {

$ e x p o s u r e = $ e x i f [ ' ExposureTime ' ] ;

8

Image File Directory

p°i extrahování EXIF

28

9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

KAPITOLA 4.

IMPLEMENTACE

$ h e l p = explode ( ' / ' , $ e x p o s u r e ) ;

i f ( $ h e l p [ 0 ] == 1 0 ) {

$exposure1 = $help [ 0 ] / 1 0 ; $exposure2 = $help [ 1 ] / 1 0 ; $ e x p o s u r e = $ e x p o s u r e 1 . " /" . $ e x p o s u r e 2 ;

} } else { $exposure = "" ; } i f ( @array_key_exists ( ' FocalLength ' , $ e x i f ) ) { $ f o c a l _ l e n g t h = $ e x i f [ ' FocalLength ' ] ; $ h e l p = explode ( ' / ' , $ f o c a l _ l e n g t h ) ; $focal_length = $help [ 0 ] / $help [ 1 ] ; } else { $focal_length = "" ; } ... $ i n f o = array ( ) ; $ i n f o [ ' make ' ] = $cameraMaker ; $ i n f o [ ' exposure ' ] = $exposure ; $info [ ' focal_length ' ] = $focal_length ; ... return $info ; }

Na za£átku se vytvo°í pole ifd0 a pole exif, obsahující hodnoty IFD0 a EXIF. Dále se z t¥chto polí podle klí£· vyberou pot°ebné záznamy popsané vý²e a p°i°adí se do prom¥nných (°ádky 1-24). Pokud pole tyto hodnoty neobsahuje, do prom¥nné se uloºí prázdná hodnota. R·zné fotoaparáty zaznamenávají údaje v r·zných formátech. Proto n¥které z nich musí být upraveny. Metoda

getExifInfo() vrací pole info, do kterého se uloºí hodnoty prom¥nných (°ádky

26-31). Tato metoda se volá p°i nahrávání fotograí a získané hodnoty se uloºí do databáze. Dal²ím polem, které je pot°eba zpracovat je pole s klí£em GPS. Toto pole obsahuje informace o tom, kde byla fotograe po°ízena. D·leºité tagy jsou GPSLatitude a GPSLongitude, GPSLatitudeRef a GPSLongitudeRef [5]. GPSLatitude odpovídá zem¥pisné ²í°ce, GPSLongitude pak zem¥pisné délce. Kaºdá z t¥chto poloºek obsahuje pole o t°ech prvcích. Prvky tohoto pole jsou stupn¥, minuty a vte°iny. Kaºdý prvek má tvar °et¥zce, ve kterém jsou dv¥ £ísla rozd¥lené lomítkem. Celkové pole je ve tvaru dd/1,mm/1,ss/1, kde dd jsou stupn¥, mm minuty a ss vte°iny. V takovém formátu by bylo nevhodné data pouºít, proto je pot°eba úprava pro dal²í zpracování. Pro úpravu byla pouºita PHP funkce explode, která rozd¥lí °et¥zec na jednotlivá pole. První pole se vyd¥lí druhým a tím získáme novou hodnotu. Pak je t°eba p°evést minuty a vte°iny do stup¬·. Vyjád°ení zem¥pisné délky a ²í°ky ve stupních je nutné pro následující propojení s Google Maps, které tyto hodnoty vyºaduje v takovém formátu. GPSLatitudeRef a GPSLongitudeRef odpovídají sv¥tovým stranám. GPSLatitudeRef m·ºe nabývat hodnot S a N. Hodnota S ozna£uje jiºní polokouli, hodnota N naopak severní. Analogické je to i u poloºky GPSLongitudeRef. Nabývá hodnot W a E, kde W je západní polokoule a E východní. V p°ípad¥ jiºní a západní polokoule musí ²í°ka respektive délka nabývat záporné hodnoty. Následující funkce je ukázkou úpravy dat získaných z pole GPS do podoby sou°adnic vhodných pro dal²í pouºití.

4.6.

1 2 3 4 5 6 7 8 9 10 11 12

29

PROPOJENÍ S GOOGLE MAPS

function createCoordinates ( $ref , $coordinates ) { $ s e c o n d s = explode ( ' / ' , $ c o o r d i n a t e s [ 2 ] ) ; $minutes = explode ( ' / ' , $ c o o r d i n a t e s [ 1 ] ) ; $ d e e g r e e s = explode ( ' / ' , $ c o o r d i n a t e s [ 0 ] ) ; $tmp = ( $minutes [ 0 ] / $minutes [ 1 ] + $seconds [ 0 ] / $seconds [ 1 ] / 60) / 60; $new_coordinates = $ d e e g r e e s [ 0 ] / $ d e e g r e e s [ 1 ] + $tmp ; i f ( $ r e f == "S" | | $ r e f == "W" ) { $new_coordinates = $new_coordinates ∗ ( − 1); } r e t u r n $new_coordinates ; } Data získaná v p°edchozích krocích se následovn¥ ukládají do databáze bez dal²ích úprav. Pro uloºení EXIF informací o fotograích slouºí tabulka info. Tato tabulka je ve vztahu jedna ku jedné s tabulkou photos. Nejd°íve uloºíme informace o fotograi do tabulky info (°ádek 1). Následn¥ tuto tabulku propojíme s tabulkou photos (°ádek 3). Propojení vypadá následovn¥:

1 2 3 4 5

$ i d _ i n f o = $ t h i s −>redbean −>s t o r e ( $ i n f o _ t a b l e ) ; $info_photo = $ t h i s −>redbean −>l o a d ( " i n f o " , $ i d _ i n f o ) ; R : : a s s o c i a t e ( $photo , $info_photo ) ; $ t h i s −>redbean −>s t o r e ( $photo ) ; } Pro získání informací a výpis jednotlivé fotograe sta£í pouºít metodu

($photo,'info'),

relatedOne

která vrací pole hodnot z tabulky informace pat°ících ke konkrétní foto-

grai.

4.6 Propojení s Google Maps Jako mapový podklad pro aplikaci byli pouºité Google Maps. Jejich hlavní výhodou je, ºe poskytují mapy celého sv¥ta a jsou jednoduché na p°ipojení k aplikaci. Google poskytuje své API pro práci s mapami [19]. Integrace mapy je zaloºena na JavaScriptu. Základním elementem Google Maps API je samotná mapa. Mapa se inicializuje pomocí funkce

initialize().

Tato funkce se volá p°i kliknutí na odkaz Ukázat na map¥ a na£te mapu v JavaScriptovém novém okn¥ (víz obr. 4.4).

4.6.1 Realizace nahrávání Dále jsou uvedené parametry mapy, které jsou pot°eba nastavit.

1 2 3 4 5 6

var l a t l n g= newgoogle . maps . LatLng ( $ l a t i t u d e , $ l o n g i t u d e ) ; var myOptions = { zoom : 8 , center : latlng , mapTypeId : g o o g l e . maps . MapTypeId .ROADMAP }; Do prom¥nné latlng (°ádek 1) se ukládají zem¥pisné sou°adnice bodu po°ízení fotograe. Zem¥pisná délka a ²í°ka je získána z databáze a následn¥ p°edána do prom¥nné latlng. Hodnota této prom¥nné je p°edána parametru mapy. Mapa bude centrována v tomto bodu (°ádek

30

KAPITOLA 4.

IMPLEMENTACE

Obrázek 4.4: Ukázka mapy

4). Dal²ím parametrem je koecient m¥°ítko, pomocí kterého se nastaví výchozí rozm¥r mapy (°ádek 3). Mapu lze libovoln¥ p°ibliºovat a oddalovat pomocí posuvníku. Posledním nastavovaným parametrem je typ mapy, který bude zobrazen jako výchozí (°ádek 5). Mapa m·ºe být klasická £i dvourozm¥rná. Typ mapy lze podle pot°eby m¥nit. Dále je pot°eba p°idat vlastní bod, který bude odpovídat místu na map¥. Sou°adnice tohoto bodu budou také odpovídat zem¥pisné délce a ²í°ce jako i u místa centrování mapy. Vlastní bod se nastavuje následujícím zp·sobem:

1 2 3 4

var marker = newgoogle . maps . Marker ( { position : latlng , map : map }); Parametr position (°ádek 2) ur£uje polohu vlastního bodu, parametr map (°ádek 3) odpovídá map¥, na které bude vlastní bod zobrazen. Mapa se zobrazuje v p°ípad¥, ºe fotograe obsahovala GPS záznam, který je pot°eba k získání sou°adnic.

4.7 Propojení s Facebookem Pro spojení aplikace s Facebookem a p°idání stránek do Open Graphu slouºí tla£ítko LikeButton nebo £esky To se mi líbí a p°idání speciálních meta tag·, které ur£ují obsah sdílené stránky. Skript pro p°idání tla£ítka poskytuje sám Facebook [15]. Sta£í JavaScript kód p°idat do t¥la stránky a v

s atributem

class=fb-like

se zobrazí tla£ítko To

se mi líbí. V skriptu je pot°eba zm¥nit jazyk na £eský, aby se tla£ítko zobrazilo v £e²tin¥.

4.7.

31

PROPOJENÍ S FACEBOOKEM

Dal²ím krokem je p°idání meta tag· do hlavi£ky HTML stránky s fotograí. Tagy Open Graph jsou zodpov¥dné za informace (obrázek, záhlaví, popis), která budou zobrazena na Facebook zdi uºivatele, pokud uºivatel klikne na tla£ítko "To se mi líbí"nebo "Sdílet"na stránce jiné webové aplikace. Díky tomu je odkaz na stránku obohacen dal²ími informací, vypadá a p°ehledn¥, coº p°itahuje pozornost ostatních uºivatel·. Pot°ebné tagy se dají nastavit ru£n¥ p°i psaní kódu. Musejí být umíst¥né v hlavi£ce stránky p°ed uzavírajícím tagem

. Nyní budou popsány základní tagy, které je nutné

uvést [17].

<meta p r o p e r t y=" og : t i t l e " c o n t e n t=" G a l l e r y "/>

title

Tag

odpovídá záhlaví, neboli názvu objektu, který se stává sou£ásti Open Graphu.

<meta p r o p e r t y=" og : type " c o n t e n t=" w e b s i t e "/>

type odpovídá typu objektu Open Graphu. Pro oby£ejnou stránku musí být atribut content nastaven na hodnotu website, pro £lánek nabývá hodnoty article, pro video Tag

movie apod.

<meta p r o p e r t y=" og : u r l " c o n t e n t="{ $basePath }/ photo / photo ? id_photo=" . $photo [ ' i d ' ] "/>

url

Tag

odpovídá URL adrese stránky, která se sdílí. Jako

content

se nastaví absolutní

cesta.

<meta p r o p e r t y=" og : image " c o n t e n t=" { $basePath }/ u p l o a d s / { $ a u t h o r [ ' i d ' ] } / f b /{ $photo [ ' l i n k ' ] } "/>

image je odpov¥dný za výchozí obrázek, který bude reprezentovat objekt contentu se nastaví cesta k obrázku, který bude zobrazován jako výchozí. Tag

v grafu. Do

<meta p r o p e r t y=" og : d e s c r i p t i o n " c o n t e n t=" $photo [ ' d e s c r i p t i o n ' ] "/>

description

Tag

odpovídá popisu objektu. Musí obsahovat pár krátkých v¥t popisujících

obsah stránky.

<meta p r o p e r t y=" og : site_name " c o n t e n t=" F o t o G a l e r i e " "/>

site_name

Tag

ozna£uje název webové aplikace. Nap°íklad Foto Galerie.

<meta p r o p e r t y=" f b : admins " c o n t e n t=" 409059605781804 "/> Tag

fb:admins odpovídá Facebook aplikaci, která je spojená s webovou aplikací. Kaºdý web,

který chceme propojit s Facebookem je t°eba nejd°íve zaregistrovat. To znamená, ºe se na Facebook vytvo°í nová aplikace, do které zadáme adresu svých stránek a provedeme n¥které nastavení spojené s pouºitím aplikace. Automaticky se vygeneruje unikátní ID aplikace, podle kterého je pak moºné k aplikaci p°istupovat. Toto ID musí být uvedeno do atributu content tagu

fb:admins.

Po provedení v²ech vý²e uvedených operací se stránka stává sou£ásti Open Graphu a jakmile uºivatel klikne na tla£ítko To se mi líbí, zobrazí se na jeho Facebook zdí p°ísp¥vek s odkazem na aplikaci a její popis.

32

KAPITOLA 4.

IMPLEMENTACE

4.8 TagCloud Dal²í zajímavou vlastností je takzvaný TagCloud. TagCloud je zobrazení tag·, kde styl písma tag· se m¥ní podle je popularity. Kaºdá fotograe m·ºe mít seznam klí£ových slov, který odpovídá tématu fotograe. Tato klí£ová slova budou zobrazena v levé £ásti stránky a budou vºdy k dispozici. Podle t¥chto slov je pak moºné vyhledávat fotograe. Dále je popsán algoritmus vytvo°ení takového TagCloudu. Nejd°íve je pot°eba získat pole tag· z databáze. Poté se pro kaºdý tag spo£ítá po£et fotograí, kterým tento tag pat°í. Na konci se vytvo°í pole, obsahující název tagu a po£et odpovídajících fotograí. Toto pole je následovn¥ p°edáno presenteru, kde bude zpracováváno. Ur£í se minimální a maximální po£et fotograí pat°ících n¥jakému tagu a také se nastaví velikost písma pro tagy s nejv¥t²ím a nejmen²ím po£tem fotograí. Tyto hodnoty slouºí k dal²ímu p°epo£ítání velikosti písma pro kaºdý tag. Získané hodnoty se spolu s polem obsahujícím tagy a po£ty fotograí se z presenteru p°edají do ²ablony. V ²ablon¥ se klí£ová slova získají z pole a pomocí HTML tagu

<span> se vypí²ou do °ádk·. U kaºdého tagu span

se nastaví velikost písma, která se vypo£ítá z ur£ených v presenteru hodnot a po£tu fotograí odpovídajících tagu. Ukázka TagCloudu je na obrázku 4.5 Kaºdé klí£ové slovo se vypí²e v podob¥ odkazu. Kliknutím na odkaz se spustí vyhledávání a ve výsledku se zobrazí seznam fotograí obsahujících daný tag.

Obrázek 4.5: TagCloud

Kapitola 5

Testování V této kapitole je popsáno testování aplikace za b¥hu jejího vývoje a výsledné testování s uºivateli. Podle výsledk· testování s uºivateli je pak vytvo°en p°ehled pot°ebných zm¥n a úprav.

5.1 Lad¥ní aplikace v Nette B¥hem vývoje pro testování a opravení chyb byla pouºita Nette Lad¥nka, která je p°edstavována t°ídou Nette/Debug. Vypisuje ve srozumitelné podob¥ v²echny chyby a výjimky, které nastaly b¥hem vývoje aplikace. Ozna£uje t°ídu a kus kódu, ve kterém chyba nastala.

5.2 Test s uºivateli Jak vyplývá z názvu, test s uºivateli je zam¥°en na potenciální skupinu uºivatel·, kte°í budou aplikaci pouºívat. Pro tento ú£el je ur£en seznam úkol·, které musí kaºdý uºivatel absolvovat. Na konci testu se provede zhodnocení podle výsledk· kaºdého uºivatele. V úvahu p°ichází, jestli uºivatel úkol splnil £i nikoli, jaké m¥l s úkolem problémy a jestli zvládnul °e²ení rychle a snadno.

5.2.1 Cíl testu Cílem testu je zjistit, jestli je aplikace dob°e a snadno ovladatelná a pochopitelná jak nezku²enému uºivateli, tak i uºivateli, který jiº podobný program vyuºíval. Testuje se rozhrání (nap°íklad, jestli uºivatel bez problému najde pot°ebný odkaz), ale i funk£nost samotného systému, tj. jestli se operace provede bez chyb.

5.2.2 Poºadovaná skupina participant· Plánovaná skupina participant· neboli testujících bude p°edstavována p¥ti lidmi r·zného v¥ku a pohlaví. Od dvou z nich je vyºadovaná zku²enost práce s podobnou aplikací. ást uºivatel· by m¥la mít zájem o fotografování, nebo´ nejenom nahrávali fotograe, ale i evidovali podrobn¥j²í informace o nastavení fotoaparátu. Od kaºdého uºivatele je vyºadována znalost sociálních sítí, p°edev²ím sít¥ Facebook.

33

34

KAPITOLA 5.

TESTOVÁNÍ

5.2.3 Screener Screener je otazník, který se pouºívá k výb¥ru participant·. Obsahuje ve°ejnou a neve°ejnou £ást. Ve°ejná £ást je u°£ena pro uºivatele, neve°ejná obsahuje poºadované odpov¥di, na jejichº základ¥ budou participanti vybráni. Ob¥ £ásti dotazníku screeneru najdete v p°ílohách B.1.

5.2.4 Vybraná skupina participant· Pro testování byli vybráni t°i muºi a dv¥ ºeny ve v¥ku od 20 do 50 let. V²ichni participanti jsou registrováni v n¥jaké sociální síti. Dva lidé nem¥li p°edchozí zku²enost s podobnou aplikací. Jeden participant je profesionální fotograf, dva se zajímají o fotograe, zbylí 2 uºivatelé b¥ºn¥ fotografují bez hlub²ích znalostí o fotografování.

5.2.5 Pre a post test dotazníky Pre test dotazník je v podstat¥ roz²í°ený screener. Vypl¬uje se p°ed testováním. Slouºí pro p°ipravení uºivatele k testování a také pro získání dal²ích roz²i°ujících informací o zku²enostech a znalostech participanta. Post test dotazník se vypl¬uje aº po dokon£ení testování a je ur£en k záv¥re£nému zhodnocení testu. Obsahuje nap°íklad otázky o tom, co se nejvíce na programu líbilo a co nejvíc vadilo, jestli uºivatel byl s programem spokojen a jestli ho plánuje nadále pouºívat. Oba dotazníky najdete v p°ílohách B.2, B.3.

5.2.6 Výsledky testování a zhodnocení Testování probíhalo bez komplikací. Uºivatelé zvládli v²echny úkoly s výjimkou malých problému skoro bez potíºí. Participanti bez zku²eností práce s podobnou aplikací byli trochu zmateni v navigaci a nev¥d¥li, na který odkaz mají kliknout pro provedení poºadované operace. Nap°íklad, místo registrace se snaºili rovnou p°ihlásit. Nev¥d¥li také, ºe pro p°idání fotograí musejí nejd°íve zaloºit album. P°i nahrávání fotograí pomocí speciálního uploaderu hned nev¥d¥li, ºe mají kliknout na tla£ítko P°idat soubory a poté na Spustit, proto byla p°idána krátká nápov¥da, popisující co má uºivatel ud¥lat. Zku²ení participanti nem¥li s t¥mito úkoly ºádné problémy. Dal²í malý problém nastal p°i p°idávání klí£ových slov. Aplikace umoº¬uje p°idat více klí£ových slov najednou pomocí speciálního takzvaného multiselect boxu, kde má uºivatel na výb¥r více moºností. Ne v²ichni participanti v¥d¥li, ºe pro ozna£ení více moºností musejí drºet tla£ítko CTRL, proto byla i zde p°idána krátká nápov¥da. Jeden participant d°íve nevyuºíval Facebook, proto po kliknutí na tla£ítko to se mi libí musel nejd°íve p°ejít na stránky sociální sít¥ a zaregistrovat se tam. Pak uº úkol zvládl bez problém·. S p°idáním komentá°· a hodnocení nikdo nem¥l ºádné potíºe. Vyhledávání fotograí se v²em participant·m povedlo. Na zhodnocení aplikace m¥l vliv také post test otazník. Na základ¥ odpov¥dí participant· byly zji²t¥ny nám¥ty na moºné vylep²ení aplikace. Tyto poºadavky a nápady byly ponechány pro budoucí vývoj aplikace.

Kapitola 6

Záv¥r Cílem této práce bylo vytvo°it webovou fotogalerii, která by odpovídala základním poºadavk·m potenciálních uºivatel·. P°ed za£átkem tvorby aplikace byl proveden rozbor jiº existujících °e²ení pro zji²t¥ní poºadavk· uºivatel·. Na základ¥ rozboru byla provedena analýza a návrh °e²ení, které ur£uje poºadavky, kladené na tuto aplikaci, jakým zp·sobem se dají tyto poºadavky splnit a jaké mají být pouºité technologie. Poté následovala samotná implementace aplikace. Na konec bylo provedeno testování. Aplikace se snaºila zachytit v²echny výhody a hlavní vlastnosti jiº existujících webových fotogalerií v jednom projektu. Fotogalerie byla vytvo°ená pomocí framework· Nette a RedBeanPHP s pouºitím r·zných webových technologií, jako HTML, CSS a JavaScript. Aplikace byla testována b¥hem vývoje, coº pomohlo o²et°it a opravit chyby samotného systému. Poté bylo provedeno testování s uºivateli, které objevilo drobné chyby spojené s pouºíváním aplikace. Tyto chyby byly vzaty v úvahu a opraveny. Výstupem je hotová aplikace, která umoº¬uje uºivatel·m nahrávat fotograe a sdílet je mezi svými p°áteli. Aplikace umoº¬uje vytvá°et vztahy mezi uºivateli a na základ¥ t¥chto vztah· ur£ovat p°ístupová práva alb uºivatele. Je umoºn¥no komentování fotograí a jejich hodnocení a také vyhledávaní fotograí podle klí£ových slov. Aplikace ke kaºdé fotograi poskytuje EXIF data, která automaticky získá z fotograe, pokud je fotograe obsahuje. Pomocí GPS sou°adnic získaných z fotograe lze fotograi zobrazit na map¥. Aplikace je roz²í°ená o sémantické prvky a je propojená s Facebookem pomocí tla£ítka to se mi líbí. Sémantika aplikace je posílená i pomocí vyuºití jazyku HTML5 a jeho tag·, které jednozna£n¥ ur£ují typ informace zobrazené na stránce. Jedním z poºadavk· byla funk£nost aplikace v nejpouºívan¥j²ích prohlíºe£ích poslední verze. Problém se objevil jen p°i spou²t¥ní aplikace v Internet Exploreru, a to hlavn¥ p°i hromadném nahrávání fotograí. Tento problém byl vy°e²en pomocí pouºití jednodu²²ího nahrávání soubor· p°es formulá°. Fotograe se dají tímto zp·sobem nahrávat jen po jedné. Omezena je i velikost nahrávaného souboru. Vý²e uvedené nazna£uje, ºe výsledná aplikace spl¬uje v²echny poºadavky, které na ní byly kladeny na za£átku. Aplikaci by bylo moºné rozvíjet i nadále. Jako moºné roz²í°ení se dá uvést propojení i s jinými sociálními sít¥mi neº Facebook, coº by slouºilo k zv¥t²ení po£tu potenciálních uºivatel·. Nabízí se také moºnost p°ihla²ování pomocí svého ú£tu na sociálních sítích. Díky tomu by uºivateli odpadla nutnost registrace a práce s aplikací by se stala snadn¥j²í.

35

36

KAPITOLA 6.

ZÁVR

Literatura [1] BEAULIEN, A.

Learning SQL.

1005 Gravenstein Highway North, Sebastopol : O'Reilly

Media, 2nd edition, 2005.

Úvod do JavaScriptu [online]. //learn.javascript.ru/overview>.

[2] Ilya Kantor.

2010. [cit. 12. 3. 2010]. Dostupné z:
[3] LANDE, D. Sémantický web: od idei k technologii.

http://poiskbook.kiev.ua/sw.html. O ORM [online]. 2008. [cit. //mikhailstadnik.com/few-words-about-orm>.

[4] Mikhail Stadnik.

3. 12. 2008].

Dostupné z:
GPS Tags [online]. 2011. [cit. 7. 10. 2011]. Dostupné z: .

[5] Phil Harvey.

PHP exif_read_data [online]. 2012. [cit. 18. 5. 2012]. //php.net/manual/en/function.exif-read-data.php>.

[6] PHP Group.

[7] PILGRIM, M.

HTML5: Up and Running.

Dostupné z:
1005 Gravenstein Highway North, Sebasto-

pol : O'Reilly Media, 1th edition, 2010. [8] P°isp¥vatelé Wikipedie.

WikiBooks Ajax

[online]. 2012. [cit. 11. 2. 2012]. Dostupné z:

.

Wikipedia EXIF [online]. .

[9] P°isp¥vatelé Wikipedie.

Wikipedie HTML [online]. .


Wikipedie PHP [online]. .


2012. [cit. 7. 5. 2012].

Dostupné z:

2012. [cit. 19. 5. 2012]. Dostupné z:

2012. [cit. 21. 5. 2012].

Dostupné z:

[12] TSIONGAS, N. Nette Framework MultiFileUpload.

http://addons.nette.org/cs/mfu. U£ebnice CSS //htmlbook.ru/samcss>.

[13] Vlad Merzhevich.

U£ebnice HTML [online]. 2010. [cit. 22. 9. 2010]. //htmlbook.ru/samhtml>.

[14] Vlad Merzhevich.

37

Dostupné z:
38

LITERATURA

[15] Vývojá°i Facebook.

Facebook for Websites


Facebook Open Graph


Facebook Like Button


. [16] Vývojá°i Facebook.



The Open Graph Protokol

[online]. 2012. [cit. 22. 3. 2012]. Dostupné

z: .

[19] web:googlemaps. Google Maps JavaScript API V3.

https://developers.google.com/maps/documentation/javascript/tutorial?hl=ru-RU. [20] web:netteabout. Nette Framework O Frameworku.

http://nette.org/cs/#toc-features. [21] web:plupload. Plupload About Plupload.

http://www.plupload.com/index.php. [22] web:redbeanabout. RedBeanPHP About.

http://www.redbeanphp.com/manual/about. [23] web:redbeanlist. RedBeanPHP Adding Lists.

http://www.redbeanphp.com/manual/adding_lists.

P°íloha A

Seznam pouºitých zkratek EXIF Exchangeable Image File Format PHP PHP: Hypertext Preprocessor HTML HyperText Markup Language PDF Portable Document Format ODBC Open Database Connectivity DOM Document Object Model Ajax Asynchronous Javascript and XML CSS Cascading Style Sheets XHTML Extensible Hypertext Markup Language XML eXtensible Markup Language ORM Object-relational mapping MVC Model View Controller XSS Cross Site Scripting CSRF Cross Site Request Forgery RDF Resource Description Framework GPS Global Positioning System HTTP Hyper Text Transfer Protocol MD5 Message Digest 5 IFD0 Image File Directory

39

40

PÍLOHA A.

SEZNAM POUITÝCH ZKRATEK

P°íloha B

Dotazníky B.1 Screener B.1.1 Ve°ejná £ást screeneru 1. Va²e pohlaví? (a) Muº. (b) ena. 2. Vá² v¥k? (a) 14-19 (b) 20-30 (c) 31-40 (d) 41-50 3. Jaké zku²enosti máte s fotografováním? (a) Jsem b¥ºný uºivatel fotoaparátu a rád se fotím. (b) Mám zájem o fotografování a rozumím fototechnice. (c) Jsem profesionální fotograf. (d) O fotograe a fotografování nemám zájem. 4. Sdílíte své fotograe na Internetu? (a) Ano. (b) Ne. 5. Jste registrován(a) na n¥jaké ze sociálních sítí? (a) Ano. (b) Ne.

41

42

PÍLOHA B.

Otázka

O£ekávaná odpov¥¤

Va²e pohlaví?

3x muº a 2x ºena

Vá² v¥k?

20-30 nebo 31-40

Jaké zku²enosti máte s fotografováním?

2x b¥ºný uºivatel, 2x zájemce o fotograi, 1x profesionální fotograf

Sdílíte své fotograe na Internetu? Jste registrován(a) na n¥jaké ze sociálních sítí?

3x ano a 2x ne 5x ano

Tabulka B.1: Neve°ejná £ást screeneru

B.1.2 Neve°ejná £ást screeneru Tabulka B.1 p°edstavuje neve°ejnou £ást screeneru.

B.2 Pre test dotazník •

Pokud sdílíte fotograe na Internetu, jaké pouºíváte webové stránky?

•

Na jakésociální síti jste registrován(a)?

•

Rozumíte pojmu EXIF data?

B.3 Post test dotazník •

Co Vám nejvíce vadilo a v £em byl nejv¥t²í problém?

•

Co byste ozna£il(a) jako plus aplikace?

•

O jaké vlastnost by se dala podle Vás aplikaceroz²í°it?

B.4 Seznam úkol· •

Zaregistrovat se na stránkách.

•

Editovat osobní informace.

•

P°idat fotograe.

•

Ohodnotit fotograi a p°idat komentá°.

•

Sdílet fotograi na Facebooku.

•

Editovat album.

•

P°idat uºivatele do p°átel.

DOTAZNÍKY

P°íloha C

Instala£ní a uºivatelská p°íru£ka C.1 Pot°ebné nastavení Aplikace byla testovaná na serveru s následujícími nastavení. Apache

Verze 2.2.11 a vy²²í. MySQL

Verze 5.1.36 a vy²²í. PHP

Verze 5.3.0 a vy²²í. Tato nastavení se povaºují za minimální a proto je pro spou²t¥ní aplikace pot°eba mít. Také je nutné v kongura£ním souboru php.ini Apache serveru a PHP nastavit (pokud jiº není nastaveno):

extension=php_mbstring.dll extension=php_curl.dll extension=php_exif.dll a to v uvedeném po°adí. Po p°idání t¥chto parametru je pot°eba server restartovat.

C.2 Postup p°i instalaci 1. Zkopírovat sloºku gallery z p°iloºeného CD na lokální server, nap°íklad

C:\wamp\www.

WampServer je moºn¥ stáhnout na adrese http://www.wampserver.com/en/. 2. Vytvo°it na databázovém serveru prázdnou databázi. Databáze pouºívaná p°i tvorb¥ aplikace byla pojmenována gallery. Pokud vytvo°ená databáze bude pojmenována jinak, je pot°eba zm¥nit parametry p°ipojení v kongura£ním souboru. Kongura£ní

app. Údaje db.dsn, db.user, db.pass.

soubor +cong.ini+ se nachází v adresá°e deny do prom¥nných

43

pro p°ipojení musejí být uve-

44

PÍLOHA C.

INSTALANÍ A UIVATELSKÁ PÍRUKA

3. Importovat data ze souboru database.sql, který se nachází v adresá°i database p°iloºeného CD, do vytvo°ené databáze. P°ihla²ovací údaje, které je moºné pouºít pro p°ihlá²ení do aplikace se nacházejí v souboru

personal_data.txt

ve stejné sloºce.

4. Spustit aplikaci v prohlíºe£i, nap°íklad zadáním adresy http://localhost/gallery/.

Pro vyzkou²ení nahrávání fotograí je moºné pouºít fotograe ze sloºky photos p°iloºeného CD.

P°íloha D

Obsah p°iloºeného CD P°iloºené CD obsahuje v²echny sloºky a soubory, které jsou sou£ástí této práce.

•

\gallery - sloºka se zdrojovými kódy aplikace.

•

AT X. \text - sloºka obsahující dokumentaci ve formátu PDF a L E

•

\database - sloºka obsahující .sql soubor a soubor s p°ihla²ovacími údaji do aplikace.

•

\photos - sloºka obsahující fotograe, u kterých je evidován GPS záznam.

•

readme.txt - soubor obsahující pokyny k instalaci.

45

Webová fotogalerie. Olga Budnik

Recommend Documents