MATURITNÍ PRÁCE dokumentace

MATURITNÍ PRÁCE dokumentace WWW stránky Ivoš Apolenář

školní rok: 2011/2012

obor: třída:

Elektronické počítačové systémy P4.B

Střední škola informatiky, elektrotechniky a řemesel Roţnov pod Radhoštěm

2


3

Poděkování: Touto cestou děkuji mé konzultantce Ing. Haně Halaštové za její odborné rady, ochotu pomoci a čas, který věnovala konzultaci mé maturitní práce.


4

ABSTRAKT V tomto dokumentu budou představeny webové stránky o významných osobnostech z oboru informačních technologií. Účelem stránek je tedy přinést uživateli informace o těchto osobnostech. Stránky jsou psány pomocí HTML, CSS, JavaScriptu, PHP, SQL a využívají databázi MYSQL k uložení dat. Grafické objekty jsou navrženy nebo upraveny v programu Adobe Photoshop. Na následujících stranách bude rozebrána tvorba webu od grafického návrhu až po programování administračního systému či komentářů k jednotlivým osobnostem. Dokument také obsahu také návod, který vás provede jednoduše ovládáním administračního systému jako například vkládání či mazání osobnosti. Dále autor popíše použití a výběr programů i technologií pro psaní webu. Celý dokument bude také prokládán obrázky ať pro lepší vysvětlení, nebo ukázku.


5

OBSAH OBSAH ...........................................................................................................................................................................................................5 ÚVOD ...........................................................................................................................................................................................................6 1.

CÍLE PRÁCE ..................................................................................................................................................................................7

2.

VÝBĚR TECHNOLOGIÍ PRO ŘEŠENÍ .....................................................................................................................................8

2.1.

EASY PHP 5.3.0.8 ...........................................................................................................................................................................8

2.2.

PSPAD EDITOR .............................................................................................................................................................................8

2.3.

ADOBE PHOTOSHOP CS5 ..........................................................................................................................................................9

2.4.

HTML ..............................................................................................................................................................................................9

2.5.

CSS ...................................................................................................................................................................................................9

2.6.

PHP .................................................................................................................................................................................................10

2.7.

JAVASCRIPT ...............................................................................................................................................................................10

2.8.

WEBOVÉ PROHLÍŢEČE ...........................................................................................................................................................10

3.

ZPŮSOBY ŘEŠENÍ A POUŢITÉ POSTUPY ...........................................................................................................................11

3.1.

HTML A CSS ................................................................................................................................................................................11

3.2.

JAVASCRIPT ...............................................................................................................................................................................12

3.3.

PHP .................................................................................................................................................................................................14

3.3.1.

PŘIDÁNÍ OSOBNOSTI ...............................................................................................................................................................14

3.4.

MYSQL ..........................................................................................................................................................................................16

3.5.

ULOŢENÍ PRÁCE NA INTERNETOVÝ SERVER ................................................................................................................18

4.

ZHODNOCENÍ DOSAŢENÝCH VÝSLEDKŮ (TECHNICKÝCH)........................................................................................19

4.1.

SPLNĚNÉ CÍLE ...........................................................................................................................................................................19

4.2.

FUNKČNOST STRÁNEK ...........................................................................................................................................................19

4.3.

NESPLNĚNÉ CÍLE ......................................................................................................................................................................19

5.

PŘÍRUČKA UŢIVATELE ..........................................................................................................................................................20

5.1.

PRVNÍM VSTUP NA WEB .........................................................................................................................................................20

5.2.

PŘIHLÁŠENÍ DO ADMINISTRACE WEBU ..........................................................................................................................23

5.3.

OVLÁDÁNÍ ADMINISTRACE OSOBNOSTÍ .........................................................................................................................24

5.4.

PŘIDÁNÍ OSOBNOSTÍ ...............................................................................................................................................................25

5.5.

