Webová aplikace pro zájmové sdružení

Mendelova univerzita v Brně Provozně ekonomická fakulta

Webová aplikace pro zájmové sdružení Bakalářská práce

Vedoucí práce: Ing. Naděžda Chalupová, Ph.D.

Brno 2016

Kristýna Hiršová

2

Ráda bych poděkovala vedoucí mé práce Ing. Naděždě Chalupové, Ph.D. za odborné vedení a cenné rady v průběhu tvorby této práce.

Čestné prohlášení Prohlašuji, že jsem tuto práci: Webová aplikace pro zájmové sdružení vypracovala samostatně a veškeré použité prameny a informace jsou uvedeny v seznamu použité literatury. Souhlasím, aby moje práce byla zveřejněna v souladu s § 47b zákona č. 111/1998 Sb., o vysokých školách ve znění pozdějších předpisů, a v souladu s platnou Směrnicí o zveřejňování vysokoškolských závěrečných prací. Jsem si vědoma, že se na moji práci vztahuje zákon č. 121/2000 Sb., autorský zákon, a že Mendelova univerzita v Brně má právo na uzavření licenční smlouvy a užití této práce jako školního díla podle § 60 odst. 1 Autorského zákona. Dále se zavazuji, že před sepsáním licenční smlouvy o využití díla jinou osobou (subjektem) si vyžádám písemné stanovisko univerzity o tom, že předmětná licenční smlouva není v rozporu s oprávněnými zájmy univerzity, a zavazuji se uhradit případný příspěvek na úhradu nákladů spojených se vznikem díla, a to až do jejich skutečné výše.

V Brně dne 20.5.2016

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

5

Abstract Hiršová, K. Web application for interest association. Bachelor thesis. Brno: Mendel university, 2016 This thesis deals with the topic of design and creation of web application for Hunting dogs breeders club - WelshSpringerSpaniel section. It describes design and implementation according to identified requirements and technologies used for this purpose. Keywords: Nette, HTML, PHP, MySQL, content management system, web application

Abstrakt Hiršová, K. Webová prezentace zájmového sdružení. Bakalářská práce. Brno: Mendelova univerzita v Brně, 2016 Práce se zabývá problematikou návrhu a tvorby webové prezentace a redakčního systému Klubu chovatelů loveckých slídičů - sekce plemene WelshSpringerSpaniel. Popisuje návrh a implementaci na základě zjištěných požadavků a za tímto účelem použité technologie. Klíčová slova: Nette, HTML, PHP, MySQL, redakční systém, webová aplikace

6

OBSAH

Obsah 1 Úvod a cíl práce 1.1 Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Cíl práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Současný stav 2.1 Charakteristika zájmového sdružení . . . . . . . . . . . . 2.1.1 Organizační struktura . . . . . . . . . . . . . . . 2.1.2 Financování . . . . . . . . . . . . . . . . . . . . . 2.1.3 Současný stav webové prezentace . . . . . . . . . 2.2 Analýza webových prezentací podobného zaměření . . . 2.2.1 Sekce anglického kokršpaněla . . . . . . . . . . . 2.2.2 Sekce anglického špringršpaněla . . . . . . . . . . 2.2.3 Sekce clumber španěla a málo početných plemen 2.2.4 Sekce retrieverů . . . . . . . . . . . . . . . . . . . 2.2.5 Sekce německého křepeláka . . . . . . . . . . . . 2.3 Požadavky na nový web . . . . . . . . . . . . . . . . . . 3 Metodická východiska 3.1 Analýza dostupných CMS systémů . . . 3.1.1 WordPress . . . . . . . . . . . . 3.1.2 Joomla! . . . . . . . . . . . . . . 3.1.3 Drupal . . . . . . . . . . . . . . . 3.1.4 Závěrečné zhodnocení . . . . . . 3.2 Tvorba webových stránek . . . . . . . . 3.2.1 Persony . . . . . . . . . . . . . . 3.2.2 Drátěný model . . . . . . . . . . 3.2.3 Zásady návrhu webových stránek 3.2.4 SEO optimalizace . . . . . . . . . 4 Použité technologie 4.1 NetBeans IDE . . . . . . . 4.2 HTML a CSS . . . . . . . 4.3 PHP . . . . . . . . . . . . 4.4 MySQL . . . . . . . . . . 4.5 MVC architektura . . . . 4.5.1 Model . . . . . . . 4.5.2 View . . . . . . . . 4.5.3 Controller . . . . . 4.6 Nette Framework . . . . . 4.7 Foundation framework . . 4.8 Fotorama . . . . . . . . . 4.9 TinyMCE editor a pluginy

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9 9 9

. . . . . . . . . . .

10 10 10 11 11 12 12 12 13 13 13 14

. . . . . . . . . .

17 17 17 17 17 18 18 18 19 19 19

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

21 21 21 21 21 21 22 22 22 22 23 23 24

7

OBSAH

4.9.1 JustBoil.me Images . . . 4.9.2 FileManager4TinyMCE 4.10 Easy CSS menu . . . . . . . . . 4.11 Virtuální server . . . . . . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

24 25 25 25

5 Návrh a realizace 5.1 Persony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.2 Informační architektura . . . . . . . . . . . . . . . . . . . . . . . . . 5.3 Drátěný model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.4 Návrh databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.5 Struktura aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.6 Přístup do administrace a zabezpečení . . . . . . . . . . . . . . . . . 5.7 Popis funkcionality administrace . . . . . . . . . . . . . . . . . . . . . 5.7.1 Hlavní stránka . . . . . . . . . . . . . . . . . . . . . . . . . . 5.7.2 Editace statických stránek . . . . . . . . . . . . . . . . . . . . 5.7.3 Databáze chovných psů a fen . . . . . . . . . . . . . . . . . . 5.7.4 Štěňata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.7.5 Formuláře ke stažení . . . . . . . . . . . . . . . . . . . . . . . 5.7.6 Srazy a akce . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.7.7 Výsledky výstav . . . . . . . . . . . . . . . . . . . . . . . . . 5.7.8 Zprávy vedoucího sekce, zprávy poradce chovu, výsledky výstav 5.7.9 Vyhledávání na webu . . . . . . . . . . . . . . . . . . . . . . . 5.8 SEO optimalizace . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27 27 28 29 30 32 32 33 33 33 34 35 36 36 36 37 37 37

6 Diskuze 38 6.1 Zhodnocení výsledného řešení . . . . . . . . . . . . . . . . . . . . . . 38 6.2 Ekonomické zhodnocení . . . . . . . . . . . . . . . . . . . . . . . . . 38 6.3 Možnosti rozšíření . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 7 Závěr

40

8 Reference

41

Přílohy

43

A Ukázka podstránky s výpisem chovných psů a fen

44

B Model databáze

45

SEZNAM OBRÁZKŮ

8

Seznam obrázků Obrázek 1: Ukázka původní webové prezentace, Zdroj: http://wss.kchls.cz 12 Obrázek 2: Ukázka webové prezentace sekce anglického kokršpaněla, Zdroj: http://www.kchls-kokri.cz/ 13 Obrázek 3: Ukázka webové prezentace sekce anglického špringršpaněla, Zdroj: http://ass.kchls.cz/ 14 Obrázek 4: Ukázka webové prezentace sekce clumber španěla a málo početných plemen, Zdroj: http://cs.kchls.cz/ 15 Obrázek 5: Ukázka webové prezentace sekce retrieverů

15

Obrázek 6: Ukázka webové prezentace sekce německého křepeláka

16

Obrázek 7: Adresářová struktura Nette Sandboxu, (Nette Foundation, 2016) 23 Obrázek 8: Ukázka galerie vytvořené pomocí pluginu Fotorama

24

Obrázek 9: Ukázka prostředí pluginu FileManager4TinyMCE

25

Obrázek 10: Diagram uspořádání informací na webu

28

Obrázek 11: Drátěný model webu

29

Obrázek 12: Model databáze

30

Obrázek 13: Administrace stránky Kontakty

34

1

ÚVOD A CÍL PRÁCE

1 1.1

9

Úvod a cíl práce Úvod

