Individuální projekt z předmětu webových stránek Anketa Jan Livora

Transkript

1 UŽIVATELSKÁ TECHNICKÁ DOKUMENTACE ANKETA : Individuální projekt z předmětu webových stránek Anketa Jan Livora [2ITa] [sk1] 1

2 Obsah DŮLEŽITÉ UPOZORNĚNÍ!!!... 3 PROHLÁŠENÍ O AUTORSTVÍ:... 3 ANOTACE:... 4 KLÍČOVÁ SLOVA:... 4 Zadání:... 4 POUŽITÉ NÁSTROJE :... 5 anketa popis :... 5 TECHNICKÁ ČÁST: Upozornění pro editaci: SOUBORY: ) SOUBORY: ) POUŽITÉ PROMĚNÉ: ) UKÁZKY KODU: DATABÁZE: )SHRNUTÍ PRÁCE: NÁMĚTY K VYLEPŠENÍ:

3 DŮLEŽITÉ UPOZORNĚNÍ!!! Tato Anketa je naprogramována pomocí PHP (Hypertext Preprocessor) a ke jejímu spuštění budete tedy potřebovat webový server,který podporuje PHP (easyphp,wampserver)ten se dá běžně stáhnout z internetu.nároky jsou velmi nízké stačí mít alespoň 8 MB volného místa na pevném disku Počítač, na kterém budete kalkulačku spouštět a nějaký webový prohlížeč ( Google Chrome, Mozilla Firefox ) a musíte být pochopitelně připojeni k síti po celou dobu vaší práce s anketou.tato anketa může pracovat na jakémkoli zařízení bez ohledu na jeho operační systém jedinou podmínkou je,aby toto zařízení bylo schopno pracovat s webový prohlížeč s podporou PHP a být připojeno.webový server můžete stáhnout např na těchto stránkách: Vážená Uživateli této ankety,děkujeme vám,že jste si vybral právě tuto anketu. Před prvním použitím si prosím přečtěte následující manuál návod k použití! PROHLÁŠENÍ O AUTORSTVÍ: Já autor tohoto pololetního projektu:jan LIVORA prohlašuji,že na této anketě jsem pracoval já sám,veškeré soubory nacházející se na CD jsem sám programoval a pracoval na nich během prvního pololetí. 3

4 ANOTACE: Tento dokument obsahuje dokumentace jak pro uživatele(uživatelskou) tak technickou.dále obsahuje úvod kde je uživatel seznámen za jakých podmínek může pracovat s anketou.dále potom seznam klíčových slov,obsah,seznámení s anketou v uživatelské dokumentace se greeny obrazovek pro uživatele,technickou část vývoje vzniku ankety,závěr kde je obsaženo shrnutí a případný návrh na vylepšení. This document contains the documentation for both users (the user) so technickou.dále contains an introduction where the user is aware of the conditions under which it can work with anketou.dále then a list of keywords, content, information about the poll in the user documentation greens screens for users, technical part development of inquiry, which concluded the summary of the proposal and possible improvements. KLÍČOVÁ SLOVA: Php,anekta,databáze,screen,server,webový prohlížeč, proměná,nick. Zadání: Úkolem této části ankety,která ještě není zcela hotova,nebot je zatím pouze pololetí a chybí tak ještě například zápis atd,byl vytvořit tzv redakční systém,který by měl pracovat tak,že jakmile se přihlásí uživatel na hlavní stránku,měl by vidět anketu svojí pobočky,dále své spolupracovníky v pobočce to z hlediska uživatele(klienta),z pohledu admina(správce) však jde o to aby měl přístup ke všemu,tedy pro admina(správce) by neměla platit žádná pravidla a měl by mít možnost zobrazit všechny uživatele,všechny ankety,informace o pobočce,či dané firmě,jakmile bude projekt plně dokončen což bude 2pololetí měl by být plně funkční a mít možnost nejen čtení ale také zápisu a dalších věcí s tím spjaté. 4

5 POUŽITÉ NÁSTROJE : Na tuto webovou aplikaci a práci byly použity: Notepad++ - program typu poznámkový blok pro psaní skriptů Wampserver - Php server pro podporu Microsoft Word pro psaní textu a dokumentace o samotné práce výstřižky program pro vystřižení screenů obrazovek,nebo kodu Mysql databáze prostřednictvím níž funguje anketa. Z pohledu technologii : Html značkovací jazyk,který tvoří kostru stránky. Css kaskádové styly,které pomáhají v anketě k úpravě stylů písem pozadí tlačítka... Php skriptovací jazyk,kteří tvoří dynamické stránky a jejich funkčnost. Sql databáze komunikující s php JavaScript objektový jazyk. Sublimetext2 - program typu poznámkový blok pro psaní skriptů anketa popis : Tato anketa je navržena jak pro práci uživatele( Zákazníka ) tak pro práci administrátora,anketa funguje tak že se nejdříve otevře vstupní soubor s loginem kde vyplníme níže uvedené údaje: 5

6 Po té co zadáme výše uvedené údaje stiskneme tlačítko ok.po stisknutí se nám bud zobrazí chybná hláška že byly zadány špatné údaje nebo se nám zobrazí stránka s textem a obrázkem: (to v případě logování ),v případě registace vyplníme výše uvedené údaje podle toho co chceme registrovat a odešleme,následně můžeme dále pracovat. Po kliknutí na obrázek,který funguje jako odkaz se dostaneme na hlavní stránku ankety: 6

7 Ročníková práce Logo anketa firmy obrázek menu Informace o klientovi Logo uzivatele Po přejetí kurzorem myši na menu se změní pozadí abychom viděli,že sme najeli na danou část menu.po stisknutí prvního bodu v menu anketa se dostaneme na stránku s anketou pro uzivatele: Ve výše uvedeném příkladě vydíme zobrazující se název ankety,otázku + odpověd,která může mít různých možností a různých typů. Jdeme na 2položku v menu kolegové firmy.po stisknutí se dostaneme na stránku kde uživatel vidí všechny kolegy z dané firmy jaké je on sám: 7

8 ID uzivatele v databázi Login,jméno,firma Ročníková práce anketa Název pobocky Dále mámejako 3 bod kolegové pobočky.po stisknutí tohoto tlačítka se dostaneme na stránku kde se zobrazí pro změnu uživatelé,kteří jsou spjati pouze s pobočkou,tedy v té ve které se nachází i samotný uživatel: Uživatel může nejen anketu zobrazit,ale také vytvořit: 8

9 Tvorba anekty je vedena do třích kroků: Za prvé zadáme základní informace o anketě,otázku a typ jaký otázka má Po odeslání se dostaneme do kroku dvě kde zadáme odpověd k dané otázce,zadáne v předešlém kroku Během stisknutí tlačítka nám vyskočí dialogové okno kde dostaneme dotaz:zdali chceme vytvořit novou otázku,pokud dáme ano,dostaneme se znovu na krok 1,s tím že už zadáváme jen otázku a tim,nikoliv informace o anketě.pokud dáme ne dostaneme otázku zdali chceme přidat odpověd,zde platí to samé,jako v předešlém,a pokud vybereme možnost ne,dostaneme se na poslední krok 3,kde zvolíme styl anekty,po stisknutí tlačítka se nám vytvoří anketa 9

10 ,kterou si můžeme po té zkontrolovat v nabídce,hlasovat pro ní,či vidět statistiky: Jako poslední máme v menu bod odhlášení.nejedná se o nic jiného než že se přesměrujeme na stránku,která nemá nic zvláštního co se týče uživatelského rozhraní,tato stránka tedy slouží k tomu aby se uživatel úspěšně mohl odhlásit: TECHNICKÁ ČÁST: 1) Soubory. a) Soubory se samotnou anketou. b) obrázky. 2) Použité proměné. a) Názvy + popis co mají většinou dělat 10

