VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra elektrotechniky a informatiky
We b o v á a pl i ka c e ky no l og i c ké h o kl u b u bakalářská práce
Autor: Táňa Matějeková, DiS. Vedoucí práce: PaedDr. František Smrčka, Ph.D. Jihlava 2011
Anotace Práce se zabývá návrhem webové aplikace pro kynologický klub. Je rozdělena na část pro nečleny klubu a na část pro členy klubu, přičemž někteří členové mají navíc speciální privilegia. Aplikace umožňuje uchovávat a modifikovat informace o členech klubu, chovatelských stanicích, odchovech, výstavách a závodech včetně výsledků. Práce je realizovaná pomocí HTML, PHP, MySQL a Javascriptu.
Klíčová slova Kynologický klub, odchovy, výstavy, závody, chovatelské stanice, PHP, MySQL.
Annotation The topic of this work is creating web pages for a canine club. Work is divided into parts for non-members and members club. Some members have special privileges. This application allows you to store and modify information about members club, kennels, rearing, exhibitions and racing including results. This applications is realized HTML, PHP, MySQL a Javascript.
Keywords Canine club, rearing, shows, racing, kennel, PHP, MySQL.
Poděkování Mé poděkování patří mým kolegům, kteří mi poskytli cenné rady při řešení této aplikace. A také mému vedoucímu práce PaedDr. Františku Smrčkovi, Ph.D., který mi objasnil některé nejasnosti spojené s tímto projektem.
Jihlava, dne 7. května 2011 ................................................... Podpis
Prohlášení Prohlašuji, že předložená bakalářská práce je původní a zpracoval/a jsem ji samostatně. Prohlašuji, že citace použitých pramenů je úplná, že jsem v práci neporušil/a autorská práva (ve smyslu 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ů, v platném znění, dále též „AZ“). Souhlasím s umístěním bakalářské práce v knihovně VŠPJ a s jejím užitím k výuce nebo k vlastní vnitřní potřebě VŠPJ . Byl/a jsem seznámen/a s tím, že na mou bakalářskou práci se plně vztahuje AZ, zejména § 60 (školní dílo). Beru na vědomí, že VŠPJ má právo na uzavření licenční smlouvy o užití mé bakalářské práce a prohlašuji, že s o u h l a s í m s případným užitím mé bakalářské práce (prodej, zapůjčení apod.). Jsem si vědom/a toho, že užít své bakalářské práce či poskytnout licenci k jejímu využití mohu jen se souhlasem VŠPJ, která má právo ode mne požadovat přiměřený příspěvek na úhradu nákladů, vynaložených vysokou školou na vytvoření díla (až do jejich skutečné výše), z výdělku dosaženého v souvislosti s užitím díla či poskytnutím licence. V Jihlavě dne 7. května 2011 ................................................... Podpis
Obsah Anotace .......................................................................................................... 3 Klíčová slova ................................................................................................. 3 Annotation ..................................................................................................... 3 Keywords ....................................................................................................... 3 Poděkování..................................................................................................... 4 Prohlášení....................................................................................................... 5 Obsah ............................................................................................................. 6 Úvod .............................................................................................................. 8 1 Popis řešeného problému ......................................................................... 9 1.1 Seznámení s problémem ....................................................................... 9 1.2 Vymezení cílů a požadavků .................................................................. 9 2 Popis struktury práce na základě vytyčených cílů .................................. 13 3 Rešeršní studie několika existujících systémů ........................................ 14 3.1 Dostupná řešení .................................................................................. 14 4 Analýza a návrh implementace .............................................................. 15 4.1 Datová analýza ................................................................................... 15 4.1.1 Clen ............................................................................................ 15 4.1.2 Adresa ........................................................................................ 15 4.1.3 Telefon ....................................................................................... 16 4.1.4 Funkce ........................................................................................ 16 4.1.5 Pozice ......................................................................................... 16 4.1.6 Prispevek .................................................................................... 16 4.1.7 Duvod ......................................................................................... 17 4.1.8 Stanice ........................................................................................ 17 4.1.9 Kategorie1 .................................................................................. 17 4.1.10 Kategorie 2 ................................................................................. 17 4.1.11 Obsah ......................................................................................... 17 4.1.12 Pes .............................................................................................. 18 4.1.13 Odchov ....................................................................................... 18 4.1.14 Stene ........................................................................................... 19 4.1.15 Vystava ....................................................................................... 19 4.1.16 Vtyp ............................................................................................ 19 4.1.17 Závod ......................................................................................... 19 4.1.18 Akce ........................................................................................... 20 4.1.19 Atyp ............................................................................................ 20 4.2 Návrh implementace .......................................................................... 21 5 Implementace ........................................................................................ 22 5.1 Postup implementace.......................................................................... 22 5.2 Zajímavá řešení .................................................................................. 28 5.2.1 Menu 1 ....................................................................................... 28 5.2.2 Načítání menu 2 do stránky ........................................................ 29
5.2.3 Menu 2 pro volání obsahu........................................................... 30 5.2.4 Načítání obsahu stránky .............................................................. 31 5.2.5 Přihláška ..................................................................................... 32 5.2.6 Přihlášení .................................................................................... 33 5.2.7 Ošetření chyb .............................................................................. 35 6 Testování ............................................................................................... 36 6.1 Postup testování ................................................................................. 36 6.2 Výsledky testování ............................................................................. 37 7 Závěr ..................................................................................................... 38 8 Seznamy ................................................................................................ 39 8.1 Použitých termínů a zkratek ............................................................... 39 8.2 Citací a použité literatury ................................................................... 40 8.3 Obrázků.............................................................................................. 41
Úvod Dávno jsou pryč ty doby, kdy se dokumenty psali husím brkem na pergamenový papír. Dnešní svět žije elektronikou, a proto je většina textů vytvářena v elektronické formě. Tato forma má několik předností, mezi něž patří například snadná čitelnost dokumentů, ale bezesporu nejvýznamnější předností je možnost předávat tyto informace pomocí elektronické komunikace. Jistě se shodneme na tom, že nejvýznamnějším elektronickým komunikačním prostředkem je Internet. Jednou z jeho součástí jsou webové stránky, které se skládají z multimediálních dat, jako jsou obrázky, videa, zvuky, ale i z odkazů a především textu. Pokud tedy máme informace, které chceme předat ostatním osobám, je nejvhodnější a nejrychlejší použít webové stránky. A právě aby naše informace byly efektivně předávány, musí být informace na webových stránkách čitelné, přehledné a hlavně kompletn í. A to je i d ůvod , proč jsem si jak o bak alářsk ou p ráci zvolila tvorbu webové aplikace pro kynologický klub - Klub českého horského psa. Stávající stránky tohoto kynologického klubu jsou totiž nepřehledné, neúplné a nevhodně měnitelné. V podstatě největší nevýhodou těchto stránek je složitá měnitelnost, která závisí na dostupnosti a času webmastera. Pokud předseda klubu potřebuje členům klubu předat nějakou informaci, musí kontaktovat webmastera, který tyto informaci zadá do kódu webových stránek. V případě nedostupnosti webmastera jsou tyto informace ostatním uživatelům přístupné s několikadenním i několikatýdenním zpožděním. Mým cílem je tedy vytvořit aplikaci obsahující kompletní informace o kynologickém klubu, která umožní uchovávat informace o členech klubu, jejich chovatelských stanicích, odchovech, ale také i o uskutečněných výstavách a závodech. Oprávněným osobám umožní tyto informace měnit, přidávat a upravovat. Práce bude vytvořena pomocí HTML, PHP, CSS, MySQL a Java Scriptu.
8
1 Popis řešeného problému 1.1 Seznámení s problémem K této bakalářské práci jsem se dostala díky mnohaletému členství mých rodičů právě ve výše zmiňovaném kynologickém klubu. V kynologickém Klubu českého horského psa totiž začali vznikat spory ohledně stávajících webových stránek. Většina členů se shodla na tom, že stávající stránky jsou nevyhovující a že je tedy potřeba vytvořit nové. Právě tato informace o nutnosti vytvoření stránek mě vedla k myšlenkám, co by taková kvalitní aplikace pro kynologický klub měla splňovat. Proto jsem si za svou bakalářskou práci zvolila toto téma. Jelikož byla webová aplikace vytvářena pro již několik let existující kynologický klub, bylo nutné vytvořit aplikaci, která by nenarušila dosavadní chod klubu a neztížila, svým uvedením do praxe, práci uživatelům aplikace. Proto bylo nutné provést zmapování stávající situace chodu kynologického klubu a provedení analýzy zavedených procesů. Jednou z nejdůležitějších osob kynologického klubu je předseda klubu. Předseda klubu společně s jednatelem klubu zastupuje klub a jedná jeho jménem, zpracovává a podává zprávu o činnosti klubu za spolupráce ostatních funkcionářů, svolává a řídí schůze výboru a vykonává mnoho dalších funkcí důležitých pro činnost klubu. Jelikož je tedy předseda klubu jednou z osob nejpovolanějších, zvolila jsem jako zdroj informací samotného předsedu a na základě údajů získaných od něj jsem stavěla analýzu zavedených procesů a mapování stávající situace.
1.2 Vymezení cílů a požadavků Nejdůležitější funkcí kynologického Klubu českého horského psa je poskytování informací o plemeni český horský pes (ČHP). Český horský pes byl vyšlechtěn v České republice. Proto je kynologický Klub českého horského psa mateřským klubem tohoto plemene a má za úkol prezentovat informace o tomto plemeni do celého světa. Kromě prezentace plemene má klub na starost chov a monitorování odchovu štěňat českých horských psů. Klub provozuje i vlastní aktivity jako jsou výstavy, ať už speciální nebo klubové. Mezi další klubové aktivity patří závody nebo akce pro členy a přátele klubu, jako jsou různá sportovní setkání nebo členské schůze. 9
Na základě těchto informací jsem si vytvořila hrubou představu o struktuře aplikace, kterou jsem dále více zjemňovala díky získaným dalším požadavkům na aplikaci. Zde je tedy výčet jednotlivých požadavků, které by měla aplikace splňovat:
Požadavky zaměřené na klub: •
Aplikace musí umožňovat uchovávat základní informace o klubu a plemenu. Jedná se především o historii a vznik plemene, standard plemene a stanovy klubu.
•
Dále také musí být zveřejněn seznamem členů výboru klubu včetně kontaktů.
•
Novým členům klubu musí být umožněno podat přihlášku do klubu.
•
Přihláška do klubu musí obsahovat informace o osobě, tedy jméno, příjmení, ulici, číslo popisné, obec, poštovní směrovací číslo, telefon a e-mail.
•
Přihláška také musí obsahovat unikátní číslo člena, které bude sloužit k identifikaci plateb členských příspěvků.
•
Po podání přihlášky musí člen zaplatit členský poplatek. Poté, co ekonom klubu ověří připsání částky na bankovní účet klubu, umožní nově přihlášenému členovy vstup do členské části.
Požadavky zaměřené na chov: •
Aplikace musí obsahovat zápisní řád.
•
Také musí být uvedeny podmínky pro zařazení českého horského psa do chovu.
•
Aplikace musí zobrazovat i seznam odchovaných štěňat.
•
K dispozici musí být i soupis chovatelských stanic, včetně jejich majitelů a kontaktu.
Požadavky zaměřené na chov: •
Aplikace musí obsahovat informace, jak připravit českého horského psa na výstavu.
•
Dále musí být dostupný seznam klubových a speciálních výstav.
•
U výstavy musí být uvedeny propozice a informace k výstavě.
•
Také musí být dostupné kontaktní informace k výstavě a přihláška na ni.
10
Požadavky zaměřené na závody: •
V aplikaci se budou uchovávat i informace o pořádaných závodech.
•
K závodům musí být dostupné propozice, kontaktní informace a popřípadě přihláška nebo odkaz na ni.
Požadavky zaměřené na akce: •
Aplikace musí obsahovat seznam akcí pořádaných Klubem českého horského psa, ať už jde o členské schůze nebo o akce zábavního charakteru.
Požadavky zaměřené na odkazy: •
Aplikace musí uchovávat několik odkazů na důležité webové stránky.
Kromě těchto kritérií byly vzneseny i požadavky, které aplikace musí splňovat při přihlášení člena s ohledem na jeho funkci.
Požadavky při přihlášení člena: •
Člen může měnit své osobní a kontaktní údaje, jako je jméno, příjmení, bydliště, telefon a e-mail.
•
Člen má možnost nahlásit si chovatelskou stanici.
•
Člen si může zadávat odchovy v chovatelské stanici.
•
Člen má možnost zadávat si psi ve vlastnictví.
•
Člen si může zadávat inzeráty.
Požadavky při přihlášení předsedy: •
Předseda musí mít možnost upravovat dokumenty klubu, jako je úvod, historie, standard, stanovy a zápisní řád.
•
Předseda má možnost si zobrazit seznam členů a zablokovat nebo povolit členovi přístup do členské sekce.
•
Předseda může vložit novou výstavu. 11
•
Také může vložit novou akci.
•
Předseda může udělit členovi čestné členství.
Požadavky při přihlášení ekonoma: •
Ekonom může povolit a zakázat přístup členovi.
Požadavky při přihlášení poradce chovu: •
Poradce chovu může měnit podmínky uchovňování.
•
Poradce může zadávat chovné jedince.
Požadavky při přihlášení předsedy sportovního klubu: •
Předseda sportovního klubu může přidávat nové závody a výsledky z nich.
12
2 Popis struktury práce na základě vytyčených cílů V závislosti na požadavcích na aplikace bylo nutné rozdělit práci na šest myšlenkových celků. A to na část, týkající se: •
klubu,
•
chovu,
•
výstav,
•
závodů,
•
akcí,
•
odkazů.
Z těchto myšlenkových celků následně vyplynuly názvy jednotlivých položek horního menu. Také musela být vzata v potaz různá privilegia některých členů klubu, čímž v podstatě vzniklo několik uživatelských rozhraní. Nejdůležitější funkci má v podstatě předseda klubu a ten má tedy nejvíce oprávnění. Další specifické povinnosti a privilegia má například ekonom, který se stará o finanční stránku klubu a má za úkol kontrolovat placení členských příspěvků. Může tedy zablokovat přístup členovy, který nezaplatil členský příspěvek v termínu. Dalším členem, který má specifická privilegia a povinnosti je poradce chovu, který zodpovídá za chov a má na starosti podmínky pro uchovnění psů a také například vedení evidence chovných jedinců. Dalším funkcionářem je také předseda sportovního klubu, který má na starosti sport v klubu. Konkrétně se stará o závody, v nichž se účastní toto plemeno. Práce obsahuje kromě těchto několika speciálních rozhraní i další rozhraní pro klasické členy klubu. Nezbytnou součástí bylo také vytvoření rozhraní pro nečleny klubu, tzn. pro neregistrované návštěvníky stránek.
13
3 Rešeršní studie několika existujících systémů 3.1 Dostupná řešení Na internetu jsem nenalezla dostupné řešení vhodné pro kynologický Klub českého horského psa. Výsledkem hledání byly aplikace vytvořené na míru konkrétnímu kynologickému klubu. Tato situace je naprosto běžná, protože každý kynologický klub je jedinečný a potřebuje v systému uchovávat a spravovat jiný typ informací. Nejčastějšími kynologickými kluby jsou výcvikové kluby Českého kynologického svazu v jednotlivých městech. Jedná se o skupiny lidí zaměřujících se především na výcvik psů, ať už se jedná o sportovní výcvik, agility (sport se psy podobný koňskému parkuru) nebo záchranářský výcvik. Většina těchto výcviků je pak zakončena zkouškou. Dalším typem klubu je kynologický klub patřící k určitému plemenu psů, jako je například Klub chovatelů českých teriérů, Briard Klub České Republiky a samozřejmě mnoho dalších. Mezi tyto kluby patří i Klub českého horského psa. Tyto kluby se specializují především na chov a rozšíření daného plemene. Každý kynologický klub má navíc vlastní hierarchii a privilegia funkcionářů v různých kynologických klubech se mohou výrazně lišit. Někde může přidání nového člena například schválit pouze předseda klubu, jinde musí být nový člen schválen většinou na členské schůzi. Někde může členství pozastavit pouze předseda klubu, jinde smí členství pozastavit předseda pouze z některého důvodu a pozastavení členství může provést třeba ekonom, ovšem pouze z důvodu včasného nezaplacení členského poplatku. Nehledě na to, že každý kynologický klub má jinak řešenou evidenci členů a jejich přihlašování do systému. Někdo přiděluje jedinečný číselný identifikátor, někdo nechá uživatele vytvořit si vlastní přihlašovací login. To bylo tedy pár příkladů a důkazů, jak se kynologické kluby od sebe liší, a proto není možné najít dostupné řešení, které by bylo vhodné pro nasazení v jakémkoliv kynologickém klubu.
14
4 Analýza a návrh implementace 4.1 Datová analýza Jak již bylo řečeno, byla provedena analýza zavedených procesů a zmapování situace chodu v kynologickém klubu Český horský pes. Z této analýzy vyplynuly požadavky na uchovávání informací týkajících se klubu, chovu, výstav, závodů, akcí a odkazů. Tyto oblasti pak byly základem pro vytvoření jednotlivých entit. Zde je popis vytvořených entit. Samotný relační datový model, je pak přiložen v příloze.
4.1.1 Clen jmeno – jméno člena prijmeni – příjmení člena vsymbol – variabilní symbol (slouží jako identifikátor člena) email – email člena heslo – heslo (sloužící pro přihlášení) kotazka – kontrolní otázka (pro případ zapomenutí hesla) kodpoved – kontrolní odpověď (pro případ zapomenutí hesla)
4.1.2 Adresa clen – identifikátor člena patřící k adrese ulice – ulice adresy cp – číslo popisné adresy obec – obec adresy psc – poštovní směrovací číslo adresy 15
4.1.3 Telefon tel_id – identifikátor telefonu clen – identifikátor člena cislo – telefonní číslo
4.1.4 Funkce fun_id – identifikátor funkce nazev – název funkce
4.1.5 Pozice poz_id – identifikátor pozice clen – identifikátor člena na pozici funkce – identifikátor funkce, kterou člen zastupuje
4.1.6 Prispevek pri_id – identifikátor příspěvku clen – identifikátor člena rok – pro který rok je členský příspěvek placen placeno – zaplacený příspěvek (0 = ne, 1 = ano) cestny – jedná se o čestného člena (0 = ne, 1 = ano) blokovany – je uživatel blokovaný (0 = ne, 1 = ano) duvod – identifikátor důvodu blokování
16
4.1.7 Duvod duv_id – identifikátor důvodu nazev – název důvodu blokování
4.1.8 Stanice sta_id – identifikátor stanice clen – identifikátor člena nazev – název chovatelské stanice WWW – webová stránka chovatelské stanice
4.1.9 Kategorie1 kat1_id – identifikátor kategorie 1 kat1_nazev – název kategorie 1
4.1.10 Kategorie 2 kat2_id – identifikátor kategorie 2 kat2_nazev – název kategorie 2
4.1.11 Obsah obs_id – identifikátor obsahu obs_kategorie1 – identifikátor kategorie 1 do které obsah patří obs_kategorie2 - identifikátor kategorie 2 do které obsah patří 17
text – text obsahu vlastnik – kdo obsah vytvořil (odkaz na člena) datum – datum, kdy byl obsah vytvořen
4.1.12 Pes pes_id – identifikátor psa pohlavi – pohlaví psa (0 = pes, 1 = fena) jmeno – jméno psa stanice – odkaz na chovatelskou stanici, ze které pes pochází matka – identifikátor matky (psa) otec – identifikátor otce (psa) chovny – informace zda je jedinec chovný (0 = ne, 1 = ano) maj_id – identifikátor majitele (odkaz na člena) maj_jmeno – jméno majitele maj_prijmeni - příjmení majitele
4.1.13 Odchov odch_id – identifikátor odchovu datum – datum odchovu stanice – stanice, v níž byl odchov uskutečněn vrh – písmeno vrhu
18
4.1.14 Stene pes_id – identifikátor štěněte (odkaz na psa) odchov – odkaz na odchov
4.1.15 Vystava vys_id – identifikátor výstavy datum – datum výstavy místo – místo výstavy kontakt – odkaz na člena spravující výstavu rozhodci – jméno rozhodčí, který plemeno posuzuje typ – typ výstavy (odkaz na vtyp)
4.1.16 Vtyp vtyp_id – identifikátor typu výstavy typ – název typu výstavy
4.1.17 Závod zav_id – identifikátor závodu datum – datum závodu místo – místo závodu kontakt – kontakt na člena, který závod vložil informace – informace o závodu
19
4.1.18 Akce ak_id – identifikátor akce atyp – typ akce datum – datum akce místo – místo akce kontakt – kontakt na člena informace – informace k akci
4.1.19 Atyp atyp_id – identifikátor akce typ – typ akce
20
4.2 Návrh implementace Aplikaci jsem chtěla vytvořit tak, že si nejprve připravím datový podklad pro aplikaci, poté grafickou část a poté se budu věnovat programové části. U datové části jsem chtěla vytvořit postupně tyto části: •
entity
•
atributy k entitám
•
primární klíč u entit
•
vztahy mezi entitami
•
kardinalitu
•
výsledný RDM (relačně datový model)
U grafické části jsem chtěla postupně vytvořit tyto části: •
hrubý grafický návrh
•
finální grafický návrh
•
rozmístění objektů pomocí CSS
•
rozmístění menu včetně naplnění položkami
U programové části jsem chtěla postupovat takto: •
vytvoření části pro nečleny
•
přihláška (neboli registrace)
•
vytvoření části pro členy
•
vytvoření části pro předsedu
•
vytvoření části pro ekonoma
•
vytvoření části pro poradce chovu
•
vytvoření části pro předsedu sportovního klubu
21
5 Implementace 5.1 Postup implementace Při implementaci jsem nejprve vytvořila hrubý datový model obsahující základní entity. Patřili sem například entity člen, adresa, telefon a stanice. V průběhu samotné práce jsem pak datový model doplňovala o další entity tak, jak bylo potřeba evidovat další data. Datový model jsem se snažila maximálně navrhnout tak, aby bylo možné v průběhu času aplikaci rozšiřovat. Proto také model obsahuje například entity kategorie1 a kategorie2. Kategorie 1 je v podstatě horní menu aplikace a kategorie 2 je levé menu aplikace. Aplikaci je tedy možné v budoucnu rozšířit o načítání a generování menu z databáze včetně přidávání položek do menu. Další částí implementace bylo vytvoření hrubého grafického návrhu. Svoji představu jsem nejdříve navrhla na papír. Tento návrh samozřejmě prodělal několik změn, než vzešel finální grafický návrh. Poté jsem zrealizovala základy grafického návrhu. K implementaci jsem využila jazyk HTML a CSS. Následovalo barevné sladění aplikace a vytvoření grafického vzhledu horního a levého menu. Poté jsem dělala horní část stránky obsahující logo klubu a fotografie představitelů plemene český horský pes. Tato část, ač se to tak nezdá, byla nejtěžší částí grafického návrhu, jelikož obsahuje fotografie psů plemene český horský pes, bylo nutné nejprve vyhledat vhodné fotografie. Až dosud se zdá vše jednoduché, do té chvíle, než zvážíte, že stránky celosvětově reprezentují toto plemeno a na fotografiích proto musí být kvalitní jedinec, musí být ve vhodné pozici a musí mít okolo sebe odpovídající okolí. Kvalitní jedinec znamená pes, který je správně vybarvený a má typické rysy pro toto plemeno. Vhodnou pozicí se myslí výstavní postoj nebo esteticky ležící nebo sedící pes nebo pes v pohybu. Za vhodné okolí je pak požadována eliminace rušivých vlivů na pozadí, jako je osoba, další zvíře nebo okolí, ve kterém jedinec nevynikne. Vyhledala jsem fotografie splňující z velké části první a druhou podmínku. Okolí jsem převážně upravila v programu Adobe Photoshop CS4. Zde je možnost porovnat některé obrázky před a po úpravě.
22
Obrázek 1 – foto 1 – před úpravou
Obrázek 2 – foto 1 – po úpravě
23
Obrázek 3 – foto 1 – před úpravou
Obrázek 4 – foto 2 – po úpravě
Další částí implementace bylo samotné programové řešení. Jelikož jsem chtěla aplikaci zrychlit, zbavila jsem stránku neustálého načítání grafické části. Na stránce se pak tedy mění pouze obsah v závislosti na zvolené položce menu a v případě potřeby se také nahrazuje seznam položek levého menu. Tato změna menu se provádí například při přihlášení člena klubu, nebo při přihlášení uživatele, který má specifická privilegia a má tím pádem k dispozici více funkcí.
24
Dalším krokem v implementaci bylo vytvoření obsahu aplikace, který se bude zobrazovat všem nepřihlášeným návštěvníkům stránek. Nejdříve jsem definovala položky horního menu (Klub, Chov, …). Poté jsem vytvářela položky levého menu pro jednotlivé volby z horního menu (Úvod, Historie plemene, …). Následovalo naplnění obsahu jednotlivých kategorií. Při této práci vznikly například entity obsah, kategorie1 a kategorie2. Dále jsem vytvořila entity funkce a pozice, protože bylo potřeba evidovat, kdo zastupuje jakou funkci a vytvořit tak seznam členů výboru klubu. Entita funkce slouží jako seznam jednotlivých funkcí. Entita pozice pak obsahuje informace o tom, kdo jakou pozici v klubu zastává. Data jsou od sebe oddělena takto do dvou entit, jelikož každý člen může zastávat několik funkcí. Každý člen klubu má totiž minimálně funkci člen + případně další funkci (předseda, poradce chovu apod.). Po vytvoření aplikace pro nečleny klubu jsem dělala přihlášku do klubu. Jelikož stávající systém funguje na principu variabilního symbolu jako identifikátoru člena, musela jsem tuto funkci zachovat. Variabilní symbol je totiž používán také k identifikaci platby členského příspěvku. Členský příspěvek platí každý člen, kromě čestného člena a jeho platnost je jeden kalendářní rok. O tom, zda se někdo stane čestným členem, či nikoliv, se rozhoduje na členské schůzi. Čestné členství v aplikaci přiděluje předseda klubu. Pokud zájemce o členství podá přihlášku do klubu, vygeneruje se mu jedinečný variabilní symbol. Dále musí zájemce zadat heslo a ověření hesla pro přihlášení. Dalším povinným údajem je jméno, příjmení, ulice, číslo popisné, obec, poštovní směrovací číslo a e-mail. Volitelně si může zájemce zadat telefon, chovatelskou stanici a kontrolní otázku a kontrolní odpověď. Kontrolní otázka a odpověď jsou využitelné pro snazší přihlášení. V přihlášce není použitý standardní typ kontrolní otázky typu – váš oblíbený zpěvák, jméno matky za svobodna atd. Zájemce si může napsat svou kontrolní otázku, na kterou bude znát odpověď. Například otázka může vypadat takto: 2+2. Následná odpověď pak bude tato: 4. Po registraci se zájemci o registraci zobrazí informace o nutnosti zaslání členského příspěvku na daný bankovní účet. Po zaplacení členského příspěvku je členovi umožněn přístup do sekce pro členy a může se přihlásit. Toto povolení k přihlášení zadává ekonom klubu, který má na starosti finanční stránku klubu. Další částí implementace bylo přihlašování uživatelů. Uživatel se může přihlásit na jakékoliv stránce a má několik možností přihlášení. Buď se může přihlásit svým variabilním symbolem (neboli svým identifikátorem) a heslem. Pokud si tyto údaje nepamatuje, je přesměrován na stránku se snazším přihlášením. Na tuto stránku se může 25
také přepnout bez pokusu o přihlášení. Na stránce, kam byl přesměrován, se objeví výklopný seznam, kde vyhledá svoji kombinaci variabilního symbolu, jména a příjmení. Tuto funkci jsem zavedla pro uživatele, kteří mají problém zapamatovat si čísla. Následná pravděpodobnost, že se v seznamu objeví více uživatelů se stejným jménem a příjmením není tak vysoká. Navíc uživatelé mající problém se zapamatováním čísla většinou řeší problém typu: Bylo to číslo 353 nebo 535? Zde je pravděpodobnost, že se pod číslem 353 a 535 objeví stejné jméno a příjmení ještě nižší. Po zvolení kombinace variabilního symbolu, jména a příjmení má uživatel dvě možnosti přihlášení. Buď si k této kombinaci pamatuje heslo a zadá heslo, nebo pokud si při registraci zadal kontrolní otázku a odpověď, může vyplnit tyto údaje. Pokud si nepamatuje ani jednu z variant údajů pro přihlášení, může napsat e-mail ekonomovi klubu, který členovi zadá nové heslo. Po přihlášení se pomocí session řeší, jaký typ uživatele se přihlásil. Pakliže se přihlásil uživatel, který má pouze funkci člen, je nabídka levého menu v sekci Klub rozšířena o změnu osobních údajů. Zde může člen opravit své jméno, adresu a další položky nebo může přidat telefonní číslo nebo chovatelskou stanici, pokud ji při registraci nezadal. V sekci Chov jsou pak dvě části Odchovů. Jedna, která zobrazuje všechny odchovy a druhá, která zobrazuje pouze odchovy chovatelské stanice, kterou člen vlastní. Zde má možnost přidat další odchov. To samé platí i pro část Chovní jednici, která je rozdělena opět na dvě části, a to na všechny chovné jedince a jedince, které vlastní daný člen. Zde je možnost přidat dalšího psa ve vlastnictví. Informaci o tom, zda je jedinec chovný či nikoliv může zadat pouze poradce chovu. V případě, že se přihlásí předseda klubu, má oprávnění měnit dokumenty klubu. V sekci Klub je to Úvod, Historie plemene, Standard a Stanovy a v sekci Výstavy je to pak S ČHP na výstavu. Navíc má oproti běžnému členovi klubu možnost zobrazit si seznam členů klubu. Zde jsou členové rozděleni na aktivní a blokované členy. K zablokování přístupu do členské sekce může dojít z několika důvodů: •
člen sám písemně požádá o zrušení členství
•
člen nezaplatí členský příspěvek ve stanoveném termínu
•
vyloučení člena z klubu
•
úmrtí člena
26
Kromě získání informace, že je člen blokovaný či nikoliv může také předseda blokaci člena provést nebo zrušit, a to právě v této části. Dále je předsedovi umožněno zapisovat nové výstavy a akce klubu. V případě, že se do členské části přihlásí ekonom klubu, má také možnost vidět seznam uživatelů a tyto uživatele může blokovat a blokování zrušit. Oproti předsedovi klubu už ovšem nemá možnost měnit dokumenty klubu a zadávat výstavy. Dalším uživatelem, který má specifická privilegia je poradce chovu. Poradce může oproti běžnému členovi klubu upravovat Zápisní řád a Podmínky zařazení ČHP do chovu v sekci Chov. Také může zadat, že jedinec je chovný. Posledním uživatelem majícím vyšší práva než běžní členové je předseda sportovního klubu. Ten může zadávat nové závody a přidávat k nim výsledky. Zde je ukázka výsledné aplikace:
Obrázek 5 – ukázka aplikace
27
5.2 Zajímavá řešení Jelikož aplikace obsahuje několik zajímavých řešení, jsou zde vybrána pouze některá. Jako první řešení je zde v několika částech popsáno načítání menu a obsahu, bez opětovného načítání celé stránky.
5.2.1 Menu 1
echo("
");
Uvedená část kódu ukazuje, jak jsou řešeny názvy položek horního menu (neboli menu 1) jako je např. Klub, Chov a další. Kromě položek horního menu zde také nalezneme výchozí položku z levého menu (neboli menu 2) odpovídající zvolené položce z horního menu. Například položka z menu 1 Chov má defaultní položku Rad z menu 2. Další část kódu ukazuje, jak je načítáno levé menu do stránky.
28
5.2.2 Načítání menu 2 do stránky
Zde je do proměnné $menu2 uložen název souboru, který obsahuje levé menu odpovídající položce z horního menu. Například menu2_chov.php. Tento soubor se poté načte 29
do příslušné části, a tak zobrazí správné položky. V případě, že je přihlášený uživatel, načte se část Klub, konkrétně její levé menu odpovídající přihlášenému uživateli.
5.2.3 Menu 2 pro volání obsahu
echo("
");
Nyní již vidíme, jak jsou zapsány položky levého menu (neboli menu 2). V případě zvolené položky Chov z horního menu, je pro položku Podmínky uchovnění použita tato cesta …/index.php?menu1=chov&menu2=podminky. Následující část už ukazuje samotné zobrazení obsahu stránky v závislosti na zvolené položce z levého menu.
30
5.2.4 Načítání obsahu stránky
V obsahu je vložen php skript. Ten testuje nastavení proměnné ($_GET["menu2"] a jestli není proměnná prázdná. Pokud je tato podmínka splněna, do proměnné $page je pak uložen název stránky obsahující správný obsah odpovídající položce z levého menu. Například podminky.php. Následně je tato stránka načítána. V případě, že by neexistovala, načítá se defaultní stránka, a pokud by ani tato stránka neexistovala, načte se výchozí stránka, což je Úvod. V další části zajímavých řešení najdeme přihlášku (neboli registraci členů), samotné přihlášení a ošetření chyb.
31
5.2.5 Přihláška Identifikátorem člena klubu je variabilní symbol, který člen používá pro platby členského příspěvku. Variabilní symbol je uživateli přidělen při přihlášení do klubu. Zde je uveden výpočet volného variabilního symbolu:
$kolik=0; $result=mysql_query("select * from clen order by vsymbol"); $max=mysql_num_rows($result); for($kolik=1;$kolik<=$max;$kolik=$kolik+1) { $hodnota=mysql_fetch_array($result); $vysledek=$hodnota[vsymbol]; } $vysledek++;
Do proměnné $kolik je uložena nula. Poté proběhne dotaz na databázi, který vybere všechny členy a seřadí je vzestupně podle variabilního symbolu. Do proměnné $max se uloží počet nalezených výsledků. Následně proběhne for cyklus tolikrát, kolik bylo nalezených výsledků a poslední nalezený variabilní symbol uloží do proměnné $vysledek. Tento výsledek je nakonec zvýšen ještě o jedno číslo, čímž se zjistí následující číslo, pod kterým je možné zaregistrovat nového uživatele.
32
5.2.6 Přihlášení
$rok=Date("Y");
if ($_POST["clog"]=="ok") { $prihlaseni=mysql_query("select clen.jmeno, clen.prijmeni, clen.vsymbol, clen.heslo, pozice.funkce, funkce.nazev, prispevek.rok, prispevek.blokovany from clen inner join pozice on clen.vsymbol=pozice.clen inner join funkce on pozice.funkce=funkce.fun_id inner join prispevek on clen.vsymbol=prispevek.clen where vsymbol='".$_POST["vsymbol"]."' && heslo='".$_POST["heslo"]."' && rok='".$rok."' && blokovany='0' order by funkce desc "); $pri=mysql_fetch_array($prihlaseni); if((mysql_num_rows($prihlaseni)==1) || (mysql_num_rows($prihlaseni)==2)) { if (mysql_num_rows($prihlaseni)==1) { $_SESSION["prihlaseny_clen"]=$_POST["vsymbol"]; } if (mysql_num_rows($prihlaseni)==2) { if ($pri['nazev']=="předseda") { $_SESSION["prihlaseny_predseda"]=$_POST["vsymbol"]; } if ($pri['nazev']=="ekonom") { $_SESSION["prihlaseny_ekonom"]=$_POST["vsymbol"]; } if ($pri['nazev']=="poradce chovu") { $_SESSION["prihlaseny_poradce"]=$_POST["vsymbol"]; } if ($pri['nazev']=="předseda sportovního klubu") { 33
$_SESSION["prihlaseny_predseda_sk"]=$_POST["vsymbol"]; } } ?> <script> window.location.href="index.php"; <script> window.location.href="?menu2=prihlaseni";
?>
Nejprve je do proměnné $rok uložen aktuální rok. Poté, co uživatel použije tlačítko Přihlásit, nastaví se proměnná $_POST["clog"] na hodnotu ok. Dále se provádí dotaz na databázi, který podle zadaných údajů (variabilního symbolu a hesla) vyhledá uživatele odpovídajícího těmto zadaným údajům, zjistí jaké zastává funkce a zkontroluje, zda uživatel není pro aktuální rok blokovaný. Pakliže dotaz vrátí nulu, jsou pravděpodobně zadané údaje špatné a uživatel je přesměrovaný na stránku pro snazší přihlášení. Pokud je výsledkem dotazu jeden řádek, jedná se o přihlášení člena klubu a je nastavená session prihlaseny_clen. V případě, že jsou výsledkem dva záznamy, porovnává se název funkce, podle kterého je pak nastavená příslušná session.
34
5.2.7 Ošetření chyb Neméně důležitou částí tohoto kódu je ošetření chyb, vytvořených zadáváním údajů od uživatelů. To je řešeno pomocí php, regulárních výrazů. Princip spočívá v tom, že odeslaná data jsou kontrolována s výrazy (podmínkami), které musí splňovat. Zde je pouze stručný příklad použitý v kódu: (6)
if ($_POST["cpsc"]=='') { $pole_chyb[]='PSČ je nutné vyplnit.'; } else { if( (!EReg("^[0-9]{5}$",$_POST["cpsc"])) && (!EReg("^[0-9]{3} [0-9]{2}$",$_POST["cpsc"])) ) { $pole_chyb[]='PSČ je špatně zadané.'; } }
Pokud je poštovní směrovací číslo prázdné, uloží se do pole chyb text chybového hlášení. Chybové hlášení se do proměnné $pole_chyb uloží i v případě, že poštovní směrovací číslo nemá správný formát. V tomto případě, pokud se nejedná o 5 čísel ve formátu xxxxx nebo xxx xx.
foreach ($pole_chyb as $key=>$value) { echo '
'. '' . $value . '' . '
' . ''; }
Výše je vidět výpis z pole_chyb. Tento výpis se provede pouze v případě, že pole chyb není prázdné.
35
6 Testování 6.1 Postup testování Proces testování jsem rozdělila na dvě hlavní části: •
mé testování,
•
testování ostatních.
Své testování jsem dále rozdělila na: •
testování funkčnosti,
•
testování chyb.
V mém testování jsem zvolila nejprve testování funkčnosti, kdy jsem ověřovala postupy, které aplikace umožňuje. Jedním z takových postupů bylo například podání přihlášky. Test probíhal tak, že jsem zadala hodnoty a sledovala, jestli se bude aplikace chovat dle předpokladů. Poté následoval například test přihlášení, kterým jsem ověřovala funkčnost přihlášení, tedy jak se bude aplikace chovat v případě, že se přihlásí člen nebo co se stane, pokud se přihlásí předseda a zda má k dispozici správné menu a jeho položky. V testování chyb jsem kontrolovala zadávaná data. Tedy co se stane, pokud uživatel zadá nepředpokládané hodnoty. Pokud třeba nevyplní povinné pole nebo pokud zadá například čísla do pole pro jméno a podobně. Kromě svého testování jsem požádala několik přátel o otestování aplikace. Testy jsem nechala plně v jejich kompetenci. Pouze jsem je seznámila s funkčností aplikace a s možnostmi, které nabízí. Jelikož se jednalo o vzorek testerů z řad odborníků i laiků, dalo se očekávat, že laici provedou testy především na uživatelské úrovni, kdežto odborníci budou testovat možné chyb, které by se v aplikaci mohli vyskytnout (špatně zadané hodnoty, které aplikace neoznačí jako chybné a podobně).
36
6.2 Výsledky testování Výsledky testování dopadly uspokojivě. Při svém testování jsem odhalila několik drobností, které se daly snadno opravit. Byl to například neexistující soubor s obsahem pro položku z levého menu. Chyba byla v názvu samotného souboru. Ten byl jiný, než jaký byl volán z aplikace. Z testů od vybraných testerů vzešly také velice dobré výsledky. Ovšem byly odhaleny také nějaké drobné chyby. Jednou z nich bylo propuštění špatně zadaného poštovního směrovacího čísla přes formulář. Formulář měl přitom vrátit chybové hlášení. Chyby, které vzešly z testování, jsem opravila a provedla znovu testy na jejich výskyt.
37
7 Závěr Mým hlavním cílem při tvorbě této aplikace bylo odstranění nedostatků stávajících stránek kynologického Klubu českého horského psa, což si myslím, že se mi povedlo. Vytvořená aplikace totiž obsahuje, oproti předchozí verzi, rozhraní odlišné pro členy klubu a nečleny klubu. Tím mají běžní uživatelé omezený přístup k informacím náležícím pouze členům klubu. Stránky jsou navíc daleko komplexnější, než předchozí dlouho používaná verze. Obsahují nejen základní údaje o plemeni českého horského psa, ale lze zde také získat informace o připravovaných klubových výstavách, plánovaných závodech a setkáních přátel a členů klubu. Funkcionářům usnadňuje tato aplikace administraci, jako je vedení evidence členů, evidence členských příspěvků a také například úpravy dokumentů. Díky přehledným informacím o výstavách, závodech a setkáních členů klubu dojde k větší účasti majitelů českých horských psů na těchto akcích. Následná větší účast zvýší viditelnost a tím pádem i povědomí o tomto plemenu, což zvýší zájem o české horské psy a rozšíří počet chovaných jedinců. Práce by se v budoucnu dala rozšířit o načítání výsledků z výstav, které na svých stránkách (http://www.cmku.cz) zveřejňuje ČMKU (Českomoravská kynologická unie). Obdobným způsobem by šla také rozšířit část obsahující výsledky závodů, neboť i SSPS (Svaz sportu psích
spřežení)
zobrazuje
výsledky
ze
závodů
na
svých
stránkách
(http://www.mushing.cz). Tvorba této aplikace mi přinesla mnoho nových poznatkům, které jistě budu moci uplatnit v praxi, při další tvorbě nových aplikací.
38
8 Seznamy 8.1 Použitých termínů a zkratek •
Stanovy klubu – Stanovy také statut nebo organizační řád je základní vnitřní právní předpis právnické osoby, zejména občanského sdružení nebo politické strany, u kterých jsou stanovy důležitou podmínkou při registraci. (1)
•
Zápisní řád – Zápisní řád Klubu české horského psa vychází z platného Zápisního řádu Českomoravské kynologické unie (dále jen ČMKU), jímž se řídí chov čistokrevných plemen psů s průkazem původu. Upravuje konkrétní podmínky chovu českého horského psa (dále jen ČHP) dle jednotlivých bodů Zápisního řádu ČMKU. (2)
•
HTML – HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. (3)
•
CSS – Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou CSS) je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. (4)
•
Session – Sessions (neboli relace) jsou velice důležitou součástí PHP. Díky nim můžeme například uchovávat specifické informace pro každého přihlášeného uživatele. Ten nejprve vyplní formulář pro zadávání identifikačního jména a hesla. Pokud toto zadání proběhlo v pořádku, vytvoří se session, do které jsou uloženy informace, jenž jednoznačně identifikují přihlášeného uživatele (například id. jméno a heslo). Po celou dobu, kdy se uživatel pohybuje v systému pak mají PHP aplikace přístup k těmto informací. Když ukončí uživatel svou práci, odhlásí se a session je zničena. (5)
•
Regulární výraz – Regulární výraz (regular expression), označovaný též zkráceně jako regexp či regex je speciální řetězec znaků, který představuje určitý vzor (chcete-li masku) pro textové řetězce. Regulární výrazy se proto nejčastěji používají ke kontrole dat zadávaných ve formulářích (například e-mailová adresa či PSČ) nebo „parsování” kódu (třeba HMTL, XML či CSV). (7)
39
8.2 Citací a použité literatury [1]
Wikipedia [online]. 2011 [cit. 2011-05-20]. Stanovy. Dostupné z WWW:
.
[2]
Klub Českého horského psa [online]. 2006 [cit. 2011-05-20]. Zápisní řád Klubu českého horského psa. Dostupné z WWW: .
[3]
Wikipedia [online]. 2011 [cit. 2011-05-26]. HyperText Markup Language. Dostupné z WWW: .
[4]
Wikipedia [online]. 2011 [cit. 2011-05-25]. CSS. Dostupné z WWW: .
[5]
MATĚJEKOVÁ, Táňa. Webový portál personální agentury. Jihlava, 2007. 61 s. Absolventská práce. Vyšší odborná škola Jihlava.
[6]
MATĚJEKOVÁ, Táňa. Webový portál personální agentury. Jihlava, 2007. 61 s. Absolventská práce. Vyšší odborná škola Jihlava.
[7]
Regulární výrazy [online]. 2008 [cit. 2011-05-29]. Regulární výrazy: Regexp není zaklínadlo... Dostupné z WWW: .
[8]
JANOVSKÝ, Dušan. Jak psát web [online]. 2011 [cit. 2011-03-31]. Dostupné z WWW: .
[9]
MCFARLAND, David Sawyer. CSS chybějící manuál. Praha : Grada Publishing, a.s., 2006. 432 s. ISBN 978-80-247-2122-4.
[10] Návody pro C4 [online]. 2011 [cit. 2011-05-10]. TinyMCE - Instalace. Dostupné z WWW: . [11] Lightbox 2 [online]. 2011 [cit. 2011-05-15]. Dostupné z WWW: .
40
8.3 Obrázků Obrázek 1 – foto 1 – před úpravou................................................................................... 23 Obrázek 2 – foto 1 – po úpravě ........................................................................................ 23 Obrázek 3 – foto 1 – před úpravou................................................................................... 24 Obrázek 4 – foto 2 – po úpravě ........................................................................................ 24 Obrázek 5 – ukázka aplikace ........................................................................................... 27
41