Díky všeobecné dostupnosti v dnešní době, se stal internet hlavním prostředkem pro sdílení informací ve společnosti. Dříve bývaly webové stránky spíše statického charakteru. S rozvojem technologií umožňujících jejich dynamičnost dnes většina lidí dává přednost stránkám dynamickým, jejichž obsah lze měnit pomocí redakčních systémů. Díky nim je správa obsahu výrazně méně časově náročná a také není potřeba, aby každý člověk, který chce mít svůj vlastní web, ovládal jazyk HTML. V současnosti využívá webové aplikace mnoho firem a organizací pro sdílení informací s veřejností, své zviditelnění na trhu a související snahu o maximalizaci zisku. Rostoucí oblibu zaznamenává také použití webových informačních systémů. Hlavní předností je jejich dostupnost, ať už z pracoviště nebo z domova a také skutečnost, že se nemusí instalovat na velké množství koncových zařízení. Dalšími velmi často se vyskytujícími typy webových aplikací jsou elektronické obchody či sociální sítě, na kterých se dnes prezentuje téměř každá firma a mnohdy tak profil na sociální síti téměř nebo zcela úplně nahrazuje klasickou webovou prezentaci. Stejnou potřebu sdílení informací, jako jiné organizace pociťují i různá zájmová sdružení, ať už mezi členy či veřejností. Zájmová sdružení, na rozdíl od ziskového sektoru, se často potýkají s nedostatkem financí k vytvoření profesionálního řešení webových stránek, které jsou tak často vytvářeny různými dobrovolníky z řad členů či jejich známých a výsledky ne vždy odpovídají moderním trendům. Často takové stránky byly vytvořeny již před mnoha lety a tak jsou pouze statické, jejich správa náročná, takže snahy o aktualizaci obsahu v mnoha případech postupně ustávají. S problémem statických stránek se potýká také zájmové sdružení, pro něž bude vytvářena webová aplikace v této práci.

1.2

Cíl práce

Cílem práce je navrhnout a vytvořit novou podobu webové prezentace sekce plemene velššpringršpaněl Klubu chovatelů loveckých slídičů a implementovat systém pro správu obsahu. Pro dosažení tohoto cíle bude nutné seznámit se s problematikou tvorby webových aplikací, zejména s jazyky PHP, HTML, CSS a frameworkem Nette.

2

SOUČASNÝ STAV

2

10

Současný stav

2.1

Charakteristika zájmového sdružení

Vznik Klubu chovatelů loveckých slídičů (KCHLS) se datuje do roku 1924. K jeho vzniku dalo podnět několik nadšených myslivců tak vznikl nejprve pod názvem Spolek chovatelů loveckých španělů. V době druhé světové války došlo k útlumu v činnosti, která byla naplno obnovena v roce 1958. (Klub chovatelů loveckých slídičů, 2015) Hlavním posláním klubu je vytvářet vhodné podmínky pro chov plemen a zlepšovat chovnou základnu díky sledování výskytu dědičných onemocnění a jejich eliminací u potomstva stejně jako povahových znaků. Dalšími náplněmi činnosti je pořádání klubových výstav, zkoušek, přehlídek chovných jedinců a dalších akcí. V neposlední řadě také vzdělávání členů v oblastech kynologických, odborných a etických. 3× ročně vydává klub zpravodaj, který informuje o aktuálním dění v klubu i jednotlivých sekcích a také o nejnovějších poznatcích z oblasti kynologie. (Klub chovatelů loveckých slídičů, 2015) Klub má právní subjektivitu a je zapsán ve spolkovém rejstříku podle příslušných ustanovení zákona č. 89/2012 sb., občanského zákoníku. Klub v současnosti registruje 17 plemen, podle kterých se dělí na sekce. Každá sekce má vedoucího a poradce chovu. (Klub chovatelů loveckých slídičů, 2015) 2.1.1

Organizační struktura

• Konference - Je nejvyšším klubovým orgánem, který schvaluje změny stanov a dalších organizačně–právních norem KCHLS, např. organizačního, zápisního a kárného řádu. Stanovuje směr činnosti klubu na další období, hlavní cíle chovatelské a výcvikové práce k naplnění poslání klubu. Volební období je čtyřleté a jsou zde zastoupeny všechny sekce klubu prostřednictvím svých delegátů. • Výbor klubu - Statutární orgán klubu. Řídí činnost klubu během volebního období, které je čtyřleté. Výbor je složen ze sedmi členů, kteří volí ze svého středu předsedu a místopředsedu klubu. Výbor klubu pracuje podle plánu činnosti v souladu s usnesením konference. Na svá jednání zve podle potřeby zástupce sekcí, kontrolní komise, kárné komise, poradce chovu. Ustanovuje radu chovatelskou, výcvikovou a redakční. Pověřuje člena KCHLS vedením ekonomiky KCHLS, zodpovídá za finanční hospodaření klubu. • Členská schůze sekcí - Sekce nemají právní subjektivitu, jsou podřízeny výboru klubu v celém rozsahu. Členské schůze sekce svolává vedoucí sekce nebo výbor KCHLS alespoň jednou ročně prostřednictvím webu, zpravodaje, nebo jiným vhodným způsobem s uvedením programu. Členská schůze projednává a schvaluje zprávu vedoucího sekce, zprávu poradce chovu příslušného plemene, plán činnosti.

2.1

Charakteristika zájmového sdružení

11

• Kontrolní komise - Je tříčlenná, kontroluje 2× ročně hospodaření klubu, plnění plánu činnosti Výboru a jeho jednotlivých členů, práce sekcí. • Kárná komise - Rovněž je tříčlenná. Řeší kárná provinění členů KCHLS. • Chovatelská rada - Je složena z předsedy chovatelské rady (hlavního poradce chovu) a dále pak z poradců chovu jednotlivých sekcí (či plemen) sdružených v KCHLS. Hlavním posláním rady je zkvalitňování chovu jednotlivých plemen sdružených v KCHLS dle standardu FCI (Mezinárodní kynologická federace), včetně sledování zdravotního stavu. (Klub chovatelů loveckých slídičů, 2015) 2.1.2

Financování

Klub hospodaří podle předem schváleného ročního rozpočtu a finanční příjmy tvoří zejména: • členské příspěvky a zápisné • poplatky za služby členům • poplatky za služby nečlenům • příjmy z výstav, svodů, zkoušek a kynologických soutěží • dary, dotace, subvence a úroky (Klub chovatelů loveckých slídičů, 2015) 2.1.3

Současný stav webové prezentace

Současná webová prezentace sekce velššpringršpaněla je zcela statická, čímž se rozumí, že je implementována formou několika souborů obsahujících přímý zápis zdrojového HTML kódu a tudíž neobsahuje žádný systém pro správu obsahu. Veškeré změny na webu je tedy nutné provádět přímo zásahem do zdrojového kódu. Součástí stránek je také databáze chovných psů, samostatně spravovaná poradkyní chovu, která však také není databází v pravém slova smyslu a jedná se pouze o statické stránky, rovněž upravované ve zdrojovém kódu. Menu stránek je poměrně nepřehledné, jednotlivé položky jsou velmi blízko u sebe je pro ně použito poněkud malé písmo. Také celý vzhled stránek působí zastaralým dojmem. Co se týče obsahu, tak stránky poskytují vše potřebné a jsou pravidelně aktualizovány, což je velmi pracné a časově náročné, proto se sdružení rozhodlo přistoupit k vytvoření stránek nových, které by měly obsahovat také redakční systém. Aktuální stav webové prezentace je zachycen na obrázku 1.

2.2

Analýza webových prezentací podobného zaměření

12

Obrázek 1: Ukázka původní webové prezentace, Zdroj: http://wss.kchls.cz

2.2

Analýza webových prezentací podobného zaměření

Pro účely této analýzy byly vybrány webové prezentace dalších sekcí, které rovněž spadají pod Klub chovatelů loveckých slídičů, ale jde o jiná plemena. 2.2.1

Sekce anglického kokršpaněla

Tento web je založen na službě pro vytváření webových stránek estranky.cz, kde mají uživatelé k dispozici několik šablon pro vzhled a pomocí nich si jednoduše vytvoří web. Stránky nemají příliš přehledné menu, jelikož pod jednotlivými položkami se nachází velmi nesourodé informace a už z názvů je někdy obtížné si představit co se pod odkazem může nacházet, například Výkon a Exteriér. Je však možné, že pro návštěvníky znalé chovu psů jsou tyto názvy srozumitelné. Například pod odkazem kontakty se neobjeví stránka s kontakty, ale seznam příspěvků. Další zvláštností je název fotoalba Pozvánka s pozvánkou na členskou schúzi. Celkové členění sekcí webu se nezdá příliš logické. Vhodnější by bylo zřejmě výsuvné menu, aby uživatel získal představu o struktuře stránek. Možnou výhodou, vyplývající z použití estranky.cz je možnost vyhledávání. Přestože oproti sekci Welššpringršpaněla mohou obsah upravovat dynamicky, jsou některé sekce několik let neaktualizované. Náhled této webové prezentace je dostupný na obrázku 2. 2.2.2

