Návrh internetových webových aplikací

Bankovní institut vysoká škola Praha Katedra informatiky Návrh internetových webových aplikací Bakalářská práce Autor: Tomáš Lang Bankovnictví, Informační technologie Vedoucí práce: Doc. Ing. Stanislav Horný, CSc Praha leden, 2009

Prohlášení: Prohlašuji, že bakalářskou práci na téma Návrh internetových webových aplikací jsem zpracoval samostatně a s použitím uvedené literatury. V Praze dne 10. června 2008 Tomáš Lang

Poděkování Rád bych poděkoval vedoucímu mé práce, panu Doc. Ing. Stanislavu Hornému, CSC, za odbornou spolupráci a pomoc při řešení mé bakalářské práce.

Anotace práce Bakalářská práce Návrh internetových webových aplikací zahrnuje vznik internetu od statických webových stránek přes dynamické stránky a v jádru se snaží objasnit důležitost návrhu webových aplikací s využitím propracované metodiky WebML. Pomocí příkladů se snaží vysvětlit tvorbu jednotlivých modelů této metodiky, které obsahujících různé funkční prvky a objasňuje důležitost vývojové fáze specifikace požadavků na webovou aplikaci. Anotation My bachelor thesis with name Design of internet web application includes rise of the internet from static web pages over dynamic pages and the core of the work is aimed to explain of importance of web application design using elaborate methodology WebML. In work are used examples to explain creation of models and their functional units of this methodology. My thesis also trying to explain importance of period of development process, where is explained specification of needs to web application.. +

Obsah ÚVOD... 8 1. STATICKÉ WEBOVÉ STRÁNKY... 9 1.1. WEBOVÉ STANDARDY... 9 1.2. HTML JAKO ZÁKLAD... 10 1.3 DESIGN POMOCÍ KASKÁDOVÝCH STYLŮ CSS... 12 1.3.1. Použití CSS... 13 2. DYNAMICKÉ WEBOVÉ STRÁNKY... 16 2.1 CLIENT-SIDE SCRIPTING... 16 2.2 SERVER-SIDE SCRIPTING... 18 2.3 SKRIPTOVACÍ JAZYKY A JEJICH ZÁKLADNÍ VLASTNOSTI... 20 2.3.1. PHP... 20 2.3.2. ASP... 23 2.3.3. JSP... 24 3. NÁVRH WEBOVÝCH APLIKACÍ POMOCÍ WEBML... 26 3.1 FÁZE VÝVOJE WEBOVÉ APLIKACE... 27 3.1.1. Specifikace požadavků na aplikaci... 28 3.2 DATOVÝ MODEL... 31 3.2.1. Vztahy mezi entitami a kardinalita... 32 3.2.2. Strukturované atributy... 34 3.2.3. I-SA hierarchie... 34 3.2.4. Příklad datového modelu... 35 3.3 HYPERTEXTOVÝ MODEL... 37 3.3.1. Model kompozice... 37 3.3.2. Navigační model... 42 3.4 OPERACE S DATY... 47 3.4.1. Create Unitl... 48 3.4.2. Modify Unitl... 49 3.4.3. Delete Unit... 50 3.4.4. Connect Unit... 50 3.4.5. Disconnect Unit... 51 ZÁVĚR... 53 SEZNAM POUŽITÉ LITERATURY... 54 7

Úvod Internet byl zpočátku navržen jako komunikační nástroj umožňující sdílení vědeckých výzkumů mezi universitami v podobě statických prezentací. Postupem doby však nezůstalo pouze u statických stránek. Příchod skriptovacích jazyků a databázových systémů dodal stránkám jejich dynamičnost a stránky začaly být více interaktivní, tedy schopné reagovat na různé požadavky uživatele a archivovat data. Tím nastala doba velké změny internetu, který je v dnešní době chápán jako jedno velké informační médium a dává prostor k tvorbě a rozvoji rozsáhlých webových aplikací majících podobu internetových obchodů, bankovních aplikací, rezervačních, redakčních nebo inzertních systémů. Této výhody samozřejmě využívají podniky, firmy nebo velké instituce pro jejich prezentaci, ale také pro využití svých podnikatelských aktivit. Důkazem může být v poslední době rostoucí počet internetových obchodů, či redakčních systémů. Kvalita těchto aplikací však není vždy stejná a proto je důležité věnovat velkou pozornost nejen samotnému programování webových aplikací ale také jejich analýze a návrhu, které by měly být základem každého softwarového projektu. Cílem této práce je podrobněji analyzovat výše uvedenou problematikou. Je rozdělena do tří základních částí. První část popisuje historický rozvoj internetu a využití statických webových stránek. Dále také uvádí vznik webových standardů a využití šablon stylů pro tento druh stránek. Druhá část je zaměřena především na dynamické webové stránky. Směřuje na dva základní způsoby zajištění interaktivity těchto stránek, kterými jsou Client-side a Serve-side scripting a součástí je také základní popis tří nejčastěji používaných skriptovacích jazyků PHP, ASP a JSP s jejich charakteristikou a historickým vývojem. Kořenem této práce je část třetí, ve které se zabývám návrhem webových aplikací s využitím metodiky WebML. Zde se zaobírám tvorbou základních modelů. Prvním je modelem datovým popisující část datového modelování. Druhým je hypertextový model, který se týká logické struktury a propojení jednotlivých stránek. Dále se také věnuji operativním jednotkám, sloužící pro operaci s proměnnými na webových stránkách. Poslední částí třetí kapitoly je důležitá fáze sběru požadavků na webovou aplikaci. 8

1 Statické webové stránky V počátcích rozvoje internetu byly internetové stránky převážně statického charakteru, nezajišťovali tedy žádnou interaktivitu, tedy komunikaci uživatele a serveru. Sloužily tedy k prezentaci daných informací, což byla jediná funkce, kterou statické webové stránky zajišťovaly, mezi takové informace můžeme řadit strategické informace, výsledky výzkumů vědeckých pracovníků, kteří sdíleli takto své poznatky například v oboru fyziky vysokých energií. V roce 1969 vznikla síť ARPANET (Advanced Research Project Agency), byla to experimentální síť, která vznikla za podpory grantové agentury ministerstva obrany USA, neměla žádnou centrální složku, aby v případě zničení některého prvku v síti byla stále funkční, stala se také prostředkem pro propojení některých univerzit a výzkumných center v USA. Síť ARPANET sdílení statických webových informací odstartovala. Dalším pokrokem ve vývoji byl vznik projektu WWW (Word Wide Web), ve volném překladu to znamená celosvětová pavučina a je to označení pro aplikace pracující na základě internetového protokolu HTTP, což je v podstatě propojení hypertextových dokumentů. Projekt WWW vznikl v roce 1980 v CERNu (Centre Européene de Rechere Nucléaire) Evropské centrum jaderného výzkumu, který leží na švýcarsko-francouzských hranicích nedaleko Ženevy. Za jeho tvůrce je pokládán pan Tim Berners-Lee, který navrhl jazyk HTML, napsal první webový prohlížeč a v roce 1990 spustil první webový server. 1.1 Webové standardy S dalším vývojem internetu a internetových stránek bylo nutné vytvořit vodítko neboli standard při vyvíjení a programování webových stránek. Vznikají tedy webové standardy, které se využívají proto, aby použitelnost webových stránek trvala co nejdéle pro nové budoucí webové prohlížeče ale také pro jejich starší verze. Je to také sada praktických doporučení (best practices) pro návrh, programování a design webových 9

stránek. Protože s pokrokem internetu autoři potřebovali do obsahu zasadit nejen textové informace, ale také ty grafické, začal se obsah a design stránek psát do jediného souboru, což zapříčinilo zmatek. Proto vznikly normy, při jejichž dodržování se zjednoduší a zefektivní práce programátora tím, že se striktně oddělí obsah stránek od designu. Zároveň se zpřístupní webové stránky širšímu okruhu uživatelů. Webové standardy zahrnují součinnost, použitelnost a přístupnost webových stránek. Je jich celá škála mezi nejznámější patří např. standardy značkovacích jazyků HTML, XHTML, tabulek kaskádových stylů CSS, nebo objektově orientovaného modelování DOM. Webové standardy dnes definuje konsorcium W3C jehož zakladatelem je Berners-Lee, kde členové konsorcia vyvíjejí společně s veřejností standardy pro World Wide Web, mimo jiné se také zabývá vzděláním a přístupností a také vývojem software a nabízí otevřenou diskuzi o Webu prostřednictvím fóra. 1.2 HTML jako základ Jedním z dominantních a základních jazyků pro tvorbu webových stránek je značkovací jazyk HTML (Hypertext Markup Language), poskytuje prostředky pro popis struktury textových dokumentů a to tak, že text dokáže logicky rozčlenit na nadpisy, odkazy, seznamy atd. zároveň dále pro podporu tohoto textu dokáže začlenit obrázky, formuláře či jiné objekty. Byl vytvořen v roce 1991 a jejím autorem byl Tim Berners-Lee. Ten označil první verzy HTML jako HTML 0.9. Umožňovala rozčlenit text do několika logických úrovní, zvýraznit text, zakomponovat do textu obrázky a také odkazy. Bernes- Lee nepředpokládal při vývoji HTML, že by autoři WWW stránek museli nutně tento jazyk znát. První verze WWW-softwaru byla programována pro operační systém NextStep a obsahovala prohlížeč a také integrovaný editor WWW stárek. Marc Anderssen však se svými kolegy z NCSA (National Center for Supercomputing Applications) programoval známý prohlížeč Mosaic, považoval za příliš obtížné zakomponovat do programu rovnou i editor HTML. Díky tomuto rozhodnutí a tomu, že ne každý provozuje na svém počítači operační systém NextStep, je dnes nutné, aby autoři profesionálních WWW stránek znali také jazyk HTML. S rostoucími požadavky uživatelů a také vývojářů webových stránek tak byli autoři webových prohlížečů nuceni obohacovat o některé prvky. Aby se zachovala 10

kompatibilita mezi jednotlivými modifikacemi navrhl Berners-Lee standard HTML 2.0. Verze 2.0 je dále rozčleněna do dvou úrovní, z nichž ta první jen lehce rozšiřuje předchozí verzi a druhá úroveň navíc zahrnuje práci s formuláři. Verze HTML 3.0 nebyla nikdy přijata jako standard, neboť byla hodnocena jako příliš mohutný skok vpřed a nenašel se nikdo, kdo by pro tuto verzi implementoval prohlížeč s jeho podporou. Proto se členové W3C shodli na vlastnostech, o které rozšířili verzi 2.0 a vytvořili tak HTML 3.2 ta byla vydána v roce 1997 a zachycuje rysy jazyka v roce 1996. Z verze 3.0 zůstali pouze okleštěné tabulky, ostatní prvky 3.2 jsou jen jakousi směsicí, kterou v té době podporovali nejmodernější prohlížeče. Další pokrokovou verzí bylo HTML 4.0 vydáno v roce 1997. Specifikace zahrnovala nové prvky pro formuláře a tabulky. A nově byly standardizovány i rámy které dále logicky rozčleňovaly text. Původním účelem této verze bylo, aby jednotlivé prvky označovaly význam daných částí dokumentu, vzhled má být tedy ovlivňován připojenými styly. Opravnou verzí HTML 4.0 bylo HTML 4.01 vydané v roce 1999, tento standard opravuje některé chyby a podle původního předpokladu se mělo jednat o verzi, po které by se přešlo na XHTML kterou budu dále popisovat. Od původního záměru se ale ustoupilo, a v roce 2007 byla založena nová pracovní skupina HTML, která vyvíjí nové verze HTML. Název nové specifikace byla navržena jako HTML 5.0 a měla by být hotová v roce 2010 2012 odkdy ji začnou vývojáři internetových stránek používat. Jazyk HTML je definovaný množinou značek, někdy také HTML tagů, a jejich atributů. Mezi značkami se uzavírá text dokumentu, což určí význam obsaženého textu. Část textu, která je uzavřena do otevírací a uzavírací značky, se nazývá element. Ve značce jsou pak definovány atributy, které určují vlastnosti elementu. Značky jsou většinou párové, přičemž počáteční značka je shodná s koncovou, která obsahuje ještě pro ukončení lomítko. Příklad takového HTML kódu je následující : Příklad: <html> <!-- toto je komentář --> <head> <title>titulek stránky</title> </head> <!-- tělo dokumentu --> <body> <h1>nadpis stránky</h1> <p>toto je odstavec dokumentu</p> <a href= www.seznam.cz >Toto je odkaz</a> 11

</body> </html> (Příklad HTML dokumentu) Vysvětlení příkladu: Celý kód je uzavřen do tagů <html></html> které znamenají začátek a konec HTML dokumentu. Dokument je pak opatřen hlavičkou mezi tagy <head></head>, kde je uveden titulek dokumentu. Samotné tělo dokumentu uzavírají tagy <body></body> a v příkladě uvádím pro jednoduchou představu nadpis první úrovně uzavřený mezi tagy <h1></h1>, odstavec dokumentu <p></p> a jednoduchý odkaz na www stránku, který se zapisuje pomocí tagů <a.></a>. Příklad je velice jednoduchý, účelem je spíše jednoduše znázornit to, jak zhruba HTML dokument může vypadat. 1.3 Design pomocí kaskádových stylů CSS CSS (Cascading Style Sheets) neboli tabulky kaskádových stylů jsou nástrojem pro způsob zobrazení webových stránek napsaných ve značkovacích jazycích jako je HTML, XHTML či XML. S příchodem stylů přišla doslova revoluce v tvorbě internetových stránek a aplikací, neboť hlavním smyslem tabulkových stylů je oddělit obsah stránky a její design. To značně ulehčuje práci při návrhu a programování, neboť existuje soubor s koncovkou CSS, nebo část dokumentu v HTML souboru, kde je navržen design stránky, tedy to, jak bude stránka vypadat z grafického hlediska. Samostatný soubor HTML sice poskytuje změnu designu pomocí značek a jejich atributů, ale jestliže chce autor měnit například barvu u několika stejných značek, musí to tak provést změnou atributů u všech těchto značek, což je velice neefektivní a časově náročné. Kaskádové styly tuto nevýhodu odstraňují tím, že se styl (například barva nadpisu) mění pomocí jediného souboru (jediné změny), který se připojí na začátek HTML dokumentu a poté jsou všechny tabulky, nadpisy stejné úrovně, odstavce apod. stejného stylu, například barvy, velikosti, odsazení 12

apod. a jediná změna souboru ovlivní vzhled v celém HTML dokumentu. Další výhodou je také možnosti změny designu celého webu, jednoduše a rychle výměnou souboru CSS. Kaskádové styly také urychlují načítání stránek na jednom webu, neboť se při načítání dokumentu soubor se styly nahraje do mezipaměti prohlížeče. Styl se tedy načte jen jednou a tím se zobrazování stránek velice urychlí, což je nespornou výhodou. Nevýhodou CSS je chybná interpretace, ačkoliv se o standardizaci kaskádových stylů stará také konsorcium W3C, ne vždy jsou styly v každém prohlížeči interpretovány stejným způsobem. Jedná se především o prohlížeč Internet Explorer, u kterého se například jinak zobrazuje šířka vnitřního okraje prvku, která se započítává do jeho celkové šířky. Tyto chyby by měly postupně vymizet s nástupem nových verzí Internet Exploreru. 1.3.1 Použití CSS Jak již bylo řečeno, samotný styl se buď připojí do úvodu dokumentu HTML, nebo se zapíše do samostatného souboru CSS a odkaz se uvede v hlavičce dokumentu. Dalším, ne příliš efektivním způsobem je zapsání stylu přímo u daného elementu stránky, což ale přímo odporuje smyslu využití CSS. Syntaxe jazyka CSS je jednoduchá, deklarace stylů spočívá v nadefinování pravidel pro zobrazování jednotlivých elementů nebo jejich skupin. Každá deklarace začíná jedním nebo několika selektory, které specifikují daný element nebo skupinu elementů. Následuje zápis vlastností (vzhledu) elementu do deklaračního bloku, vlastnost se zapíše jejím specifickým pojmenováním (většinou anglické klíčové slovo), následuje dvojtečka a poté se zapíše hodnota dané vlastnosti. Tím jsme definovali jednu vlastnost elementu, těch může být ale více, pak se oddělují středníkem a celý blok vlastností se uzavře do složených závorek. Pro představu uvádím příklad: 13

Příklad: <html> <head> <title>první příklad se stylopisem</title> <style type="text/css"> h1 { /* vzhled nadpisu první úrovně */ margin: 5px; /* okraj šířky 5 pixelů */ font-size: 12pt /* velikost fontu 12 bodů */ } p { /* styl odstavce */ text-align: center; /* text centrovat */ line-height: 10pt; /* výška řádku 10 bodů */ } </style> </head> <body> <h1>nadpis druhé úrovně</h1> <p>odstavec s normálním textem</p> </body> </html> (Styl připojený v hlavičce dokumentu HTML pomocí značek <style></style>) Vysvětlení příkladu: Opět jednoduše naznačuji HTML dokument, nyní však s připojeným CSS stylem mezi tagy <style></style>, takto připojený styl platí pro celý dokument, v němž je umístěn. Jak komentáře naznačují, styl se týká vzhledu nadpisu první úrovně h1{ }. U nadpisu h1 v příkladu zapisujeme, jak široký má být okraj nadpisu první úrovně (margin) a jaká má být velikost písma pro tento druh nadpisu (font-size). Dále je zapsán vzhledu odstavců v dokumentu p{ }. Zápisem říkáme, že každý odstavec bude orientován uprostřed dokumentu (text-align: center;) a výška řádku u odstavce bude 10bodů (line-height: 10pt;). Celý tento styl je uzavřený mezi v hlavičce dokumentu <head><head> a následuje tělo HTML stránky, kde se výše zapsané styly již projevují na textech nadpisu <h1><h1> a odstavce <p></p>. 14

Jak již bylo řečeno, styl CSS lze zapsat také do samostatného souboru s koncovkou.css, na který se odkážeme v HTML dokumentu, pro názornost uvádím příklad. Příklad : h1 { /* vzhled nadpisu první úrovně */ margin: 5px; /* okraj šířky 5 pixelů */ font-size: 12pt /* velikost fontu 12 bodů */ } p { /* styl odstavce */ text-align: center; /* text centrovat */ line-height: 10pt; /* výška řádku 10 bodů */ } (ukázka ze samostatného externího souboru styl.css) Vysvětlení: V druhém příkladě vidíme část stylu umístěného v samostatném souboru styl.css. Definují se zde vlastnosti elementů h1 a p (nadpis úrovně 1 a odstavec). Na samotný styl poté uvedeme odkaz v hlavičce dokumentu HTML, jak lze vidět na příkladu. Příklad <html> <head> <title>brelex.cz</title> <link type="text/css" href="styl.css" rel="stylesheet"> </head> <body> </body> </html> (Připojení stylu k dokumentu pomocí odkazu) Vysvětlení V hlavičce dokumentu mezi tagy <html></html> je umístěn odkaz na soubor se stylem stránky pomocí tagu <link >. Typ souboru určuje atribut type. Důležitým atributem je href, kde je uvedena cesta k souboru s CSS stylem. Poslední atribut rel vyjadřuje typ vztahu k dokumentu (stylesheet - styl). 15

2 Dynamické webové stránky S dalším rozvojem internetu a World Wide Webu a s příchodem skriptovacích jazyků se začal objevovat termín Dynamické webové stránky. Vlastností těchto stránek je poskytovat interaktivitu ( dynamičnost ) mezi uživatelem a serverem, jsou to tedy stránky, jejichž obsah je generován na základě požadavků uživatelů nebo hodnot proměnných, design a obsah žiji odděleně od sebe, data jsou uložena v databázi a jsou zobrazena tehdy, kdy o ně uživatel žádá, výhodou je že obsah se může měnit pouhým přidáním požadovaných dat do databáze nebo jejich úpravou. V postatě interaktivita může probíhat dvěma způsoby. 2.1 Client-Side Scripting Prvním způsob je Client-Side Scripting, tedy skript běžící na straně uživatele přímo v prohlížeči, který reaguje na jeho chování, sleduje tedy akce myši, klávesnice atp., může ale také reagovat na časové události. Webový prohlížeč je tedy typickou aplikací, která je na straně klienta spuštěna a uvnitř této aplikace běží další aplikace, se kterými uživatel pracuje nebo do nich zapisuje. Využití je tedy vhodné tehdy, kdy server nedisponuje výkonem, který by dostačoval pro připojení a souběžnou práci několika uživatelských aplikací najednou. Navíc aplikace běžící na straně klienta nezatěžují síť zasíláním dat, je zde také rychlejší odezva a zvyšuje se bezpečnost zpracovaný dat, které nejsou vystaveny riziku odposlechu. V praxi to probíhá tak, že se webová stránka načte ze serveru a obsahem dokumentu jsou také zakomponované skripty (aplikace), jejich funkce se však provádí už jen na straně klienta. Technologie, která se pro tento způsob používá, se označuje Dynamické HTML. U Client-Side Scriptingu se využívají skriptovací jazyky jako jsou JavaScript, ActionScript, které se současně používají s technologiemi DHTML (dynamické HTML) a Flash. To vše zajišťuje interaktivou v podobě zvuku, animací a změn textu na dané webové stránce. Příklad použití uvádím níže. 16

Příklad: <html> <head> <title>dhtml Test</title> <script> function changeall() { document.getelementbyid('div1').style.color ='blue'; } </script> </head> <body> <div id="div1" style="color: red;" onmouseover="changeall()"> Tento text se po najetí myší obarví modrou barvou... </div> </body> </html> (Příklad použití JavaScriptu (Client-side scriptu) ) Vysvětlení : Mezi atributy <script></script> je umístěn JavaScript, tedy skript, který definuje funkci changeall pro změnu atributu stylu style a jeho barvy color na modrou. Dále je v blokovém elementu <div></div>, který je identifikován pomocí id= div1, umístěn také atribut style, ve kterém definujeme barvu color:red;. Funkci changeall() našeho skriptu voláme v následujícím atributu onmouseover, který označuje uživatelskou událost. Tím je tedy řečeno, že text uvnitř blokového elementu se změní z barvy červené na modrou po najetí myši na tento text. 2.2 Server-Side Scripting Dalším způsob pro zajištění interaktivity je Server-Side Scripting, zde probíhá komunikace výhradně mezi servrem a webovým prohlížečem uživatele. Odpověď serveru a výsledná podoba stránky může být závislá například na datech odeslaných pomocí 17

HTML formulářů, na stavech proměnných v URL adrese, na časových hodnotách nebo například na stavu serveru. Ve starších dobách se provádělo server-side scriptování za použití kombinace programovacích jazyků C, Perl a Shell skriptů s využitím Common Gateway Interface. Tyto skripty byly vykonávány operačním systémem, Výsledky byly poté jednoduše odesílány pomocí web servru klientovi. V dnešní době jsou tyto on-line skripty psané v jazycích ASP, PHP a jiné. O jejich vykonání se stará přímo server, nebo nějakým rozšiřující modul. Pomocí Server-Side Scriptingu, je tedy interaktivita zajištěna na straně severu, mezi ty nejznámější programovací jazyky, kterých se v tomto případě využívá, můžeme řadit PHP, ASP, JSP nebo Perl, o některých z nich se dále ještě zmíním. Následující příklad uvádí užití jazyka PHP. Příklad: <form action="vstup.php" method="post"> <input type="text" name="vek"> Zapište váš věk <input type="submit" value="poslat"> </form> <?php $vek = $_POST['vek']; // převezme proměnou vek ze // vstupního pole formuláře if ($vek>=18) {$hlaska="jste zletilý";} // podmínka // jestli je věk větší nebo roven // 18ti do proměnné $hlaska // Zapíše hodnotu Jste zletilý if ($vek<18) {$hlaska="jste nezletilý";} // podmínka, jestli je věk menší // 18 zapíše do proměnné // Jste nezletilý?> <p> <?php echo "$hlaska"; // vypíš proměnnou $hlaska?> Je Vám : 18

<?php echo "$vek"; // vypíše proměnnou Věk?> let. </p> (Jednoduchy skript PHP) Vysvětlení: Tento příklad využívá HTML formulář zapsaný pomocí tagů <form ></form>, v kterém je umístěné vstupní pole a odesílací tlačítko (tagy <input>), do kterých uživatel zapíše svůj věk. Formulář se odešle serveru a ten pomocí následujícího PHP skriptu, uzavřeného ve značkách <?php,?>, převezme proměnné z formuláře a vyhodnotí pomocí podmínek (if) zda je uživatel zletilý či nezletilý a výsledek zapíše do proměnné $hlaska. Tato proměnná se poté vypíše jako výsledek pomocí funkce (echo) na obrazovce uživatele. 2.3 Skriptovací jazyky a jejich základní vlastnosti Skriptovací jazyky jsou vysoce úrovňové jazyky pro vytváření programovacích kódů, které jsou interpretovány přímo za chodu, narozdíl například od programů napsaných v programovacím jazyce C nebo C++, které jsou kompilovány pomocí počítačového procesoru a až poté spouštěny. Skriptovací jazyky, jejichž kódy jsou částí HTML dokumetu se obvykle používají pro připojení funkce webové stránce. Nejznámějšími skriptovacími jazyky jsou PHP, ASP, JavaScript, JSP a jiné. 2.3.1 PHP Tento skriptovací jazyk, za jehož tvůrce se pokládá Dánsko-Grónský programátor Rasmus Leordorf, byl vyvinut v roce 1995 především pro tvorbu webových aplikací. PHP je v podstatě směsí jazyků (Perl, C, Pascal a Java) a je platformě nezávislé, skripty tedy běží bez větších úprav na mnoha operačních systémech. PHP je opensource skriptovací 19

jazyk, je tedy volně šiřitelné a pro jeho využití není potřeba koupě licence, má velkou podporu knihoven pro grafické účely, práci s textem, práci se soubory, práci s většinou databázových systémů MySQL, ODBC, Oracle, PostgreSQL, MSSQL. Podporována je také velká řada internetových protokolů FTP, HTTP, POP3, SMTP, SMNP, IMAP. Skripty psaná v jazyce PHP jsou začleněny přímo do HTML nebo XHTML. Obvykle je PHP spuštěno na serveru pod názvem Apache, který slouží jako tzv. filtr pro textové a instrukční toky, uvnitř se tyto instrukce vykonají a výstupem je jen textový soubor většinou v podobě HTML dokumentu. Jak již bylo řečeno, jazyk byl vyvinut pro vývoj a tvorbu dynamických stránek a aplikací a je založen na server-side scriptování, podobně jako ostatní jazyky například ASP od firmy Microsoft nebo JavaServe Pages od Sun Microsistems. Pro PHP je také vyvíjena celá řada frameworků, tedy softwarových struktur, které při vývoji slouží jako podpora velkých webových projektů ve smyslu využití často psaného programového kódu. Jazyk PHP je velice oblíbený díky jeho jednoduchosti použití a také vývojářům nechává částečnou svobodu, protože kombinuje několik programovacích jazyků, to je výhoda tehdy, kdy vývojář přechází například z jazyka C++ na PHP. Proměnné jsou definovány pomocí předpony dolarového symbolu "$" a typ proměnné nemusí být specifikován jako v jiných jazycích, jazyk PHP je dynamicky typový, typ proměnné se nastaví teprve v době přiřazení hodnot, proto má PHP pro porovnávání dva operátory. Při použití operátoru == dojde při porovnání ke konverzi porovnávaných proměnných, druhý operátor je === a porovnání je pravdivé jen jsou-li operandy stejného typu. Na rozdíl od jmen funkcí a tříd se u jmen proměnných rozlišuje velikost písmen. Pro výstup slouží příkaz echo, je jedním z mnoha příkazů který výstup umožňují. PHP má tři typy jak komentovat kód, první je /* */ ten slouží pro blokové komentáře a zbylé dva // a #, které jsou pro řádkové komentáře. PHP má podobný styl syntaxe jako jiné vysoce úrovňové jazyky, podmínky if, smyčky for a while a návratové funkce jsou velice podobné jazykům C, C++, Java nebo Perl. Příklad: // Přiřazení a současná definice proměnných 20

$cislo = 200; // definice proměnné typu int $retezec = Můj první řetězec ; // definice proměnné typu string $pole = array('a', 'b', 1, 2 ) // definice heterogenního pole // Výpis proměnných echo $cislo; // vypíše číslo 200 echo $retezec; // vypíše řetězec Můj první řetězec echo $pole; // vypíše heterogenní pole // Test porovnání $cislo = 100; // definice čísla 100 jako proměnné int $retez = '100'; // definice čísla 100 jako řetězce // Toto porovnání ('==') platí díky automatické typové konverzi if ($retez == $cislo) { echo 'Jsou stejné'; } // Ale porovnání pomocí '===' neplatí, neboť nejsou stejné typy if ($retez === $cislo) { echo 'To by nešlo'; } Samotné PHP disponuje stovkami funkcí. Tyto funkce jsou dobře dokumentované na stránkách pro podporu a standardizaci PHP www.php.net. V současné době PHP neposkytuje funkce pro vláknové programování. Samotné funkce se definují klíčovým slovem function a následuje název funkce. Za tímto názvem jsou kulaté závorky, ty jsou prázdné tehdy, kdy funkce nepotřebuje žádné vstupní parametry. Tělo procedury je ohraničeno složenými závorkami a uvnitř může být jakýkoliv funkční PHP kod. Funkce a procedury se v PHP definují stejným klíčovým slovem (function) funkce se ale od procedury liší tím, že vracejí nějakou hodnotu. To zajišťuje klíčové slovo return, výraz, který je uveden za tímto klíčovým slovem a vrácen jako výstup funkce, jakýkoliv kód, který je uveden dále, se již neprovede. Pro znázornění uvádím příklad s popisem. 21

Příklad: <?php function DPH ($cena, $sazba) { $vysledek = $cena + (($cena/100)*$sazba); // výpočet ceny s dph return $vysledek; // vrácení výsledku funkce }?> Vysvětlení: Takto může vypadat jednoduchá funkce pro výpočet ceny s DPH. Název funkce je DPH, její vstupní parametry jsou $cena a $sazba. V tělu funkce se spočte DPH a přičte se k ceně položky, výsledek se uloží do proměnné $vysledek. Výsledek se poté pomocí return vrátí jako výstup funkce. 2.3.2 ASP Active Server Pages (ASP) je dalším server-side skriptovacím jazykem vyvinutým firmou Microsoft. ASP byl jeden z prvních jazyků, který v sobě integroval spouštění aplikací přímo na webovém serveru. Jeho největšími konkurenty jsou jazyky PHP a JSP. ASP je funkčně podobný jazyku PHP, je tedy možno pomocí něj vytvářet kvalitní dynamické HTML stránky, ale na rozdíl od PHP není volně šiřitelný, je u něj třeba koupě licence. Není tedy divu, že jeho podpora na webových serverech není taková jako u PHP. Pro chod webových aplikací napsaných v jazyce ASP je potřeba spuštěný webový server pro ASP. Nejčastěji je to server Microsoft IIS (Internet Information Server). ASP samozřejmě podporuje práci s databázemi na různých platformách, využívá k tomu technologii ODBC (Open Database Connectivity), která je rozhraním pro přístup k různým 22

druhům databází například SQL. Nejprve je však nutno mít na serveru nainstalované ovladače pro ODBC a dále definovat datový zdroj. Jazyk ASP definuje tzv. COM (Component Object Model) což je sada objektů, která lze v ASP kódu jednoduše vyvolat. Tyto modely zahrnují skupiny často využívaných funkcí a datových atributů. Mezi objekty ASP patří Application, Session, Request, Response a Server. Například objekt Session je objekt, sloužící pro práci s Cookies, tedy s proměnnými, jejichž hodnoty jsou udržovány při přechodu mezi různými stránkami. Využití leze uvést například tehdy, kdy potřebujeme udržovat hodnoty přihlášeného uživatele, který nakupuje a prochází stránkami naší aplikace internetového obchodu. Další objekt Request slouží například pro získání různých dat přes formuláře nebo dat o klientovi. Vlastnosti a metody Objektu Response pak mohou posloužit například k vracení obsahu prohlížeči. Objekt Server poskytuje různé metody pro převod speciálních znaků na jejich HTML ekvivalenty nebo znaků vhodných pro sestavení URL adresy. Dále je to objekt, který zprostředkovává přístup k různým externím metodám a funkcím. Samotný jazyk ASP se uvnitř HTML kódu odděluje těmito značkami <% a %>.Všechen text (kód) mezi těmito značkami je tedy ještě před odesláním zpracován a vyhodnocen. Pro příklad uvádím jednoduchý skript: Příklad: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=windows-1250"> <title>první ASP skript</title> </head> <body> <h1>výpis textu pomocí ASP</h1> <% Response.Write "Hello World." %> </body> 23

</html> Vysvětlení: Příklad využívá výše zmíněný objekt Response, který pomocí metody Write vypíše text. Výsledkem je tedy vypsání textu Hello World v prohlížeči klienta. 2.3.3 JavaScript Javascript je typickým příkladem client-side skriptu. Jedná se o interpretovaný skriptovací jazyk, je tedy hned pomocí interpretu po spuštění vykonáván, na rozdíl od překládaných jazyků, kde se musí jazyk pro spuštění nejdříve přeložit překladačem. Slouží pro vytváření dynamických stránek a jeho kód se vkládá přímo do HTML nebo XHTML kódu webových stránek. Ačkoli by se mohlo zdát JavaScript, kromě svého pojmenování, v zásadě nesouvisí s programovacím jazykem Java. Oba jazyky převzaly podobnou syntaxi z programovacího jazyka C. O prvotní vznik JavaScriptu se zasloužil Berndan Eich, tehdejší pracovník firmy Netscape. Tehdy nesl tento skriptovací jazyk jméno Mocha. Později byl přejmenován na LiveScript a nakonec dostal název JavaScript. Pojmenování bylo s největší pravděpodobností marketingovým tahem, neboť budí dojem, že JavaScript vychází z programovacího jazyku Java a firma Netscape tím chtěla dát JavaScriptu punc nového, vysoce kvalitního programovacího jazyka pro webové aplikace, ačkoli kromě pojmenování má podobnou pouze syntaxi. Lidé se mohli s prvními JavaScripty setkat v prohlížeči Netscape ve verzi 2.0B3 v prosinci roku 1995. JavaScript byl a je velmi flexibilním programovacím jazykem a proto se stal jedním z nejpopulárnějších a snadno naučitelných skriptovacích jazyků, který se v roce 1997 dočkal také standardizace, asociací ECMA (Europian Computer Manufacutres Association) a v srpnu 1998 asociací ISO (International Organization for Standardization). 24

Jak již bylo řečeno primární použití JavaScriptu je vkládání funkcí do HTML, tyto funkce poté mohou vykonávat následující operace: Otevírání kontrolních oken například s různými nástroji nebo samotné navigační menu. Provádění validačních operací, pro akceptaci dat před jejich odesláním na server. Nebo změnu obrázků kurzoru při přejetí myši nad odkazem. Java aplikace je spuštěna v prohlížeči uživatele, z toho důvodu je odezva na spuštěné operace rychlejší než u Server-side skriptu, tím se stává aplikace více živější. Navíc jsou JavaScripty schopné reagovat na uživatelské úkony jako například stisky různých kláves. O překlad JavaScriptů se stará JavaScript Interpreter. Prvním takový překladač byl implementován pomocí jazyka C a to Brendanem Eichem pro prohlížeč Netscape nesoucí název Spider Monkey. Nejběžnějším prostředím pro spouštění java skriptů je tedy webovský prohlížeč, ten typicky používá aplikační programovací rozhraní API pro vytváření objektů programovaných v JavaScriptu. Následující příklad uvádí jednoduchý skript spuštěný v prohlížeči uživatele. <html> <head><title>jednoduchý skript</title></head> <body> <script type="text/javascript"> document.write('ahoj světe!'); </script> </body> </html> Skript jednoduše vypíše pomocí funkce dokument.write() text Ahoj světe do prohlížeče uživatele. 25

3 Návrh webových aplikací pomocí WebML V dnešní době vývoje rozsáhlých webových projektů jako jsou internetové obchody, redakční systémy nebo třeba bankovní systémy, je nutné takový projekt přesně analyzovat a navrhnout pro zajištění správné funkčnosti a chodu. Proto v oblasti softwarového inženýrství vznikla metodika pro danou problematiku určená. Je to metodika a také modelovací jazyk WebML (Web Modeling Language) vyvinutý na technické univerzitě v Miláně. WebML nabízí dnešním programátorům webových aplikací posun v oblasti vývoje o jednu úroveň výše. V podstatě se vývojář zabývá již jen analýzou, návrhem a optimalizací aplikace a nestará se o programový kód psaný například v jazyce ASP, to značně snižuje jak finanční tak časové nároky. Výchozím cílem WebML metodiky je tedy podpora návrhu a implementace rozsáhlých webových aplikací, které jsou typické především sběrem a udržování velkého množství dat. Takovými systémy mohou být právě internetové obchody, webové aplikace různých institucí, digitální knihovny nebo velké korporátní portály. WebML je sadou formláních grafických specifikací a podporuje celý životní cyklus vyvíjeného produktu. V dnešní době vzniká i komerční využití tohoto jazyka (metodiky) například v podobě CASE nastroje WebRatio. Metodika je založena na těchto základních modelech datový, hypertextový a prezentační, tím se v podstatě oddělí informační obsah od struktury a navigace webové aplikace. Všechny modely jsou u WebML ukládány ve formátu XML, takto může například vypadat Obrázek č.1 - Strom XML dokumentu 26

Datový model je v podstatě konceptuální model, který je víceméně shodný s entitně relačním ER diagramem modelovacího jazyka UML. Jeho hlavním smyslem je návrh datové struktury webové aplikace. Tento model lze po jeho sestavení snadno převést do různých databázových relačních systémů jako je Oracle, MSSQL, PostgreSQL a další. Dalším modelem je model hypertextový, je nejdůležitějším modelem celé metodiky a je složen z dalších dvou modelů. První je kompoziční model, který popisuje samostatné webové stránky a logické části na webových stránkách uložené (unist). A druhý je model navigační, ten sleduje provázanost mezi jednotlivými stránkami. V podstatě se dá říci, že hypertextový model sleduje funkčnost a strukturu aplikace na konceptuální úrovni, tedy na úrovni, kdy ještě není známo, jak bude aplikace vypadat po grafické stránce, a tehdy, kdy nezáleží na implementačních detailech. Posledním modem je model prezentační, který je chápán jako transformace předešlých modelů do konkrétní grafické podoby. Transformace se provede ze strukturálního a hypertextového modelu, které jsou zapsány pomocí značkovacího jazyka XML. Vstupem pro prezentační model je tedy XML dokument. Prezentace proběhne tak, že se připojí dokument se styly XSL ke vzhledu stránek. XSL styly berou jako vstup WebML specifikaci psanou v XML dokumentu, která vyhovuje standardu DTD (definice typu dokumentu) standardu správné struktury. Výstupem jsou poté grafické šablony stránek zahrnující značkovací jazyk a ostatní programové skripty. WebML může obsahovat mnoho předdefinovaných prezentačních šablon stylů. Podrobněji popíši jednotlivými modely v dalších kapitolách. 3.1 Fáze vývoje webové aplikace WebML metodika samozřejmě také definuje přesný návod na to, jak postupovat při celkovém návrhu webové aplikace. WebML metodika nezahrnuje jen fázi návrhu webové aplikace, ale také definuje tzv. Development Process jehož struktura zahrnuje její celý životní cyklus. Do životního cyklu aplikace paří tyto fáze: specifikace požadavků, návrh datového modelu, návrh hypertextového modelu, implementace, testování a údržba. Následující kapitoly bych rád věnoval fázi zadání tedy specifikaci požadavků. 27

3.1.1 Specifikace požadavků na aplikaci Tato fáze vývoje je nepochybně jedna z nejdůležitějších fází, která zásadním způsobem ovlivňuje kvalitu a úspěch celého projektu. Nedostatečné úsilí věnované této problematice vede při změně zadání - specifikace požadavků k velice nákladným a pracným zásahům do rozpracovaného či hotového projektu. Proto je nezbytnou nutností věnovat této části maximální pozornost. Kvalita zadání je přímo úměrná kvalitě výsledné webové aplikace. Výsledkem fáze specifikace požadavků je uživatelsky orientovaná a snadno pochopitelná specifikace. Je to soubor požadavků na webovou aplikaci, který je srozumitelný pro obě strany, jak pro stranu zákazníka tak dodavatele. Specifikace požadavků se skládá ze dvou částí, kterými jsou sběr požadavků a analýza požadavků. Sběr požadavků je fáze, ve které musíme vytvořit základní obraz budované aplikace. Požadavky na aplikaci nejčastěji získáme při konzultacích se zákazníkem, nebo také sběrem různých druhů dokumentace týkajících se našeho projektu. Zkušenější zákazníci dodávají kvalitní soubor požadavků, který vytvořili na základě schvalování budoucí aplikace. Tyto dokumenty nám samozřejmě mohou také velice pomoci. Při sběru požadavků rozlišujeme následující typy informací: Uživatelská identifikace jedná se o sepsání druhů uživatelů, kteří budou hotovou aplikaci používat. Funkční požadavky popisují veškeré funkce, které bude vyvíjená aplikace poskytovat. Patří mezi základní část sběru požadavků. Pro tento účel slouží nejčastěji Use-Case diagramy často využívané i v jiných metodikách týkajících se návrhu softwaru. Požadavky na data - slouží pro identifikaci veškerých dat, se kterými bude naše aplikace pracovat. Jedná se spíše o konceptuální návrh, kompletní návrh se provede až v datovém modelu. Požadavky na personalizaci jedná se o koncept návrhu obsahu a funkcí pro různé uživatele, založený na přístupových právech a jiných preferencích. Nefunkční požadavky popisují především technologické požadavky, tedy například požadavky jako jsou: 28

použitelnost (přístupnost aplikace tak, aby se uživatel v aplikaci jednoduše orientoval a mohl aplikaci snadno obsluhovat), výkonnost udává se v počtu operací, které zvládne webová aplikace provézt za jednotku času a také časovou odezvu při práci s aplikací. bezpečnost definice požadavků na ochranu dat, osobních údajů, autentifikace uživatelů, šifrování dat mezi uživatelem a aplikací atp.. rozšířitelnost popisuje požadavky na jednoduchost rozšíření aplikace v důsledku různých změn nebo úprav požadavků. Další fází při specifikaci požadavků je analýza požadavků, ta se týká formalizací požadavků, které jsme získali při jejich sběru v předešlé fázi. Nejdříve bude nutné rozdělit jednotlivé uživatele naší aplikace do různých skupin. Ke každé skupině bychom měli sepsat jejich popis, dále případy užití aplikace, data která budeme u dané skupiny sledovat (jméno, příjmení, e-mail ), kdo bude nadřazenou/podřazenou skupinou dané skupiny uživatelů a také popis dat, ke kterým bude mít uživatel přístup a které bude moci spravovat. Analýza požadavků se dále týká Use-Case diagramů. Tyto diagramy jsou také často využívány i v jiných metodikách - nejznámější např. UML (unified modeling language), použití a notace je prakticky stejná i u WebML metodiky. Use-Case diagramy formálně popisují případy užití skupin uživatelů. Každá skupina má své specifické případy užití, u kterých je nutno popsat jejich průběh, různé podmínky (vstupní, výstupní) a účel. Příkladem případu užití může být například sestavení (zadání) semestrální práce a jejich náležitostí vyučujícím. Use-Case tohoto příkladu uvádím na obrázku 29. 29

Obrázek č.1 Use-Case zadání semestrální práce. Obrázek č.29 ukazuje jednoduchý případ užití, kdy kantor jako reprezentant jedné skupiny uživatelů sestavuje zadání pro studenty s jeho dalšími náležitostmi. Nejprve sestaví samotné zadání, poté vybere studenty (řešitele) tohoto zadání ze seznamu (výběr je ošetřen smyčkou), dále zadá termín odevzdání, popřípadě více termínů a nakonec zapíše popis požadovaného zadání a systém odešle automaticky e-mail vybraným studentům, který je informuje o zadané semestrální práci. Další záležitostí při řešení analýzy požadavků je sestavení datového slovníku (Data Dictionary). při jeho sepisování se snažíme nalézt veškeré důležité objekty resp. entity, které jsme nalezli při sběru požadavků. Každý takovýto objekt je identifikován jménem, popisem, základními vlastnostmi, příkladem instancí a vztahy s jinými objekty. Součástí analýzy požadavků je také sestavení mapy webové aplikace. Tento krok je možný po výše zmíněných fází analýzy požadavků, kdy máme sestaveny skupiny uživatelů, připravené případy užití systému (Use-Case diagramy) a sepsaný datový slovník. Toto vše nám slouží jako vstup při tvorbě těchto map. Výstupem jsou poté mapy webové aplikace představující určité pohledy na webové stránky. Počet těchto pohledů je závislý na počtu uživatelských skupin a požadavků na personalizaci aplikace. Každá taková mapa je poté definována parametry jako jsou jméno, popis mapy, skupina, pro kterou je daná mapa určena, případy užití, které se týkají dané mapy a nakonec oblasti, do kterých se mapa rozčleňuje. 30

Poslední částí, kterou bych rád zmínil, je definice základních grafických elementů webové aplikace, tedy sestavení základního grafického návrhu. Návrh zahrnuje rozložení nejrůznějších sloupců, tabulek nebo buněk uvnitř stránek. Součástí je také návrh rozmístění navigačních komponent, grafických reklamních prostředků (loga,banery). Návrh se také týká stylu nadpisů, odstavců a dalších textových prvků. Mezi základní požadavky grafického návrhu samozřejmě patří také kompatibilita mezi webovými prohlížeči. 3.2 Datový model Jak jsem již uvedl, datový model slouží k modelování datové struktury pro webové aplikace a jejich databázové systémy. Datové modelování je základem každé softwarové analýzy, a proto se nevyhne ani modelování webových aplikací. Datové struktuře by se měl klást veliký význam, neboť zásadně ovlivňuje správný chod, udržitelnost a rozšiřitelnost webové aplikace. Výsledkem je konceptuální datový model, který vytváří jednoduchý a srozumitelný pohled na data, kdy výsledná podoba tohoto modelu není závislá na implementaci. Model je v podstatě zobecněním datové struktury, která se může dále implementovat pro různé databázové systémy, jako jsou MySQL, Oracle apod.. U datového modelování se nejprve vytváří konceptuální model. Základním prvkem konceptuálního modelu je entita její instance a vztah mezi entitami. Entita je prvek, který definuje daný soubor objektů reálného světa pod jedním jménem. Příkladem může být entita student, osoba, pacient. Její instance pak může být např. Jan Novák, Petr Malina, Josef Novotný. Každá entita dále disponuje svými atributy. Atribut můžeme popsat jako vlastnost dané entity, tak například u entity osoba můžeme sledovat atributy jméno, adresa, telefon nebo věk. Ke každému atributu náleží také jeho datový typ, metodika WebML definuje následující datové typy : INTEGER STRING FLOAT DATE TEXT TIME 31

URL BLOB BOOLEAN Entity s jejími atributy uvádím na příkladě : Obrázek č.2 Entita Kniha s atributy (Titul, Rok Cena, Obrázek). Z předešlého textu vyplývá, že všechny modely ve WebML jsou vnitřně ukládány v jazyce XML. Definice naší entity Kniha v XML pak vypadá následujícím způsobem: <ENTITY id= Kniha > </ENTITY> <ATRIBUTE id= Titul type= String /> <ATRIBUTE id= Rok type= String /> <ATRIBUTE id= Cena type= Float /> <ATRIBUTE id= Obrázek type= Image /> 3.2.1 Vztahy mezi entitami a kardinalita Víme již že, mezi entitami existují vztahy. WebML povoluje pouze binární vztahy, tedy vztahy vznikající jen mezi dvěma objekty. Vztahy se používají pro modelování mnoho 32

různých typů vazeb (fyzická, logická, závislostní atp. ) mezi entitami. Dále je nutné definovat termín role, který značí jeden ze směrů, na který můžeme pohlížet ve vztahu. Příklad vztahu je na obrázku č.3. Obrázek č.3 - Vazba mezi dvěma entitami (Autor, Kniha). Pro každý směr vztahu může dále existovat kardinalita vztahu. Kardinalita představuje minimální nebo maximální počet instancí u dané entity. Pro jednoduchost uvedu výše uvedený příklad. Máme vztah mezi instancemi Kniha a Autor, u role autorem_knihy je kardinalita 0:N, která říká, že autor může vydávat žádnou nebo více knih. V opačném směru kniha_od_autora je kardinalita 1:N a znamená, že kniha je napsána minimálně jedním nebo více autory. Vše je pro názornost ještě uvedeno na obrázku č.4. Obrázek č.4 - Vazba mezi dvěma entitami (Autor, Kniha) s kardinalitami 33

Kardinalita u datového modelování důležitou součástí, protože více zpřehledňuje datový model, který je pak více srozumitelný, jak pro analytika, tak pro programátora. Navíc má velký vliv na design fyzické struktury dat ukládaných v databázi stránky. 3.2.2 Strukturované atributy Strukturovaný atribut je atribut, který má svou vnitřní strukturu. Prakticky to znamená, že má entita atribut nebo kolekci atributů, které mají svou vnitřní stavbu. Metodika WebML řeší tuto problematiku pomocí tzv. slabých entit (weak entity) a to tak, že se k hlavní entitě vytvoří jiná entita, která nemůže existovat bez té hlavní. Mezi hlavní a závislou entitou se vytvoří vztah a definuje se potřebná kardinalita. Příklad strukturovaného atributu může být ten, kdy u jedné osoby sledujeme více adres. Pro lepší představu uvádím obrázek č.5. Obrázek č.5 Strukturovaný atribut. 3.2.3 I SA hierarchie Jako v jiných metodikách, tak i WebML umožňuje definici hierarchie entit nebo-li tzv. I-SA hierarchie někdy také generalizaci. Je to v podstatě spojení dvou entit tak, že jedna entita je nadřazena té druhé. Podřazená entita nikdy nemůže existovat bez nadřazené a dědí po ní její atributy. Hierarchie může mít několik úrovní, avšak podřazená entita může mít pouze jednu entitu, která je jí nadřazená. 34

Obrázek č.6 - Generalizace mezi entitami. 3.2.4 Příklad datového modelu Jako závěr této kapitoly uvádím příklad návrhu datového modelu, který byl implementován do dnes funkčního internetového obchodu. Tento příklad mi byl inspirací z učebních materiálů z internetových stránek www.webml.org. Entity, které se vyskytují v našem modelu, zjistíme ve fázi sběru funkčních požadavků, který je nedílnou součástí analýzy každého softwarového projektu a je prováděna v úvodní části všech návrhů. Funkční požadavky konzultujeme se zákazníkem a na základě těchto rozhovorů sestavíme seznam všech potřebných entit nutných pro návrh datového modelu. Dále ke každé entitě vytvoříme její atributy a vazby, tím vznikne kompletní datový model. V našem názorném příkladě se jedná o společnost, která se zabývá prodejem nábytku po celém světě a její snahou je přilákat další zákazníky tím, že vytvoří webovou aplikaci / internetový obchod s nabídkou svých produktů. U aplikace / internetového obchodu budeme sledovat tyto entity: produkty, které firma nabízí, speciální nabídku tj. kombinaci zboží prodaného za zvýhodněnou cenu. Dále sledujeme zásoby produktu, jeho technický popis a jeho fotografii(grafické znázornění). První návrh konceptuálního datového modelu by tedy mohl vypadat takto: 35

Obrázek č.7 Návrh datového modelu internetového obchodu ACME. Jak je vidět, všechny jmenované entity jsou znázorněny i s jejich kardinalitami. Speciální nabídka je kombinací zboží a je ve vztahu s entitou produkt. U entity produkt je kardinalita 0:N a znamená, že 0 nebo více produktů je obsaženo v kombinaci. Kardinalita 1:N u kombinace vypovídá, že součástí kombinace může být minimálně jeden nebo několik produktů. Dalším vztahem je produkt-fotografie, zde je u produktu kardinalita 0:N, která říká, že produkt má žádnou nebo několik fotografií, a kardinalita 1:1 naznačuje, že právě jedna fotografie patří pouze k jednomu produktu. Každý produkt dále obsahuje technický popis. Ve vztahu kardinalita 0:1 znamená, že produkt má buď žádný, nebo maximálně jeden technický popis a právě jeden popis patří maximálně k jednomu produktu, což naznačuje kardinalita 1:1. Poslední entita zásoba není ve vztahu k žádné z předešlých entit a s louží k informativním účelům o stavu zásob v různých prodejnách na celém světě. Dále nám chybí v modelu definice atributů u jednotlivých entit. Entity, jejich vztahy a atributy můžeme také odhalit analýzou grafických náhledů stránek. Při analýze hledáme objekty na stránkách, které nám odhalí entity a atributy a seznamy objektů, které nám usnadní nalezení vztahů mezi entitami. Názorný příklad toho, jak je možné odhalit entitu s jejími atributy v náhledu stránky lze vidět na obrázku č. 8. 36

Obrázek č.8 - Náhled stránky a odvození entity produkt. Obrázek č.9 Hotový datový (strukturální) model. 3.3 Hypertextový model Po dokončení datového modelu následuje neméně důležitá část, která na datový model přímo navazuje. Jedná se o hypertextový model, který popisuje logickou strukturu uspořádání a funkčnost jednotlivých stránek. Hypertextový model také definuje odkazy mezi jednotlivými stránkami a částmi stránek. V podstatě se hypertextové modelování skládá ze dvou neoddělitelných sub-modelů, kde není možná existence jeden bez druhého. Jedná se o model kompozice a model navigace. 3.3.1 Model kompozice WebML definuje kompoziční model jako logické uspořádání elementů na každé webové stránce. Každá webová stránka je tedy sestavena z tzv. Units (elementárních částí) jsou to atomické informační prvky stránek a mají své charakteristické vlastnosti. Každá Unit musí získávat nějakým způsobem svůj obsah, pro tento účel se Units skládají ze 37