ÚPRAVA OSOBNOSTÍ ...............................................................................................................................................................26

5.6.

MAZÁNÍ OSOBNOSTÍ ...............................................................................................................................................................26

5.7.

OVLÁDÁNÍ ADMINISTRACE NOVINEK..............................................................................................................................27

5.8.

PŘIDÁNÍ NOVINEK ...................................................................................................................................................................27

5.9.

ÚPRAVA NOVINEK....................................................................................................................................................................28

5.10.

MAZÁNÍ NOVINEK ....................................................................................................................................................................29

5.11.

MAZÁNÍ KOMENTÁŘŮ ............................................................................................................................................................29

5.12.

ODHLÁŠENÍ .................................................................................................................................................................................29

SHRNUTÍ .....................................................................................................................................................................................................31 SEZNAM POUŢITÝCH INFORMAČNÍCH ZDROJŮ .........................................................................................................................32 SEZNAM OBRÁZKŮ ................................................................................................................................................................................33 SEZNAM KÓDŮ .........................................................................................................................................................................................34 SEZNAM PŘÍLOH .....................................................................................................................................................................................35


6

ÚVOD Webové stránky jsou v dnešní době naprosto nepostradatelnou součástí moderního života. Každý dnes chodí na web, ať už chce zjistit nějaké informaci, komunikovat s přáteli nebo nakupovat pohodlně z domova. Jde o dynamicky se rozvíjející odvětví IT, které potřebuje odborníky pro svou tvorbu. Autor si zvolil jako maturitní práci webové stránky hlavně proto, že ho jejich tvoření ho baví a chce se pořád zdokonalovat. Také jde o velmi dobrou práci z pohledu finančního ohodnocení. Web by měl sloužit něco jako obdoba wikipedie, s tím rozdílem, že se soustředí pouze na osobnosti z odvětví IT. Následující kapitoly budou nastiňovat průběh tvorby a práce a řešení vyskytlých problémů.


7

1. CÍLE PRÁCE → vytvoření dynamické webové aplikace s využitím technologií PHP a databázového systému MySQL → webové stránky validní podle STRICT deklarace → navržení struktury databáze → navržení struktury stránky a možností zobrazení dat → vytvoření administrátorského rozhraní pro vkládání a úpravu dat → navržení principů vyhledávání a vytvoření vyhledávajícího skriptu


8

2. VÝBĚR TECHNOLOGIÍ PRO ŘEŠENÍ Zde je uveden popis využitých programů a technologií, které autor použil při práci.

2.1. Easy PHP 5.3.0.8 → je balíček obsahující webový server Apache, skriptovací serverový jazyk PHP, nástroj pro správu databáze phpMyAdmin. → umožňuje rozběhnout php skripty na vlastním počítači → balíček byl vybrán díky své jednoduchosti a dostupnosti

2.2. PSPAD EDITOR → volně šiřitelný univerzální textový editor pro MS Windows. → nabízí velké možnosti formátování textu → obsahuje řadu funkcí pro vývoj webových stránek → tento editor byl vybrán pro psaní veškerého kódu

Obr. 1: PSPAD


9

2.3. Adobe Photoshop CS5 → je bitmapový grafický editor pro tvorbu a úpravu bitmapové grafiky (př.: fotografií) → pomocí tohoto programu byla realizována většina vzhled webu

Obr. 2: Adobe photoshop CS5

2.4. HTML → značkovací jazyk pro vytváření webových stránek → pomocí HTML napsána struktura stránek

2.5. CSS → jazyk, který udává způsob zobrazení a vzhled stránek → použit pro vytvoření tzv. "layoutu" a vzhled stránek


2.6. PHP → je serverový skriptovací jazyk přinášející dynamickou podobu webu → vybrán díky jednoduchosti a výborné komunikaci s databází MySql

2.7. JavaScript → skriptovací jazyk prováděný na straně klienta → pomocí JS je řešena kontrola některých formulářů