Sekce anglického špringršpaněla

Na tomto webu, kde hlavní stránka hraje všemi barvami a nabývá neobvyklé délky, je vidět použití dnes již zastaralé technologie rámů. Menu je oproti předchozímu webu mnohem přehlednější a vysouvací. Stránky také obsahují mnohem více informací, ne všechny části jsou však aktualizované. Na existenci redakčního systému zde také nic nepoukazuje. Tyto stránky jsou k vidění na obrázku 3.

2.2

13

Analýza webových prezentací podobného zaměření

Obrázek 2: Ukázka webové http://www.kchls-kokri.cz/

2.2.3

prezentace

sekce

anglického

kokršpaněla,

Zdroj:

Sekce clumber španěla a málo početných plemen

Vzhled těchto stránek je vcelku příjemný. Opět je patrné použití rámů a uživatel se zde mnoho informací nedozví, jelikož u značné části stránek je napsané, že se připravují. Vzhledem k tomu, že sekce sdružuje více plemen, dalo by se očekávat, že web bude naopak obsahovat více informací než weby pouze jednoho plemene. Chybí mnohé informace, obvyklé na stránkách ostatních sekcí. Náhled této webové prezentace je dostupný na obrázku 4. 2.2.4

Sekce retrieverů

Při pohledu na tyto stránky zaujme blikající nápis new, které se na stránkách vyskytovaly v 90. letech. Celkový vzhled nepůsobí nikterak moderně a neobvyklé je umístění menu ve spodní části stránky. Jednotlivé podstránky jsou vzhledově nesourodé a pro nového návštěvníka webu je v nich těžká orientace. Web však obsahuje velmi mnoho informací, takže členové sekce zde zřejmě naleznou vše potřebné. Ukázku naleznete na obrázku 5. 2.2.5

Sekce německého křepeláka

Zde je opět patrné použití systému estranky.cz. Web je podobný webu anglického kokršpaněla. Opět je zde stejný problém s menu, kdy po kliknutí na nějakou položku se zobrazí nepřehledný seznam příspěvků. Zprávy poradce chovu jsou již čtyři roky neaktualizované. Tento web je ke shlédnutí na obrázku 6.

2.3

Požadavky na nový web

14

Obrázek 3: Ukázka webové prezentace sekce anglického špringršpaněla, Zdroj: http://ass.kchls.cz/

2.3

Požadavky na nový web

Požadavky na nový web jsou, aby obsahoval administrační systém, do kterého bude mít přístup jen správce webu. Struktura bude vycházet z původního webu a redakční systém bude obsahovat možnosti pro úpravu zejména následujících informací: • novinky • informace o chovných psech a aktuálních vrzích štěňat • informace o konaných akcích sekce • zprávy poradce chovu a vedoucího sekce • výsledky výstav a zkoušek, zápisy ze schůzí • přidávání a mazání formulářů ke stažení • vkládání fotek psů a galerií ze srazů a akcí • editace obsahu statických stránek Co se týče vzhledu, jediným požadavkem je použití přírodních barev.

2.3

Požadavky na nový web

15

Obrázek 4: Ukázka webové prezentace sekce clumber španěla a málo početných plemen, Zdroj: http://cs.kchls.cz/

Obrázek 5: Ukázka webové prezentace sekce retrieverů

2.3

Požadavky na nový web

Obrázek 6: Ukázka webové prezentace sekce německého křepeláka

16

3

METODICKÁ VÝCHODISKA

3

17

Metodická východiska

3.1

Analýza dostupných CMS systémů

Content Management System (CMS) je systém, umožňující správu obsahu webových stránek, aniž by uživatel disponoval znalostí k tomuto účelu nezbytných jazyků. Obsah je vytvářen v administrační části (backend) a následně je zobrazen ve frontendu. Tato kapitola se zabývá srovnáním tří nejrozšířenějších open source systémů založených na jazyce PHP. 3.1.1

WordPress

V současnosti nejpoužívanější CMS systém (Pressio.cz, 2011). Vznikl v roce 2003, původně jako blogovací systém. V dnešní době se jedná o vhodné řešení pro různé druhy webů, jako například sociální sítě či elektronické obchody. Vyznačuje se velmi snadnou instalací a uživatelskou přívětivostí. Je vhodný pro začátečníky, obsahuje nepřeberné množství šablon pro vzhled stránek. Šablony jsou připraveny k okamžitému použití a není nutné je nijak upravovat. Základní funkcionalitu je možné rozšířit o tisíce pluginů, z nichž mnohé jsou dostupné zdarma a jejich stažení a aktivace je velmi jednoduchá. Mezi silné stránky patří také obrovská uživatelská komunita. 3.1.2

Joomla!

Jedná se o druhý nejčastěji používaný CMS systém (Pressio.cz, 2011). Pochází z roku 2005, je využíván pro weby mnoha významných společností, jako Linuxu nebo Harvardské univerzity (Huyen, 2012). Je vhodný také pro neveřejné sítě, kde ho využívá např. Citibank. Kromě běžných webových stránek je používán téměř na vše, od systémů pro řízení majetku, přes rezervační systémy, až po komplexní firemní adresáře (Pressio.cz, 2011). Obsahuje poněkud méně témat vzhledu a pluginů než WordPress a rovněž administrační prostředí je méně uživatelsky přívětivé a instalace složitější. 3.1.3

Drupal

Drupal je dalším velmi rozšířeným CMS systémem. Vznikl v roce 2000, je využíván např. pro webové stránky Bílého domu (Allton, 2013). Tento systém je založen na modulárním principu. Základem je jádro, které mohou vývojáři rozšiřovat o své moduly a vytvořit tak téměř jakýkoliv typ projektu. Důraz je kladen na přehlednost kódu. S těmito vlastnostmi souvisí především velká vývojářská přívětivost a možnost tvorby velmi rozsáhlých projektů. Uživatelské rozhraní je označováno za obtížné k pochopení. Instalace také nepatří k nejjednodušším.

3.2

Tvorba webových stránek

3.1.4

18

Závěrečné zhodnocení

Použití jednoho z výše uvedených redakčních systémů by jistě přineslo některé výhody, například by odpadl problém s návrhem databáze, nahráváním a správou souborů a tvorbou vlastního administračního systému. Na druhou stranu tyto redakční systémy představují velmi pokročilé a rozsáhlé nástroje vhodné spíše k realizaci složitějších projektů. Jelikož jejich administrační rozhraní nabízí nespočet možností, bylo by nejprve nutné se zde zorientovat, stejně jako v široké nabídce pluginů. Dále, pokud by byla použita některá z dostupných šablon, nebylo by nutné kódování vlastního designu. Zároveň by pak bylo možné, že web bude vypadat stejně jako desítky či stovky jiných webů používajících stejnou šablonu. Pokud tedy chceme design vlastní, tak nám tato skutečnost také práci neušetří. V případě této webové prezentace tedy bude vhodnější vytvořit vlastní řešení s jen opravdu potřebnými funkcemi a jednoduchým ovládáním.

3.2 3.2.1

Tvorba webových stránek Persony

Persona, neboli fiktivní model návštěvníka webu je jedním z nejdůležitějších faktorů při návrhu, které rozhodují o tom, zda bude web úspěšný.(Gottwald, 2014) Pomahá lépe pochopit potřeby a očekávání cílových skupin návštěvníků tak lépe navrhnout obsah i funkčnost webu. Persona by měla být co nejkonkrétnější, obsahovat co nejvíce údajů, aby nám návštěvníka co nejvíce přiblížila. Podle H1.cz (2006) by persona měla obsahovat přibližně tyto informace: • jméno, fotka • věk • bydliště • zájmy • rodinný stav • vzdělání • vztah k vašim produktům či službám, znalost jejich používání • motivace, s jakou tento člověk přišel na váš web • situace, v jaké se člověk nachází při návštěvě webu Ideálním počtem person jsou dvě až tři, které se mezi sebou liší, aby bylo zastoupeno více segmentů potenciálních návštěvníků.(Gottwald, 2014)