11 3) Ukázky kodu a) Vybrané části kodu. b) Databáze 4) Závěr. a)shrnutí práce. b)náměty na možné vylepšení. Upozornění pro editaci: Veškeré data,které se nacházejí v databázi,jsou includována do php souborů,přes funkci include(název souboru),pokud budete chtít databázi uzpůsobit vašemu použití,přepište login,heslo a název DB v souboru db.php SOUBORY: Tato anketa obsahuje okolo 30 funkčních php souborů např:(anketa_komplet1, anketa_komplet2, anketa1, firma_info, formular-heslo, odhlášeni, pobocka_info,reset.php,result2.php,create1-3.php pobocka_info2, uvod2,uvod3, uzivatele, uzivatele2, uzivatele_komplet,registrace 1-3,firmy ankety1-6.php) Z jednotlivých jmen souborů lze u většiny snadno zjistit co asi mají za význam: anketa_komplet1,2 v režimu admin zobrazí všechny ankety,aketa1 anketa zobrazující se uživateli,firma_info informace o firmě,formular-heslo vstupní formulář,odhlášení odhlašující soubor,pobočka info1,2 v režimu admin informace o dané pobočce,uvod2 stránka zobrazující se po vyplnění formuláře kladně.uvod3 hlavni stranka,uzivatele,2 kolegové z firmy či pobočky. 11

12 1) SOUBORY: Zde se nacházejí obrázky např: uvod2 obrázek pro stisknutí a přesměrování na hlavní stránku,loga uživatelů:(images 1-15.jpg) 2) POUŽITÉ PROMĚNÉ: $result+cislo je to proměná jak z jejího anglického názvu vyplývá vrací nějaký výsledek,použita při sql dotazech. $radek + cislo je to proměná která se vztahuje k předchozí proměné $result a vrací z daného výsledku tzv asociativní pole (pole,které nemá index typu (0,1,2,3) ale má řetězec). $radek+[ řetězec ] uložená informace z database ze sloupečku v názvu. $_SESSION[ řetězec ] jedná se o tzv globální Proměnou,která nám přenáší hodnoty v ní uložené na jinou stránku $login zjištění hodnoty z formuláře. $heslo zjištění hesla z formuláře. $nazev firmy zjištěná nátvu firmy. $nazev pobocky -název poboczy. $id -id z dané tabulky $pocet -počet řádků odpovídajících výsledků DB. $zapis zapíše do DB. $odpoved odpoved. $ipny IP adresy $exist existence daného podmyk (existence) v DB. 12

13 3) UKÁZKY KODU: Connect k databázi výběr tabulky Kontrola zdali jsme přihlášeni Výběr z tabulky pobočka,načtení řádků a tabulka výpis 13

14 Přihlášení kontrola Výběr z tabulky dle podmínky,načte ní řádků a tabulka Zjištění zda li se jedná o uživatele či admina výpis Pokud se o admina nejedná+ výpis 14

15 Kontrola jestli jenom editujeme +zápis Kontrola zda-li pouze upravujeme vzhled Proces nastavení hodnot a zápisu při tvorbě ankety Registrace firmy za podmínky existence tlačítka Registrace pobockyza podmínky existence tlačítka Zadání města za podmínky existence tlačítka 15

16 Výběr otázky a odpovědi k dané otázce,součet odpovědí a funkce na procentuální vyjádření hlasování pro jednotlivé odpovědi,vykre slení grafu+ zápis informací do DB DATABÁZE: 16

17 17

18 4)SHRNUTÍ PRÁCE: Práce se jeví jako zajmavá a musí uznat,ač to zprvu tomu tak nebylo mě začala bavit,bohužel nebylo na to tolik času kolik bych potřeboval.práce funguje tak jak má (hlavní funkce).určitě si nemyslím,že je to nějaké extra podařené spíš ten slabší průměr (střed).hlavní pointa je přihlášení rozpoznání,registrace (firem,uživatele,pobočky,města)+ anketa dle pobočky,tvorba ankety,editace ankety,anonymní hlasování,výsledné statistiky a to se podařilo. 18

19 NÁMĚTY K VYLEPŠENÍ: Vždy je co vylepšovat,v případě mé práce zatím spíše úpravu stylu,vzhledu a jednoduchosti,nejlépe použití také jiných prostředků typu ajax,jquery atd,které by určitě anketu oživili.dále jednoduchost programování (kodu),(lepší optimalizace ). 19