Informace o webových aplikacích

Naposledy aktualizováno 20. 12. 2021

Uživatelské rozhraní v aplikaci Dreamweaver a jejích novějších verzích bylo zjednodušeno. Výsledkem je skutečnost, že některé možnosti uvedené v tomto článku nemusí být v aplikaci Dreamweaver a jejích novějších verzích k dispozici. Další informace najdete v tomto článku.

O webových aplikacích

Webová aplikace je web, který obsahuje stránky s částečně nebo zcela neurčeným obsahem.Konečný obsah stránky je určen teprve když návštěvník požádá o stránku z webového serveru. Protože se konečný obsah stránky liší od požadavku k požadavku na základě akcí návštěvníka, tento druh stránky se nazývá dynamická stránka.

Webové aplikace jsou navrženy k řešení různých výzev a problémů.Tato část popisuje běžné použití webových aplikací a uvádí jednoduchý příklad.

Běžná využití webových aplikací

Webové aplikace mají mnoho použití jak pro návštěvníky webu, tak pro vývojáře, včetně následujících:

  • Umožnit návštěvníkům rychle a snadno najít informace na web produktu s bohatým obsahem.

    Tento druh webové aplikace dává navštěvníkům možnost vyhledávat, organizovat a procházet obsah podle svého uvážení. Mezi příklady patří firemní intranety, Microsoft MSDN (www.msdn.microsoft.com), a Amazon.com (www.amazon.com).

  • Shromažďovat, ukládat a analyzovat data, která poskytli návštěvníci webového místa.

    V minulosti byly údaje zadané do HTML formulářů odesílány jako e-mailové zprávy zaměstnancům nebo aplikacím CGI ke zpracování. Webová aplikace může uložit data z formuláře přímo do databáze a také extrahovat data a vytvořit webové sestavy k analýze. Mezi příklady patří stránky internetového bankovnictví, stránky pokladny obchodu, průzkumy a formuláře pro zpětnou vazbu od uživatelů.

  • Aktualizovat webová místa s neustále se měnícím obsahem.

    Webová aplikace osvobozuje web designéra od neustálého aktualizování HTML webu. Poskytovatelé obsahu, jako jsou redaktoři zpráv, zajišťují webové aplikaci obsah a webová aplikace aktualizuje web automaticky. Mezi příklady patří Economist (www.economist.com) a CNN (www.cnn.com).

Příklad webové aplikace

Janet je profesionální web designérka a dlouhodobá uživatelka Dreamweaveru odpovědná za údržbu intranetu a internetových webů středně velké společnosti s 1000 zaměstnanci. Jednoho dne za ní přijde Chris z lidských zdrojů s problémem. HR spravuje zaměstnanecký fitness program, který dává zaměstnancům body za každou míli chůze, jízdy na kole nebo běhu.Každý zaměstnanec musí v e-mailu Chrisovi nahlásit měsíční součty mílí.Na konci měsíce Chris shromáždí všechny e-mailové zprávy a udělí zaměstnancům malé finanční odměny podle jejich bodových součtů.

Chrisův problém je, že fitness program se stal příliš úspěšný. Tolik zaměstnanců se nyní účastní, že Chrisovi na konci každého měsíce přichází obrovské množství e-mailů.Chris se ptá Janet, zda existuje webové řešení.

Janet navrhuje webovou aplikaci založenou na intranetu, která provádí následující úkoly:

  • Umožnit zaměstnancům zadat své najeté kilometry na webové stránce pomocí jednoduchého HTML formuláře

  • uloží kilometry zaměstnanců do databáze;

  • podle kilometráže spočítá fitness body;

  • umožní zaměstnancům sledovat, jak si v každém měsíci vedou;

  • Poskytnout Chrisovi přístup k bodovým součtům jedním kliknutím na konci každého měsíce

    Janet aplikaci zprovozní před poledním jídlem pomocí Dreamweaver, který má nástroje, jež potřebuje k rychlému a snadnému vytvoření tohoto typu aplikace.

Jak funguje webová aplikace

Webová aplikace je kolekce statických a dynamických webových stránek.Statická webová stránka je taková, která se nemění, když si ji vyžádá návštěvník webu: Webový server odešle stránku do žádajícího webového prohlížeče beze změny.Naproti tomu je dynamická webová stránka upravena serverem před odesláním do žádajícího prohlížeče.Proměnlivá povaha stránky je důvodem, proč se nazývá dynamická.