3.2

Tvorba webových stránek

3.2.2

19

Drátěný model

Wireframe, neboli drátěný model webu slouží k definici základního rozmístění prvků na stránce pomocí čar a textu. Přispívá k lepší představě o budoucí struktuře a funkčnosti webu, stejně jako o způsobu navigace. Napomáhá také komunikaci mezi zákazníkem a tvůrci webu, eliminuje šanci vzájemného nepochopení se a usnadňuje další kroky při tvorbě webového řešení, jako jsou grafický návrh a implementace. 3.2.3

Zásady návrhu webových stránek

Při celkovém pohledu na webovou stránku by mělo být návštěvníkovi jasné o čem stránka je a jak ji používat. Zvláště prvky jako navigace, vyhledávání a odkazy, na které lze kliknout by měly být jasně rozpoznatelné. Lidé totiž obecně neradi přemýšlí, jak něco udělat. (Krug, 2006) Bylo zjištěno, že návštěvníci stránku spíše rychle očima prolétnou a hedají první věc, která je zaujme, než aby důkladně studovali veškerý textový obsah. Tvůrce webu obvykle předpokládá, že návštěvníci budou hedat nejlepší vhodnou alternativu, skutečnost je však taková, že pouze hledají první rozumnou možnost, na níž si myslí, že najdou to, co hledají. Aby byla orientace při rychlém prohlížení co nejsnazší, je především vhodné dodržovat jasnou vizuální hierarchii a seskupování souvisejících prvků. Dále napomáhá dodržování zvyklostí v uspořádání webu, jako je například umístění menu na levé straně či loga v hlavičce. S inovativními řešeními bychom měli přicházet jen tehdy, pokud jsou minimálně stejně tak dobré a samovysvětlující jako webové zvyklosti. (Krug, 2006) Velmi důležitá je kvalita navigace, která nám poskytuje opěrné body, dává přehled o tom, co na webu najdeme a vzbuzuje důvěru v tvůrce webu. Měla by být umístěna tam, kde ji lze očekávat a ne na velmi neobvyklých místech. Také by měla mít konzistentní obsah i umístění na všech stránkách webu. V rámci navigace je vhodné umístit i odkaz na domovskou stránku, aby byl vždy viditelný a v případě, že se návštěvník na webu ztratí, může kdykoli začít s prohlížením od začátku. Ačkoliv funkci přenesení na hlavní stránku mívá obvykle i logo v hlavičce, najdou se uživatelé, kteří o tom nemusí vědět. Někteří lidé místo klikání na odkazy v navigaci upřednostňují vyhledávání, proto by na webu neměla možnost vyhledávání chybět. (Krug, 2006) Na každé stránce by měl být zřetelně označený název, který odpovídá odkazu, na který uživatel kliknul. Název také musí zaujímat správné místo ve vizuální hierarchii stránky.(Krug, 2006) 3.2.4

SEO optimalizace

SEO, z anglického Search Engine Optimalization je proces úpravy webových stránek takovým způsobem, aby došlo ke zvýšení pravděpodobnosti nalezení vyhledávači. Zahrnuje mnoho úkonů, mezi nejzákladnější patří:

3.2

Tvorba webových stránek

20

Vytvoření unikátních titulků pomocí značky v části HTML dokumentu. Titulek by měl být jedinečný na každé stránce, nepříliš dlouhý, srozumitelný a měl by svým názvem souviset s obsahem příslušné stránky. Právě titulek se zobrazuje na prvním řádku ve výsledcích vyhledávání jako podtžený odkaz podle kterého se návštěvníci rozhodují, zda daná stránka souvisí s předmětem jejich zájmu. (Google, 2010) Dalším bodem je použití metaznačky description, která by se opět měla nacházet v části a být jedinečná pro každou stránku. Tato značka by měla v několika větách popisovat, co je obsahem dané stránky. Vyhledávače mohou obsah značky description použít jako úryvek v zobrazení výsledků vyhledávání. (Google, 2010) Důležité je také zlepšení struktury url adres, které také mnoho napovídají o obsahu stránky a jejich názvy by proto neměly být zavádějící či nicneříkající. Adresy by také neměly být příliš dlouhé ,neboť se špatně pamatují a odrazují tak uživatele od vytváření odkazů na web. URL adresa se též zobrazí ve výsledku vyhledávání. Není vhodné, aby se na dvou různých adresách zobrazoval stejný obsah. (Google, 2010) Dále by měl být kladen důraz na samotný obsah webu, který je nejdůležitějším faktorem posouzení kvality. Pokud text uživatele zaujme a připadá jim užitečný, je mnohem vyšší pravděpodobnost, že na něj někde odkáží. (Google, 2010) Také je třeba klást důraz na správné používání HTML značek pro tvorbu nadpisů. Tyto nadpisy uživateli říkají, jaká je důležitost jednotlivých prvků stránky a přispívají k přehlednosti. Nemělo by se to však s jejich používáním přehánět a měly by být jen tam, kde to dává smysl. (Google, 2010) Omezit, které části webu nechceme, aby vyhledávače indexovaly, například administraci, je možné pomocí souboru robots.txt. (Google, 2010) Významným faktorem úspěšnosti umístění webu ve vyhledávačích je množství zpětných odkazů vedoucích na web. Ty se dají získat například registrací do katalogů webových stránek souvisejících s tématem webu nebo přímo od návštěvníků, jež stránky zaujmou a odkazují na ně na vlastních stránkách nebo také na sociálních sítích či v různých diskuzích na internetu. (Google, 2010)

4

POUŽITÉ TECHNOLOGIE

4 4.1

21

Použité technologie NetBeans IDE

Jedná se o zdarma dostupné integrované vývojové prostředí, vyvíjené společností Oracle. Primárně slouží pro vývoj v jazyce Java, v němž je také napsáno. Lze v něm ale vyvíjet i v mnoha dalších jazycích a poskytuje podporu mnoha frameworkům. Jelikož má NetBeans modulární architekturu, dochází také k open source vývoji velkého množství užitečných doplňků, ať už vývojáři společnosti Oracle nebo komunitními přispěvateli.

4.2

HTML a CSS

HyperText Markup Language (HTML), který vznikl v roce 1990 je značkovací jazyk pro tvorbu webových stránek. Skládá se z párových a nepárových značek(tagů) a jejich atributů popisujících rozložení webu. Cascading Style Sheets (CSS), vzniklý roku 1996 je jazyk umožňující popis vzhledu prvků definovaných v HTML. Nahrazuje dříve používané stylistické značky jazyka HTML. CSS styl je obvykle uložen ve zvláštním souboru a připojen k hlavičce HTML pomocí značky link. Definice stylu se skládá ze selektoru vybraného HTML prvku a bloku deklarací.

4.3

PHP

HyperText Preprocesor (PHP), vzniklý roku 1994, je skriptovací jazyk pracující na straně serveru. Slouží k dynamickému zobrazování obsahu webových stránek a aplikací. PHP je multiplatformní a lze jej provozovat s většinou webových serverů a na většině dnes existujících operačních systémů. Obsahuje nativní podporu mnoha databázových systémů, jako MySQl, PostgreSQL a další (Zajíc, 2004). Mezi další výhody patří snadné učení, rozsáhlá dokumentace a velké množství uživatelů.

4.4

MySQL

Jedná se o relační databázový systém. Spolu s webovým serverem Apache a jazykem PHP patří k nejčastěji využívaným technologiím pro tvorbu webových aplikací. Komunikace s touto databází probíhá pomocí jazyka SQL.

4.5

MVC architektura

Jedná se o softwarovou architekturu, která rozděluje datový model aplikace, uživatelské rozhraní a řídicí logiku do tří nezávislých komponent tak, že modifikace některé z nich má jen minimální vliv na ostatní (Wikipedia. Model-view-controller, 2014). Komponenty jsou následující:

4.6

Nette Framework

4.5.1

22

Model

Model obsahuje logiku a vše, co do ní spadá. Mohou to být výpočty, databázové dotazy, validace a podobně. Model vůbec neví o výstupu. Jeho funkce spočívá v přijetí parametrů zvenku a vydání dat ven. Model neví, odkud data v parametrech přišla a ani jak budou výstupní data zformátována a vypsána. (Čápka, 2013) 4.5.2

View

