Elektronická prezentace předmětu VV040 - Divadelní hra

s atributem i d nebo c l a s s , který výsek kódu nějak pojmenuje, například „hla­ vička", „menu" a podobně [C3]. Srovnejme tuto techniku s předchozími: •

Oddělení obsahu od vzhledu. Je to moderní pojetí tvorby stránek, které má i praktický význam.

•

Kód je přehlednější a stručnější, díky čemuž se načítá rychleji.

•

Stránka vytvořená tímto způsobem se zobrazuje postupně s tím, jak se načítá. Díky tomu může uživatel vidět na svém monitoru reakci prohlížeče téměř okamžitě po kliknutí.

•

CSS je velice mocný nástroj, který nám dovolí realizovat na stránce poměrně hodně nápadů, díky kterým může rozvržení stránky vypadat opravdu zajímavě. 7

2.4. ZPŮSOBY TVORBY •

Závislost vzhledu na platformě. Tato vlastnost je velice významná, protože díky ně­ kolika CSS definicím může stránka vypadat jinak na monitoru (plnobarevná a vyu­ žívající velikosti obrazovky), jinak na mobilním zařízení (užší, s méně obrázky a bez zbytečného plýtvání místem) a jinak vytisknutá (opět s upravenou šířkou stránky, méně barev a podobně).

Bohužel stejně jako každá jiná metoda má i tvorba layoutu pomocí CSS nevýhody: •

Různé prohlížeče podporují různé množiny vlastností CSS různým způsobem (a často nedostatečně nebo neúplně). Zřejmě neexistuje žádný prohlížeč, který by je podporo­ val přesně podle norem W3C. Z tohoto důvodu musí webdesignér trávit hodně času tím, aby metodou pokus - omyl zjistil, co ten který prohlížeč zobrazí správně a co ne. Je téměř nutné mít nainstalovány všechny možné (někdy i nemožné) prohlížeče, a to ještě nejlépe v několika odlišných verzích.

•

CSS kód bývá velmi nepřehledný. Při zjišťování jak konkrétní CSS funguje je obvykle nutné neustále přepínat mezi HTML a CSS kódem. K řešení tohoto problému lze s úspěchem využít možnost rozdělení kódu do více souborů.

•

CSS nedisponuje některými vlastnosti, díky čemuž poněkud zaostává za tabulkami. Webdesignér přecházející z tabulek na CSS layout si musí zvyknout, že spousta věcí prostě nejde udělat. V HTML ani CSS neexistují mechanizmy, které by byly primárně určeny právě k těmto účelům. Právě proto se využívá různých triků a CSS hacků.

2.3.4 Kombinovaný layout Někteří odborníci vyzdvihují pouze výhody beztabulkového layoutu. Ovšem v minulé části jsme doložili, že má i své nedostatky. Časté je využívání kombinace CSS a tabulkového la­ youtu. Tyto se mohou vzájemě velmi úspěšně prolínat a doplňovat. Zajímavou možností je použití CSS při tvorbě celkového grafického ztvárnění stránek a tabulky využít pouze pro menší detaily. Osobně považuji kombinaci CSS a tabulek jako vhodný kompromis. 2.4

Způsoby tvorby

V současnosti existuje několik způsobů pro vytvoření webové prezentace. Jedny z nejpou­ žívanějších jsou tyto: •

Export požadovaných informací z různých programů, jako jsou kancelářské balíky apod.

•

Využití některého WYSIWYG editoru.

•

Přímý zápis (X)HTML kódu nebo použití skriptovacího jazyka, který tento kód vyge­ neruje. 8

2.5. CO JE DOBRÉ DODRŽOVAT Vytvářením webové prezentace exportem z různých programů se nebudu moc zabývat, pro­ tože tento způsob je pro koncepční tvorbu stránek nepoužitelný a smysl má pouze v kraj­ ních případech, jako je například potřeba rychlého zpřístupnění požadovaného dokumentu s hypertextovými odkazy. Princip je v tom, že konvertor zvoleného programu sám převede textové informace na (X)HTML kód, což je zdrojem problémů při případném zpětném edi­ tování. Princip použití WYSIWYG editoru je vlastně velice podobný, až na to, že můžeme do­ kument graficky upravit do požadované podoby ve vizuálním prostředí editoru. Výhodou tohoto způsobu tvorby je jednoduchost a rychlost. Během krátké chvíle vyplněné klikáním myši můžeme obyčejný textový dokument upravit do zajímavé grafické podoby. Velkou ne­ výhodou je podobně jako u předcházejícího způsobu velký rozsah zdrojového kódu. Faktem také zůstává, že výsledný zdrojový kód je pro naše oko velmi zmatený a obsahuje spoustu zbytečných nebo redundantních informací. Nejvyšší efektivity při tvorbě dosáhneme přímým zápisem zdrojového kódu. Tímto způ­ sobem optimalizujeme množství zdrojového kódu a informací v něm obsažených vlastním potřebám a výsledný produkt upravíme přesně k obrazu svému. Výhodou tohoto způsobu je přesnost výsledného zobrazení a preciznost zdrojového kódu, nevýhodou především nut­ nost znát (X)HTML, webové standardy, případně i nějaký skriptovací jazyk. K vlastní tvorbě nám postačí úplně obyčejný ASCII editor, ale s úspěchem můžeme využít i specializovaných pokročilých editorů, určených pro tvorbu zdrojového kódu v nějakém značkovacím jazykce. Tyto editory pak obsahují spoustu více či méně užitečných funkcí a nástrojů: automatické doplňování kódu, upozorňování na překlepy při psaní značek nebo vyhledávání a náhrada textových řetězců. 2.5

Co je dobré dodržovat