Můžete například navrhnout stránku pro zobrazení výsledků kondice, přičemž některé informace (například jméno zaměstnance a jeho výsledky) se stanoví až při požadavku na stránku určitým zaměstnancem.

V následujících oddílech je podrobněji popsáno, jak webové aplikace fungují.

Zpracování statických webových stránek

Statický web se skládá ze sady souvisejících HTML stránek a souborů hostovaných na počítači se spuštěným webovým serverem.

Webový server je software, který poskytuje webové stránky v reakci na požadavky z webových prohlížečů.Požadavek na stránku se vygeneruje, když návštěvník klikne na odkaz na webové stránce, vybere záložku v prohlížeči nebo vloží URL do adresního textového pole prohlížeče.

Konečný obsah statické webové stránky určuje návrhář stránky a nemění se, když je stránka vyžádána.Zde je příklad:

<html>

    <head> 

<title>Informační stránka Trio Motors</title>

    </head> 

    <body> 

<h1>O společnosti Trio Motors</h1>

<p>Trio Motors je přední výrobce automobilů.</p>

    </body> 

</html>

Každý řádek HTML kódu stránky napíše navrhář před umístěním stránky na server.Protože se HTML nezmění po umístění na server, nazývá se tento typ stránky statickou stránkou.

Striktně řečeno, „statická“ stránka vůbec nemusí být statická. Například obraz s efektem přechodu (rollover) nebo obsah Flash (soubor SWF) mohou statickou stránku oživit. V této dokumentaci se nicméně stránka nazývá statickou, pokud se posílá prohlížeči beze změn.

Když webový server obdrží požadavek na statickou stránku, server přečte požadavek, najde stránku a odešle ji žádajícímu prohlížeči, jak ukazuje následující příklad:

Zpracování statické webové stránky

A. Webový prohlížeč požádá o statickou stránku. B. Webový server vyhledá stránku. C. Webový server pošle stránku prohlížeči, který o ni požádal. 

V případě webových aplikací jsou určité řádky kódu neurčené, když návštěvník požádá o stránku.Tyto řádky musí být určeny nějjakým mechanismem před odesláním stránky do prohlížeče.Mechanismus je probrán v následujícím oddílu.

Zpracování dynamických stránek

Když webový server obdrží požadavek na statickou webovou stránku, server odešle stránku přímo do žádajícího prohlížeče.Když webový server obdrží požadavek na dynamickou stránku, reaguje odlišně: Předá stránku speciálnímu softwaru odpovědnému za dokončení stránky. Tento speciální software se nazývá aplikační server.

Aplikační server přečte kód na stránce, dokončí stránku podle pokynů v kódu a poté kód ze stránky odstraní.Výsledkem je statická stránka, kterou aplikační server předá zpět webovému serveru, který pak odešle stránku prohlížeči, který o ni požádal. Vše, co prohlížeč dostane, když stránka dorazí, je čisté HTML.Tady je zobrazení tohoto procesu:

Zpracování dynamických stránek

A. Webový prohlížeč požádá o dynamickou stránku. B. Webový server stránku vyhledá a předá ji aplikačnímu serveru. C. Aplikační server najde na stránce případné instrukce a dokončí ji. D. Aplikační server předá dokončenou stránku zpátky webovému serveru. E. Webový server pošle dokončenou stránku prohlížeči, který o ni požádal. 

Přistupování k databázi

Aplikační server vám umožňuje pracovat se zdroji na straně serveru, jako jsou databáze. Dynamická stránka může například instruovat aplikační server, aby extrahoval data z databáze a vložil je do HTML stránky. Více informací najdete na adrese www.adobe.com/go/learn_dw_dbguide_cz.

Použití databáze k ukládání obsahu vám umožní oddělit design webu od obsahu, který chcete uživatelům zobrazit.Místo psaní jednotlivých HTML souborů pro každou stránku potřebujete napsat pouze stránku nebo šablonu pro různé druhy informací, které chcete prezentovat. Poté můžete nahrát obsah do databáze a nechat web tento obsah načíst v reakci na požadavek uživatele.Můžete také aktualizovat informace v jediném zdroji a poté tuto změnu rozšířit po celém webu, aniž byste museli ručně upravovat každou stránku.Můžete použít Adobe Dreamweaver k návrhu webových formulářů pro vkládání, aktualizaci nebo mazání dat z databáze.

Instrukce k extrakci dat z databáze se nazývá databázový dotaz. Dotaz sestává z vyhledávacích kritérií vyjádřených v databázovém jazyce nazvaném SQL (Structured Query Language). SQL dotaz je napsán do skriptů nebo značek na straně serveru stránky.

Aplikační server nemůže komunikovat přímo s databází, protože proprietární formát databáze činí data nečitelnými, podobně jako dokument Microsoft Word otevřený v Poznámkovém bloku nebo BBEdit může být nečitelný. Aplikační server může komunikovat s databází pouze prostřednictvím databázového ovladače: softwaru, který funguje jako tlumočník mezi aplikačním serverem a databází.

Po navázání komunikace ovladačem je dotaz proveden proti databázi a je vytvořena sada záznamů. Sada záznamů je sada dat extrahovaných z jedné nebo více tabulek v databázi. Sada záznamů je vrácena aplikačnímu serveru, který použije data k dokončení stránky.

Tady je jednoduchý databázový dotaz napsaný v SQL:

SELECT lastname, firstname, fitpoints

FROM employees

Tento příkaz vytvoří třísloupcovou sadu záznamů a vyplní ji řádky obsahujícími příjmení, jméno a fitness body všech zaměstnanců v databázi. Více informací najdete na adrese www.adobe.com/go/learn_dw_sqlprimer_cz.

Následující příklad ukazuje proces dotazování databáze a vracení dat do prohlížeče:

Přistupování k databázi

A. Webový prohlížeč požádá o dynamickou stránku. B. Webový server stránku vyhledá a předá ji aplikačnímu serveru. C. Aplikační server najde na stránce případné instrukce. D. Aplikační server pošle dotaz databázovému ovladači. E. Ovladač provede dotaz proti databázi. F. Ovladači se vrátí sada záznamů. G. Ovladač předá sadu záznamů aplikačnímu serveru. H. Aplikační server vloží data do stránky a pak předá stránku webovému serveru. I. Webový server pošle dokončenou stránku prohlížeči, který o ni požádal. 

S vaší webovou aplikací můžete použít téměř jakoukoli databázi, pokud je na serveru nainstalován příslušný databázový ovladač.

Pokud plánujete vytvářet malé nízkocenové aplikace, můžete použít souborovou databázi, jako je ta vytvořená v Microsoft Access. Pokud plánujete vytvářet robustní, obchodně kritické aplikace, můžete použít serverovou databázi, jako je ta vytvořená v Microsoft SQL Server, Oracle 9i nebo MySQL.

Pokud se databáze nachází v jiném systému než webový server, ujistěte se, že máte rychlé spojení mezi oběma systémy, aby webová aplikace mohla fungovat rychle a efektivně.

Vytváření dynamických stránek

Vytvoření dynamické stránky znamená nejdříve napsat HTML a pak doplnit do HTML skripty nebo tagy na straně serveru, díky kterým se stránka stane dynamickou. Když si zobrazíte výsledný kód, jazyk se jeví jako vložený do HTML dané stránky. Proto se těmto jazykům říká programovací jazyky vložené do HTML. Následující jednoduchý příklad používá jazyk CFML (ColdFusion Markup Language):

Poznámka: Podpora CFML byla z aplikace Dreamweaver odstraněna.

<html>

    <head> 

<title>Informační stránka společnosti Trio Motors</title>

    </head> 

    <body> 

<h1>O společnosti Trio Motors</h1>

<p>Trio Motors je přední výrobce automobilů.</p>

<!--- vložené instrukce začínají zde --->

<cfset department="Sales">

<cfoutput>

<p>Nezapomeňte navštívit naši stránku #department#.</p>

</cfoutput>

<!--- vložené instrukce končí zde --->

    </body> 

</html>

Vložené instrukce na této stránce vykonávají následující akce:

Vytvořit proměnnou nazvanou department a přiřadit jí řetězec "Sales".

Vložte hodnotu proměnné, &quot;Sales&quot;, do HTML kódu.

Aplikační server vrátí webovému serveru následující stránku:

<html>

    <head> 

<title>Informační stránka společnosti Trio Motors</title>

    </head> 

    <body> 

<h1>O společnosti Trio Motors</h1>

<p>Trio Motors je přední výrobce automobilů.</p>

<p>Nezapomeňte navštívit naši prodejní stránku.</p>

    </body> 

</html>

Webový server odešle stránku žádajícímu prohlížeči, který ji zobrazí následovně:

O společnosti Trio Motors

Trio Motors je přední výrobce automobilů.

Nezapomeňte navštívit naši stránku Sales.

Zvolíte si skriptovací nebo značkovací jazyk podle serverové technologie, která je k dispozici na vašem serveru. Toto jsou nejoblíbenější jazyky pro serverové technologie podporované aplikací Dreamweaver:

Serverová technologie

Jazyk

ColdFusion

CFML (ColdFusion Markup Language)

Active Server Pages (ASP)

VBScript

JavaScript

PHP

PHP

Dreamweaver může vytvořit serverové skripty nebo značky nezbytné pro fungování vašich stránek, nebo je můžete napsat ručně v kódovacím prostředí aplikace Dreamweaver.

Terminologie webových aplikací

Tato část definuje často používané výrazy týkající se webových aplikací.

Aplikační server

Software, který pomáhá webovému serveru zpracovat webové stránky obsahující serverové skripty nebo značky. Když je taková stránka vyžádána ze serveru, webový server předá stránku aplikačnímu serveru ke zpracování před odesláním stránky do prohlížeče. Pro další informace viz Jak funguje webová aplikace.

Mezi běžné aplikační servery patří ColdFusion a PHP.

Databáze

Kolekce dat uložených v tabulkách. Každý řádek tabulky tvoří jeden záznam a každý sloupec tvoří pole v záznamu, jak je ukázáno v následujícím příkladu:

Databáze

Databázový ovladač

Software, který funguje jako interpret mezi webovou aplikací a databází. Data v databázi jsou uložena v proprietárním formátu. Databázový ovladač umožňuje webové aplikaci číst a manipulovat s daty, která by jinak byla nečitelná.

Systém pro správu databází

(DBMS nebo databázový systém) Software používaný k vytváření a manipulaci databází. Běžné databázové systémy zahrnují Microsoft Access, Oracle 9i a MySQL.

Databázový dotaz

Operace, která získá sadu záznamů z databáze. Dotaz sestává z kritérií vyhledávání vyjádřených v databázovém jazyce zvaném SQL. Dotaz může například specifikovat, že do sady záznamů budou zahrnuty pouze určité sloupce nebo pouze určité záznamy.

Dynamická stránka

Webová stránka přizpůsobená aplikačním serverem před odesláním stránky do prohlížeče.

Sada záznamů

Sada dat extrahovaných z jedné nebo více tabulek v databázi, jak je uvedeno v následujícím příkladu:

Sada záznamů

Relační databáze

Databáze obsahující více než jednu tabulku, přičemž tabulky sdílejí data. Následující databáze je relační, protože dvě tabulky sdílejí sloupec DepartmentID.

Relační databáze

Serverová technologie

Technologie, kterou aplikační server používá k úpravě dynamických stránek během běhu.

Vývojové prostředí Dreamweaver podporuje následující serverové technologie:

  • Adobe® ColdFusion®,

  • Microsoft Active Server Pages (ASP),

  • PHP: Hypertext Preprocessor (PHP).

    Můžete také použít kódovací prostředí aplikace Dreamweaver k vývoji stránek pro jakoukoli jinou serverovou technologii, která není uvedena.

Statická stránka

Webová stránka, která není upravena aplikačním serverem před odesláním stránky do prohlížeče. Pro další informace viz Zpracování statických webových stránek.

Webová aplikace

Web produkt, který obsahuje stránky s částečně nebo zcela neurčeným obsahem. Konečný obsah těchto stránek je určen až v okamžiku, kdy návštěvník požádá o stránku z webového serveru. Vzhledem k tomu, že se konečný obsah stránky liší s každým požadavkem na základě úkonů návštěvníka, nazývá se tento typ stránky dynamickou stránkou.

Webový server

Software, který odesílá webové stránky v reakci na požadavky z webových prohlížečů. Požadavek na stránku je generován v okamžiku, kdy návštěvník klikne na odkaz na webové stránce v prohlížeči, vybere záložku v prohlížeči nebo zadá URL do adresního řádku prohlížeče.

Mezi oblíbené webové servery patří Microsoft Internet Information Server (IIS) a Apache HTTP Server.