Pohled (View) se stárá o zobrazení výstupu uživateli. Nejčastěji se jedná o html šablonu, obsahující HTML stránku a tagy nějakého značkovacího jazyka, který umožňuje do šablony vkládat proměnné, případně provádět iterace (cykly) a podmínky. View není jen šablona, ale zobrazovač výstupu. Obsahuje tedy minimální množství logiky, která je pro výpis nutná. View podobně jako Model vůbec neví, odkud mu data přišla, stará se jen o jejich zobrazení uživateli. (Čápka, 2013) 4.5.3

Controller

Jedná se o jakéhosi prostředníka, se kterým komunikuje uživatel, model i view. Drží tedy celý systém pohromadě a komponenty propojuje. View přijme data od controlleru a vloží je do připravené šablony. Hotová stránka je zobrazena uživateli, aniž by ten o celém procesu něco tušil. (Čápka, 2013)

4.6

Nette Framework

Frameworky obecně jsou knihovny, které mají ulehčit práci při programování aplikace (Grudl 1, 2009). Nette je český open source PHP framework vhodný pro tvorbu primitivních i velmi složitých webových aplikací. Zaměřuje se na eliminaci bezpečnostních rizik a znovupoužitelnost kódu. Využívá objektově orientované programování a je tvořen sadou samostatných a znovupoužitelných komponent, které je možné používat také nezávisle na zbytku frameworku. Struktura Nette je založena na MVC architektuře a tu tak splňují i aplikace za pomocí něho napsané. (Nette.org, 2015), (Wikipedia. Nette framework, 2015) Pro účely zobrazení výstupu uživateli využívá Nette Šablonovací systém Latte. Jeho syntaxe vychází z PHP a použití je možné i samostatně bez frameworku. Latte oproti PHP výrazně zjednodušuje zápis některých obvyklých konstrukcí používaných při výpisu informací. Základem jsou dva druhy značek, které Latte nazývá makra. Prvním typem jsou makra ve složených závorkách, například {foreach …} a druhým n:makra, například n:if=”…”, která se umisťují přímo do HTML značek jako atributy. Párová makra je možné přepsat na n:makra a naopak. Pro jednoduchou změnu ve výstupu existují tzv. filtry, které se od maker oddělují svislítkem, např. {$promenna|capitalize} převede první písmeno každého slova na velké.

4.7

Foundation framework

23

Hlavní předností Latte je, že veškeré vypisované proměnné automaticky escapuje, čímž se rozumí převod znaků majících v daném kontextu speciální význam na jiné odpovídající sekvence(Grudl 2, 2009). Tím je zajištěno zabezpečení proti útoku Cross-Site Scripting, který využívá nezabezepčených výstupů k podstrčení kódu a může vést například ke zcizení identity uživatele. Po stažení frameworku je k dispozici základní kostra aplikace, tzv. Sandbox. Definuje základní adresářovou strukturu, kterou je ovšem možné upravit dle vlastního uvážení. Dále Sandbox obsahuje základní funkcionalitu potřebnou v takřka každé webové aplikaci, a to přihlašovací formulář s rozhraním pro autentizaci uživatele. Struktura Sandboxu je patrná na následujícím obrázku.

Obrázek 7: Adresářová struktura Nette Sandboxu, (Nette Foundation, 2016)

4.7

Foundation framework

Tento framework patří mezi front-end frameworky. Obsahuje velké množství komponent pro zjednodušení tvorby uživatelského rozhraní. Základem je 12-ti sloupcová mřížka, pomocí níž lze dosáhnout libovolného rozložení webu bez použití CSS, pouze přiřazením příslušných tříd k HTML elementům. Mřížka je dostupná ve třech velikostech - small, medium a large. Design tak lze definovat pro více velikostí displeje.

4.8

Fotorama

Fotorama je jQuery plugin, který umožňuje jednoduše vytvořit uživatelsky přívětivou fotogalerii. Nabízí různé možnosti nastavení vzhledu a přechodů snímků. V této práci je použit pro zobrazení fotogalerií ze srazů a akcí. Ukázku galerie vytvořené pomocí hoto pluginu můžete vidět na obrázku 8.

4.9

TinyMCE editor a pluginy

24

Obrázek 8: Ukázka galerie vytvořené pomocí pluginu Fotorama

4.9

TinyMCE editor a pluginy

Jedná se o open source WYSIWIG editor napsaný v JavaScriptu. Umožňuje vytváření HTML kódu uživatelům neznalým tohoto jazyka. Pro použití se stáhne, uloží na server a následně pomocí skriptu vloží do požadované stránky. TinyMCE umožňuje transformovat HTML elementy, obvykle textarea, na instance editoru. Nabízí mnoho možností formátování, rozhraní je podobné jako např. MS Word. Lze jednoduše nastavit, které možnosti budou dostupné pro který HTML prvek. Jelikož TinyMCE v základní bezplatné verzi nenabízí některé pokročilejší nástroje, jeko je nahrávání a správa souborů a obrázků, bylo nutné použití pluginů s příslušnými možnostmi. 4.9.1

JustBoil.me Images

Tento open source plugin slouží pro nahrávání obrázků na server a vkládání do textu v TinyMCE editoru. Zprovoznění zahrnuje stažení do složky plugins a nastavení cesty pro ukládání obrázků v konfiguračním souboru. Po aktivaci se v menu editoru objeví ikona pro nahrávání obrázků. Vybraný obrázek je nahrán na server a ihned zobrazen v textu editoru. V této práci byl plugin použit na všech stránkách, kde se vyskytují obrázky.

4.10

Easy CSS menu

4.9.2

25

FileManager4TinyMCE

Jde rovněž o open source plugin, který, jak název napovídá, slouží k nahrávání a správě souborů. Stejně jako předchozí plugin se zprovozní nahráním do složky pluginů TinyMCE editoru. Tento plugin je použit u stránek, kam je nutné vkládat odkazy na soubory. Lze vkládat také obrázky, ale pro ty je vhodnější předchozí plugin, neboť zde by se po nahrání musel obrázek do textu přidat ručně pomocí zadání jeho názvu a cesty k němu. Prostředí tohoto pluginu je možné vidět na obrázku 9.

Obrázek 9: Ukázka prostředí pluginu FileManager4TinyMCE

4.10

Easy CSS menu

Jedná se o aplikaci od firmy Blumentals Software, jenž slouží k tvorbě rozbalovacích menu pouze za použití CSS. Menu funguje ve všech prohlížečích a nevyžaduje JavaScript. Přestože ve verzi zdarma není tolik možností úpravy vzhledu a rozsáhlá nabídka šablon jako ve verzi placené, lze i tak dosáhnout dobrého výsledku. V aplikaci se nastaví požadované barvy a struktura menu a následně je vygenerován HTML a CSS kód, které se vloží na požadované místo webu. Dále už lze změny či přidávání kategorií upravovat jednoduše v kódu.

4.11

Virtuální server

Pro použití technologií jako PHP a MySQL je podmínkou existence webového serveru. Celosvětově nejpoužívanějším webovým serverem je Apache. Je multiplatformní a zdarma distribuovaný. Jednou z aplikací, sloužících pro simulaci webového

4.11

Virtuální server

26

serveru na lokálním počítači je WAMP server. Jeho název je tvořen prvními písmeny jeho čtyř součástí: Windows, Apache, MySQL a PHP a je doplněn také o nástroj PHPMyAdmin pro správu databáze ve webovém prostředí.(Král, 2013)

5

NÁVRH A REALIZACE

5 5.1

27

Návrh a realizace Persony