Při psaní zdrojového kódu je dobré dodržovat určité zásady správné tvorby. Bez jejich do­ držování sice můžeme také dospět k výsledku, ale výsledný produkt může mít spoustu formálních nebo estetických chyb. 2.5.1 Validita O tom, zda si dokument budou moci přečíst opravdu všichni, rozhodují většinou detaily. Na tyto detaily dbá konsorcium W3C pomocí validátorů zdrojových kódů. Existuje také velké množství offline validátorů, ale jejich úroveň je v drtivé většině nevalná. Daleko lepší je použít oficiální validátory W3C a zvalidovat jak zdrojový kód samotné stránky 10 , tak i zdrojový kód souboru CSS11. Stránku považujeme za validní, pokud je bezchybně napsaná podle zvoleného standardu. Pokud chceme mít jistotu, že prohlížeč stránku zobrazí vždy správně, je nutno použít DTD XHTML 1.1 nebo 1.0 Strict a zdrojový kód přizpůsobit poža­ davkům validátorů. Na oplátku budeme mít jistotu, že naše stránky vyhovují současným 10. http://validator.w3.org 11. http://jigsaw.w3.org/css-validator

9

2.5. CO JE DOBRÉ DODRŽOVAT nejpřísnějším standardům. 2.5.2 Obsah stránek Spousta lidí má za to, že kvalitní stránky se poznají podle bezchybného kódu nebo grafic­ kého zpracování. To, na co se často zapomíná, je vlastní obsah stránek. A to je přece ten důvod, proč se stránky vytvářejí, chceme někomu něco sdělit. Je zřejmé, že stránky s lepším grafickým designem průměrného uživatele zaujmou daleko více, ale grafický design nesmí být na úkor obsahové části webu. Také pro samotnou formulaci textových částí je dobré řídit se určitými pravidly, které vycházejí z publikování na papíře. Je lépe volit užší řádky, protože je známo, že dlouhé řádky se špatně čtou. Také je lépe volit bezpatkové písmo, protože je na monitorech počítačů snadněji čitelné. 2.5.3 Vzhled, barvy, ovládání Je třeba vyvážit zajímavý vzhled a jednoduché ovádání. I prohlížení přitažlivého a zají­ mavého webu se může vinou špatného ovládání změnit v problém pro každého uživatele. V celkovém návrhu je preferována především přehlednost a jednoduchost. I jednoduchý web lze udělat tak, aby byl pro uživatele zajímavý. Mezi začínajícími tvůrci webu převládá názor, že čím barevněji, tím lépe. Opak je prav­ dou, čím méně, tím lépe. Samozřejmě vše má své meze, optimální je využití dvou až tří dominantních vzájemně kontrastních barev, třech až čtyřech jejich barevných podtónů a vhodné barvy pozadí. Celkově bychom tedy neměli používat více než sedm barev. 2.5.4 Použitelnost Toto kritérium zohledňuje, jak snadno se web používá. Jeho využívání by mělo být intu­ itivní a uživatel by měl být schopen si jeho ovládání a používání snadno zapamatovat a při opakované návštěvě zase snadno vybavit a rychle oživit. Uživatel nesmí mít pocit, že mu stránka sama nebo její ovládání klade odpor. Všechny prvky navigace i ostatní logické prvky by měly být v očekávaných pozicích (tzn. umístění hlavního nadpisu na spodním okraji stránky není vhodné). Není na škodu také své stránky otestovat a pozorovat uživatele při jejich prohlížení. To nám odhalí spoustu detailů, na které jsme při tvorbě nepomysleli.

10

Kapitola 3

Interaktivní Web Interaktivní Web je takový Web, který umožňuje uživateli ovlivňovat jeho obsah.

3.1

Počátky interaktivního Webu

První inovací, která pozvedla Web nad pouhé prohlížení elektronických dokumentů, byla možnost automatického generování stránek. HTML-stránka není vlastně nic jiného než sou­ bor uložený na pevném disku WWW-serveru, který má své URL. Proto může URL ukazovat na jiný soubor (program), který vygeneruje HTML výstup, jež obsahuje aktuální informace. Protože spuštění programu vyvolává WWW-server, bylo nutné definovat způsob spuštění programu a předávání dat mezi programem a WWW-serverem. To řeší rozhraní CGI 1 . Takže už umíme vygenerovat dynamickou HTML-stránku, ale stále chybí způsob, jak by uživatel mohl ovlivňovat chování CGI-skriptu. Tento problém vyřešilo HTML 2.0, které umožnilo definovat na stránce formulářové elementy. Uživatelem vyplněné údaje z formu­ láře prohlížeč odeslal na server, který je předal CGI-skriptu k dalšímu zpracování. Tento způsob zůstal u mnoha služeb na Internetu zachován dodnes. Pro programování CGI-skriptů se používaly nejčastěji různé interpretované jazyky jako například Perl, ale i jiné programovací jazyky, jako například C nebo C++. Problém CGIskriptů spočívá v pomalé uživatelské odezvě, protože skripty se provádějí na serveru. Ře­ šení tohoto problému spočívalo v přesunutí provádění skriptů ze serveru na stranu uživa­ tele. Během roku 1996 spatřily světlo světa dvě různé technologie řešící tento problém. První z nich byl nový jazyk Java od firmy Sun Microsystems, který umožňoval vytváření krátkých programů zvaných Java-aplety, jež se začlenily přímo do HTML-stránky Výhodou Javy je nezávislost na platformě, protože lze spustit na libovolném operačním systému, po­ kud pro něj existuje interpret zvaný JVM2. Bohužel je tato technologie poměrně náročná na systémové zdroje. Druhou technologií byl JavaScript od firmy Netscape. JavaScript je velmi jednoduchý jazyk se syntaxí vycházející z jazyka Java a velmi usnadnil používání formulářů. Problémem JavaScriptu zůstává různý způsob implementace jednotlivými prohlížeči.

1. Common Gateway Interface 2. Java Virtual Machine 11

3.2. JAVASCRIPT 3.2

JavaScript

JavaScript je klientský skriptovací jazyk, který se používá v interaktivních internetových stránkách. Zapisuje se přímo do HTML kódu, což je velká výhoda, protože je to jednoduché. Díky tomu, že je to klientský jazyk a vše se tedy odehrává na straně klienta, JavaScript bude fungovat na stránce i v offline režimu. S tím souvisí i nevýhoda, že zdrojový kód je přístupný každému a stáhnout si jej může kdokoliv. Ačkoli JavaScript připomíná Javu, neni to to stejné. Java je programovací jazyk, který je komplexnější než JavaScript. Javascript byl vymyšlen jako lehce srozumitelný jazyk. Programátoři v JavaScriptu toho o programování nemusí vědět mnoho. Proto nejsou všechny prvky Javy implementovány do JavaScriptu. JavaScript je jazyk: •

interpretovaný - nemusí se kompilovat

•

objektový - využívá objektů prohlížeče a zabudovaných objektů

•

závislý na prohlížeči - funguje ale ve většině prohlížečů

•

case sensitive - záleží na velikosti písem v zápisu

•

syntaxí podobný jazykům C, Java a podobným

Velmi výhodným je jeho použití u formulářů, kde se uživatel dozví, co zapomněl vyplnit ještě před samotným odesláním dat na server, což zrychluje a zpříjemňuje práci s formu­ lářem. I v takovém případě ale nesmí chybět kontrola úplnosti dat na straně serveru, která bude funkční stoprocentně a bez výjimky, ať už má uživatel v prohlížeči JavaScript vypnutý či nikoliv. JavaScript může návštěvníkům používání stránky velmi zpříjemnit, ale nesmí se stát natolik důležitou součástí, aby jeho vypnutí v prohlížeči nebo použití prohlížeče, který JavaSript nepodporuje, bylo příčinou chybného zobrazení stránky, nebo dokonce nefunkč­ nosti nějaké její součásti. Tvůrce webu musí připravit alternativní možnost pro tyto uživa­ tele. JavaScript by měl být v každém případě používán pouze jako doplněk, bez kterého stránka neztrácí na funkčnosti a použitelnosti. 3.3

Jazyk PHP

PHP je serverový skriptovací jazyk (server-side) navržený pro potřeby webových stránek. PHP je Open Source 3 , tedy volně šiřitelná technologie. Není závislé na platformě a není vázané s žádným konkrétním serverem, může tedy běžet kdekoli. 3. http://www.opensource.org

12

3.3. JAZYK PHP 3.3.1 Původ PHP V roce 1994 vytvořil Rasmus Lerdorf v jazyce Perl jednoduchý systém počítání přístupů na své stránky. Poté ho přepsal systém do jazyka C, protože opakované zapínání interpretu Perlu zatěžovalo server. Systém se stal oblíbeným a začala jej využívat spousta uživatelů. Došlo k rozšíření systému, doplnění dokumentace následnému uvolnění pod názvem Per­ sonal Home Page Tools. Pan Lerdorf také vytvořil nástroj pro začleňování SQL-dotazů do zdrojového kódu strá­ nek, vytváření formulářů atd. Tento program se jmenoval Form Interpreter (FI). Spojením těchto dvou programů vznikl systém P H P / FI 2.0, který měl celosvětový úspěch. Následovaly další verze PHP, které přinesly mimo jiné podporu pro operační systém Windows. Vývoj PHP nadále pokračuje. 3.3.2 Co je potřeba pro tvorbu v PHP Programovat v PHP lze dvěma způsoby. První možnost je využití nějakého veřejného ser­ veru, který dovoluje publikovat na internetu a zároveň podporuje PHP V dnešní době je těchto serverů nepřeberné množství a poskytované služby se liší podle poplatků server od serveru. Druhou možností je nainstalovat server pro ladění PHP skriptů na svůj domácí počítač. Tato možnost je pohodlnější, protože nevyžaduje neustálé přenášení skriptu z domácího počítače na server. 1. HTTP server, například Apache nebo IIS 2. podporu pro PHP na tomto serveru 3. hodí se nějaký SQL server 4. vhodný editor Osobně využívám předností druhé možnosti, protože skýtá největší volnost. Využití ve­ řejného serveru je omezeno pravidly pro jeho využívání, kdežto vlastní server si můžete nakonfigurovat podle vlastních představ, i když to kolikrát není vůbec jednoduché. 3.3.3 Možnosti spuštění PHP PHP může běžet jako CGI-skript, který zpracovává jednotlivé stránky. Je tomu tak proto, že PHP může spolupracovat s libovolným WWW-serverem, který podporuje spouštění CGIskriptů. Výhodou je kompatibilita s téměř všemi WWW-servery Nevýhodou je, že pro kaž­ dou PHP stránku se opětovně spouští PHP interpret, aby odpověděl na požadavek. To vede k tomu, že na hodně využívaných serverech může docházet ke zpožděním. Druhou možností je zkompilování PHP jako modul do serveru Apache. V tomto případě je PHP interpret zaveden v paměti společně s WWW-serverem a nedochází k jeho opako­ vanému spouštění. Další výhodou je, že prostřednictvím této metody může PHP využívat 13

3.4. VYUŽITÍ PHP PŘI TVORBĚ WEBU některé vnitřní mechanismy, jako je třeba autentifikace přístupu k dokumentům, což není možné, pokud PHP běží jako CGI-skript. 3.4

Využití PHP při tvorbě Webu

Možnosti PHP jsou obrovské. S jeho pomocí se dají vytvořit opravdu zajímavé dynamicky generované a plně interaktivní stránky. Zahrnuje v sobě mnoho funkcí, které podporují ně­ kolik dnes často používaných internetových protokolů. Jako příklad uveďme: HTTP, FTP 4 , POP 5 , LDAP 6 a další. Podívejme se blíže na některé možnosti, které nám použití PHP nabízí. 3.4.1 Počítadlo přístupů Počítadla přístupů jsou nejčastější aplikací různých skriptů a u PHP tomu není jinak. Konec konců i původ PHP je spjat s počítadlem přístupů. Číslo které je na stránce zobrazeno repre­ zentuje, kolikrát WWW-server poskytl stránku uživatelům k dispozici. Jak říká Jiří Kosek, toto číslo je zajímavé jak pro návštěvníky stránky - stránka má hodně přístupů, prohlížím si tedy dobrou stránku - tak pro autory stránky - mé stránky jsou opravdu dobré, když si je prohlíží tolik lidí [A4]. Ale vše je třeba brát s rezervou, nikde není psáno, že i stránka se zajímavým tématem, která se uživatelům zrovna nelíbí, nemůže mít vysokou návštěvnost. Počítadlo může být b u ď obyčejné textové, kdy je PHP skriptem vygenerováno poža­ dované číslo, nebo grafické, kdy je místo počítadla vložen do stránky obrázek, jehož URL ukazuje na skript, který vygeneruje aktuální počet přístupů v podobě obrázku. Grafické počítadlo možná vzhledněji vypadá, ale má tu nevýhodu, že nezapočítává přístupy prohlí­ žečů, které nezobrazují obrázky. Číslo s dosavadním počtem přístupů musí být někde trvale zaznamenáno, nejčastěji v souboru nebo v databázi. Každý další přístup pak toto číslo zvýší o jedna. Pro přesnější představu o návštěvnosti stránek je vhodné omezit započítávání přístupu pro každou IP adresu na jednou za den. Ve výsledku to znamená, že přístup jednoho ur­ čitého uživatele je započítán jen jednou denně, byť by na stránku kliknul třeba stokrát za sebou. Ze statistického hlediska pak máme daleko lepší přehled o návštěvnosti, i když zdán­ livě se nám počet přístupů zmenší. 3.4.2

