Webové stránky pro základní školu. Martin Sivok

České vysoké učení technické v Praze Fakulta elektrotechnická

Bakalářská práce

Webové stránky pro základní školu Martin Sivok

Vedoucí práce: Ing. Jiří Balcárek

Studijní program: Elektrotechnika a informatika strukturovaný bakalářský Obor: Výpočetní technika květen 2011

ii

Poděkování Rád bych poděkoval všem, kteří mi pomáhali při vytváření této práce. Děkuji panu Ing. Jiřímu Balcárkovi, vedoucímu práce za podporu a objektivní kritiku, Vaškovi Čechovi za konzultaci bezpečnosti a Miroslavu Tothovi za cenné rady ohledně webové grafiky.

iii

iv

Prohlášení Prohlašuji, ţe jsem svou bakalářskou práci vypracoval samostatně a pouţil jsem pouze podklady uvedené v přiloţeném seznamu. Nemám závaţný důvod proti uţití tohoto školního díla ve smyslu §60 Zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorsky zákon).

V Praze dne 23. května 2011

……………………

v

vi

Abstract This thesis deals with an implementation of web pages for the Bílá Lhota elementary school. First describes weaknesses of current school’s pages and reasons for making new and better ones. Secondly it explains technologies of an implementation of a modern school web site with a regard of a security and economical limits. Moreover describes a procedure of a webhosting choice. Finally the thesis shows what could be upgraded or extended in the future.

Abstrakt Tato práce se zabývá implementací internetových stránek pro základní školu v Bílé Lhotě. Jsou v ní popsány nedostatky stávajících stránek školy a důvody pro jejich vylepšení. Dále práce řeší technologie implementace moderních stránek základní školy s ohledem na bezpečnost a finanční omezení. Práce také popisuje výběr serveru pro umístění stránek na internetu. Nakonec práce ukazuje moţná budoucí rozšíření a vylepšení.

vii

viii

Obsah 1. Úvod ....................................................................................................................................... 1 2. Zadání .................................................................................................................................... 2 2.1. 2.2. 2.3. 2.4.

Cíle práce ............................................................................................................................................. 2 Poţadavky ............................................................................................................................................ 2 Podobné aplikace ................................................................................................................................. 3 Současný stav internetových stránek ZŠ Bílá Lhota ............................................................................ 3

3. Analýza .................................................................................................................................. 5 3.1. 3.2. 3.3. 3.4. 3.5.

Informační a redakční systém .............................................................................................................. 5 Výběr pouţitých technologií ................................................................................................................ 8 Rozbor grafického návrhu ...................................................................................................................12 Bezpečnost ..........................................................................................................................................15 Výběr webhostingu .............................................................................................................................20

4. Implementace ...................................................................................................................... 22 4.1. 4.2. 4.3. 4.4.

Grafický návrh ....................................................................................................................................22 Návrh databáze....................................................................................................................................28 Struktura zdrojového kódu stránek .....................................................................................................34 Zabezpečení ........................................................................................................................................41

5. Testování ............................................................................................................................. 44 6. Možnosti rozšíření .............................................................................................................. 45 7. Závěr .................................................................................................................................... 46 8. Použité zdroje ..................................................................................................................... 47 9. Přílohy ................................................................................................................................. 48 9.1. 9.2. 9.3. 9.4.

Obsah přiloţeného CD ........................................................................................................................48 Návod k instalaci stránek ....................................................................................................................49 Manuál k administraci stránek ............................................................................................................49 Komentář ke stránkám ........................................................................................................................49

ix

x

Seznam obrázků Obr. 1 Úvodní stránka původního internetové prezentace ZŠ Bíla Lhota ................................. 4 Obr. 2 Uţivatelské role a model uţití redakčního systému ........................................................ 7 Obr. 3 Uţivatelské role a model uţití informačního systému .................................................... 8 Obr. 4 Schéma komunikace klient – server................................................................................ 9 Obr. 5 Ukázka grafiky pouţité u webů jiných ZŠ .................................................................... 13 Obr. 6 Některé typy rozloţení internetových stránek .............................................................. 14 Obr. 7 Grafický návrh stránek č. 1 ........................................................................................... 22 Obr. 8 Grafický návrh stránek č. 2 ........................................................................................... 23 Obr. 9 Grafický návrh stránek č. 3 ........................................................................................... 23 Obr. 10 Grafický návrh stránek č. 4 ......................................................................................... 24 Obr. 11 Grafický návrh stránek č. 5 ......................................................................................... 24 Obr. 12 Grafický návrh stránek č. 6 ......................................................................................... 25 Obr. 13 Rozloţení hlavních bloků stránek ............................................................................... 26 Obr. 14 Ukázka tabulky uţivatelů v databázi z aplikace phpMyAdmin (zašifrovaný otisk hesla byl úmyslně zakryt) ......................................................................................................... 29 Obr. 15 Třídní model struktury databáze ................................................................................. 34

xi

xii

1. Úvod Tato práce byla zadána základní školou v Bílé Lhotě a veškerá analýza a implementace se tedy bude odvíjet od konkrétních poţadavků a omezení, která z toho vyplívají. Zejména se jedná o finanční omezení na provoz stránek. Poté je třeba zváţit poţadavek na jednoduchost ovládání informačního systému. A nakonec je také potřeba obsah a grafický vzhled stránek upravit pro běţné návštěvníky, kterými budou převáţně ţáci základní školy, jejich rodiče a učitelé. Vše bude vytvářeno maximálně obecně pro případné pouţití i na jiných školách a pro moţnost budoucího rozšíření o nové funkce (například školní jídelnu, systém internetové ţákovské kníţky a podobně). Přes to však nastanou situace, kdy bude potřeba rozlišit ZŠ Bílá Lhota od jiných (hlavně městských) základních škol. Z výše uvedeného tedy plyne, ţe pokud bude dále v práci jmenována „Základní škola“, bude tím myšlena obecně jakákoliv základní škola. Ostatní případy, kdy máme na mysli konkrétně Základní školu v Bílé Lhotě, budou jasně vyznačeny oslovením „Základní škola v Bílé Lhotě“. Jedná se o případy, kdy se ZŠ Bílá Lhota liší od ostatních základních škol. (Například v Bílé Lhotě jsou počty ţáků v jednotlivých ročnících nízké a tak se nerozdělují do „paralelek“ typu 8.A a 8.B, jelikoţ plně postačí označení 8. ročník.)

1

2. Zadání Cíle práce

2.1.

Cílem této práce je analyzovat poţadavky Základní školy Bílá Lhota na internetové stránky, prostudovat trendy v konkurenčních řešeních a posléze takové internetové stránky realizovat. Obsah stránek musí být jednoduše měnitelný formou redakčního systému. Součástí stránek by měl být i informační systém, který by spravoval základní informace o ţácích a také učitelích. Dále je potřeba nalézt vhodné internetové umístění, kde by byly stránky školy provozovány. Firma, která se zabývá poskytováním takové sluţby, se nazývá „webhosting“ a bude tedy i tak dále v práci označována. Nakonec je nutné vytvořit návod k instalaci stránek a také ke správě vytvořeného informačního a redakčního systému. 2.2. Požadavky Zvolený webhosting by měl být schopný najednou pojmout aţ 100 připojených návětěvníků. Tento odhad vychází z počtu ţáků, kterých je na ZŠ Bílá Lhota nyní přibliţně 150. Do budoucna není pravděpodobné, ţe by se toto číslo rapidně zvětšilo. Webhosting musí být dále schopný pojmout tisíce fotografií (řádově se tedy jedná o gigabyty dat), které byly a budou pořízeny na častých akcích ZŠ. Roční rozpočet na provoz internetových stránek a pronájem domény druhého řádu byl ZŠ Bílá Lhota zadán na 2.000 Kč a neměl by tedy tuto částku překročit. Informační i redakční systém musí být maximálně zabezpečen proti neoprávněným přístupům k datům či funkcím. Redakční systém by měl zprostředkovat následující funkce: 

Vkládání novinek a událostí



Správu fotogalerií

2



Hromadné rozesílání e-mailů



Správu uţivatelů

Administrace všech funkcí informačního i redakčního systému (např. přidávání novinek, událostí, fotek) musí být natolik jednoduchá, aby jí dle vytvořeného manuálu zvládl i méně zkušený uţivatel. 2.3. Podobné aplikace V dnešní době má jiţ většina škol (ať uţ mateřských, základních nebo středních) svou internetovou prezentaci. Lze mezi nimi nalézt draze zaplacené a profesionálně vytvořené stránky s informačním systémem, který nabízí plnou komunikaci školy s ţáky nebo rodiči a informace o jejich prospěchu, rozvrhu, docházce a podobně. Na druhé straně existuje i celá řada internetových prezentací vyrobených učiteli výpočetní techniky samotné školy, které stěţí zastanou jakýkoliv poţadavek na funkcionalitu a jen těţko přinutí návštěvníka se na takovou stránku pravidelně vracet. Takové internetové stránky bývají z pravidla i velmi sloţité nebo pracné na aktualizaci a správu. 2.4. Současný stav internetových stránek ZŠ Bílá Lhota Základní škola v Bílé Lhotě se na naší fakultu obrátila s ţádostí o vytvoření internetových stránek s informačním a redakčním systémem formou zadání bakalářské práce právě proto, ţe jejich současné stránky jsou nevyhovující z důvodů statického charakteru, který vyţaduje zásah do zdrojového kódu a odborné znalosti s internetovými aplikacemi i při sebemenším pokusu o úpravu obsahu. Navíc neobsahují ţádný redakční systém, takţe vytváření fotogalerií nebo psaní aktualit ohledně dění v základní škole zabere mnoho času, ačkoliv s pouţitím redakčního systému by tato práce trvala výrazně kratší dobu a zvládl by jí kdokoliv po krátkém zaučení. Taktéţ i grafický vzhled původních stránek ZŠ Bílá Lhota není vyhovující a je potřeba jej od základu změnit. Původní stránky ZŠ Bílá Lhota jsou k vidění zde - http://zs.bilalhota.indos.cz/

3

Obr. 1 Úvodní stránka původního internetové prezentace ZŠ Bíla Lhota

Původní stránky ZŠ Bílá Lhota (viz. Obr.1) obsahují mnoho nedostatků ať uţ grafických, strukturálních nebo obsahových. 

Postrádají úvodní přivítání návštěvníka.



Obsahují nehezké, neostré a hranaté menu.



Mají v sobě dva vnořené posuvníky na kraji, díky nimţ není jasné, která část stránek se má posunou.



Neefektivně vyuţívají prostor obrazovky



Obrázek školy je zmenšen pouze prohlíţečem, takţe jeho staţení můţe trvat zbytečně dlouho.

4

3. Analýza 3.1.

Informační a redakční systém

Informační systém zajišťuje strukturální správu školy – informace o učitelích, ţácích, jejich zařazení do tříd, prospěch, docházku a podobně. Redakční systém zajišťuje zobrazení nebo vkládání novinek, událostí nebo fotogalerií na internetové stránky. Oba tyto systému mohou být realizovány odlišně a vzájemně nezávisle. Je ale výhodné mít tyto dva systémy provázané. Pro uţivatele oprávněné ke správě obou systémů je určitě příjemnější, kdyţ mohou klidně pouţít stejné jméno i heslo pro správu obou systémů a také kdyţ správa obou systémů bude probíhat v jedné aplikaci, respektive na jedné internetové stránce. Provázané systémy mohou také sdílet i jiná data, neţ jen přihlašovací údaje, například by mohl redakční systém informovat o nadcházející události a přitom by informační systém evidoval studenty/učitele, kteří se chystají této události účastnit. Nejdříve ze všeho je potřeba si určit, jak budou uţivatelé rozděleni do skupin podle přístupových práv k oběma systémům (tyto skupiny se obecně nazývají uţivatelské role). Chceme, aby si obyčejný návštěvník mohl zobrazit obsah stránek, ale přitom neměl moţnost z obsahu něco smazat nebo přidat nevhodný obsah. Naopak ale chceme mít skupinu povolaných uţivatelů, kteří budou mít moţnost podílet se na úpravě obsahu stránek. Oprávnění k dané uţivatelské roli získá návštěvník stránek po úspěšném přihlášení, ke kterému pouţije svoje uţivatelské jméno a heslo. Konkrétní řešení a implementace budou popsány dále v kapitolách 3.2 - Výběr pouţitých technologi, 4 - Implementace a 4.2 - Návrh databáze. 3.1.1. Uživatelské role Uţivatelské

role

rozdělují

návštěvníky

stránek

úspěšného/neúspěšného přihlášení do systému.

5

do

skupin

na

základě

jejich



Nepřihlášený uživatel - Návštěvník Návštěvníkem je kaţdý, kdo se v rámci systému o přihlášení nepokusí nebo pokusí avšak neúspěšně. Takový uţivatel má z hlediska stránek nejniţší práva a je mu umoţněno pouze zobrazit obsah stránek bez citlivých osobních dat, jako jsou rodné číslo nebo emailová adresa ţáků. Z hlediska informačního i redakčního systému nemá takový uţivatel ţádná práva (samozřejmě kromě moţnosti přihlásit se a zobrazit necitlivá data o ţácích – jméno, příjmení, třídu, atd.).



Přihlášený uživatel – Učitel Pokud se návštěvník stránek úspěšně přihlásí do systému, jsou mu udělena práva umoţňující správu novinek, událostí a fotek v rámci redakčního systému. Dále mu je umoţněno vytvářen a odstraňovat záznamy o ţácích a ţáky v rámci informačního systému přesouvat mezi třídami. V rámci stránek má takový uţivatel přístup i k citlivým datům o ţácích.



Přihlášený uživatel – Správce Správce je uţivatel s nejvyššími právy. Disponuje všemi právy jako role Učitel, k nim navíc ještě disponuje moţností správy učitelů, tříd a rozdělování práv. Správcovskými právy by měla disponovat jen malá skupina lidí, jelikoţ v případě prolomení hesla a následném neoprávněném přihlášení by mohl útočník poškodit veškerá data uloţená v systému. Navíc se předpokládá, ţe změny práv nebo třídních učitelů budou jen zřídka a tak tedy bude správce vyuţívat svých práv jen párkrát do roka.

Tyto tři uţivatelské role plně vystačí pro pokrytí poţadavků ZŠ Bílá Lhota. Obecně by mohlo být rolí více, např. role Kuchař s právy na úpravu jídelníčku, role Zakázaný uživatel bez práv a moţnosti zobrazit i základní obsah stránek a podobně. Informační i redakční systém jsou samozřejmě navrţeny tak, aby umoţňovaly rozšíření o další uţivatelské role v případě potřeby. 3.1.2. Model užití redakčního systému Model uţití slouţí pro ukázku struktury redakčního systému, vztahů mezi uţivatelskými rolemi a také funkce, které přísluší jednotlivým uţivatelským rolím.

6

Obr. 2 Uţivatelské role a model uţití redakčního systému

Z hlediska redakčního systému nemá role Správce ţádné další práva oproti Učiteli. V modelu jsou

zakresleny nejzákladnější

funkce

redakčního

systému,

které

by měly být

naimplementovány. Dále během vypracování stránek můţeš dojít k přidáním dalších funkcionalit do redakčního systému, které nejsou v modelu zakresleny. Naopak k odebrání a tedy neimplementování některé funkce z modelu by dojít nemělo. 3.1.3. Model užití informačního systému Model uţití informačního systému je obdobný jako model uţití redakčního systému.

7

Obr. 3 Uţivatelské role a model uţití informačního systému

Na modelu je vidět, ţe nepřihlášený uţivatel nemá z hlediska informačního systému ţádná práva, coţ je také správně. Stejně jako u modelu redakčního systému můţe dojít k následnému přidání některých dalších funkcí systému, které nejsou v modelu zatím obsaţeny. 3.2. Výběr použitých technologií Běh internetových stránek se skládá ze dvou částí – klientské a serverové. Klientská se stará o odesílání poţadavků uţivatele a následné zobrazení výsledků do okna prohlíţeče. Serverová zpracovává uţivatelovi poţadavky a stará se o práci s daty. Obvyklá komunikace probíhá tak, ţe uţivatel prostřednictvím internetového prohlíţeče pošle dotaz s parametry na zobrazení nebo úpravu obsahu stránek. Na serveru je spuštěn skript, který zaštiťuje obsluhu dotazu a který si v případě potřeby komunikuje s databází pro získání nějakých dat. Výstupem skriptu je vygenerovaná HTML stránka, která je zpětně odeslána na počítač uţivatele a zobrazena v jeho internetovém prohlíţeči. Průběh komunikace je nastínen na Obr. 4 Schéma komunikace klient – server.

8

K vytvoření stránek je tedy potřeba na těchto vrstvách (klientské a serverové) zvolit technologie, které se postarají o běh stránek. Hlavním cílem této práce je vytvořit výše zmíněný skript a databázi.

Obr. 4 Schéma komunikace klient – server

3.2.1. Skriptovací jazyk na straně serveru Skript spuštěný na straně serveru generuje podle uţivatelových dotazů obsah internetových stránek nebo provádí úpravy v informačním či redakčním systému. K vytvořenému obsahu můţe připojit i skript, který bude v internetovém prohlíţeči uţivatele obsluhovat dotazy, které nevyţadují zpracování serverem nebo přístup do databáze (viz. 3.2.2 - Programovací jazyk na straně klienta). Pro vytvoření dynamických HTML stránek se v dnešní době dá pouţít několik moţných technologií. Mezi nejznámější a nejpouţívanější patří: 9



PHP – Hypertext Preprocessor (dříve překládáno jako Professional Home Pages)



ASP – Active Server Pages



JSP – Java Server Pages

Já jsem si pro svou práci zvolil jazyk PHP, jelikoţ je k němu napsáno nejvíce návodů a učebnic a je plně freeware. Dále nabízí jednoduchou instalaci i propojení s databází a v neposlední řadě s ním mám jiţ zkušenosti z minulosti. Důleţité je také zmínit, ţe počet poskytovatelů prostoru pro realizaci internetových stránek, kteří podporují PHP, je několikanásobně vyšší neţ počet poskytovatelů ASP nebo JSP. Stejně tak cena provozu PHP serveru je niţší neţ u ASP nebo JSP. 3.2.2. Programovací jazyk na straně klienta Skript běţící na straně klienta pracuje pouze s daty, která jsou mu předány od skriptu na straně serveru nebo která získal od uţivatele, například z vyplněného formuláře. To je dosti omezující, protoţe skripty na straně prohlíţeče nemají přístup k procházení sloţek na serveru a nemůţou přímo přistupovat do databáze, nicméně vykonávání skriptu na straně klienta zatěţuje počítač klienta a ne server. Role skriptu na straně klienta tedy obvykle spočívá v rychlé interakci zobrazené stránky s klientem bez nutnosti znovu načítat stránku ze serveru, například kontrola dat formuláře před odesláním. Volba skriptovacího jazyka je o poznání jednodušší, jelikoţ se v tomto směru pouţívá výhradně Javascript a tak nebyl důvod zvaţovat jiné varianty. VBScript nebo ActionScript se pouţívají pro specifické aplikace (ASP.net nebo Flash). 3.2.3. Volba databáze Databáze slouţí k uloţení dat, se kterými pracuje informační a redakční systém. Fyzicky je databáze uloţena v souboru (resp. souborech) na serveru a přistupuje se k ní pomocí dotazů. Jelikoţ byl pro psaní skriptů na straně serveru vybrán jazyk PHP (viz. 3.2.1 - Skriptovací jazyk na straně serveru), bude nutné vybrat takovou databázi, se kterou je jazyk PHP schopen komunikovat. Nejznámější a nejpouţívanější takové databáze jsou MySQL, Oracle a PostgreSQL.

10



Oracle Oracle nabízí na trhu nejpropracovanější nástroj pro správu dat. Umoţňuje zálohování, rychlou práci s velkými objemy dat, uţivatelem definované datové typy, podporu transakcí a zámků. Z těchto důvodů je také vyuţívána středními a velkými firmami, servery nebo bankami (např. Komerční banka). Nevýhodou Oracle databáze je, ţe vyţaduje sloţitou instalaci a nastavení pro správnou funkčnost.

Významným

negativem je, ţe není podporována všemi webhostingovými společnostmi. To je způsobeno tím, ţe není bezplatně k dispozici a musí se za její uţívání platit. To jí také vzhledem k omezenému rozpočtu činí pro účely ZŠ Bílá Lhota nevhodnou. 

MySQL MySQL je na rozdíl od Oracle vydáván pod bezplatnou licencí GPL (General Public Licence). Od počátku byla databáze MySQL tvořená zejména s ohledem na rychlost a jednoduchost bez podpory pohledů, triggerů nebo uloţených procedur (ty byly implementovány aţ od verze 5.0). K MySQL existuje mnoho návodů, učebnic i online diskusních fór. Ke správě MySQL se pouţívá aplikace phpMyAdmin, která je taktéţ k dispozici bezplatně. MySQL i phpMyAdmin jsou nabízeny všemi většími českými webhostingovými společnostmi. MySQL je nyní vlastněna firmou Oracle, která zajišťuje její profesionální vývoj.



PostgreSQL Je svým charakterem a pouţitím velmi podobná MySQL. Nabízí se v bezplatné licenci, ale není zdaleka tolik rozšířená. Pro správu PostgreSQL (někdy téţ zvaná Postgres) se obvykle vyuţívá internetová rozhraní phpPgAdmin, které vzešlo z rozhraní phpMyAdmin vyuţívané databázi MySQL, coţ ještě více poukazuje na podobnost obou databází. PostrgeSQL je v modifikované formě vyuţívána několika velkými firmami. Mezi nejznámější patří MySpace, Yahoo! nebo Skype. V nynější době je vyvíjena globální skupinou vývojářů a firem.

Pro stránky ZŠ Bílá Lhota jsem zvolil MySQL. Nabízí určitě dostatečný výkon, je zdarma a také s ní mám jiţ z minula dobré zkušenosti.

11

3.3. Rozbor grafického návrhu Nedílnou součástí všech internetových stránek je kvalitní grafické zpracování. Stránky musí uţivatele graficky upoutat a zároveň musí být přehledné, aby se v nich mohl rychle orientovat. Nesmí být zbytečně velké, aby uţivatel při čekání na staţení obsahu neztratil trpělivost a stránky neopustil ještě dříve, neţ se mu stihne zobrazit poţadovaný obsah. 3.3.1. Trendy v návrhu školních webů Při studiu současných internetových stránek základních škol jsem narazil na několik charakteristik a trendů, které měly tyto stránky společné. Předně takřka všechny zakomponovaly do rozloţení logo školy, fotku vstupu do školy nebo fotky dětí během akcí (Např. Základní škola Chodov - http://www.zskv.cz, Základní škola Hostivař http://www.zshostivar.cz nebo Základní škola Řevnice -http://www.zsrevnice.cz). K tomu se často vyskytuje nějaký kreslený a velmi barevný motiv, který je vzhledem k věku návštěvníků pochopitelný. Stejně tak úvodní stránka obsahovala pozdrav a aktuality z dění na základní škole. Obdobně jako kreslený motiv i barvy celkového rozloţení jsou obvykle velmi pestré, teplé a výrazné. Všechny tyto trendy jsem se pokusil zpracovat do své práce. Bohuţel ZŠ Bílá Lhota ţádné logo, ze kterého bych mohl vycházet při výběru barev, motivů nebo zaoblení stránek, nemá, resp. mi nebylo dodáno a tak jsem jej nemohl pouţít.

12

Obr. 5 Ukázka grafiky pouţité u webů jiných ZŠ

3.3.2. Kaskádové Styly Kaţdý element HTML stránky obsahuje několik vlastností, jejichţ nastavením lze docílit různorodého zobrazení kaţdého z nich. Jedná se především o rozměry, umístění, barvu, odsazení, okraje apod. V dřívějších dobách se tyto vlastnosti nastavovaly přímo při deklarování kaţdého elementu. To ovšem vedlo k těţkopádné správě vzhledu elementů, protoţe pokud bychom například chtěli změnit vzhled všech odkazů, museli bychom změnit deklaraci u kaţdého jednotlivého odkazu, coţ je zdlouhavé. Navíc je velmi pravděpodobné, ţe bychom jeden nebo více odkazů opomenuli a ty by se poté zobrazovaly nesprávně. Proto došlo k vytvoření kaskádových stylů - CSS (Cascading Style Sheets), coţ je prostředek ke globálnímu nastavení vzhledu všech elementů HTML (nadpisů, odkazů, odstavců a podobně). CSS umoţňuje také vytvoření skupin HTML elementů, které lze poté spravovat jednotně. Kaskádové stylu dále rozšiřují HTML elementy o mnoho dalších vlastností (průhlednost, odlišný styl dle interakce s uţivatelem a podobně). CSS se obvykle importuje z externího souboru s příponou css, coţ umoţňuje přizpůsobit vzhled stránek podle přání a potřeb uţivatele a také umoţňuje vyřešit velký problém

13

s optimalizací stránek pro internetové prohlíţeče, které v současnosti nemají sjednocené standardy, coţ vede k tomu, ţe stejný obsah zobrazují různými způsoby. Pomocí CSS lze tedy pro kaţdý prohlíţeč zvolit odlišný css soubor a docílit tak správného zobrazení. CSS lze také deklarovat přímo ke kaţdému elementu nebo do hlavičky HTML stránky, avšak takový přístup postrádá výhody popsané výše. 3.3.3. Rozložení stránek Rozloţení elementů na internetových stránkách je velmi důleţité pro přehlednost a snadnou orientaci. Při analýze internetových stránek jiných škol jsem často narazil na špatně zvolené rozloţení, ve kterém se uţivatel na první pohled ztratil (viz. www.zshostivar.cz). Jiná varianta rozloţení vyuţívala pouze půlku obrazovky a zbytek obrazovky byl naprosto prázdný a nevyuţitý. To jsou chyby ve zvoleném rozloţení, kterým je určitě nezbytné se vyhnout. Ze současných školních webů se nejvíce osvědčilo rozloţení s jedním postraním panelem vlevo a jedním vpravo, nicméně konečná volba velmi závisí na konkrétním grafickém návrhu, který je popsán v kapitole 4.1 - Grafický návrh.

Obr. 6 Některé typy rozloţení internetových stránek

14

3.4. Bezpečnost Jelikoţ budou internetové stránky ZŠ Bílá Lhota volně přístupné, musí být zabezpečeny proti případnému útoku uţivatelů, kteří by chtěli narušit jejich plynulé fungování. To znamená zabránit neoprávněné osobě v přístupu k datům nebo funkcím (ať uţ informačního nebo redakčního systému), které vyţadují přihlášení. Obecně existuje několik druhů útoků, které se od základu liší, ale všechny mají společný cíl, tedy získat přihlašovací jméno a heslo uţivatele s vyšším oprávněním k práci s informačním a redakčním systémem. 3.4.1. Útok na nechráněného uživatele Prvním druhem útoku je pokus o nainstalování škodlivého programu na počítač uţivatele Takový program by mohl detekovat všechny stisknuté klávesy uţivatele a tuto informaci odesílat útočníkovi. Ten by poté vzal tyto údaje, pouţil je k přihlášení a mohl by na stránkách a v systémech vystupovat jako poškozený uţivatel bez jeho vědomí a vyuţít všech jeho práv k úpravě stránek a systémů. Obrana proti takovému druhu útoku je z hlediska informačního a redakčního systému prakticky nulová. Vše je závislé na uţivateli, který musí mít svůj počítač ochráněn aktualizovaným antivirovým programem a firewallem (program pro filtraci odchozí a příchozí komunikace). 3.4.2. Útok přes sdílené připojení k internetu Tento typ útoku vyuţívá moţnosti přístupu útočníka k počítači uţivatele s právy k redakčnímu nebo informačnímu systému. Uţivatel by se mohl do nějakého ze systémů přihlásit, pracovat v něm, poté se neodhlásit a odejít (nebývá výjimkou, ţe uţivatelé po skončení práce pouze uzavřou okno prohlíţeče a opustí pracoviště). Útočník by pouze pouţil počítač a mohl dále pracovat jako přihlášený uţivatel. Tomu lze zabránit několika způsoby. Prvně by mělo dojít k automatickému odhlášení uţivatele i při uzavření okna prohlíţeče bez jeho manuálního odhlášení. Poté je vhodné, aby byl uţivatel automaticky odhlášen po delší neaktivitě.

Bylo by také vhodné neukládat

přihlašovací údaje uţivatele v počítači, ke kterému má přístup více osob.

15

Automatické odhlášení lze jednoduše implementovat, ale ukládání přihlašovacích údajů nelze obecně zaručit. Nakonec záleţí především na svědomí uţivatele, jak bude bránit svoje soukromí. 3.4.3. Útok na slabé heslo Mnoho uţivatelů si jako své heslo volí snadno zapamatovatelnou kombinaci znaků, která z nich činí snadný cíl pro útočníka. Takovými hesly bývají „1234“, „123456“, „qwertz“, „asdfgh“, „abcd“, „heslo“ a podobně. Útočník můţe z praxe znát stovky takových často pouţívaných hesel a ty poté pouţít k útoku na uţivatelská konta. Obdobně uţivatelé často pouţívají jako své heslo existující slova, křestní jména, názvy měst, ulic, názvy předmětů běţného ţivota a podobně. Z těchto dvou příčin je vhodné vyţadovat po uţivatelích pouţití silnějšího hesla. V praxi se obvykle vyţaduje heslo s minimálním počtem šest nebo osm znaků, které zároveň musí obsahovat znaky abecedy v kombinaci s alespoň jedním speciálním znakem (např. číslovkou, vykřičníkem a podobně). Takové silné heslo bude vyţadováno i po uţivatelích stránek ZŠ bílá Lhota. 3.4.4. Útok hrubou silou Ačkoliv je moţných kombinací hesel mnoho (např. u hesla se šesti znaky, sloţeného pouze z malých písmen anglické abecedy lze variací s opakováním lehce spočítat, ţe počet moţných hesel je 266 = 308 915 776), tak jich je vţdy konečně mnoho. Útočník se tak můţe pokusit vyzkoušet všechny moţné kombinace hesla (dle našeho příkladu se šesti malými znaky anglické abecedy by zkoušel kombinace „aaaaaa“, „aaaaab“, „aaaaac“, … , „zzzzzz“), dokud nakonec neuspěje. V tomto snaţení je v podstatě nemoţné zabránit, nicméně lze mu vhodnou volbou hesla a poţadavků na něj (viz. kapitola 3.4.3 - Útok na slabé heslo) zkomplikovat pokus o útok natolik, ţe vyzkoušení všech kombinací hesel zabere třeba i stovky let. První variantou obrany je zvýšení nároků na heslo. Pokud bychom po uţivatelích vyţadovali v heslu jak malé, tak velké znaky v kombinaci s číslovkami, tak se počet kombinací zvýší více neţ stokrát na (26∙2+10)6 = 56 800 235 584. Tím by se i doba potřebná na jisté prolomení hesla prodlouţila více neţ stokrát. Navíc při pouţití i dalších speciálních znaků a písmen české abecedy by se původní počet kombinací zvýšil i více neţ tisíckrát. 16

Tato obrana by sama o sobě nebyla natolik silná, pokud bychom dovolili útočníkovi pokusit se o přihlášení v libovolné míře. Proto se jako další varianta obrany pouţívá blokování pokusů v případě nadměrného počtu pokusů o přihlášení (ať uţ z jedné IP adresy nebo na jedno uţivatelské jméno). Pokud zkombinujeme obě tyto varianty a povolíme např. jeden pokus o přihlášení za vteřinu a budeme vyţadovat heslo o osmi znacích s malými a velkými písmeny anglické abecedy v kombinaci s číslovkami, tak by jistý útok hrubou silou trval přibliţně:

A takový útok můţeme prohlásit za neškodný (za předpokladu ţe se nám doopravdy povede omezit počet pokusů o přihlášení na jeden za vteřinu). Po uţivatelích ZŠ Bílá Lhota bude poţadováno heslo o minimálně osmi znacích. V heslu bude muset být obsaţen jeden velký a jeden malý znak anglické abecedy a také alespoň jedna číslice. Pouţití znaků specifických pro českou abecedu (á, č, ď, é, í, ň, …) bude volitelné. 3.4.5. Útok vsunutím kódu do dotazu Velice jednoduchým a přitom velmi účinným způsobem útoku je takzvaný SQL Injection (Structured Query Language je strukturovaný dotazovací jazyk pro přístup do databáze). Při standardním pokusu o přihlášení se projde po řádcích celá tabulka, která ukládá data o uţivatelích, a na kaţdém řádku se vyhodnotí výrok se dvěma podmínkami – jestli je zadané přihlašovací jméno shodné se jménem uloţeným na řádce tabulky a zároveň jestli je zadané heslo shodné s heslem uloţeným na stejné řádce tabulky. Takový příkaz můţe vypadat následovně: SELECT * FROM users WHERE jmeno=‘franta‘ AND heslo=‘1234‘;

Kde users je název tabulky, která obsahuje údaje o uţivatelích, jmeno a heslo jsou názvy sloupců tabulky, ‚franta‘ a ‚1234‘ jsou parametry zadané při pokusu o přihlášení a symbol * značí, aby se v případě nalezení řádku vrátily všechny jeho parametry. Pokud by ovšem útočník zadal jako heslo: neco‘ OR ‘a‘=‘a

17

výsledný dotaz by vypadal: SELECT * FROM users WHERE jmeno=‘franta‘ AND heslo=‘neco‘ OR ‘a‘=‘a‘;

To je ovšem dotaz s odlišnou strukturou neţ původně. Namísto původní jedné logické spojky a dvou podmínek se zde vyskytují dvě logické spojky a tři podmínky. Navíc je třetí podmínkou tautologie (vţdy pravdivý výrok), která ve spojení s logickou spojkou OR (nebo) vţdy vrátí znovu tautologii bez ohledu na druhý vstup spojky OR. To vše má za následek, ţe se útočník můţe přihlásit jako uţivatel „franta“, aniţ by znal jeho heslo. To je samozřejmě nepřípustné. SQL Injection se dá pouţít v různých modifikacích, které dovolují útočníkovi libovolnou manipulaci s databází od naplnění náhodnými hodnotami aţ po její úplné smazání. Proto je velmi důleţité systém proti tomuto druhu útoku zabezpečit. Systém můţe zakázat v parametru dotazu znaky jako apostrof, mezera, rovná se a tak útočníkovi útok prakticky znemoţnit. Elegantnější je ovšem pouţít objektový přístup do databáze PDO (PHP Data Object). Takový přístup nejdříve dotaz předpřipraví a parametry do něj naplní aţ při odeslání dotazu, coţ umoţní vytvoření struktury dotazu a zamezí narušení útočníkovým škodlivým dotazem. Jelikoţ je PDO přístup jednoduší na implementaci a jeho obrana proti SQL Injection je plně garantovaná, tak jsem ho i já zvolil pro svůj systém. 3.4.6. Hashovací funkce Hashovací funkce je algoritmus, který z libovolné posloupnosti znaků (omezené délkou dle pouţitého algoritmu, obvykle 264 – 1 znaků) nebo čísel vytvoří takzvaný otisk jednotné délky. Mohli bychom si představit jednoduchou hashovací funkci, která vstupní písmena převede na čísla podle jejich pořadí v abecedě, ty poté sečte a výsledný součet bude otiskem vstupního řetězce dané funkce. Současné hashovací funkce jsou samozřejmě sloţitější a jejich otisky jsou dlouhé v řádech stovek aţ tisíců bitů. Význam hashovacích funkcí spočívá v moţnosti ověřit správnost zadaného hesla pouze pomocí otisků. V databázi tak nemusí být uloţená hesla uţivatelů, ale pouze jejich otisky. Při pokusu o přihlášení se zadanému heslu spočítá jeho otisk a ten se poté porovnává s otisky v databázi.

18

To v sobě skrývá jisté nebezpečí toho, ţe by dvě hesla mohla mít stejný otisk. Jelikoţ je ale otisk standardně alespoň 128bitů dlouhý, tak je tato moţnost prakticky zanedbatelná (pravděpodobnost, ţe by tomu tak nebylo je 1 ku 2128 u nejslabší dnes pouţívané hashovací funkce MD5). Výhoda takového přístupu je právě v tom, ţe pokud by se někomu podařilo proniknout do systému, tak se nedozví původní hesla, ale pouze jejich hashové otisky, které na rozdíl od původních hesel nejsou v jiných aplikacích nebo systémech pouţitelné, protoţe hashový otisk hesla se samozřejmě zakóduje na jiný otisk a útočník tak neuspěje při pokusu o přihlášení. Často se také vyuţívá více hashovacích algoritmů najednou, například ţe se přihlašovací jméno i heslo samostatně zakódují jedním algoritmem a výsledek se pak spojí do jednoho řetězce a zakóduje druhým algoritmem. Přihlašování pak trvá o chvíli déle, nicméně se tím omezí moţnost, ţe by dva uţivatelé měli stejné heslo a tedy i stejný otisk v databázi, jelikoţ přihlašovací jméno je z logiky primárních klíčů (viz. 4.2- Návrh databáze) vţdy unikátní. U jiných, hlavně pak bezpečnostních nebo bankovních, systémů by implementace tohoto systému měla význam, ale stránky ZŠ Bílá Lhota budou mít okolo 15 uţivatelů (přibliţně tolik se nyní na škole nachází učitelů) s moţností přihlášení se a tedy moţnost, ţe by dva lidé měli stejné heslo, je mizivá. 3.4.7. HTTPS Komunikace mezi uţivatelem a serverem je zakódovaná, aby nemohl kdokoliv, kdo je připojen na lince mezi nimi, naslouchat jejich komunikaci a získat tak citlivé informace, popřípadě se vydávat za jednoho z nich. Při pouţití základního komunikačního protokolu HTTP (HyperText Transfer Protocol) se komunikace kóduje 40bity, coţ je v dnešní době nedostatečné, jelikoţ by mohlo dojít k rozluštění komunikace útočníkem. Z tohoto důvodu byl zaveden protokol HTTPS (HyperText Transfer Protocol Secure), který komunikaci kóduje minimálně 128bity a tak zajišťuje vyšší bezpečnost. Protokol HTTPS vyţaduje na serveru instalaci certifikátu, který je ověřen certifikační autoritou. Tyto autority poţadují za jeden certifikát poplatky pohybující se v hodnotách tisíců aţ statisíců korun, coţ je ale pro nás nevyhovující z důvodu omezeného rozpočtu (viz. 2.2 Poţadavky). Existují však webhostingové společnosti, které mají tento poplatek zaplacený a nabízejí svůj certifikát k pouţití i pro své zákazníky. Je tedy vhodné zvolit webhotingovou 19

společnost, která umoţňuje bezplatné pouţití zabezpečené komunikace pomocí HTTPS protokolu. 3.5. Výběr webhostingu Na českém trhu se vyskytuje mnoho webhostingových společností nabízejících řadu různých balíčků hostování vhodných pro všechny zákazníky, od malých osobních stránek aţ po velké portály s tisíci návštěvníky. Mezi nimi jsem vybral několik, jenţ splňují nezbytné poţadavky na webhosting (podpora PHP 5, MySQL 4.1, náklady niţší neţ 2.000Kč/rok). A na základě dalších důleţitých parametrů (cena, prostor, podpora https, reference ostatních uţivatelů) zvolil ty nejvýhodnější. 

neomezeny-webhosting.cz prostor: Neomezený cena: 129,- / měsíc (registrace domény .cz zdarma) https: Ne reference: Ţádné. Firma uvádí přibliţně 1000 klientů, nicméně nenabízí volně přístupné fórum pro ukázku odezvy na problémy klientů



wedos.cz prostor: cena: https: reference:





forpsi.cz prostor: cena: https: reference:

pipni.cz prostor: cena: https: reference:

Neomezený 30,- / měsíc Ne Ţádné. Firma se prezentuje jako největší svého druhu v České republice, ačkoliv na servisním fóru má pouze několik desítek příspěvků a neposkytuje informace o ţádných konkrétních zákaznících.

5GB 120,- / měsíc Ano, cena 240,- / měsíc Velké. Firma je jedním z největších poskytovatelů webhostingu s více neţ 100 000 zákazníky. Sám s ní mám dobré zkušenosti.

5GB Zdarma Ano, zdarma Velké. Firma uvádí konkrétní dvě desítky stránek středně velkých firem, které vyuţívají jejich webhosting. Dále firma poskytuje volně přístupné fórum s deseti tisíci příspěvky od uţivatelů i podpory.

20

Z výše popsaných webhostingů jsem pro stránky ZŠ Bílá Lhota vybral pipni.cz, protoţe jsou zdarma a to i včetně https přístupu (viz. 3.4.7 - HTTPS). Nenabízí sice neomezený prostor pro data, ale 5GB by mělo být pro potřeby ZŠ Bílá Lhota dostačující.

21

4. Implementace 4.1. Grafický návrh 4.1.1. Prvotní koncept Podle analýzy popsané v kapitole 3.3 - Rozbor grafického návrhu bylo vytvořeno několik grafických návrhů, které měly být předloţeny zástupci ze ZŠ Bílá Lhota k výběru a komentáři. Ten bohuţel neodpovídal na mojí komunikaci, proto jsem volbu provedl sám s doporučením několika dalších studentů ČVUT – FEL.

Obr. 7 Grafický návrh stránek č. 1

Návrh č. 1 je nevyhovující kvůli graficky zpracovanému menu. Pokud by ZŠ Bílá Lhota chtěla do menu přidat jednu poloţku, tak by bylo sloţité menu takto upravit. Navíc se zde nenachází ani dosti prostoru pro přidání další poloţky.

22


Návrh č. 2 je nevyhovující kvůli chybějícímu bočnímu bloku, ať uţ pro přihlášení nebo zobrazení uţitečných informací (novinky, nadcházející události, a podobně). Stejně tak text v odstavci vypadá stroze a nevýrazně.


Návrh č. 3 neobsahuje ţádné významné nedostatky. Zelená barva byla zvolená s ohledem na umístění Bílé Lhoty ve venkovské přírodě.

23


Návrh č. 4 je nevyhovující kvůli velkému logo navrchu stránek, které zabírá zbytečně moc prostoru, který mohl být vyuţit uţitečnějšími informacemi.


Návrh č. 5 má nedostatky stejné jako č. 4 a č. 1. Jednak má graficky řešené menu a poté také velké logo, které zabírá zbytečně moc prostoru.

24


Návrh č. 6 je velmi podobný návrhu č. 3. Oba dva by se daly pro stránky pouţít. Nakonec byl vybrán pro stránky návrh č. 3. 4.1.2. Převod do HTML a CSS s použitím Javascriptu Celé rozloţení stránek je sloţeno z pěti hlavních bloků – loga navrchu, levého a pravého bočního bloku s menu a odkazy, střednímu hlavnímu bloku s obsahem a patičky na konci stránek. Logo je umístěno na absolutní pozici, jelikoţ se vţdy zobrazí na stejné místo. #logo{ position:absolute; top:0px; left: 50%; margin-left:-511px; }

Zbylé tři bloky a patička jsou všechny zaobaleny do jednoho nadřazeného bloku, aby se umístění patičky dynamicky měnilo podle výšky těchto tří bloků, jelikoţ jejich obsah a tedy i výška se mění s různým zobrazeným obsahem. Navíc je tomuto nadřazenému bloku nastaveno pozadí, které napojuje na logo a patičku. Rozloţení hlavních bloků stránek je znázorněno na Obr. 13 Rozloţení hlavních bloků stránek. 25

Obr. 13 Rozloţení hlavních bloků stránek

Zvláštní částí grafického vzhledu stránek je blok pro procházení galerie, který je zprvu skrytý a zobrazí se aţ po kliknutí na nějakou fotku v galerii. Blok obsahuje zobrazovanou fotku, obrázky s odkazy na předešlou a nadcházející fotografii v galerii, obrázek s odkazem na uzavření prohlíţení galerie a obrázek s odkazem na zobrazení aktuální fotografie v plné velikosti.

26

Celá galerie se generuje souborem galerie.php tak, ţe miniatury (resp. náhledy) fotografií dostávají identifikační jméno popořadě thumb1, thumb2, thumb3 a tak dále. Miniatury mají stejný název jako fotografie v plné kvalitě, pouze jsou umístěny ve sloţce /thumb. Při kliknutí na miniaturu se zavolá javascript funkce ShowImage(), která zobrazí reţim galerie (blok ‚pozadiobrazku‘) s odkazem na fotografii v plné kvalitě (parametr src) a pořadovým číslem miniatury podle identifikačního jména (1 pro thumb1, 2 pro thumb2, a tak dále). Společně s tím se zobrazí blok, který ukazuje pořadové číslo aktuální fotky a také celkový počet fotek v albu. function ShowImage(src,id) { current_image = id; document.getElementById('pozadiobrazku').style.display ='block'; document.getElementById('velky').src=src; document.getElementById('velkyodkaz').href=src; document.getElementById('image_counter').innerHTML='Fotka '+id+' / '+pocetfotek; }

Informace o celkovém počtu fotek alba je javascriptu předána od skriptu galerie.php po vygenerování všech miniatur fotek prostřednictvím proměnných $thumb_counter, která slouţí k počítání generovaných oken a proměnné pocetfotek, která je pouţita ve funkci ShowImage(), NextImage() a PreviousImage(). echo "<script type=\"text/javascript\"> var pocetfotek =".($thumb_counter-1).";

27

";

Při kliknutí na obrázek Následující / Předchozí se zavolá javascript funkce NextImage() / PreviousImage(), která zvýší / sníţí identifikační číslo zobrazované fotky, podle něj vybere miniaturu s identifikačním jménem ‚thumb+identifikační číslo‘, načte z něj odkaz na miniaturu, vyjme sloţku (řetězec ‚/thumb‘) a tím získá odkaz na fotku, která se má zobrazit. function NextImage() { if(current_image < pocetfotek) { current_image = current_image + 1; next='thumb'+current_image; src=document.getElementById(next).src; index=src.indexOf("thumb/"); src=src.substr(0,index)+src.substr(index+6); document.getElementById('velky').src=src; document.getElementById('velkyodkaz').href=src; } document.getElementById('image_counter').innerHTML='Fotka '+current_image+' / '+pocetfotek; } function PreviousImage() { current_image = current_image - 1; if(current_image != 0) { previous='thumb'+current_image; src=document.getElementById(previous).src; index=src.indexOf("thumb/"); src=src.substr(0,index)+src.substr(index+6); document.getElementById('velky').src=src; document.getElementById('velkyodkaz').href=src; } else { current_image = 1; } document.getElementById('image_counter').innerHTML='Fotka '+current_image+' / '+pocetfotek; }

4.2. Návrh databáze Data se v databázi ukládají pomocí tabulek, kde kaţdý řádek zastupuje jeden vloţený záznam (např. jednoho uţivatele, jednu přidanou novinku) a kaţdý sloupek představuje vlastnost vloţeného tohoto záznamu (jméno a příjmení uţivatele, jeho heslo, přihlašovací jméno apod.)

28

Obr. 14 Ukázka tabulky uţivatelů v databázi z aplikace phpMyAdmin (zašifrovaný otisk hesla byl úmyslně zakryt)

4.2.1. Tabulky databáze Pro funkčnost informačního a redakčního systému je tedy potřebné navrhnout tabulky, které budou ukládat všechny údaje o novinkách, událostech, uţivatelích atd. Z důvodů znakové kompatibility se názvy tabulek a sloupců píší bez české diakritiky. Mohly by být pojmenovány anglicky, jak se to také často v praxi realizuje, ale ve psaném kódu i návrhu se mi lépe orientuje s názvy českými. V následujícím textu je seznam tabulek, který slouţí k uloţení dat pro informační a redakční systém ZŠ Bílá Lhota. U kaţdé tabulky je uveden popis jednotlivých sloupců, které obsahuje. Pro lepší přehlednost budou názvy tabulek a sloupců v prostém textu zvýrazněny kurzívou. 

Uzivatele Tabulka Uzivatele slouţí k uloţení dat o uţivatelích. Tabulka se skládá ze sloupců: id, jmeno, prijmeni, prihlasovaci_jmeno, heslo a prava: id - zastává funkci takzvaného primárního klíče, tedy unikátní atribut, který jednoznačně identifikuje jakýkoliv řádek tabulky. Jeho funkcionalita je shodná např. s rodným číslem. Je také nezbytný pro dodrţení normálních forem (soubor pravidel,

29

který zaručuje co nejoptimálnější vyuţití databáze a také co nejlehčí případné úpravy v databázi). Význam a pouţití primárních klíčů je popsán v kapitole 4.2.2 - Cizí klíče. jmeno - slouţí k uloţení křestního jména uţivatele. prijmeni - slouţí k uloţení příjmení uţivatele. prihlasovaci_jmeno - slouţí k uloţení přihlašovacího jména uţivatele. Bývá zvykem, ţe je přihlašovací jméno vytvořeno kombinací křestního jména a příjmení uţivatele pro lepší zapamatování (např. jannovak pro uţivatele Jan Novák). Přihlašovací jméno musí být pro kaţdého uţivatele unikátní, aby bylo po úspěšném pokusu o přihlášení jednoznačné, který uţivatel se přihlásil (např. pokud by v systému byli dva uţivatelé se stejným přihlašovacím jménem i heslem, tak by se mohl jeden uţivatel vydávat za druhého, coţ je samozřejmě neţádoucí). heslo - neslouţí k uloţení heslo jako takového, ale z důvodu bezpečnosti pouze otisku z hashovací funkce SHA-1. Důvody a způsoby pouţití otisku jsou vysvětleny v kapitole 3.4.6 - Hashovací funkce. prava - slouţí k uloţení čísla 1 nebo 2 pro odlišení uţivatelských rolí Správce a Učitel (viz. 3.1.1 - Uţivatelské role). 

Udalosti Tabulka Udalosti slouţí k uloţení dat o událostech. Tabulka se skládá ze sloupců: id, autor, text, nadpis a datum: id - zastává funkci primárního klíče stejně jako u tabulky Uzivatele. autor - slouţí k uloţení id uţivatele, který událost vloţil. V případě potřeby se podle atributu autor mohou dohledat další informace o autorovi vloţené události (viz. 3.1.1 Uţivatelské role). nadpis - slouţí k uloţení titulku události. text - slouţí k uloţení textového obsahu události.

30

datum - slouţí k uloţení data, kdy se bude daná událost konat, nikoliv kdy byla událost vloţena do systému. Datum vloţení události do systému nepovaţuji za důleţité, proto jsem se je rozhodl neukládat. 

Novinky Tabulka Novinky slouţí k uloţení dat o novinkách. Tabulka se skládá ze sloupců: id, autor, text, nadpis a datum: id - zastává funkci primárního klíče stejně jako u tabulky Uzivatele. autor, text a nadpis - jsou obdobou stejnojmenných atributů u tabulky Udalosti. datum - slouţí k uloţení data vloţení novinky do databáze.



Student Tabulka Student slouţí k uloţení dat o ţácích školy. Tabulka se skládá ze sloupců: id, jmeno, prijmeni, email, adresa, rodne_cislo a trida: id, jmeno a prameni - zastávají stejnou funkci jako stejnojmenné atributy u tabulky Uzivatele. email, adresa a rodne_cislo - ukládají email, adresu a rodné číslo ţáků. trida - slouţí k uloţení id třídy (z tabulky Trida) do které ţák chodí.



Trida Tabulka Trida slouţí k uloţení dat o třídách školy, kterými jsou třídní učitel, ročník třídy a paralelka. Tabulka se skládá ze sloupců: id, rocnik, paralelka, tridni_ucitel: id - zastává funkci primárního klíče stejně jako u tabulky Uzivatele. rocnik - slouţí k uloţení ročníku dané třídy. paralelka - slouţí k rozdělení více tříd ve stejném ročníku – např. 8.A a 8.B. Ačkoliv ZŠ v Bílé Lhotě takové rozlišení nepotřebuje (z důvodu nízkého počtu ţáků), je toto rozdělení implementováno pro případné budoucí pouţití stránek i v jiných školách.

31

tridni_ucitel - slouţí k uloţení informace o tom, kdo je třídním učitelem v dané třídě. Hodnota toho atributu je tedy shodná s hodnotou atributu id v nějakém řádku tabulky Uzivatele. 

Log Tabulka Log slouţí k uloţení záznamu pokusů o přihlášení. Tabulka se skládá ze sloupců: id, ip, uzivatel, cas: id - zastává funkci primárního klíče stejně jako u tabulky Uzivatele. ip - slouţí k uloţení informace o tom, ze které ip adresy přišel poţadavek na přihlášení. uzivatel - slouţí k uloţení přihlašovacího jména pouţitého při přihlášení. cas - slouţí k uloţení data pokusu o přihlášení (počet sekund od 1. ledna 1970, 00:00 GMT[6]).

4.2.2. Cizí klíče Jak uţ bylo v minulé kapitole naznačeno, pro vztahy mezi tabulkami se pouţívají takzvané cizí klíče. To jsou odkazy z jedné tabulky do druhé, které vyjadřují určitou spojitost mezi záznamy v nich uloţenými, například třída a její třídní učitel. V takové situaci je zbytečné, aby tabulka obstarávající údaje o třídách obsahovala i údaje o třídním učiteli (jméno, příjmení, email, a podobně). Jednak to zabírá zbytečně místo v databázi, ale hlavně ztěţuje správu dat v databázi, protoţe při změně jména učitele bychom museli tuto změnu zaznamenat ve všech tabulkách, které s učiteli souvisí – v našem systému to jsou tabulky Trida, Novinky a Udalosti. Přitom stačí mít v těchto tabulkách uloţené pouze odkazy do tabulky spravující uţivatele a zde se jakákoliv změna projeví do všech tabulek. Ukázka pouţití cizích klíčů můţe být vidět v navrţeném informačním systému, například v tabulce Trida je sloupec tridni_ucitel, který odkazuje na id v tabulce Uzivatele. Jinými slovy, pokud bude mít nějaká třída nastaven atribut tridni_ucitel na hodnotu 8, potom je třídní učitel této třídy uloţen na řádku s id 8 v tabulce Uzivatele. Tyto cizí klíče je tedy nutné nadefinovat:

32

Novinky.autor -> Uzivatele.id Udalosti.autor -> Uzivatele.id Trida.tridni_ucitel -> Uzivatele.id Student.trida -> Trida.id 4.2.3. Model tříd databáze Model tříd databáze slouţí stejně jako model uţití k lepšímu pochopení struktury databáze. Na obrázku Obr. 15 je model tříd databáze a v něm jsou v obdélnících zastoupeny všechny entity (tabulky) databáze (včetně výčtu všech atributů entity a určení primárního klíče) a spojnice mezi nimi ukazují vzájemné vazby entit. Kaţdá vazba má na obou koncích znázorněné zastoupení přilehlé tabulky ve vztahu, přičemţ existují právě 4 typy vazeb, které vyjadřují, jestli se vazby musí nějaký prvek účastnit a jestli se jedné vazby můţe účastnit více prvků. 0..1 Vazby se můţe účastnit maximálně jeden prvek tabulky. Například třídním učitelem jakékoliv třídy můţe být v jednu chvíli maximálně jeden učitel, ale také nemusí být ţádný – třeba kdyţ se třída právě vytvoří nebo učitel odejde do důchodu. 0..* Vazby se můţe účastnit libovolný počet prvků tabulky. Například ţáků ve třídě můţe být libovolný počet a to i nula, kdyţ je třída právě vytvořená nebo kdyţ jsou na konci roku všichni studenti přesunuti do vyššího ročníku. 1 Vazby se účastní právě jeden prvek tabulky. Například autorem přidané novinky nebo události je právě jeden přihlášený uţivatel. 1..* Vazby se účastní alespoň jeden prvek tabulky. V informačním systému, jak ho poţadovala ZŠ Bílá Lhota, se ţádná taková vazba nevyskytuje, ale lze si představit budoucí rozšíření, kde by 33

se ke kaţdé školní akci mohli učitelé přihlašovat jako dohled nad ţáky. V takovém případě je určitě nezbytné, aby byl na kaţdé akci přítomen vţdy jeden nebo více učitelů jako dohled.

Obr. 15 Třídní model struktury databáze

4.3. Struktura zdrojového kódu stránek Základní struktura stránek není striktně rozdělena do ţádného návrhového vzoru, nicméně je v ní oddělená statická část (index.php a text.php) od dynamické. Dynamická část je pak rozdělená na části pro přístup do databáze (db.php), načtení a zpracování vstupu (postget.php) a práci s galerií (galerie.php).

34

4.3.1. index.php Tento soubor je volán při kaţdém načtení stránek. Obsahuje v sobě základní rozloţení stránek v HTML formátu – zobrazí logo, levý sloupec s menu a kontakty, do středního sloupce zavolá funkci pro načtení obsahu (ze souboru text.php) dle zvolené sekce a v pravém sloupci zobrazí formulář pro přihlášení (nebo informace o přihlášeném uţivateli, pokud je jiţ přihlášen) a zavolá funkce pro zobrazení 10 nejaktuálnějších galerií a událostí (ze souboru db.php). Na začátku zpracování souboru index.php se zavolá a vloţí soubor postget.php Celý soubor je v maximální míře psán jako statická HTML stránka s občasným voláním funkcí odjinud, tak aby bylo moţné i pro člověka neznalého jazyka PHP poupravit vzhled stránek. Příklad kombinace statického obsahu stránek s připojením externího zdrojového kódu:

4.3.2. text.php Tento soubor se stará o zobrazení obsahu vybrané sekce stránek do prostředního sloupce. Je-li vybraná sekce statického typu (historie školy, informace o škole, a podobně), je tento obsah napsán v HTML formátu přímo v tomto souboru, tak aby mohl být (podobně jako u souboru index.php) jednoduše změněn i člověkem bez znalostí jazyka PHP. Pokud je ţádaný obsah dynamického typu nebo vyţaduje přístup do databáze, potom je volán funkcí v souboru db.php. Výběr zvolené sekce se vyhodnotí podle hodnoty uloţené v proměnné $_SESSION["sekce"], která je načtena z adresy v adresní řádku prohlíţeče, například: www.zsbilalhota.cz/index.php?sekce=udalosti

naplní proměnnou $_SESSION["sekce"] hodnotou „udalosti“. V těle souboru poté dojde ke splnění následující podmínky a zavolání funkce udalosti(), která vyhodnocuje sekci s událostmi. if($_SESSION["sekce"]=="udalosti") {

35

udalosti(); }

Přístup do statické sekce vypadá následovně: if($_SESSION["sekce"]=="informace-o-skole") { ?>
…HTML sekce…

Na první pohled je vidět, ţe soubor obsahuje i prvky PHP jazyka, nicméně jeho pouţití je velice intuitivní a k úpravě obsahu stránek není potřeba do něj jakkoliv zasahovat. 4.3.3. postget.php Dotazy na stránky nebo systém (redakční nebo informační) mohou být zaslány buďto přes adresní řádek (takzvaná metoda GET) nebo odesláním dat z formuláře (metoda POST). Tyto data jsou přijímány v jazyce PHP skrze pole $_GET[], resp. $_POST[]. Všechny tyto vstupy zpracovává soubor postget.php. Kromě toho nastavuje relační proměnné, které slouţí pro přihlášení uţivatelů. Ty to relační proměnné (anglicky sessions) jsou neobvyklé tím, ţe si uchovávají uloţenou hodnotu po celou dobu prohlíţení stránek, tedy aţ do vypnutí a zapnutí prohlíţeče. Nejprve se zjistí, jaké proměnné byly skriptu odeslány. To se provede metodou isset(). Pokud nějaká proměnná nebyla přijata, např. z důvodu ţe jí vybraná sekce nevyţaduje, nastaví se její hodnota na prázdný řetězec. To vše se musí provést, jinak by byl skript ukončen z důvodu testování neznámé proměnné. Nastavení proměnných vypadá následovně: if(isset($_GET["akce"])) { $akce = $_GET["akce"];} else {$akce="";} } if(isset($_POST["text"])) { $text = $_POST["text"];} else {$text="";} }

Dále se ve skriptu vyhodnotí obsah proměnné $akce, podle které se volají funkce pro práci s databází. Společně s ní jsou vyhodnoceny příslušné podmínky, jako například jestli je uţivatel přihlášen, jestli má dostatečná práva a podobně. Zde je příklad takového vyhodnocení podmínky a volání funkce pro vytvoření ţáka. 36

if($akce=="vytvoritzaka" && $_SESSION["user_login"]!="" && $_SESSION["user_prava"]<3 && $jmeno!="" && $prijmeni!="") { vytvoritzaka($jmeno,$prijmeni,$adresa,$email,$rodnecislo,$trida); }

Tento kód znamená, ţe k zavolání funkce vytvoritzaka() tedy dojde pouze za předpokladu, ţe skript přijal hodnotu proměnné $_GET["akce"] rovnou „vytvořitzaka“, skript byl zavolán přihlášeným uţivatel s hodnotou prava menší neţ 3 a zároveň proměnné $jmeno a $prijmeni obsahují nějaká data. 4.3.4. galerie.php Pro správu galerií jsou vytvořeny 2 funkce – fotogalerie a miniatury, které jsou uloţené v souboru galerie.php. Vše funguje na principu procházení sloţky „/galerie“ na serveru. V této sloţce „/galerie“ je pro kaţdé album vytvořena vlastní sloţka s názvem galerie, například „/galerie/ZOO Praha 2009“. Pro vytvoření alba a jeho publikování na serveru tak stačí pomocí FTP (File Transfer Protocol) klienta (např. Total Commander) nahrát na server celou sloţku i s fotkami. O správné zobrazení na stránkách a vytvoření miniatur a se poté postarají funkce galerie() a miniatury() při první ţádosti o zobrazení galerie. Funkce fotogalerie() nejdříve podle vstupu z adresového řádku zjistí, zda je vybrané konkrétní album a to poté zobrazí. Pokud není ţádné vybrané, vypíše seznam všech alb s odkazy na jejich zobrazení. Pokud je vybrané konkrétní album, zobrazí se miniatury všech fotek v něm, které se po kliknutí zvětší. Funkce fotogalerie zjistí, zda existuje ve sloţce s fotkami alba sloţka se jménem thumb a pokud ne, tak jí vytvoří. Nakonec zavolá funkci miniatury. Funkce miniatury projde všechny fotky v albu (soubory končící příponou .jpg) a zjistí, zda k nim je vytvořená miniatura. Pokud ne, tak jí vytvoří. Standardní rozměry miniatury jsou 160 x 120 obrazových bodů a to i pro fotky orientované na výšku, tak aby byl v náhledu vidět celý obsah fotky a ne jen její oříznutá část. To můţe fotku lehce zkreslit, nicméně galerie vypadá vzhledově lépe, kdyţ je tvořená stejnoměrnými náhledy. Skript tedy podporuje pouze fotky ve formátu JPG s příponou .jpg, .JPG a podobně. Rozšíření o další formáty by vyţadovalo obdobný blok kódu jako pro formát JPG, pouze s upravenou podmínkou na příslušnou příponu a záměnou funkcí imagecreatefromjpeg() a imagejpeg(). Výřez z funkce miniatury: 37