Hlavní předpokládanou skupinou návštěvníků webu jsou členové chovatelského spolku. Naleznou zde vše potřebné o akcích klubu a výsledcích výstav, zprávy poradce chovu a vedoucího sekce, zápisy ze schůzí a další informace. Dalšími návštěvníky mohou být majitelé a další příznivci psů daného plemene, kteří hledají nějaké informace o plemeni nebo by se chtěli stát členy klubu. Pro účely usnadnění návrhu tohoto webu byly vytvořeny 3 persony: • Petr, člen sekce • 45 let, žije v Ivanovicích u Brna v rodinném domě • Zájmy: tenis, výlety do přírody, četba, chov psů • Vzdělání: vysokoškolské v oboru Stavební inženýrsví • ženatý, 2 děti • Jako člen sekce a nadšený chovatel je častým návštěvníkem webu. Hledá zde aktuální informace o dění v sekci, zápisy ze schúzí či výsledky výstav. Je každodenním uživatelem internetu. • Pavel • 16 let, žije v obci Veverská Bítýška v rodinném domě s rodiči a mladší sestrou • Zájmy: zvířata, zejména psi, fotbal, počítačové hry • Vzdělání: student střední školy • Pavel má velmi rád zvířata, zejména velššpringršpaněla, kterého mají doma. Ve škole dostal za úkol připravit referát do biologie na vybrané téma, takže plemeno velššpringršpaněl bylo jasnou volbou. V rámci hledání podkladů pro svoji práci narazil na tento web, kde využije zejména informace o historii a standardu plemene. • Lenka • 35 let, žije v centru Brna v bytě, ale brzy se bude stěhovat na vesnici • Zájmy: sport, výlety do přírody, zdravý životní styl, studium jazyků • Vzdělání: středoškolské, pracuje jako recepční v hotelu • vdaná, 2 děti • Lenka vyrůstala na vesnici, takže měla vždy blízko k přírodě a zvířatům. Hlavně kvůli dvěma malým dětem by se rádi s manželem na vesnici opět přestěhovali

5.2

Informační architektura

28

a ve volných chvílích se začali věnovat chovu psů. Plemeno velššpringršpaněl zvolili jako nejvhodnější a na web tak Lenka zavítala za účelem zjištění informací o dostupných štěňatech a způsobu, jak se stát členem.

5.2

Informační architektura

Poté, co jsme se seznámili s potencionálními typy možných uživatelů, je možné zvolit informační architekturu webu, která by jim vyhovovala a v které by se snadno orientovali. U informační architektury došlo oproti původnímu webu k některým změnám. Původní menu zahrnovalo 15 odkazů, z nichž většina vedla na jedinou podstránku kromě odkazu Informace, který obsahuje více zanořených stránek a nepůsobí pro nového návštěvníka přehledně. Nové menu bude obsahovat pouze šest hlavních kategorií: Informace o plemeni, Informace o klubu, Chovní psi, Formuláře ke stažení, Kontakty a Novinky. Každá z nich obsahuje pouz maximálně jednu další úroveň podategorií, které budou zobrazeny ve vysouvacím menu, takže je hned zřejmé, kam daný odkaz vede a jaké jsou na webu možnosti. První položkou menu bude odkaz na hlavní stránku z důvodů zmíněných v kapitole 3.2.3. Není vyloučeno, že na web zavítá také návštěvník s menší počítačovou gramotností nebo menším množství zkušeností s používáním internetu, proto toto tlačítko jistě najde své uplatnění. Na obrázku 10 naleznete schéma informační architektury.

Obrázek 10: Diagram uspořádání informací na webu

• Informace o plemeni: Obsahuje informace o standardu a historii plemene, bodovém hodnocení soutěží a návod na úpravu srsti.

5.3

Drátěný model

29

• Informace o klubu: V této části se nachází informace o srazech a akcích klubu, zprávy poradce chovu a vedoucího sekce, zápisy ze schůzí, výsledky výstav a zkoušek a informace o klubových poplatcích. • Chovní psi: Tato sekce zahrnuje databázi chovných psů a informace o štěňatech. • Formuláře ke stažení: Zde jsou umístěny různé formuláře pro chovatele a také například žádost o členství v klubu. • Kontakty: Kontakt na poradce chovu a vedoucího sekce. • Novinky: Zde jsou informace o posledních aktualizacích webu.

5.3

Drátěný model

Jak již bylo řečeno v kapitole 3.2.2, drátěným modelem je popsána základní struktura prostorového rozvržení informací na stránce. Hlavní stránka i podstránky budou mít stejnou strukturu, která je znázorněna drátěným modelem na obrázku 11.

Obrázek 11: Drátěný model webu

Stránka se skládá z pěti základních prvků. Hlavičky, která obsahuje úvodní obrázek a název webu. V levé části se nachází rozbalovací menu s šesti hlavními kategoriemi a odkazem na hlavní stránku. Pod hlavičkou je umístěna drobečková navigace pro snazší orientaci, pod ní samotný obsah stránky a v dolní části patička s datem poslední aktualizace a odkazem pro přihlášení do administrace.

5.4

5.4

Návrh databáze

30

Návrh databáze

Na obráku 12. naleznete model databáze. Z důvodu délky tabulky chovni-psi je zde pouze její zkrácená verze. Plnou verzi naleznete v přílohách. Databáze obsahuje následující tabulky:

Obrázek 12: Model databáze

Tabulka novinky slouží k ukládání záznamů o posledních změnách na webu. Obsahuje sloupce pro vložení data a textu novinky. Tabulka oznameni je určena k ukládání mimořádných oznámení, například o aktuálně chystaných akcích. Obsahuje sloupce nazev a text. Tabulka dokumenty obsahuje sloupce nazev, a cesta pro záznamy o různých typech souborů nahraných na web, zobrazovaných v sekcích Formuláře ke stažení nebo Výsledky pracovních zkoušek. Sloupec stranka určuje, na které stránce se bude daný soubor zobrazovat. Tabulka stranky eviduje veškeré delší texty na různých stránkách a také obsahy stran, které jsou pouze statické. Sloupce jsou nazev, který v případě, že jde o textovou stránku obsahuje její název, pokud jde o kratší text v rámci nějaké jiné stránky, je prázdný. Dalším sloupcem je url, který určuje kdy se má který řádek tabulky zobrazit. Sloupec navigace obsahuje název, pod kterým je daná stránka zobrazena v drobečkové navigaci. Sloupec text slouží pro uložení vlastního textového obsahu stránky.

5.4

Návrh databáze

31

Následující 3 tabulky slouží k ukládání záznamů o chovných jedincích sekce. Tabulka chovni-psi obsahuje sloupce pro uložení čísla loveckého psa a registračního čísla, sloupec fena, nabývající hodnoty 0 pokud jde o psa a 1 pro fenu. Dále sloupce jmeno, datum-nar, vyska, barva-oka pro příslušné údaje. Sloupce dkk a hd pro údaje o stupni dysplazie kyčelního kloubu, sloupce chovatel a majitel pro informace a kontakty na majitele a chovatele, dále sloupce vysledky-vystav a poznamka. Dalšími sloupci jsou sloupce pro údaje o rodičích psa a celém rodokmenu. Sloupec vyrazen, nabývající hodnot 1 nebo 0 udává, zda byl pes vyřazen do archivu. Sloupce maly-nahled a velky-nahled udávají cestu k malému a velkému náhledovému obrázku každého jedince. Tabulka fotky-psu obsahuje sloupce cesta, slozka a nazev pro údaje o fotografiích každého jedince, pokud byly vloženy. U každé fotky je také sloupec maly-nahled a velky-nahled, jenž je při vytvoření fotografie prázdný. Po zvolení fotografie jako náhledové se sem uloží cesty k příslušným náhledům. Každý pes má vždy pouze jednu fotku označenou jako náhledovou. Poslední tabulkou související se psi je tabulka vysledky-zkousek sloužící k uložení výsledků zkoušek absolvovaných psem. Obsahuje sloupec id-psa, který určuje, ke kterému psovi daný řádek patří. Dále sloupce pro jednotlivé hodnocené znaky a sloupce pro druh zkoušky, počet dosažených bodů a cenu. Tabulky srazy, srazy-fotky a srazy-galerie slouží k zaznamenání průběhu srazů sekce a případně vytváření fotodokumentace. Tabulka srazy obsahuje sloupce nazev, rok a text. tabulka srazy-galerie sloupce nazev a id-srazu, pro určení, ke kterému srazu patří. Tabulka srazy-fotky obsahuje sloupce id-galerie pro zařazení do galerie, a dále sloupce cesta a nahled pro uložení cesty k obrázku výchozímu i náhledovému. Tabulky vystavy, vystavy-tridy a tridy-psi slouží k evidenci účastí a výsledků psů na výstavách. Tabulka vystavy obsahuje sloupec rok, potřebný pro filtraci výstav ve výpisu. Dalšími sloupci jsou nazev, rozhodci, pocet pro uložení počtu přihlášených psů a poznamka pro případné doplňující informace. Tabulka vystavytridy reprezentuje třídy psů, které byly zastoupeny na výstavě a obsahuje pouze sloupce id-vystavy a nazev. Tabulka tridy-psi obsahuje sloupce pro uložení jména psa, jmen rodičů, informací o majiteli a chovateli, dále sloupec id-tridy, který určuje, ke které třídě je pes přiřezen. Posledním sloupcem je hodnoceni, kam se uloží výsledné hodnocení psa na výstavě. K výstavám lze vkládat libovolné množství tříd a ke každé třídě libovolný počet psů. V tabulce vrhy jsou shromážděny údaje o chovatelských plánech, aktuálních a očekávaných vrzích šťeňat. K uložení informací o chovatelské stanici obsahuje sloupce pro zadání názvu chovatelské stanice, pro případnou adresu webu a sloupec kontakt pro údaje o kontaktní osobě pro zájemce o štěňata. Dalšími sloupci jsou id, otec, matka, pocet-stenat a datum-vrhu pro uložení informací o spojení psů a počtu vržených štěňat. Sloupec plan nabývá hodnoty 1 nebo 0 podle toho, jesli se jedná o chovatelský plán a sloupec aktualni nabývá hodnoty 1 pokud je vrh aktuální a 0 pokud je očekávaný. Každý řádek tabulky může být zároveň chovatelským plánem