2.8. Webové prohlíţeče -

stránky by testovány v těchto prohlížečích: → Google chrome v.(17.0.963.56) → Opera v.(11.61) → Internet Explorer v.(8) → Mozilla Firefox v.(9.0.1)

10


11

3. ZPŮSOBY ŘEŠENÍ A POUŢITÉ POSTUPY Tato kapitola pojednává o využití programovacích jazyků pro vytvoření webu

3.1. HTML a CSS Před začátkem programování bylo třeba si alespoň hrubě navrhnout strukturu webu. Autor vytvořil v celku obvyklou strukturu stránky pomocí jazyku HTML, jenž formátoval pomocí CSS. Tzv. layout stránky byl vytvořen pomocí HTML elementů
. Nahoře logo, které je pro snadnější formátování uzavřeno do své obálky. Níže následuje hlavní panel, kde se vyskytuje vyhledávací pole a účtový box. Poté se vyskytuje obsahový kontejner a patička.

Obr. 3: Layout stránek


12

Kód 1. (ukázka hlavního stylování) #okolo_panelu{

#hlavni_panel{

width: 100%;

width: 830px;

height: 70px;

height: 70px;

margin: 0;

margin: 0 auto;

float: left;

position: relative;

background-image:

z-index: 10;

url(../obrazky/pozadi/okolo_panelu.png);

}

background-repeat: repeat-x; position: absolute; z-index: 1; }

#obsahovy_kontejner{

#paticka{

width: 796px;

width: 816px;

min-height: 370px;

height: 29px;

margin: 0 auto;

margin: 0 auto;

padding: 30px;

margin-bottom: 50px;

padding-top: 15px;

padding: 0 20px;

background-image:

background-image:

url(../obrazky/pozadi/obsahovy_kontejner.png);

url(../obrazky/pozadi/paticka.png);

background-repeat: repeat-y;

background-repeat: no-repeat;

font-family: calibri, arial, courier;

position: relative;

font-size: 14px;

bottom: 5px;

position: relative;

}

bottom: 5px; }

3.2. JavaScript JavaScript používá autor například na validaci formuláře pro přidávání komentářů. Jedná tak hlavně proto, že je to rychlejší, než odesílat data na server a zpátky (pozn.: vyplnění komentáře se samozřejmě kontroluje i serverem). Skript validuje jméno, antispam (čísla vygenerována pomocí PHP, která vloží i do JS) a komentář. Funguje na principu načtení jednotlivých údajů do proměnných pomocí atributu name. Tyto proměnné pak porovnává s prázdným řetězcem (u jména ještě kontroluje min. délku řetězce 3 a u antispamu ještě s výsledkem součtu čísel), pokud některá z větví nevyhovuje, nastaví se proměnná ok do logické hodnoty false. Pokud se tedy tato proměnná nastaví do hodnoty false, tak poslední konstrukce IF zamezí odeslání dat na server a JS vypíše chybové hlášky.


13

Kód 2. (zkrácený skript na kontrolu formuláře JS) function validace_koment(){ var jmeno = document.getElementsByName('koment_jmeno')[0].value; var jmeno_length = jmeno.length; var antispam = document.getElementsByName('koment_antispam')[0].value; var koment = document.getElementsByName('koment')[0].value; var ok = true;

if(jmeno == ""){ document.getElementById('koment_jmeno_chyba').innerHTML = 'Není vyplněno jméno!'; document.getElementById('koment_jmeno_chyba').style.display = 'block'; ok = false; } else if(jmeno_length < 3){ document.getElementById('koment_jmeno_chyba').innerHTML = 'Min. počet znaku: 3!'; document.getElementById('koment_jmeno_chyba').style.display = 'block'; ok = false; }

obr.: ukázka validace. komentáře Javascriptem . if(!ok){ return false; } }

Autor také využil JavaScriptou knihovnu Jquery. Použití této knihovny je velmi výhodné, neboť je oproti obyčejnému JavaScriptu až o 1/3 kratší ve výsledném kódu. Tuto knihovnu autor využil například při vytvoření animačního efektu u tlačítek pro úpravu osobnosti.


14

Kód 3. (ukázka knihovny Jquery) $(document).ready(function(){ $(".admin_ikony img").css("opacity", "0.65"); $(".admin_ikony img").bind('mouseover', function(){ $(this).animate({ opacity: 1, }); }); $(".admin_ikony img").bind('mouseout', function(){ $(this).animate({ opacity: 0.65, }); }); });

3.3. PHP V PHP autor napsal funkce na validaci některých formulářů. Dále byly v PHP napsány skripty pro přidání, úpravu a mazání osobnosti nebo funkci na odstranění diakritiky z řetězce, což bylo využito v již zmíněných operacích s osobnostmi.

3.3.1. Přidání osobnosti PHP soubor pro vkládání nových osobností obsahuje jednak formulář a také PHP skript, který získané data formuláře zkontroluje pomocí již zmíněných funkcí. Tyto funkce kontrolují především vyplnění daného pole, ale také správnou délku či formát. V případě, že validace není úspěšná tak se do proměnné $ok zapíše logická hodnota false a PHP skript vyzve

uživatele

k

opravě.

Po

úspěšné

validaci

data

projdou

funkcí

mysql_real_escape_string, která se postará o escapování. Následně začne PHP spolupracovat s MYSQL. Zkontrolovaná data, krom životopisu a zajímavostí uloží pomocí jazyka SQL do tabulky v databázi s názvem osobni_udaje.


15

Kód 4.1 (ukládání do databáze) $sql_prikaz = "INSERT INTO osobni_udaje(jmeno, prijmeni, datum_narozeni, misto_narozeni, datum_umrti, misto_umrti, obcanstvi, povolani, rodiny_stav, manzelka, deti) VALUES('$jmeno', '$prijmeni', '$datum_narozeni', '$misto_narozeni','$datum_umrti', '$misto_umrti', '$obcanstvi', '$povolani', '$rodiny_stav', '$manzelka', '$deti')"; $vysledek = mysql_query($sql_prikaz);

Poté se PHP zjistí poslední databází vložení id, které je využito pro vložení životopisu do tabulky zivotopisy. Dále je pak využit cyklus FOR, který pomocí funkce ISSET zjistí, zda byly vyplněny nějaké zajímavosti a případě, že ano, je opět využito poslední vložené id a zajímavosti jsou postupně vloženy do databázové tabulky zajimavosti.

Kód 4.2 (ukládání do databáze) for($i = 1; $i <= 5; $i++){ if(isset($_POST["zajimavost". $i])){ $zajimavost = $_POST["zajimavost". $i]; $sql_prikaz = "INSERT INTO zajimavosti(zajimavost_id, zajimavost) VALUES('$posledni_id', '$zajimavost')"; $vysledek = mysql_query($sql_prikaz); } }

Následně dochází k uložení vložené fotografie do vyhrazené složky. Tato fotografie je následně přejmenována na jméno a příjmení osobnosti bez mezery a diakritiky.


16

Kód 5. (ukládání fotografií osobností na server) $fotka = $_FILES["fotka"]["name"]; move_uploaded_file($_FILES["fotka"]["tmp_name"], "obrazky/osobnosti/$fotka"); $fotka_jmeno = $jmeno . $prijmeni . ".jpg"; $fotka_jmeno2 = bez_dk($fotka_jmeno); rename("obrazky/osobnosti/". $fotka, "obrazky/osobnosti/". $fotka_jmeno2);

Úplně nakonec je uživatel přesměrován pomocí hlaviček na stránku se skriptem zobrazující tuto nově vloženou osobnost. Hlavičky fungují, protože bylo využito bufferování výstupu. Tato technika spočívá ve vložení těchto funkcí ob_start() a ob_end_flush() na začátek a konec skriptu, kdy bufferování způsobní uložení výstupu do mezipaměti serveru a výsledný kód je prohlížeči poslán až po vykonání skritpu.

3.4. MYSQL V tomto databázovém systému byla vytvořena jedna databáze it_osobnosti. V této databázi zase 6 tabulek.

Obr. 4: Tabulky v databázi


17

1. tabulka administrace (přihl. údaje admina) má 2 sloupce: → login, heslo - šifrované pomocí Sha1.

2. tabulka komentare (okomentování osobnosti) má 5 sloupců: → koment_id - primární klíč, automaticky inkrementován → osobnost_id - obsahuje id osobnosti, ke které komentář patří → datum, jmeno, komentar

3. tabulka novinky (aktuální zprávy ohledně osobností) má 6 sloupců: → novinka_id - primární klíč, automaticky inkrementován → titulek, autor, zdroj, datum

4. tabulka osobni_udaje (obsahuje inf. o osobnostech) má 12 sloupců: → osobnost_id - primární klíč, automaticky inkrementován → jmeno, prijmeni, datum_narozeni, misto_narozeni → datum_umrti, misto_umrti, obcanstvi, povolani, rodinny_stav, manzelka, deti

5. tabulka zajimavosti má 2 sloupce: → zajimavost_id - primární klíč, automaticky inkrementován (shodná s id osobnosti ke které zajímavost_patří) → zajimavost

6. tabulka zivotopisy má 2 sloupce: → zivotopis_id - primární klíč, automaticky inkrementován (shodná s id osobnosti ke které zajímavost_patří) → zivotopis


18

3.5. Uloţení práce na internetový server Původně autor vybral pro stránky server webzdarma.cz, ale po chvilkovém odzkoušení bylo jasné, že něco není v pořádku. Web byl pomalý hlavně při operacích s databází MYSQL. Proto se autor rozhodl pro přestěhování na endora.cz, kde je s rychlostí databáze už spokojen.


19

4. ZHODNOCENÍ DOSAŢENÝCH VÝSLEDKŮ (TECHNICKÝCH) 4.1. Splněné cíle → vytvořenou administrátorské rozhraní pro úpravu dat → navržen systém vkládání obrázku k osobnostem → vytvořen jednoduchý skript pro vyhledání osobností → navržen skript na stránkování dlouhých seznamů osobností a novinek → navrhnuty komentáře k osobnostem

4.2. Funkčnost stránek → stránky vyzkoušeny v 5 prohlížečích Google chrome, Mozilla Firefox, Opera, Internet Explorer 8 (verze uvedeny v kapitole 2.8) → vzhled webu se v daných prohlížečích liší v celku minimálně mimo Internet Explorer (nepodporuje CSS verze 3), avšak žádný vliv na funkčnost nemá → vypnutí Javascriptu ve webovém prohlížeči nemá zásadní vliv na funkci stránek

4.3. Nesplněné cíle → webové stránky nejsou zcela validní, ale na funkčnost to nemá vliv → chybí vkládání formátování do inputů typu textarea v administraci (tagy se musí vypisovat ručně) → není možnost reagovat na jiný komentář tzn. zafixovat odpověď přímo k danému komentáři → chybové stránky pomocí souboru . htaccess → přepsání dynamické adresy na statickou (z důvodu lepšího zapamatování URL) → vzhled stránek by mohl být lepší


20

5. PŘÍRUČKA UŢIVATELE Tato kapitola pojednává o vzhledu stránek, rozmístění jednotlivých ovládacích prvků a samotné ovládání aplikace.

5.1. Prvním vstup na web Při první vstupu si můžete přečíst něco stručného o webu nebo se podívat na nějakou novinku. V případě, že hledáte nějakou konkrétní osobu tak využít vyhledávání. Kdy napíšete jméno hledané osoby a kliknete na lupu. V případě úspěšného hledání se zobrazí tato odpověď.

Obr. 5: Vyhledávání osobností


21

Po zobrazení jmen vyhledaných osobností lze kliknout na modrou ikonku s popiskem "Zobraz!" a tím dojde k zobrazení veškerých informací o osobnosti.

Obr. 6: Zobrazení osobnosti

Tuto zobrazenou osobnost si může návštěvník stránek vytisknout (odkaz ve tvaru tiskárny vpravo od jména osobnosti) nebo může osobnost dole okomentovat pomocí formuláře. V případě správnosti vyplnění dojde k zápisu komentáře na stránku. V případě vyššího počtu komentářů se komentáře stránkují.


22

Obr. 7: Vkládání komentářů k osobnostem

V případě záporného výsledku při hledání, tedy nenalezení zadané osobnosti, se zobrazí tato odpověď.

Obr. 8: Neúspěšné vyhledávání osobnosti


23

Lze také kliknout na odkaz abecední seznam osobností a dojde k zobrazení vždy 20 abecedně seřazených osobností, které lze dole stránkovat.

5.2. Přihlášení do administrace webu Pokud chcete upravovat obsah webu, musíte se přihlásit do administrace (heslo na přiloženém CD). To učiníte tak, že srolujete stránku až úplně dolů a tak kliknete na hypertextový odkaz Administrace. Po kliknutí se zobrazí stránka s formulářem pro vložení loginu (tzn. přihlašovací jméno) a hesla.

Obr. 9: Formulář pro přihlášení

Po vyplnění políček a kliknutí na tlačítko "Přihlásit" se zpracují odeslaná data a v případě neshody se zobrazí chybová hláška.

Obr. 10: Špatně vyplněný přihl. formulář


24

Pokud je vše v pořádku, bude uživatel přihlášen. Do session se uloží jeho přihlašovací data a do hlavního panelu vpravo se zobrazí informace o jeho přihlášení, které jsou zobrazeny po celou dobu přihlášení. Zároveň dojde k přesměrování na základní administrační stránku. Zde nebo u informací o přihlášení jde zvolit předmět administrace, tj. osobnosti nebo novinky.

Obr. 11: Informace o přihlášení

5.3. Ovládání administrace osobností V případě zvolení administrace osobností dojde k přesměrování na rozhraní vytvořené pro přidání, úpravu nebo mazání osobností. Nahoře najdeme panel s abecedou a znakem pro sumu. Tento panel složí k filtraci osobností. Kliknutím na některý znak abecedy se zobrazí všechny dostupné osobnosti pro tento znak včetně osobností s diakritikou sourozeneckého znaku. V případě vyššího počtu nalezených osobností lze opět stránkovat. Každý řádek přestavuje 1 osobnost. K dispozici má 3 tlačítka k úpravě, smazání a zobrazení.

Obr. 12: Filtrace podle písmen


25

5.4. Přidání osobností Na stránce, o které bylo zmíněno v předešlé podkapitole 5.3. je odkaz pro přidání osobnosti. V případě kliknutí na tento odkaz bude vyobrazen vkládací formulář. Na konci formuláře následuje rozhraní pro vkládání zajímavostí, kdy logicky "+" je přidání a "-" ubrání. Naklikáme počet zajímavostí dle potřeby (nanejvýš však pět) a pokračujeme.

Obr. 13: Přidávání a odebírání zajímavostí

Po vyplnění všech povinných polí (logicky pokud osoba nezemřela nebo nemá děti - nevyplňujeme), vybrání fotky a odeslaní je uživatel, v případě, že je vše v pořádku, přesměrován na stránku se zobrazením nově vložené osobnosti. V opačném případě dojde k vypsání chybových hlášek a opakování akce.

Obr.: 14: Formulář pro přidávání osobností (zkrácený)


26

5.5. Úprava osobností Po vyhledání osobnosti k úpravě klikneme na ikonu s tužkou a popiskem "Uprav!". Následně se zobrazí formulář obdobný pro přidávání osobností, s tím rozdílem, že je už vyplněný informacemi o vybrané osobnosti. Tyto hodnoty jdou libovolně přepisovat, případně i změnit fotografii. Pokud si není uživatel jist změnou fotografie, může si kliknutím na název fotografie zobrazit její náhled. Po změně hodnot, přidání či smazání zajímavostí odešleme formulář a dojde k jeho vyhodnocení obdobně jako v podkapitole 5.4.

Obr. 15: Náhled fotky při úpravě osobnosti

5.6. Mazání osobností V případě, že z jakéhokoli důvodu už administrátor nechce mít na stránka nějakou osobnost, může ji i se všemi jejími komentáři odstranit. Stačí si osobnost opět najít (podkapitola 5.3) a kliknout na červeno-oranžovou ikonku s popiskem "Smaž!". Následuje přesměrování na stránku, kde se vás aplikace zeptá jestli jste si jisti svým krokem a v případě klik-


27

nutí na ano je osobnost nenávratně smazána. V opačném případě tedy kliknutí na ne se dostaneme zpět na hlavní administrační stánku osobností.

Obr. 16: Mazání osobností

5.7. Ovládání administrace novinek V případě zvolení druhé možnosti administrace novinek se dostaneme na značně jednodušší stránku než v případě bodu 5.3. Máme zde tlačítko pro přidání nové novinky a výpis starých novinek v seznamu, které lze opět stránkovat. Každý řádek seznamu má tlačítka (ikony) pro úpravu, smazání a zobrazení.

Obr. 17: Hlavní nabídka pro přidávání novinek

5.8. Přidání novinek Přidání novinek se provádí tak, že na stránce z podkapitoly 5.7. klikneme na tlačítko "přidej novinku". Poté musí být vyplněn formulář, na který se provedlo přesměrování. V případě, že aplikace neprotestuje dojde k přesměrování na hlavní stránku. Jelikož se novinky řadí dle nejnovějšího data vytvoření, tak novou novinku jde vidět hned nahoře.


28

Obr. 18: Chybové hlášky při přidávání novinek

5.9. Úprava novinek Úprava novinek je obdobná jako jejich přidávání. Na stránce z podkapitoly 5.7 klikneme na ikonku papíru s tužkou a dojde k přesměrování na jíž vyplněný formulář, který upravíme a je hotovo.

Obr. 19: Úprava novinky


29

5.10. Mazání novinek Na stránce z podkapitoly 5.7 se po kliknutí na červeno-oranžovou ikonku s popiskem "Smaž!" nastane přemístění na stránku naprosto stejnou jako při mazaní osobností. Při kliknutí na ano je novinka nenávratně smazána, při kliknutí na ne stále existuje.

5.11. Mazání komentářů Klikneme na červenou-oranžovou ikonku s popiskem "Smaž!".

Obr. 20: Mazání komentáře

Následně dojde k přesměrování na stránku s již známou otázkou zda-li si uživatel přeje smazat tento komentář. Ať už se rozhodne jakkoliv, bude přesměrován zpět k osobnosti ke které patřil a nebo stále patří komentář z předchozí akce.

5.12. Odhlášení Odhlášení se nachází v již zmíněném hlavním panelu hned za loginem uživatele. Po kliknutí na odkaz "Odhlásit!" dojde k přesměrování na hlavní stránku a odhlášení z administrace. Proces nelze zvrátit kliknutím na tlačítko zpět implantované v prohlížeči. V případě zavření prohlížeče také dojde k nezvratnému odhlášení uživatele.


Obr. 21: Odhlášení z administrace

30


31