while (false !== ($fname = readdir( $dir ))) { $test_jpg = strtolower(substr($fname, -3, 3)); $test_thumb = $pathToThumbs.$fname; if ($test_jpg == "jpg" && !is_file($test_thumb) ) { // do proměnné se načte obrázek v původní velikosti a zjistí se jeho rozměry $img = imagecreatefromjpeg( "{$pathToImages}{$fname}" ); $width = imagesx($img); $height = imagesy($img); // vytvoří se dočasný obrázek o rozměrech z proměnných $thumbWidth, $thumbHeight, které jsou vstupním parametrem funkce – 160 a 120 $tmp_img = imagecreatetruecolor( $thumbWidth, $thumbHeight); // původní obrázek se překopíruje do miniatury dle zadaných parametrů – // z obrázku se vyřízne obdélník určený dvěma body – na souřadnicích v levém horním a pravém dolním rohu imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $width, $height ); // nakonec se miniatura uloží do složky nazev_galerie/thumb/ pod stejným jménem jako je originál imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" ); } }

4.3.5. db.php Soubor db.php obsahuje všechny funkce, které pracují s databází, ať uţ na pozadí modifikují data v ní (editace ţáka, přidání novinky, vytvoření třídy a podobně) nebo tyto data načítají a zobrazují na internetových stránkách (výpis třídy, zobrazení novinek a tak dále). Formátování těchto dat pro zobrazení je prováděno přímo v příslušných funkcích. Ukázka funkce, která přidává ţáka do databáze podle hodnot odeslaných formulářem přes soubor postget.php: function vytvoritzaka($jmeno,$prijmeni,$adresa,$email,$rodnecislo,$trida) { try { $query = "INSERT INTO `student` (ìd`, `jmeno`, `prijmeni`, àdresa`, `rodne_cislo`, èmail`, `trida`) VALUES (NULL,?,?,?,?,?,?);"; global $db; $statement = $db->prepare($query); $statement->execute(array($jmeno, $prijmeni, $adresa, $rodnecislo, $email, trida)); } catch (Exception $e) { echo "Chyba: " . $e->getMessage(); } }

38

Dotaz je nejdříve předpřipraven a poté se do něj zadají hodnoty – místo otazníků se postupně doplní konkrétní hodnoty z pole proměnných. Soubor db.php se také stará o výpis novinek a událostí, které jsou uţivatelem formátované. Jelikoţ nechceme, aby uţivatel mohl libovolně vkládat HTML kód do příspěvku, protoţe by mohl třeba omylem narušit rozloţení celých stránek, tak mu jeho příspěvek před zobrazením upravíme funkcí htmlspecialchars(), která ze všech případných HTML tagů vytvoří prostý text. $text = htmlspecialchars($row["text"]);

kde $row[“text”] je text příspěvku načtený z databáze. Na druhou stranu ale chceme, aby měl uţivatel moţnost vkládání alespoň základního formátování (tučný text, podtrţený text, odkaz). Toho docílíme vytvořením alternativních značek k HTML elementům, například element označující začátek tučného textu je a konec tučného textu je . K těmto elementům vytvoříme alternativu v podobě značek *b* a */b*. Takové alternativní značky nejsou nijak postiţeny funkcí htmlspecialchars() a tak je můţeme zpětně přepsat na HTML elementy a pomocí PHP funkce strtr(), která vezme jako parametr slovník (ve skutečnosti se jedná o pole indexované alternativními značkami s hodnotami HTML tagů) a přeloţí všechny výskyty v zadaném textu dle pravidel ve slovníku. $trans = array("*b*" => "", "*/b*" => "", "*u*" => "", "*/u*" => "", "*i*" => "", "*/i*" => "", "*ah*" => " "\" target=_blank style=\"letter-spacing:2px;\">", "*/a*" => "");

$text = strtr($text, $trans); Aby bylo pro uţivatele co nejjednodušší vkládání těchto alternativních značek, je u kaţdého pole pro vkládání textu vytvořena sada tlačítek, která po kliknutí přidají kolem označeného textu příslušné formátovací značky. Funkce volaná u tlačítka pro tučný text vypadá následovně: onClick="return VlozFormatovani('text_area','*b*','','*/b*');"

39

Po stisknutí tlačítka se zavolá funkce VlozFormatovani(), která do pole pro text vloţí kolem označeného textu značky *b* a */b*. Parametr 'text_area' označuje identifikátor daného elementu textarea, do kterého se budou značky vkládat. Třetí parametr je prázdný a vyplňuje se pouze u tlačítka pro odkaz, jelikoţ ten vyţaduje 3 značky *ah*, *a-* a */a*, mezi které se označený text okopíruje – jednou bude zastupovat cíl odkazu a podruhé text odkazu. function VlozFormatovani(id,pred,uprostred,po) { var o = document.getElementById(id); o.focus(); if(uprostred=='') { if (document.selection) { sel = document.selection.createRange(); var selText = sel.text; sel.text = pred + selText + po; } else if (o.selectionStart || o.selectionStart == '0') { var startPos = o.selectionStart; var endPos = o.selectionEnd; o.value = o.value.substring(0,startPos) + pred + o.value.substring(startPos,endPos) + po + o.value.substring(endPos,o.value.length); } else { o.value += pred + po; } } else { if (document.selection) { sel = document.selection.createRange(); var selText = sel.text; sel.text = pred + selText + uprostred + selText + po; } else if (o.selectionStart || o.selectionStart == '0') { var startPos = o.selectionStart; var endPos = o.selectionEnd; o.value = o.value.substring(0,startPos) + pred + o.value.substring(startPos,endPos) + uprostred + o.value.substring(startPos,endPos) + po + o.value.substring(endPos,o.value.length); } else { o.value += pred + uprostred + po; } }

40

return false; }

Na začátku se rozliší pouţití funkce pro dva nebo tři parametry. Dále se funkce podmínečně větví z důvodu různé interpretace javasciptu v různých prohlíţečích. Některé podporují výběr označeného textu rovnou (document.selection.createRange), některé pouze umoţní vybrat index začátku a konce označení (selectionStart a selectionEnd). Pokud není nic vybráno, tak se pouze na konec přidají všechny znaky a text je moţné libovolně upravit. 4.4. Zabezpečení Podle analýzy v kapitole 3.4 - Bezpečnost byly na stránkách a v systému implementovány 4 způsoby zabezpečení – automatické odhlášení, SQL injection, obrana proti útoku hrubou silou a šifrování přenosu protokolem https. 4.4.1. Automatické odhlášení V případě úspěšného přihlášení uţivatele do systému dojde k nastavení relačních proměnných (pole $_SESSION[]) na údaje získané z databáze. Odhlášení potom proběhne jednoduše nastavením těchto proměnných na prázdné řetězce. Výhoda relačních proměnných spočívá v jejich automatickém vynulování po uzavření internetového prohlíţeče. To lze výhodně vyuţít pro implementaci první části automatického odhlášení. Druhá část, automatické odhlášení při dlouhé neaktivitě, je vyřešena ve skriptu postget.php. V relační proměnné $_SESSION["minula_aktivita"] se ukládá čas poslední aktivity, který se při následujícím načtení stránek porovná s aktuálním časem pouţitím php funkce time(). Je-li mezi nimi rozdíl více neţ 600 vteřin, tak dojde k odhlášení. if($_SESSION["minula_aktivita"]==NULL) { $_SESSION["minula_aktivita"]=time(); } $_SESSION["nynejsi_aktivita"]=time(); if($_SESSION["nynejsi_aktivita"] - $_SESSION["minula_aktivita"] > 600) { $_SESSION["user_login"] = ""; $_SESSION["user_jmeno"]=""; $_SESSION["user_prijmeni"]=""; $_SESSION["user_login"]=""; $_SESSION["user_id"]=""; $_SESSION["user_prava"]=""; } $_SESSION["minula_aktivita"]=time();

41

4.4.2. Hashovací funkce Pouţití otisku hesla je ukázán v příkladu v kapitole 4.4.3 - Obrana proti vsunutí kódu do dotazu (SQL injection). 4.4.3. Obrana proti vsunutí kódu do dotazu (SQL injection) Obrana proti SQL injection je popsána v kapitole 3.4.5 - Útok vsunutím kódu do dotazu a zde je tedy jen ukázka pouţití při přihlášení: $query = "SELECT * FROM uzivatele WHERE login=? AND heslo=? LIMIT 1"; $statement = $db->prepare($query);

Nejdříve je předpřipravena struktura SQL dotazu a místo konkrétních hodnot se vloţí pouze otazníky, které budou poté nahrazeny konkrétními hodnotami. $statement->execute(array($jmeno, sha1($heslo)));

Místo prvního otazníku se doplní hodnota proměnné $jmeno (vstupní parametr přihlašovací funkce) a na místo druhého dotazníku se vloţí sha1 otisk $heslo (viz. kapitola 3.4.6 Hashovací funkce). $statement->setFetchMode(PDO::FETCH_ASSOC); foreach($statement as $row){ $_SESSION["user_jmeno"]=$row["jmeno"]; $_SESSION["user_prijmeni"]=$row["prijmeni"]; $_SESSION["user_login"]=$row["login"]; $_SESSION["user_id"]=$row["id"]; $_SESSION["user_prava"]=$row["prava"]; }

V případě nalezení shody jména a otisku s daty v databázi dojde k přihlášení. 4.4.4. Obrana proti útoku hrubou silou Před kaţdým pokusem o přihlášení se nejdříve do tabulky Log uloţí záznam o tomto pokusu. $query = "INSERT INTO `log` (ìd`, ìp`, ùser`, `time`) VALUES (NULL,?,?,?);"; $time = time(); $statement = $db->prepare($query); $statement->execute(array($_SERVER["REMOTE_ADDR"], $jmeno, $time));

Následně je zjištěno, kolik pokusů ze stejné ip adresy nebo na stejné uţivatelské jméno proběhlo za poslední 3 vteřiny a pokud jich bylo víc neţ tři, tak se skript ukončí a další úspěšný pokus o přihlášení bude moct být realizován nejdříve v následující vteřině. 42

$query = "SELECT * FROM `log` WHERE (ìp`=? OR ùser` = ?) AND `time` + 2 >= ?;"; $time = time(); $statement = $db->prepare($query); $statement->execute(array($_SERVER["REMOTE_ADDR"], $jmeno, $time)); $statement->setFetchMode(PDO::FETCH_ASSOC); $pocet_pokusu = 0; foreach($statement as $row){ $pocet_pokusu++; if($pocet_pokusu > 3) { die('ZŠ Bílá Lhota<meta http-equiv="content-type" content="text/html; charset=UTF-8">Překročen počet pokusů o přihlášení. Zkus to za chvíli.'); } }

Funkce die($zprava) okamţitě ukončí provádění veškerých php skriptů a pouze vypíše informační zprávu o ukončení – v našem případě hlavičku HTML dokumentu a oznámení o překročení počtu pokusů. Hlavička je zde kvůli správnému zobrazení znaků české abecedy. 4.4.5. Protokol HTTPS Pro pouţití protokolu HTTPS je obvykle potřeba zaplatit některé certifikační autoritě poplatek za vydání certifikátu a ten pak na svůj server nainstalovat. Jelikoţ byl ale zvolen webhosting od firmy pipni.cz (viz. 3.5 - Výběr webhostingu) která nabízí pouţití a správu jejich certifikátu

zdarma,

stačí

při

pokusu

o

přihlášení

přidat

před

odkaz

adresu

‚https://secure18.pipni.cz/‘ a celá komunikace bude automaticky šifrována 256bity a algoritmem SHA1 s mechanismem výměny klíčů DHE_RSA.

43

5. Testování Jelikoţ je v rozporu se smlouvou s webhostingovou firmou, aby na vytvořené stránky vědomě útočil nájemce webhostingu, tak jsem nemohl provést test bezpečnosti útokem hrubou silou nebo pokusem o přehlcení stránek formou cyklického dotazování na databázi nebo stahování dat uloţených na serveru. Provedl jsem tedy jen útok na vloţený dotaz do databáze při přihlašování (přesně tak jak je popsán v kapitole 3.4.5 - Útok vsunutím kódu do dotazu). Přihlášení se do systému bez znalosti hesla se nepovedl a test byl tedy úspěšný. Dále jsem provedl test automatického odhlášení při desetiminutové neaktivitě a vypnutí prohlíţeče, oba testy byly úspěšné. Z důvodu ztráty komunikace mezi mnou a ZŠ Bílá Lhota, jsem nemohl stránky otestovat v ostrém provozu. Nicméně jsem poţádal asi 30 svých přátel, aby se ve smluveném čase připojili na stránky a otestovali jejich funkčnost (včetně informačního a redakčního systému, ke kterému dostali dočasně přístup) a poté mi napsali svůj komentář. Celý průběh testu měl být zaznamenán aplikací na sledování zatíţení provozu, která je k dispozici standardně u kaţdého lepšího webhostingu. Bohuţel tato aplikace u zvoleného webhostingu byla v čase testu mimo provoz, tudíţ můţu pouze doloţit komentáře některých účastníků testu (text komentářů je přiloţen na CDčku, které je součástí této práce). Z komentářů účastníků testu vyplynulo, ţe ţádný z nich neměl nejmenší potíţe s rychlostí zobrazování obsahu stránek. Pár z nich stránkám nicméně vytklo nepřehlednost v administraci, kterou jsem vyřešil rozdělením administrace do více sekcí. Stránky byly zobrazeny v nejpouţívanějších dnešních prohlíţečích Internet Explorer, Google Chrome a Mozilla Firefox. Ve všech došlo k lehkým odlišnostem v zobrazení, které ovšem neměly dopad na kvalitu stránek. Jediný významnější rozdíl je nemoţnost zobrazení zakulacených rohů v Internet Exploreru pouze prostřednictvím kaskádových stylů. To je problém, který nelze jednoduše vyřešit a tak jsou v tomto prohlíţeči rohy hranaté. Pomocí validátoru jsem otestoval stránky na správnost HTML kódu. Na stránkách se vyskytlo několik nedostatků, např. chybějící popisky u obrázků, které byly ale okamţitě opraveny a stránky jsou tedy validní.

44

6. Možnosti rozšíření Ačkoliv vytvořené internetové stránky s redakčním a informačním systémem splňují všechny poţadavky, které si na ně kladla základní škola v Bílé Lhotě, bylo by do budoucna moţné je dále rozšířit o několik nových funkcí a rozšíření. Předně by se mohlo jednat o elektronickou ţákovskou kníţku, kam by učitelé vkládali informace o prospěchu (popřípadě o důtkách či pochvalách) ţáků ve své třídě a rodiče ţáků by tak mohli mít o všem ihned přehled. Tato funkce by vyţadovala rozšíření databáze informačního systému o tabulku s vyučovanými předměty a tabulku s danými známkami. Rodičům by se také musel zajistit heslovaný přístup (např. formou přihlášení), aby prospěch jejich dítěte mohli vidět pouze oni nebo učitelé. Dále by se stránky mohly rozšířit na jednoduchou sociální síť s moţností komentování vloţených fotografií, posílání vzkazů mezi uţivateli a privátní sekcí pro ţáky stejné třídy, kde by si mohli psát vlastní novinky nebo události sami ţáci nebo jejich třídní učitel by zde mohl publikovat informace týkající se pouze dané třídy (psaní testů, zadání domácích úkolů a podobně). Tato jednoduchá sociální síť by vyţadovala tabulku na komentáře k fotkám, tabulku se vzkazy (pokud by se neposílali formou e-mailů) a rozšíření tabulek Novinky a Udalosti o parametr, který by odlišoval od sebe jednotlivé třídy. Také by bylo potřeba upravit systém přihlašování o ţáky. Dalším vylepšením by mohl být elektronický jídelní lístek, kam by vedoucí školní jídelny zveřejňoval jídelníček na aktuální den (popř. i jiné dny). To by vyţadovalo vytvoření nové uţivatelské role Kuchař, která by měla přístup pouze do této sekce. Nakonec by stránky mohly umoţňovat nahrávání a editaci fotografií přímo z internetového prohlíţeče (zatím je k tomu potřeba FTP, WebDAV nebo WinSCP klient). Takové rozšíření je ale limitováno webhostingem, který dovoluje poslat najednou pouze 25MB dat, coţ by způsobilo, ţe jedna galerie by se musela nahrávat ve více krocích.

45

7. Závěr Podařilo se mi vytvořit internetové stránky s informačním a redakčním systémem, které splňují všechny poţadavky ZŠ Bílá Lhota. Stránky umoţňují jednoduchou publikaci novinek a událostí, základní správu uţivatelů, rychlou tvorbu a úpravu fotogalerií a to všechno dostatečně jednoduše, aby to zvládl i běţný uţivatel internetu. Bohuţel mi během práce přestal pan Mgr. Pospíšil odpovídat na zprávy a tak jsem nemohl stránky nasadit do ostrého provozu a dostat tak zpětnou vazbu od uţivatelů, coţ by určitě vedlo k řadě zlepšení a úprav, ať uţ funkčních nebo grafických. Nicméně stránky jsou nyní umístěny na doméně www.zsbilalhota.cz a jsou plně připraveny k předání a fungování. Stránky podstoupily zátěţový test, při němţ okolo 30 lidí testovalo zároveň funkčnost redakčního i informačního systému. Během testu nikdo z testujících nenarazil na ţádnou váţnou závadu nebo zdrţení ve zpracování. Stránky jsou umístěny na placeném hostingu firmy www.pipni.cz, který plně splňuje roční finanční omezení 2000Kč a přitom nabízí dostatečný prostor i rychlost pro zobrazení fotografií. Stránky jsou také zabezpečeny proti nejobvyklejším druhům útoků a komunikace mezi uţivatelem a serverem je v případě posílání citlivých informací kódována protokolem HTTPS. Ke stránkám je také vytvořený uţivatelský manuál s popisem všech funkcí, které informační i redakční systém nabízí, včetně návodu k připojení na FTP, WebDav nebo phpMyAdmin server a návodu na úpravu statického kódu stránek. Stejně tak je ke stránkám vytvořený i manuál k instalaci stránek a databáze pro případ budoucí změny webhostingu včetně skriptů pro vytvoření tabulek v databázi s nejnutnějším obsahem potřebným pro fungování stránek (např. správcovské účty). Informační a redakční systém je navrţený dostatečně obecně, aby byl připravený pro budoucí rozšíření o funkce, které nebyly prozatím poţadovány, nebo aby se kód stránek dal pouţít i pro jiné základní školy.

46

8. Použité zdroje [1] KOLEKTIV AUTORŮ: PHP 6, MySQL, Apache - Vytváříme webové stránky. Praha : První vydání. Computer Press, a.s., 2009. ISBN 978–80–251–2767-4 [2] DOMES, M.: Tvorba internetových stránek pomocí HTML, CSS a JavaScriptu. Praha: První vydání. Computer Media, a.s., 2005. ISBN 80-86686-39 [3] JANOVSKÝ, Dušan: Jak Psát Web – online učebnice jazyka HTML, Javascript a kaskádových stylů. www.jakpsatweb.cz [4] PHP.net – online dokumentace jazyka PHP. www.php.net [5] PHP.net – hashovací funkce SHA1. [2011-05-14]. http://cz.php.net/manual/en/function.sha1.php [6] PHP.net – funkce pro práci s časem time(). [2011-05-14]. http://cz.php.net/manual/en/function.time.php [7] HULÁN, RADEK: MyEgo.cz – online blog nejen o programování. [2011-05-02]. http://myego.cz/item/jak-funguje-mkdir-chmod-v-php [8] Stránky předmětu X36DBS - Databázové systémy. https://service.felk.cvut.cz/courses/X36DBS/ [9] Stránky předmětu X36APK – Aplikovaná kryptografie. https://service.felk.cvut.cz/courses/X36APK/ [10] Stránky předmětu X39WWW – Internet a WWW. http://edux.feld.cvut.cz/courses/X39WWW/ [11] Validator.w3.cz – český online validátor XHTML, HTML a CSS kódu http://validator.w3.cz/ [12] WebCheatSheet.com – anglické návody na technologie pro tvorbu internetových stránek. [2011-02-03]. http://www.webcheatsheet.com/php/create_thumbnail_images.php [13] Hostingy.cz - průvodce výběrem webhostingu. [2011-05-02]. http://www.hostingy.cz/navody-a-tipy-jak-vybirat-webhosting.html [14] Původní stránky ZŠ Bílá Lhota http://zs.bilalhota.indos.cz/

47

9. Přílohy 9.1. Obsah přiloženého CD 

/bakalarka

(obsahuje tento dokument a všechny obrázky v něm pouţité)

-

bakalarska_prace.doc

(bakalářská práce ve formátu pro starší verze MS Word)

-

bakalarska_prace.docx

(bakalářská práce ve formátu pro nové verze MS Word)

-

bakalarska_prace.pdf

(bakalářská práce ve formátu PDF)

-

/obrazky

(sloţka s obrázky pouţitými v této práci)

o galerie.jpg o graficky_navrh.jpg o … 

/instalace_serveru

(obsahuje návod k instalace serveru a obrázky v něm pouţité)

-

instalace_serveru.doc

(návod k instalaci ve formátu pro starší verze MS Word)

-

instalace_serveru.docx

(návod k instalaci ve formátu pro nové verze MS Word)

-

instalace_serveru.pdf

(návod k instalaci ve formátu PDF)

-

/obrazky

(sloţka s obrázky pouţitými v návodu na instalaci)

o dokumentace1.jpg o dokumentace2.jpg o … 

/manual

(obsahuje manuál k administraci stránek)

-

manual.doc

(manuál ve formátu pro starší verze MS Word)

-

manual.docx

(manuál ve formátu pro nové verze MS Word)

-

manual.pdf

(manuál ve formátu PDF)

-

/obrazky

(sloţka s obrázky pouţitými v manuálu)

o manual1.jpg o manual2.jpg o … 

/stranky

(obsahuje všechny zdrojové kódy k fungování stránek)

-

db.php

(skript pro práci s databází)

-

galerie.php

(skript pro práci s galeriemi)

-

index.css

(kaskádový styl pro úpravu vzhledu stránek)

-

index.php

(základní rozloţení stránek a volání ostatních skriptů)

-

javascript.js

(javascriptové funkce pouţité na stránkách) 48

-

postget.php

(skript pro práci se vstupy)

-

text.php

(skript se statickými částmi stránek)

-

/dokumenty

(obsahuje soubory, které jsou na stránkách ke stažení)

-

/galerie

(složka do které se nahrávají alba s fotkami)

-

/images

(obrázky použité na stránkách)7

o image_arrow_left.png o image_arrow_right.png o … 



/komentare

(obsahuje komentáře lidí, kteří se zúčastnili testování)

-

screen.png

(obrázek z diskuze nad stránkami)

-

komentare.txt

(soupis některých komentářů)

/podklady -

IMG_0001.jpg

-

IMG_0002.jpg

-

…

(obsahuje naskenované obrázky ke grafickým návrhům)

9.2. Návod k instalaci stránek Přiloţen na CD. 9.3. Manuál k administraci stránek Přiloţen na CD. 9.4. Komentář ke stránkám Přiloţen na CD.

49

Webové stránky pro základní školu. Martin Sivok

Recommend Documents