5.5

Struktura aplikace

32

i aktuálním nebo očekávaným vrhem. Posledním sloupcem je archiv, jehož výchozí hodnota je 0 a po archivaci vrhu se změní na 1. Tabulka zpravy obsahuje zápisy ze schůzí, zprávy vedoucího sekce a poradce chovu. Sloupce této tabulky jsou id, nazev, text a typ. Poslední uvedený sloupec určuje o který typ příspěvku se jedná. Tabulka aktualizace se sloupci id, datum a text slouží k uložení aktuální informace o poslední aktualizaci webu zobrazované v patičce. Při změně je datum automaticky aktualizováno.

5.5

Struktura aplikace

Struktura aplikace vychází ze struktury Nette Sandboxu, což je již zmíněný základ aplikace, který je možné stáhnou se samotným frameworkem. Dále byla rozdělena na dva moduly: • AdminModule: Obsahuje presentery a šablony související s administrací webu. • FrontModule: Tento modul obsahuje šablony a presentery pro zobrazení obsahu v prezentační části. Oba tyto moduly sdílí složku modelů, ve které se nachází modely pro komunikaci s databází. Každý model dědí ze společného abstraktního předka, který zajišťuje připojení k databázi. Modely musí bý zaregistrovány v souboru config.neon. Modely odpovídají jednotlivým tabulkám v databázi, kromě modelů SrazyModel a VystavyModel, které pracují se všemi tabulkami souvisejícími se srazy a výstavami.

5.6

Přístup do administrace a zabezpečení

Jelikož web má pouze jednoho administrátora, bylo zvoleno uložení uživatelského jména a hesla v podobě otisku, vytvořeného hashovací funkcí sha256 do souboru config.neon. Jako další uživatel by přicházel v úvahu pouze poradce chovu, který by spravoval databázi chovných psů. Odkaz pro přístup do administrace se nachází v patičce. Po kliknutí na něj se zobrazí stránka s přihlašovacím formulářem. Po zadání jména a hesla se k heslu vytvoří otisk pomocí PHP funkce hash a zkontroluje se jeho shodnost s otiskem v souboru config.neon. Odkaz na odhlášení z administrace je umístěn rovněž v patičce. Pro zabránění vstupu neautorizovanému uživateli je v metodě beforeRender společného předka všech presenterů administrační části proveden dotaz pomocí metody Nette isLoggedIn, zda je uživatel přihlášen. Pokud není, je přesměrován na stránku s přihlašovacím formulářem. Další zabezpečení se týká formulářů. Nevyžádanému odeslání formuláře je zabráněno rovněž dotazem, zda je uživatel přihlášený, který je umístěn na začátku metody, která se volá po odeslání formuláře. Pokud by formulář odeslal nepřihlášený uživatel, vypíše se zpráva, že pro provedení dané úpravy webu je nutné se nejdříve přihlásit a zpracování formulářem odeslaných dat vůbec neproběhne.

5.7

Popis funkcionality administrace

5.7

33

Popis funkcionality administrace

Tato část práce se věnuje popisu jednotlivých částí administrace a jejich funkcionality. 5.7.1

Hlavní stránka

Hlavní stránka, jakožto první stránka webu, kterou příchozí návštěvník spatří, by měla obsahovat aktuální informace, které by členové sekce neměli přehlédnout. Za tímto účelem je na hlavní stránce formulář pro vkládání aktuálních oznámení, například o akcích konaných v blízké budoucnosti. Oznámení zde může být neomezené množství a v případě, že již nejsou aktuální, je možné je kdykoliv smazat. 5.7.2

Editace statických stránek

Jelikož web obsahuje několik textových stránek se statickým obsahem, je v administraci připraven formulář pro jejich editaci s editorem TinyMCE. Do editace je možné se dostat kliknutím na příslušnou stránku v menu. Vzhledem k tomu, že na většině stránek se objevují obrázky, bude zde vysvětleno, jak je do stránky vložit. Tato možnost je využitelná i v jiných částech administrace. Vkládání probíhá přímo v TinyMCE editoru pomocí výše popsaného pluginu JustBoil.me Images. Tento plugin je reprezentován ikonou obrázku s nápisem upload umístěnou na předposlední pozici vpravo dole v editoru. Po kliknutí na tuto ikonu se zobrazí okno s tlačítkem pro výběr obrázku. Vybraný obrázek je následně zobrazen v okně editoru. Všechny takto nahrávané obrázky jsou umístěny ve složce Stranky. Dále je na některé stránky potřeba vložit odkaz na nějaký dokument, který je také nutné nahrát na server. To je umožněno pomocí pluginu FileManager4TinyMCE. Jeho ikona se nachází napravo od předchozí zmíněné a má podobu adresáře s lupou. Po kliknutí na ni se zobrazí okno s obsahem složky Stranky, což bylo nastaveno v konfiguračním souboru. Je zde možné vidět obrázky na všech stránkách a soubory nahrané tímto způsobem. Pro nahrání nového souboru je nutné kliknout na tlačítko upload v levém horním rohu pluginu a požadovaný soubor přetáhnout do prostoru okna nebo kliknutím vybrat. Následně je soubor nahrán a je možné ho vidět ve složce Stranky. Dalším krokem je vložení odkazu na tento soubor do textu stránky. Ikona pro vložení odkazu se nachází na levo od ikony pluginu JustBoil.me Images. Po kliknutí na tuto ikonu se zobrazí okno s položkami pro zadání url odkazu a zobrazovaného textu. Dále je tam pole s názvem LinkList, který obsahuje předdefinovanou cestu ke složce Stranky, ve které jsou všechny nahrávané soubory a fotky. Tento odkaz je nutné vybrat a na konec dopsat název právě nahraného souboru. Poté se vyplní text, pod kterým se má odkaz na soubor na stránce zobrazit. Na obrázku 13 je vidět administrace textové stránky.

5.7

Popis funkcionality administrace

34

Obrázek 13: Administrace stránky Kontakty

5.7.3

Databáze chovných psů a fen

Tato část svou strukturou odpovídá původním stránkám. Po kliknutí na příslušnou položku menu se zobrazí seznam chovných psů a pod ním seznam chovných fen. Ve výpisu jsou uvedeny pouze nejzákladnější informace, jako je registrační číslo, jméno psa, datum narození, náhledový obrázek a údaje o majiteli. Kliknutím na jméno psa se administrátor dostane na stránku editace psa, kde edituje veškeré údaje o chovném jedinci, zahrnující, kromě již uvedených, číslo loveckého psa, výšku, barvu oka, pohlaví, stupeň displazie kyčelního kloubu, výsledky výstav, a poznámku. Dále je zde možné editovat rodokmen psa, který obsahuje třicet předků. Uspořádání jednotlivých formulářových polí rodokmenu odpovídá zvyklostem z původního webu. V horní polovině jsou informace o otci chovného jedince a jeho předcích, v dolní polovině matka a předkové. Na stránce s editací psa se nachází nahoře nad náhledovým obrázkem psa odkaz na stránku s editací výsledků zkoušek, které jsou uloženy v samostatné tabulce v databázi. V horní části je seznam výsledků zkoušek již vložených k danému psovi a pod tímto seznamem formulář pro vložení nového výsledku s příslušnými poli pro vyplnění. Nově vložený výsledek se zobrazí mezi ostatními v seznamu a je ho poté možné smazat.