SHRNUTÍ Jelikož autor nikdy předtím nepracoval s databázovým strojem MYSQL a minimálně s PHP, musel ke zdárnému dokončení práce tyto techniky studovat. Hlavní bylo naučit se snadno orientovat v prostředí aplikace PHPMyAdmin a osvojit si spolupráci jazyků PHP a SQL. Něco se autor naučil také z Javascriptu respektive Jquery. Těžkosti nastávaly při prvotním skládání webu, kdy autor neměl moc zkušeností s tvorbou dynamického webu.

Plány do budoucna Pokud bude mít web své návštěvníky, tak by určitě stálo za to ho vylepšit. Jedná se hlavně o zefektivnění administračního systému v oblasti vkládání formátování do textareaí. Dále rozšířit množství informací a vylepšit vkládání komentářů k osobnostem a odstranění bezpečnostních děr, kterých si autor kvůli omezeným znalostem není vědom.


SEZNAM POUŢITÝCH INFORMAČNÍCH ZDROJŮ Janovský Dušan. Jak psát web, návod na html stránky [online]. Dostupné na adrese: http://www.jakpsatweb.cz Churý Lukáš. Programujte.com - IT portál o programování, grafice a webdesignu [online]. Dostupné na adrese: http://www.programujte.com. Kysilka Pavel. Linux Software [online]. Dostupné na adrese: http://www.linuxsoft.cz Grimmich Šimon. Tvorba webu.cz - stránky o webových technologiích [online]. Dostupné na adrese: http://www.tvorba-webu.cz. PHP: Hypertext Preprocessor [online]. Dostupné na adrese: http://php.net.

Wikipedia - informace k osobnostem Dostupné na adrese: http://cs.wikipedia.org

PHP 5 a MYSQL 5, průvodce webového programátora - Michael Kofler, Bernd Oggl Velký průvodce JavaScriptem - Dave Thau

32


33

SEZNAM OBRÁZKŮ Obr. 1: PSPAD........................................................................................................................8 Obr. 2: Adobe photoshop CS5................................................................................................9 Obr. 3: Layout stránek..........................................................................................................11 Obr. 4: Tabulky v databázi...................................................................................................16 Obr. 5: Vyhledávání osobností.............................................................................................20 Obr. 6: Zobrazení osobnosti.................................................................................................21 Obr. 7: Vkládání komentářů k osobnostem..........................................................................22 Obr. 8: Neúspěšné vyhledávání osobnosti............................................................................22 Obr. 9: Formulář pro přihlášení............................................................................................23 Obr. 10: Špatně vyplněný přihl. formulář............................................................................23 Obr. 11: Informace o přihlášení...........................................................................................24 Obr. 12: Filtrace podle písmen.............................................................................................24 Obr. 13: Přidávání a odebírání zajímavostí..........................................................................25 Obr. 14: Formulář pro přidávání osobností (zkrácený)........................................................25 Obr. 15: Náhled fotky při úpravě osobnosti.........................................................................26 Obr. 16: Mazání osobností...................................................................................................27 Obr. 17: Hlavní nabídka pro přidávání novinek...................................................................27 Obr. 18: Chybové hlášky při přidávání novinek...................................................................28 Obr. 19: Úprava novinky......................................................................................................28 Obr. 20: Mazání komentáře..................................................................................................29 Obr. 21: Odhlášení z administrace.......................................................................................30


34

SEZNAM KÓDŮ Kód 1: ukázka hlavního stylování........................................................................................12 Kód 2: zkrácený skript na kontrolu formuláře JS.................................................................13 Kód 3: ukázka knihovny Jquery...........................................................................................14 Kód 4.1: ukládání do databáze.............................................................................................15 Kód 4.2 ukládání do databáze..............................................................................................15 Kód 5 ukládání fotografií osobností na server.....................................................................16


SEZNAM PŘÍLOH

1) CD S ELEKTONICKOU FORMOU DOKUMENTACE

35

MATURITNÍ PRÁCE dokumentace

Recommend Documents