Formuláře

Velké formuláře bývají často nepřehledné. Důvodem je velký počet adresářových polí a také skutečnost, že některá pole jsou povinná a jiná ne. Pokud uživatel vyplňuje takový velký formulář a jeden nebo více povinných údajů zapomene vyplnit, bez PHP nemáme mož­ nost kontroly, zda byla všechna povinná pole řádně vyplněna. Částečně lze tento problém řešit JavaScriptem, ale toto řešení není samospasitelné, protože jak bylo řečeno, podporu 4. 5. 6.

File Transfer Protokol = protokol pro přenos souborů Post Office Protocol = protokol pro příjem elektronické pošty Lightweight Directory Access Protocol = protokol částečné zpřístupňující vzdálené adresáře

14

3.5. KNIHOVNA GD JavaScriptu lze v prohlížeči vypnout. V PHP stačí do skriptu, který data z formuláře zpra­ covává, vložit na začátek kontrolu, zda byla všechna povinná pole vyplněna a dokonce zda byla vyplněna v požadovaném formátu (například při vyplňování e-mailové adresy). V pří­ padě záporného výsledku místo zpracování vrátíme uživateli zpět formulář. Teď už sice dokážeme zkontrolovat, zda jsou zadána všechna potřebná data, v případě záporného výsledku však vrácený formulář neobsahuje předtím vyplněná data a uživatel musí vyplňovat celý formulář znovu. Tomu se dá zabránit tím, že doposud získaná data odešleme zpět s formulářem jako atributy v adresové řádce. 3.4.3 Diskuzní fórum Diskuzní fórum je celkem užitečná věc, kde se všichni uživatelé, kteří stránku navštíví, mo­ hou zapojit do diskuze na probírané téma. Výhodou umístění diskuzního fóra na stránky je, že zde uživatelé mohou sdělit svůj názor na stránky a tento se pak může veřejně diskutovat. Diskuzní fórum by mělo zvládat tři hlavní operace: 1. Vypsání dosavadních příspěvků do diskuze. 2. Přidání nového příspěvku. 3. Případné mazání příspěvků Implementace třetí operace není bezpodmínečně nutná, ale usnadní správu takového fóra. Nejlepší je použít k vytvoření datové struktury pro uchovávání příspěvků nějakou databázi. Skript by neměl vypisovat všechny příspěvky diskuze, ale jen deset až dvacet posledních, aby bylo fórum přehledné. Samozřejmě ke starším příspěvkům musí být umožněn přístup pomocí listování jednotlivých stránek diskuze. Tento úkol je pro PHP jako stvořený, protože toto všechno lze ve zjednodušené formě zařídit několika málo příkazy. 3.5

Knihovna G D

Open source knihovna GD 7 je určena pro dynamickou tvorbu obrázků. Výstup je možné uložit do souboru ve formátu PNG, GIF, nebo JPEG, což je obzvláště vhodné v prostředí WWW aplikací. GD je primárně napsaná v jazyce C, ale její „klony" jsou k dispozici pro Perl, PHP a jiné jazyky. Její využití dává možnost rychle kreslit obrázky, které se skládají z čar, oblouků a textů apod. Zde je základní přehled, co všechno tato knihovna dokáže: •

Vkládání jednotlivých pixelů

•

Kreslení přímek

•

Kreslení obdélníků

7. http://www.boutell.com/gd

15

3.5. KNIHOVNA GD •

Tvorba polygonů (zvládá jak pouze obrys, tak i polygon s výplní)

•

Kružnice a elipsy

•

Vyplňování zadanou barvou

•

Vkládání písma přímo do obrázku

Její pomoc se velmi hodí například při tvorbě internetová galerie, kdy je potřeba automa­ ticky vygenerovat zmenšené obrázky jako náhledy na původní obrázky. Od verze PHP 4.3.0 je knihovna GD verze 2.x součástí základní distribuce a není třeba nic stahovat ani instalovat. Stačí pouze přidat cestu ke knihovně. Na platformě Windows stačí v konfigurač­ ním souboru p h p . i n i odkomentovat řádek e x t e n s i o n = p h p _ g d 2 . d l i a změnit přístu­ povou cestu do adresáře e x t e n s i o n s na správnou, například takto: e x t e n s i o n _ d i r = "c:\php\extensions".

16

Kapitola 4

Internetové databázové aplikace Pro kvalitní prezentaci na Webu už dávno nestačí pár statických stránek s několika odkazy. Z důvodu velmi silné konkurence je v dnešní době nutné nabízet velké množství dalších užitečných služeb. Na Webu nějaké firmy by tedy měl být umístěn kompletní internetový obchod s aktuálním ceníkem, možností vyhledávání zboží apod. Jsou i takové firmy a or­ ganizace, které webové technologie používají k vytvoření svých rozsáhlých informačních systémů (viz třeba naše univerzita). Všechny výše uvedené aplikace pracují s velkým obje­ mem dat a ta jsou nejčastěji ukládána do databází. 4.1

Co je to databáze

Velmi jednoduše řečeno, databáze je systém pro zpracování a správu dat. Pokud data nejsou umístěna v nějaké databázi s určitou strukturou, je obtížné s nimi pracovat. Nelze například vyhledávat a řadit data podle různých kritérií. Databázi si lze představit jako místo, kam se ukládají všechny důležité a potřebné in­ formace. Přístup k informacím uloženým v databázi zajišťuje program, kterému se říká DBMS1. Převážná většina dnes používaných DBMS při uspořádání údajů v databázi vychází z relačního modelu dat. Název tohoto modelu vychází z relační algebry, což je matema­ tický aparát, na kterém relační model dat staví. V tomto modelu jsou údaje uspořádány do tabulek. [A4] V tabulce jsou obvykle shromážděny informace o jednom typu objektů. Sloupce tabulky většinou prezentují jednotlivé atributy příslušného objektu a každý její řá­ dek představuje právě jednu instanci daného objektu. 4.2

Jazyk SQL

Jazyk SQL2 má za sebou dlouhý vývoj. Existuje několik jeho verzí a každý server přidává svá vlastní rozšíření. Je to vlastně programovací jazyk, jímž formulujeme dotaz na SQL ser­ ver a ten při správně položeném dotazu odpoví. Odpověď má většinou podobu tabulky o jednom, více či dokonce žádném řádku (v případě, že dotazu nevyhoví ani jeden zá­ znam). Z databázové tabulky pak můžeme pomocí různých skriptů vytěžit potřebná data a 1. 2.

DataBase Management System = systém řízení báze dat System Query Languague

17

4.3. SQL SERVERY následně je zpracovávat. Základem databáze je tabulka, která má sloupce a řádky 4.3

SQL servery

Výběr SQL serverů je poměrně široký a jeho výběr pro každou větší aplikaci je klíčový. Je žádoucí zvážit mnoho faktorů, jako je cena, rychlost a kompatibilita s ostatními aplikacemi. Určitě se vyplatí zvážit i ostatní kritéria - například zda server umí správně řadit záznamy podle české abecedy. Servery lze rozčlenit podle jejich určení: MS SQL Server a Oracle pro prostředí s velkými nároky na výkon, PostgreSQL a MySQL z řady volně šiřitelných a přesto výkonných, a MiniSQL z nižší řady serverů. Podívejme se na tři z nich blíže. 4.3.1 PostgreSQL PostgreSQL 3 je databázový server, který vzniknul na Kalifornské univerzitě v Berkeley. Jeho součástí jsou pokročilé technologie, jako třeba dědičnost, objekty nebo možnost definování vlastních datových typů a funkcí. U hodně zatěžovaných aplikací nebo u aplikací, které pracují nad velkým množstvím dat, může vadit poměrně nízký výkon. Velkou výhodou PostgreSQL serveru však je, že zůstává pro všechny verze Unixu zdarma. 4.3.2 MySQL Velkou výhodou MySQL4 je je jeho rychlost. Vysoká rychlost serveru je způsobena zejména tím, že neobsahuje podporu pro transakční zpracování dat (transakcí rozumíme jeden či více SQL příkazů provedených jedním uživatelem, které končí úspěšnou změnou v databázi nebo uvedením zpět do počátečního stavu), což je také jeho největší nevýhodou. To ale větši­ nou nevadí, protože MySQL je velmi často nasazován jako databázový server k webovému s vzájemným spojením pomocí skriptů. MySQL má velmi dobrou podporu českého jazyka a běží na Unixu i na Windows. Pro osobní nekomerční užívání je MySQL zcela zdarma. Komerční využívání je zpoplatněno několika tisíci, což ovšem v porovnání s ostatními ko­ merčními servery vychází velmi levně. 4.3.3 MS SQL Server Tento databázový server je produkt z dílny firmy Microsoft a často běží na serverech pracu­ jících pod Windows NT. Tento server je placený a licence není nikterak levná. MS SQL Server se instaluje, ostatně jako většina programů Microsoftu, pomocí instalač­ ního programu setup. Pro spravování celé databáze je vhodné použít nástroj SQL Enterprise Manager, protože tento nástroj je pravděpodobně nejvýkonnější. 3. http://www.postgresql.org 4. http://www.mysql.com

18

4.4. PODPORA DATABÁZÍ V PHP 4.4

Podpora databází v PHP

PHP podporuje několik databázových systémů. Pro ovládání každého z nich jsou v PHP jiné funkce, i když jejich jména i použití jsou si navzájem velmi podobná. Funkce pro práci s da­ tabázovými systémy začínají prefixem, který označuje, pro jakou databázi je funkce určena a je od názvu funkce oddělen podtržítkem. Obecný zápis funkce by mohl vypadat takto p r e f i x _ n á z e v f u n k c e ( ) . Princip práce s je stejný pro všechny databáze. Nejprve se mu­ síme připojit k SQL serveru, vybrat databázi s níž chceme pracovat a poté můžeme zadávat SQL dotazy. Popis všech funkcí pro jednotlivé databáze je zahrnut v originální dokumentaci k PHP 4.4.1 Podpora PostgreSQL Tvar prefixu v PostgreSQL je Pg, takže obecný zápis funkce v pro tento databázový systém je P g _ n á z e v f u n k c e (). V distribuci PostgreSQL je dodáván jednoduchý řádkový klient p s q l . Ten v kombinaci s parametrem určujícím jméno databáze spustí řádkový klient, který umožňuje zadávání SQL-dotazů nad danou databází. Pokud při provádění SQL-příkazu dojde k chybě, PHP vypíše standardní chybové hlá­ šení a automaticky ukončí provádění skriptu. Lepší je před PHP-funkci vložit znak '@', čímž zamezíme zobrazování standardních chybových hlášení a můžeme si ošetřit chybové stavy sami. Toto řešení lze použít i pro MySQL a ODBC. 4.4.2 Podpora MySQL Tvar prefixu v MySQL je MySQL, takže obecný zápis funkce v pro tento databázový sys­ tém je MySQL_názevf unkce (). MySQL samotné nemá implementované nějaké pohodlné GUI 5 , použít můžeme jednoduchého klienta mysql, který je součástí distribuce. Tento kli­ ent umožňuje zadávání příkazů SQL a několika dalších příkazů souvisejících se správou databází [A4]. Výhodné je použít aplikaci phpMyAdmin 6 , která nabízí pohodlné a přehledné rozhraní pro komunikaci s databází. 4.4.3 Podpora ODBC ODBC 7 je vlastně rozhraní, které slouží jako prostředník mezi klientským skriptem a vlastní databází. Skript volá jednotně rozhraní ODBC a to předá požadavek databázovému ser­ veru. Výhodou použití ODBC je, že stejným způsobem můžeme přistupovat k databázím s různým DBMS, což má velký význam pro přenositelnost skriptu. I když bylo původně vy­ tvořeno pro platformu Windows, existují už i implementace pro Unix. Obecný zápis funkce pro práci s ODBC vypadá takto: ODBC_názevf unkce () . 5. Graphical User Interface = grafické uživatelské rozhraní 6. www.phpmyadmin.net 7. Open DataBase Connectivity

19

Kapitola 5

Stránky divadla na Fakultě informatiky MU Divadelní představení na Fakultě informatiky MU mají už dlouhou tradici. Tato tradice stu­ dentského divadla začala při Dies Academicus 1998 recesistickým představením Lambda Kalkulka. Do roku 2005 byla studentská divadelní představení realizována výhradně jako zájmová činnost. Od roku 2006 probíhají v rámci celouniverzitně volitelného předmětu Di­ vadelní hra. S touto změnou přichází i potřeba internetové prezentace, protože co není na internetu, jako by takřka neexistovalo. Dosavadní prezentace studentského divadla formou občasných novinových nebo časopisových článků se ve světle moderních informačních technologií jeví již jako nedostatečná.

5.1

Stručný popis jednotlivých částí Webu

Stránky jsou generovány pomocí systému PHP a odpovídají webovým standardům konsor­ cia W3C: XHTML 1.1 Strict a CSS 2.1. Jedinou výjimkou je použití tzv. podtržítkového hacku, což je trik, který využívá chyby v prohlížeči Microsoft Explorer. S jeho pomocí lze stránky optimalizovat pro tento často používaný prohlížeč. Podtržítkový hack je podle specifikace W3C gramaticky správný, ale už ne validní. Většina odborníků však použití podtržítkového hacku schvaluje. Jako databázový server jsem zvolil server My SQL pro jeho rychlost a snadnou dostup­ nost. Jeho nevýhoda neimplementované podpory transakčního zpracování dat zde nebude důležitá. Všechna data z webových stránek divadla jsou uložena v jediné databázi s názvem d i v a d l o . Pro samotné přihlášení k MySQL serveru slouží funkce d b _ c o n n e c t ( ) , která je uložena v souboru f u n k c e . php. To umožňuje snadnou editaci přihlašovacích údajů včetně jména databáze. Ve stejném souboru je také umístěna funkce l i s t d i r () pro práci s adre­ sáři a zjednodušená autentizační funkce a u t h e n t i c a t e (). Pro dynamičtější vzhled stránek se titulní obrázek s nadpisem náhodně mění. K tomu je využit generátor náhodných čísel prostřednictvím funkcí SRand () a Rand ( ) . První funkce inicializuje generátor náhodných čísel hodnotou udanou v parametru. Druhá funkce pak vygeneruje náhodné číslo v rozsahu udaném dvěma parametry. Do budoucna je možnost obměny nebo zvýšení počtu obrázků. 20

5.1. STRUČNÝ POPIS JEDNOTLIVÝCH ČÁSTÍ WEBU 5.1.1 Aktuality Zde se zobrazují aktuální informace o divadle a stránkách samotných. Aktuality je možno vypisovat podle data nebo abecedně podle uživatelů, kteří aktuality přidali. Standardně se vypisují po pěti záznamech, které jsou řazené podle abecedy - nejvýše je nejnovější zá­ znam. Počet standardně vypisovaných záznamů lze změnit přepsáním implicitní hodnoty proměnné $ l i m i t _ a .

5.1.2 Archiv Tato sekce slouží k uchovávání dat o minulých divadelních představeních. Je zde archiv článků publikovaných v různých periodicích, archiv dochovaných scénářů s režijními po­ známkami, videoklipů z průběhu vzniku představení a prezentačních plakátů. K přehrávání videoklipů ve formátu Real Media je využit plugin a u d i o / x - p n - r e a l a u d i o - p l u g i n .

5.1.3

Diskuze

Součástí stránek je jednoduché diskuzní fórum. Příspěvky se ukládají do databáze a vypi­ sují se po deseti. Počet zobrazovaných příspěvků lze snadno změnit přiřazením nové hod­ noty do proměně $rows. Uživatel s přístupovými právy může jednotlivé příspěvky mazat. S každým záznamem do diskuze je zaznamenávána i IP adresa a doménové jméno stroje, což může být dobrý pomocník v odhalování nic neříkajících přezdívek.

5.1.4 Historie Zde jsou přehledně zaznamenány informace o historii studentských divadelních předsta­ vení. Informace jsou řazeny chronologicky podle let a lze je upravovat prostřednictvím sekce Editace.

5.1.5 Galerie Galerie obsahuje fotografie související s divadelními představeními. Ať už jsou to fotogra­ fie z premiér, zkoušek nebo následných brainstormingových sezení. K jejich formátovaní na stránku jsou použity tabulky. Následné přidávání fotek na Web je uživatelsky velmi jedno­ duché, protože galerie je v podstatě bezúdržbová. Stačí vhodně pojmenovat adresář a celý ho překopírovat do adresáře a l b a v kořenovém adresáři stránek. Algoritmus napsaný s vy­ užitím knihovny gd a uložený v souboru r e s i ze . php sám vytvoří z obrázků náhledy a přidá do levého navigačního menu odkaz na nové album. Součástí galerie jsou i plakáty použité pro prezentaci studentských divadelních představení. K jednotlivým obrázkům je možné přidávat popisky. 21

5.1. STRUČNÝ POPIS JEDNOTLIVÝCH ČÁSTÍ WEBU 5.1.6 O předmětu V této sekci jsou zobrazeny informace o předmětu VV040 - Divadelní hra tak, jak jsou vy­ pisovány v ISu. Lze volit obodobí, pro které se mají informace vypisovat. Informace se dají aktualizovat prostřednictvím sekce Editace. 5.1.7 Editace V této sekci může uživatel s dostatečnými přístupovými právy editovat obsah stránek po­ mocí formulářových oken. Zdrojové kódy pro změny záznamů databáze jsou umístěny v souborech se sufixy _add, _ e d i t nebo _ d e l , podle určení. Na konci zpracovávání kaž­ dého z nich se odešle hlavička L o c a t i o n , která zařídí automatický návrat. Formulářová okna jsou testována JavaScriptem na úplnost údajů a pokud není nějaký povinný údaj vypl­ něn, formulář se neodešle a JavaScript nastaví kurzor do příslušného okna formuláře. Pokud prohlížeč JavaScript nepodporuje, nebo jej má uživatel ve svém prohlížeči vypnutý, je imple­ mentována server-side kontrola. Ta v případě neúplnosti údajů vrátí stránku s formulářem a vypíše barevně odlišené upozornění. V tomto případě skript usnadňuje uživateli práci tím, že vrací před odesláním vyplněné hodnoty, aby je uživatel nemusel zadávat znovu. Před jakýmkoliv vymazáním dat z databáze se zobrazí vymazávaná položka a uživa­ tel je požádán o potvrzení vymazání. To zabraňuje nechtěnému nenávratnému odstranění důležitých informací z databáze.

22

Kapitola 6

Závěr Hlavním cílem této práce bylo formou webových stránek vytvořit elektronickou prezentaci Divadelních představení na Fakultě informatiky MU, obsahující netriviální skripty a umož­ ňující základní jednoduchou správu stránek prostřednictvím webového rozhraní. Součástí stránek mělo být diskuzní fórum, galerie, archiv informací o divadle a informace o před­ mětu VV040 Divadelní hra. Tento cíl se podařilo splnit. Při vlastním vytváření webových stránek jsem se snažil splnit všechny zásady dobré tvorby, které jsou uvedeny v kapitole 2 této práce. Snažil jsem se, aby obsah stránek mohl uživatel s přístupovými právy snadno měnit bez nutnosti zasahovat přímo do zdrojového kódu. K tomu jsem využil webové formuláře a jejich obsluhu navrhnul tak, aby byla uživa­ telsky co nejpříjemnější. Struktura rozvržení stránek je založena na kombinaci kaskádových stylů a občasného využití tabulek a splňuje standard XHTML 1.1 Strict konsorcia W3C. Vi­ zuální uspořádání a grafická úprava je vytvořena za použití CSS verze 2.1. Návrh stránky je koncipován tak, aby se zobrazoval i v prohlížeči s vypnutým zobrazováním obrázků a na starších strojích s nižším rozlišením. Uspořádání logických prvků stránky jsem se snažil rozvrhnout tak, aby bylo uživatelsky co nejvíc přístupné a nezahlcovalo uživatele zbyteč­ nými a nepotřebnými informacemi. Důraz je kladen na vysvětlující návody pro používání implementovaného jednoduchého redakčního systému. Jsou zobrazeny jen tam, kde jsou potřeba. K docílení interaktivnosti stránek je použit nejrozšířenější klient-side skriptovací jazyk JavaScript a systém PHP. JavaScript je použit pouze pro kontrolu formulářů a pro případ jeho nedostupnosti je implementována další kontrola na straně serveru. Vlastní obsah jed­ notlivých částí stránek je uložen v SQL databázi. Pro práci jsem používal PHP verze 4.1.1 jako modul WWW-serveru Apache v. 2.0.55 a databázi MySQL. K databázi jsem pro snazší práci přistupoval pomocí grafického klientu PhpMyAdmin. Používání PHP spolu s data­ bázemi je velmi jednoduché a přitom účinné. Velkou výhodou je i to, že je poskytováno zdarma jako Open Source a proto má v oblasti vytváření dynamických internetových apli­ kací budoucnost zajištěnou.

6.1

Další vývoj

Další vývoj stránek Divadelních představení na Fakultě informatiky MU by mohl být spo­ jený s optimalizací pro vyhledávače SEO a v implementaci vyhledávání. 23

6.1. DALŠÍ VÝVOJ 6.1.1 SEO - optimalizace pro vyhledávače Optimalizace pro vyhledávače je činnost spočívající v úpravě webových stránek tak, aby se zobrazovaly na nejlepších pozicích ve výsledcích vyhledávání. Je dobré si uvědomit, že obsahová kvalita stránek je to nejdůležitější hledisko, podle kterého vyhledávače rozhodují, které stránky budou na předních pozicích. V konkurenčním boji se právě SEO stále více stává důležitou součástí kvalitní webové prezentace. Za základní pravidla lze považovat kvalitní a dobře strukturovaný obsah stránek, vhodně zvolenou strukturu URL adres, správné pojmenování obrázků klíčovými slovy, vhodně zvo­ lené, umístěné nadpisy atd. Lepšímu výsledku pomůže i použití metainformací de s c r i p t i o n a keywords. Umístění na předních pozicích ve výsledcích vyhledávání by mohlo zlepšit povědomí veřejnosti i studentů samotných o tak zajímavé činosti odehrávající se na FI, jakou student­ ské divadelní představení bezesporu je. 6.1.2

Vyhledávání

Pokud stránky umožňují fulltextové vyhledávání ve vlastním obsahu, jsou pro uživatele daleko přínosnější a příjemnější. Uživatel, který hledá nějakou informaci, může prostě zadat nějaký výraz do vyhledávacího okénka a hned ví, jestli se v obsahu stránky hledaný výraz vyskytuje, případně kde. Nejsnazší možností by bylo využití služeb některého internetového fulltextového vyhle­ dávače, jakým je například Google nebo Jyxo. Určitě zajímavějším projektem by však byla implementace vlastního fulltextového vyhledávače, který by byl napojený na databázi.

24

Reference

Knižní zdroje [AI]

Brázda, J.: PHP 4 - učebnice základů jazyka, Grada Publishing, 2003,80-2470442-0, h t t p : //www. g r a d a . c z .

[A2]

Cederholm, D.: Webdesign s webovými standardy, Zoner Press, 2004, 8086815-15-3, h t t p : / /www. z o n e r p r e s s . c z .

[A3]

Kosek, J.: HTML - tvorba dokonalých WWW stránek - podrobný průvodce, Grada Publishing, 1998,80-7169-608-0, h t t p : / / www. g r a d a . c z .

[A4]

Kosek, J.: PHP - tvorba interaktivních internetových aplikací - podrobný průvodce, Grada Publishing, 1999, 80-7169-373-1, h t t p : / / w w w . g r a d a . cz . 3.4.1,4.1,4.4.2

[A5]

Staníček, P.: CSS Kaskádové styly - kompletní průvodce, Computer Press, Praha, 2003, 80-7226-872-4, h t t p : //www. c p r e s s . c z .

[A6]

Simůnek, M.: SQL - kompletní kapesní průvodce, Grada Publishing, 1999, 80-7169-692-7, h t t p : / /www. g r a da. c z .

Časopisecké zdroje [BI]

Strupl, V.: Jak vypadá dobrý web?, CHIP, 2/05, h t t p : //www. c h i p , c z .

Internetové zdroje [Cl]

Bien, J.: Rámy rámce, čili frames, 21. 7.2003, Mraveniste.org, h t t p : / /www. mraveniste.org/weblog/2003/07/21-frames-l.html . 2.3.1, 2.3.2, 2.3.3

[C2]

Bien, J.: Validita CSS, 21. 10. 2004, Mraveniste.org, h t t p : / / w w w . mraveniště.org/weblog/2004/10/21-css-valid.html.

[C3]

Bříza, P.: Tvorba layoutu webu - teoretický úvod, 3. 3. 2004, Interval.cz, h t t p : / / i n t e r v a l . c z / c l a n e k . a s p ? a r t i c l e = 3 1 6 0 . 2.3.1, 2.3.3

[C4]

Hojtsy, G. a Jelínek, L. a Vrána, J.: Manuál PHP, 1997 - 2004, PHP.net, h t t p : //mirrors.inway.cz/manual/es.

[C5]

Janovský, D.: Jakpsát web, h t t p : //www. j a k p s a t w e b . cz . 2.3.1

[C6]

Prokop, M.: Co je XHTML, 1. 10. 2001, Interval.cz, h t t p : / / i n t e r v a l . cz/clanek.asp?article=3160. 25

[C7]

Satrapa, P.: HTML v příkladech, http://www.kit.vslib.cz/ -satrapa/docs/wwwprikl/index.html.

[C8]

Staníček, P: Proč používám XHTML, 14. 10. 2004, Interval.cz, h t t p : / / i n t e r v a l . c z / c l a n e k . a s p ? a r t i c l e = 3 6 0 9 . 2.2

26

Index CGI, CSS, 7-9, 20, 23 databáze, 17 DBMS, 17 Divadlo, 20 aktuality, archiv, 21 diskuze, 21 editace, 22 galerie, 21 historie, 21 VV040, 22 DTD,9

URL, 3,11 WWW, 3,11 WYSIWYG, XHTML, 3, 7, 9, 20,23 XML, 4

frames, 5 FTP, 14 GD,21 GD library, 15 HTML, 3,11 HTTP, 3 JavaScript, 12, 22 JVM, 11 Kaskádové styly, 7 Layout, 5 LDAP, 14 ODBC, 19 PHP, 12,13,19,20, 23 POP, 14 Rámce, 5 SQL, 17 SQL servery, 18 MS SQL Server, 18 MySQL, 18-20, 23 PostgreSQL, 18,19 Tabulky, 6 27

Dodatek A

Náhledy jednotlivých částí stránek

Obrázek A.l: Úvodník

28

A . NÁHLEDY JEDNOTLIVÝCH ČÁSTÍ STRÁNEK

c

Dioa<Jto na fakultě informatiku 9VT/

Obrázek A.2: Archiv publikovaných článků

i—*— iJľk.j

U H - Ů M• -

^—
trtu I F*

Tb-

o ^ J ******

r i h l i T b i t a m t h IPI>. F - k c + w * x i ^ r i I H I Ir-hJrHEW I n H W U • » f * L-IL-tCk LL»:
•'•' '

n*H»

HMFrm*»

.1...

d l - I C , 1-M-k.lE J4ÚÉr I l i U « v E n i E l U í . » T U L . h > U ) b n b l ^ H U * •- • ' » * • >. E. W ÍP I I F H I

-

Obrázek A.3: Úprava článku

29

A . NÁHLEDY JEDNOTLIVÝCH ČÁSTÍ STRÁNEK

MVAIM.Ľ1 NA l E Alíií(ílí INI'OlíhATIKY h U

_ UDttíflnň

-

ď

Q f T . P. 4 w r

Obrázek A.4: Galerie - Plakáty

• I u

• U O d h W U j H H l b ť i ť f a h hi'rjllrrl-'i J»*+l * ^ + P I l l ľ 1 I rr+iy.{>4l *- HP-T^VÍ frv^^- • I Ml ' I H f l M n PlIáJ *•}•*•*-) frrpHi -*r*»**u I r * - • HMbL^p, ^fra • Í U FŮOA 4 é * 4 kAM pMMťlii |fr W U -ŕ|/br** hni i^LkÉht I J p*Hh|*. r h l|jrh-t4lB». * 1 T * rat** fcjl ^11 • É | p ( f r * H F-'+c-iij-:n-ii Ti rkffi:i-i p-Mmit Mal inaplp •*! - r i - i ~ i u p**« puM-| iViÜaa JaťMŕri «I HhLrW*iUl|P^i kWubrih ;4lkU 4ťM|.

w*^ar.*ipai -IH I ? * * - * r* i '"•!•• i tUtUt.vi i-h— H - ^ H HMiutM

Obrázek A.5: Informace o předmětu VV040 Divadelní hra

30

Dodatek B

Obsah CD Součástí práce je také CD, na kterém jsou umístěny následující věci: •

Zdrojové kódy webových stránek Divadla na Fakultě informatiky

•

Zdrojový kód této práce ve formátu XML podle DTD DocBook.

•

Tato práce samotná ve formátu PDF.

•

Aplikace PhpMyAdmin verze 2.6.4-pl3 .

•

Webový server Apache verze 2.0.55.

•

Databázový server MySQL verze 3.23.58.

•

PHP verze 4.4.1.

31