5.7

Popis funkcionality administrace

35

Ať už ze strany s výpisem psů, nebo z editace psa, se kliknutím na náhledový obrázek administrátor dostane na stránku, sloužící pro editaci fotek psů. Je zde možné vložit více fotek i s popisem. Fotky se uloží buď do složky Psi nebo Feny, podle toho, o jaké pohlaví se jedná. V těchto složkách se vytvoří složka se jménem každého psa a do ní jsou uloženy příslušné fotky. Vzhledem ke struktuře této části webu je nutné, aby pro každého psa existoval náhledový obrázek ve dvou velikostech. Z tohoto důvodu je u každé fotky možnost nastavit ji jako náhledový obrázek a toto rozhodnutí později změnit. Při nastavení náhledového obrázku se k příslušnému obrázku vygenerují dvě zmenšeniny o velikostech 150 × 110 px pro malý náhled a 350 × 280 px pro velký náhled a jejich cesty se uloží do databáze. Při vybrání jiného náhledového obrázku se zmenšeniny původního odstraní stejně jako cesty v databázi a jsou vytvořeny nové. Tímto způsobem lze v případě potřeby měnit náhledové obrázky. V horní části stránky s výpisem psů se nachází odkaz pro přidání nového psa, který vede na stranu s formulářem k tomu určeným. Formulář má stejnou strukturu jako formulář pro editaci již existujícího psa. Důležité je vybrat pohlaví psa. Po odeslání formuláře je uživatel přesměrován na stranu s výpisem psů, kde může přejít do editace a vkládat výsledky zkoušek a fotografie k nově vytvořenému jedinci. Dále je možné každého psa po dosažení určitého věku nebo z důvodu nemoci vyřadit do archivu. Lze tak učinit na straně s výpisem psů odkazem Vyřadit. Pes je pak zobrazován místo stránky s výpisem v archivu, do kterého je možné se dostat odkazem umístěným v horní části stránky pod odkazem na přidání nového psa. Psa je možné z archivu opět vyřadit. Vedle odkazu pro vyřazení psa je odkaz na smazání. Pokud je pes smazán, jsou smazány také související fotky a výsledky zkoušek. 5.7.4

Štěňata

Tato sekce slouží k informování o aktuálních vrzích štěňat a chovatelských plánech. Je zde možné přidávat tři druhy informací, které jsou všechny uloženy v tabulce vrhy. První jsou chovatelské plány, kde se vyplní pouze jméno chovatelské stanice a kontakt. Jedná se o stanice, které si zažádaly o doporučení ke krytí. Další možností je vytvoření očekávaného vrhu. Zde se navíc vyplní položky spojení a očekávané datum vrhu. Očekávaný vrh je možné vytvořit buď z chovatelského plánu pomocí odkazu vytvořit očekávaný vrh a následným doplněním informací, nebo pokud se jedná o chovatele, který není uveden mezi chovatelskými plány, vytvořit vrh zcela nový. Posledním typem vrhu je vrh aktuální, kam se navíc vloží informace o počtu štěňat a datu vrhu. Opět lze vytvořit z chovatelského plánu, očekávaného vrhu nebo zcela nový. Aktuální vrhy lze posléze zařadit do archivu, kde uživatelé vidí přehled historických vrhů.

5.7

Popis funkcionality administrace

5.7.5

36

Formuláře ke stažení

Tato stránka slouží k nahrávání různých souborů ke stažení. Je zde formulář pro výběr souboru a vložení názvu, pod kterým se má zobrazovat. Všechny souboru jsou ukládány do složky formulare a název s cestou do tabulky dokumenty v databázi. Po nahrání lze u každého souboru měnit název nebo ho smazat. 5.7.6

Srazy a akce

V této sekci naleznou návštěvníci webu informace o průběhu srazů a akcí sekce v textové podobě, stejně jako v podobě fotogalerií. Po kliknutí na příslušnou položku menu se administrátor dostane na stránku s výpisem všech srazů uložených v databázi. Pod tímto výpisem je umístěn odkaz na přidání nového srazu, který ho přesměruje na stránku s formulářem, kde vyplní informace o roku konání, názvu a textovou zprávu o průběhu srazu. Pokud je potřeba některý z již existujících srazů editovat, vybere administrátor potřebný sraz ze seznamu a přejde tak na stránku s editačním formulářem. Pod ním se nachází seznam fotogalerií, pokud již nějaké byly vytvořeny a další formulář pro vytvoření nové fotogalerie. Po zadání názvu a odeslání je galerie vytvořena a je možné do ní, po kliknutí na její název, vkládat obrázky. Vložené fotografie se zobrazí ve výpisu pod formulářem pro vkládání a lze je opět smazat. Všechny srazy, jejich galerie a fotky jsou uloženy v adresářích příslušných názvů. Stejně jako jednotlivé fotografie v galeriích, je možné mazat i celé galerie a v tomto případě dojde k odstranění všech fotografií patřících do mazané galerie. Pokud je smazán celý sraz, jsou odstraněny také všechny související fotogalerie. 5.7.7

Výsledky výstav

V této části webu se nachází informace o výstavách plemene a jejich výsledcích. Jelikož se každý rok koná mnoho výstav, je na straně s výpisem výstav formulář pro výběr roku, ze kterého chce uživatel zobrazit výstavy. Pod formulářem následuje seznam výstav daného roku, každá s odkazem pro smazání. Při smazání celé výstavy jsou nejdříve odstraněny všechny příslušné třídy a jejich psi a teprve poté samotná výstava. Dalším prvkem této stránky je formulář pro přidání nové výstavy, kde je nutné vyplnit základní informace o výstavě jako název, rozhodčí a počet přihlášených psů. Po kliknutí na některou z vytvořených výstav je možné přistoupit k její editaci. Je zde seznam všech dosud vložených tříd a k nim příslušících psů a formulář pro vložení nové třídy, v němž se vyplňuje pouze název třídy. Dále je možné editovat jednotlivé třídy po kliknutí na jejich název a také je smazat. V editaci třídy je seznam vložených psů a formulář pro přidání nového psa do třídy, kam se zadává jméno psa, informace o rodičích, majiteli a chovateli a výsledky. Psy je opět možné smazat.

5.8

SEO optimalizace

5.7.8

37

Zprávy vedoucího sekce, zprávy poradce chovu, výsledky výstav

Vzhledem k tomu, že tyto tři sekce mají stejnou strukturu a jsou uloženy v jedné databázové tabulce, nebude jejich popis rozdělen do samostatných částí. Každá zpráva a výsledek výstavy obsahují název a text. Každý z těchto tří typů příspěvků jsou vypisovány na vlastní stránce odpovídajícího názvu, kde je možné je i smazat, přidávat nové a editovat. 5.7.9

Vyhledávání na webu

Vyhledávání by nemělo na žádném moderním webu v dnešní době chybět. Zároveň mu někeří z uživatelů dávají přednost před navigací. Vyhledávání lze implementovat buď vlastní, což vyžaduje již hlubší znalosti z problematiky tvorby webových aplikací, nebo použít například jeden ze způsobů, které popisuje Janovský (2016). Nejjednodušší z nich představuje vložení parazitního formuláře pokročilého hledání od Googlu či jiného internetového vyhledávače do vlastní stránky. Tento formulář se zkopíruje ze zdrojového kódu, upraví se atribut action, aby se data odesílala na správnou stránku vyhledávače, dále se nastaví skrytý atribut s adresou prohledávaného webu. Vhodné je nastavit zobrazení výsledků vyhledávání na nové stránce pomocí atributu target. Podmínkou fukčnosti tohoto řešení je, aby web, na kterém chceme vyhledávat, zaplňoval celou doménu, což je u domény, na které se nachází původní web splněno. Vyhledávací formulář bude umístěn v hlavičce webu, což je v souladu s webovými zvyklostmi popsanými v kapitole 3.2.3. Je třeba dodat, že ač autor nazývá tento typ formuláře parazitním, uvádí, že tak činí pro nedostatek terminologie a tento formulář pro daný server není nikterak škodlivý a naopak na něj může přivést nové uživatele.

5.8

SEO optimalizace

Každá stránka webu má unikátní titulek. To je zajištěno pomocí proměnné $title, která je nastavena v metodě beforeRender každého presenteru. V souboru layout.latte pak definice titulku vypadá následovně: