P STUDIJNÍ OPOR RA DULU IT V PODN MOD DÍLČÍ ČÁST PROGRAMOVÁNÍ BUSINESS APLIKACÍ NIKU Bronislav Heryán Jiří Kubica Ostrava 2011
Název: Autoři: Vydání: Počet stran: Tisk: Vydala: Studijní opora moduluu IT v podniku Programování business aplikací Ing. Bronislav Heryán, Ing. Jiří Kubica první, 2011 Vysoká škola podnikání, a. s. Vysoká škola podnikání, a. s. v Ostravě Michálkovická 1810/181 710 00 Ostrava Slezská Ostrava Vysoká škola podnikání, a.s. v Ostravě ISBN 978 80 7410 058 1
O OBSAH Úvod... 5 VÝSTUPY Z UČENÍ... 6 1 Technické prostředky internetové komunikace...... 7 1.1 HW, SW... 8 1.1.1 Hardware... 8 1.1.2 Software... 10 1.2 Technologie klient server, vybavení obou stran... 10 1.3 Komunikační protokoly na internetu... 12 1.3.1 Aplikační protokoly... 12 1.4 Nasazení internetové aplikace... 13 2 Klientská část internetové aplikace... 15 2.1 (X)HTML... 16 2.1.1 Popis jazykaa... 16 2.1.2 Základní struktura HTML dokumentu... 17 2.1.3 Seznam značek tagů... 18 2.2 CSS............... 22 2.2.1 Typy vkládání CSS... 22 2.2.2 Syntaxe, selektory CSS......... 23 2.2.3 Omezení CSS... 24 2.3 JavaScript... 25 3 Serverová část internetové aplikace... 26 3.1 Nástroje pro tvorbu internetových aplikací... 27 3.1.1 Statický a dynamický dokument... 27 3.1.2 Editory pro tvorbu internetových aplikací... 28 3.2 Základy jazyka PHP... 30 3.2.1 Vložení PHPP scriptu do jazyka HTML... 31 3.2.2 Komentáře............ 32 3.2.3 Výstup na obrazovku... 33 3.2.4 Proměnné... 33 3.2.5 Operátory... 34 3.2.6 Řídící struktury... 36 3.3 Databáze MySQL... 41 3.3.1 Příkazy v MySQL... 41 3.4 Databáze v PHP............ 41 3.4.1 Připojení k databázi... 41
4 Optimalizace internetové aplikace... 43 4.1 Rozdělení optimalizací... 44 4.1.1 Online a offline optimalizace... 44 4.2 Online optimalizace SEO... 44 4.2.1 On page faktory... 44 4.2.2 Off page faktory... 45 4.2.3 Konverze... 45 4.3 Analytické a auditovací nástroje... 45 4.3.1 Google Analytics... 45 4.3.2 Google Webmaster Tools... 46 4.3.3 MS SEO Toolkit... 47 4.3.4 WooRank... 49 4.3.5 Další nástroje... 51 4.4 Nejčastější chyby... 51 4.4.1 Zásadní chyby... 51 4.4.2 Obsahové chyby... 51 4.4.3 SEO chyby... 51 4.4.4 Ostatní chyby... 52 Použitá literatura a další zdroje... 53
Úvod Úvod Vážené studentky, vážení studenti. Internet je dnes nejvíce se dynamicky rozvíjející medium. Jeho přednosti jsou jasně dané rychlost sdílení informací, geografická neomezenost, dosažitelnost a další. Aby dnešní podnikatel uspěl ve své oboru, musí se o internet, jako o zdroj informací a marketingové medium zajímat s maximální péčí. Abyste se v moři informací o technických a technologických aspektech vyznali, připravili jsme pro Vás základní studijní oporu pro dílčí část IT v podniku Programování business aplikací. Věříme, že dané informace budou pro Vás odrazným můstkem pro hloubější prozkoumání této problematiky a pochopení všech souvislostí týkajících se návrhu, tvorby a optimalizace internetových aplikací či prezentací. Vzhledem k tomu, že internet a jeho technologiee se vyvíjí obrovským tempem, berte prosím tento text jako základní osnovu potřebných informací. Aktuální informace k jednotlivým tématům můžete čerpatt z uvedených odkazů na (jak jinak) internetové zdroje ať již se jedná o oficiální prezentace jednotlivých nástrojů či technologií, tak I zajímavé blogy předních osobností či firem zabývajících se internetovým marketingem či optimalizacemi. Závěrem nezbývá než popřát hodně štěstí při absolvování modulu IT v podniku a hlavně hodně zábavy během získáváníí spousty nových a jistě užitečných znalostí. Autoři 5
Programování business aplikací VÝSTUPY Z UČENÍ Znalost základního programování internetových prezentací a aplikací Znalost prezentačních technologií v internetu HTML, CSS, JavaScript Základní znalost serverových prostředků databázového serveru MySQL a skriptovacího jazyka PHP Znalost technických a marketingových analýz internetové prezentace Znalost základních optimalizačních metod 6
Technické prostředky internetové komunikace 1 Technické prostředky internetové komunikace ÚVOD Kapitola se zaměřuje na prostředky internetové komunikace, to znamená, že budete nejdříve seznámeni se specifiky HW a SW u serverů, dále si přiblížíme technologii klient si server, na které je postaveno fungování veškerých internetových aplikací. Popíšeme také komunikační protokoly na internetu, bez kterých si dnešní svět nedokážeme představit a posledním tématem je nasazení internetové aplikace, kde si popíšeme různé možnosti jejich nasazení. CÍLE KAPITOLY Po prostudování této kapitoly a vypracování úkolů budete UMĚT: vybrat vhodné řešení pro nasazení internetové aplikace zařadit komunikační protokoly mezi aplikační a síťové protokoly Po prostudování této kapitoly a vypracování úkolů ZÍSKÁTE: znalosti z oblasti protokolů na internetu přehled v jednotlivých možnostech nasazení internetových aplikací základní informace o technologii klient server Po prostudování této kapitoly a vypracování úkolů BUDETE SCHOPNI: popsat rozdíl mezi uživatelským PC a serverem komunikovat se serverem pomocí HTTP protokolu skrze telnet 7
Programování business aplikací 1..1 HW, SW Zde se nebudeme zabývat klasickým hardware a software používaným na pracovních stanicích, tyto znalosti předpokládáme, že si již přinášíte z modulu Informační kompetence a zaměříme se na specifika spojené s provozováním internetových aplikací tj. serverů. Proto, pokud Vám termíny jako je základní deska, processor, paměť atd. nic neříkají, doporučuji Vám nejdříve šáhnout po opoře IK a prostudovat kapitolu B1. 1..1.1 Hardware Pokud jste měli někdy možnost nahlédnout do ceníku komponent určených pro server, asi Vás zarazilaa jejich výrazně vyšší cena oproti běžným osobním počítačům. Důvodem je snaha cokoliv co se může pokazit pokud možno zdvojit (duplikovat) a mít tak zálohu v případě selhání určité komponenty a zajistit tím pokud možno nepřetržitý provoz serveru a tím i jeho služeb. S nepřetržitým provozem souvisí i jedna velmi důležitá vlastnost některých komponent a tou je možnost je připojit resp. odpojit (tj. provést jejich výměnu) za plného provozu bez nutnosti server vypnout (např. provést výměnu vadné součástky). Tuto vlastnost nazýváme hot swapping. Běžně se můžeme setkat i s termínem hot plugging, což je označení pro možnost přidání novéhoo hardware a rozšířit tak funkcionalitu současného systému (např. USB zařízení jako jsou externí disky, myši, tiskárny, případně PCMCIA karty v noteboocích). Servery bývají obvykle umístěny ve speciálních místnostech, které nazýváme serverovny někdy též datová centra (Obr. 2.1). Tyto místnosti jsou typické tím, že jsou vybaveny výkonnou klimatizací (pro zajištění optimálních teplot), protipožárním systémem (obvykle na plynné bázi např. FM 200, aby nedošlo k poškození HW), záložním systémem energie UPS společně s dieselovými motorgenerátory (několik sériově zapojených UPS jednotek s bateriovými moduly, pro nezbytně nutnou dobu než naběhnou dieselové motorgenerátory), dvojitou podlahou (v podlaze bývá vedena kompletní kabeláž, mnohdy zde bývá systém kanálů pro rozvod chladného vzduchu od klimatizace) a vzhledem k velké váze HW se můžeme setkat i se zpevněnou podlahou. Dále bychom zde mohly zařadit kamerový systém, bezpečnostní systém dveří, pro zajištění vstupu pouze autorizovaným osobám, nebo pro snížení prašnosti povinnost přezouvání, návleků. OBRÁZEK 2.1 Pohled na typickou serverovnu Zdroj: hardforum.com 8
Technické prostředky internetové komunikace Skříně, jež vidíme na obr. 2.1, nazýváme rack skříň. Do těchto racků se montují jednotlivé servery (důvodem je úspora místa, bezpečnost, atd.). Každá takováto skříň obsahuje n pozic, všechny pozice mají pevně dané rozměry pro dosažení univerzálnosti a vzájemné kompatibility jedna pozice v rack skříni se označuje jako 1U (pokud uvidíme tedy např. u serveru označení 2U, jedná se o server zabírající dvě pozice v rack skříni). Tomu všemu je přizpůsoben i case serveru (serverová skříň), který se obvykle provádí v tzv. rack mount provedení. Na obrázku 2.2 si lze všimnout sofistikovaného provedení (uspořádaní) jednotlivých komponent s maximální snahou oproštění se od zbytečných kabelů a nutnosti cokoliv šroubovat. Např. pro zajištění potřebného chlazení uvnitř skříně systém několika samoregulovatelných hot swap větráků (tak aby v případě selhání některého z nich mohly ostatní přebrat jeho úlohu), dva zdroje napájení (opět pro případ poruchy), velké množství hot swap disků (na uvedeném obrázku 2.2). OBRÁZEK 2.2 2U server od Dellu Zdroj: Dell Samotnou kapitolu pak tvoří serverové základní desky (motherboard obr. 2.3), které krom několika záložních prvků (např. zdvojení biosu), jsou optimalizovány především na výkon. Největším jejich rozdílem oproti uživatelským počítačům jsou: počet paměťových slotů (tedy maximální počet paměťových modulů, kterými lze základní deska osadit a s tím souvisí i maximální počet GB RAM), zpravidla jejich počet bývá nejméně 8 (uživatelské počítače mívají 4 a notebooky dokonce jen 2 sloty), ale lze se setkat i s 22 sloty (např. u serveru na obr. 2.2) počet procesorů, v základu mají stejně jako uživatelské počítače patici pouze na jeden procesor, ovšem typicky se setkáváme se dvěma (např. na obr. 2.3 si lze všimnout v levém horním rohu dvou patic na procesory) a více procesory integrovaná grafická karta zatím co u uživatelských počítačů je to známka low na endového řešení (tedy levné řešení určené pro kancelářské práce, nenáročné grafický výkon), u serverů se rozhodně nejedná o levné desky, ale snahaa o 9
Programování business aplikací integraci a minimalizaci nezbytně důležitých prvků pro existenci serveru (grafická karta je potřeba pouze pro samotnou instalaci nebo opravu serveru a pro běžný provoz serveru je to v podstatě zbytečná komponenta) obvykle jsou osazeny dvěma integrovanými síťovími kartami obecně méně multimediální (stejně jako zde není potřeba grafický výkon, není potřeba ani kvalitního audio výstupu mnohdy nejsou audio konektory ani v zadu vyvedeny viz. obr. 2.3) OBRÁZEK 2.3 Dvou procesorová základní deska od Intelu Zdroj: Intel 1..1.2 Software Software lze dělit z mnoha různých hledisek, obecně jej dělíme na: systémový aplikační další hlediska dělení mohou být např. dle licencí, rozhraní, druhu, účelu, funkčnosti, atd. Pro naše účely si vystačíme s obecným dělením rozšířeným o nadřazenou kategorii serverové a klientské částii tj.: serverr o o klient o o systémový sw aplikační sw systémový sw aplikační sw 1..2 Technologie klient server, vybavení obou stran Mluvíme li o technologii klient server, máme na mysli vztah komunikujících uzlů v síti. Obecně je dělíme na: 10
Technické prostředky internetové komunikace klient server peer to peer U technologiee klient server, jsou komunikující uzly striktně rozděleny na klientskou část, která využívá služeb serverů (obvykle je to tedy uživatelská část) a serverovou část, která nabízí své služby ostatním viz. obr. 2.4. Komunikace probíhá tak, že klient pošle požadavek serveru, ten jejj zpracuje a pošle zpět výsledek. OBRÁZEK 2.4 Komunikace klient server Zdroj: pepa.zvonicek.infoo U technologiee peer to peer, probíhá komunikace mezi jednotlivými uzly na stejné úrovni (všechny komunikační uzly jsou si rovny), to znamená, že peer poskytuje služby ostatním a zároveň využívá služeb ostatních (v podstatě je serverem a klientem zároveň, proto se tou to technologií nebudemee speciálně věnovat). Typickou aplikací peer to peer je například sdílení souboru ve Windows nebo torenty atp. OBRÁZEK 2.5 Komunikace peer to peer Zdroj: cs.virginia.eu 11
Programování business aplikací 1..3 Komunikační protokoly na internetu Komunikační protokoly přímo souvisejí se sedmi vrstvým referenčním modelem ISO OSI (norma ISO 7498). SCHÉMA 2.1 Referenční model ISO OSI 7. aplikační http, pop3, smtt Uživatelská část 6. prezentační OS 5. relační 4. transportní 3. síťová SSL, NetBIOS UDP, TCP,... IPv4, IPv6,.. Ovladače 2. spojová 1. fyzická Zdroj: autor Popisem jednotlivých vrstev se zde nebudeme zabývat, ale jak už vyplývá ze schématu 2. 1 komunikační protokoly můžeme rozdělit tedy dle toho, zda spadají do uživatelské části, nebo části operačního systému tj: síťové aplikační 1..3.1 Aplikační protokoly Existuje nepřeberné množství aplikačních protokolů, mezi protokoly můžeme zařadit například: poštovní pop3, imap, smtp webové http, https souborové ftp, sftp, tftp pro přenos audia a videa rtp, rtcp, mms, SIP, H.323 nejpoužívanější aplikační 12
Technické prostředky internetové komunikace Nejdůležitějším protokolem pro internetové aplikace je http (hypertext transfer protocol) protokol, který se používá pro přenos hypertextový ých dokumentů ve formátu HTML. V současnosti je používán pro přenos libovolných informací a pomocí rozšíření MIME je tak možno přenést libovolný typ souboru. Protokol funguje na principu dotaz odpověď. Klient (např. prohlížeč) naváže ze serverem spojení, poté zašle požadavek na webový server a ten mu na jeho požadavek zašle odpověď a spojení je poté ukončeno. Jedná se tak o bezestavovou komunikaci, resp. protokol http je bezestavový. Komunikace probíhá v textové podobě (tedy pouze za pomocí tisknutelných znaků) a protoo je komunikace čitelná i běžným uživatelem (viz. příklad 2.1). Protokol http používá pro komunikaci několik dotazovacích metod, nepoužívanější jsou: GET požadavek na uvedený objekt (např. webovou stránku), požadavek může obsahovat parametry velikost je omezena na 512B POST odesílá uživatelská data na server (používá se např. pro odeslání dat z formuláře na server) může obsahovat velké množství dat (velikost je omezena nastavením samotného webového serveru) PUT nahraje data na server DELETE smaže data ze serveru PŘÍKLAD 2.1 Pro lepší představu si vyzkoušíme simulaci webového klienta pomocí telnetu a jednotlivé příkazy budeme zadávat ručně, čímž si vyzkoušíme, jak probíhá komunikace mezi klientem a serverem za pomocí protokolu http. 1..4 Nasazení internetové aplikace Vývojový diagram pro nasazení. Pokud chcemee provozovat internetové aplikace, máme samosebou několikk možností. Webhosting Serverr housing Dedikované servery Managed servery Virtuální servery 13
Programování business aplikací KONTROLNÍ OTÁZKY Vyjmenujte alespoň tři způsoby nasazení internetové aplikace. Jaké protokoly se používají u poštovních serverů? Jaký je rozdíl mezi technologií klient server a peer to peer? K čemu slouží hot swapping u serverů? STUDIJNÍ LITERATURA 1. Rosebrok, E., Filson, E. Linux, Apache, MySQL a PHP. GRADA Publishing : Praha. 2005. ISBN 802412601 2. PHP Group Stránky projektu PHP [online]. 2001 2011. [cit. 2011 10 2]. Dostupné z: <http://cz.php.net>. 3. Apache software foundation HTTP Server project [online]. 2011. [cit. 2011 10 1]. Dostupné z: <http://httpd.apache.org>. 14
Klientská část internetové aplikace 2 Klientská část internetové aplikace ÚVOD Klientská část internetové aplikace nebo prezentace zajišťuje kvalitní distribuci zpracovaných dat směremm ke koncovému uživateli. Jelikož platí staré pravidlo, že obal prodává, je nutné se vždy zaměřit také na design a uživatelské rozhraní dané aplikace či prezentace tak, aby veškerá aktivita, která byla investována do vývoje samotného jádra systému nepřišla vniveč. CÍLE KAPITOLY Po prostudování této kapitoly a vypracování úkolů budete UMĚT: jak a k čemu se používá JavaScript, Flash a další doplňkové technologie Po prostudování této kapitoly a vypracování úkolů ZÍSKÁTE: základní přehled o formátování pomocí CSS Po prostudování této kapitoly a vypracování úkolů BUDETE SCHOPNI: se orientovat v základních HTML tazích 15
Programování business aplikací 2..1 (X)HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. Wikipedia Takto zní jedna z definic, co to jazyk HTML je. V našem kontextu tvorby business aplikací se zaměřenímm na tvorbu a optimalizaci internetových prezentací k dostačující definice, že jazyk HTML nám vytváří a formátuje nejdůležitější část prezentace tedy obsah. 2..1.1 Popis jazyka Jazyk HTML je charakterizován množinou značek (tzv. tagů) a jejich atributů definovaných pro du verzi. Mezi značky se uzavírají části textu dokumentu a tím se určuje význam (sémantika) obsaženého textu. Názvy jednotlivých značek se uzavírají mezi ostré závorky < a >. Část dokumentu tvořená otevírací značkou, nějakým obsahem a odpovídající ukončovací značkou tvoří tzv. element (prvek) dokumentu. Například <strong> je otevírací značka pro zvýraznění textu a <strong>červená Karkulka</strong> je element obsahující zvýrazněný text. Součástí obsahu elementu mohou být další vnořené elementy. Atributy jsou doplňující informace, které upřesňují vlastnosti elementu. Značky jsou obvykle párové, přičemž koncové značka je shodná se značkou počáteční, jen má před názvem znak lomítko. PŘÍKLAD 3. Ukázka párového tagu odstavec <div> Nejaky text </div> PŘÍKLAD 3. Ukázka nepárového tagu vodorovná čára a zalomen9 odstavce <hr /> <br /> PŘÍKLAD 3. Ukázka párového tagu s parametry odkaz zřeného do jiného tagu <div> Naše škola má zkratku <a href= http://www.vsp.cz title= Vysoká škola podnikání a.s.. >VŠP</a>. 16
Klientská část internetové aplikace </div> 2..1.2 Základní struktura HTML dokumentu Pro zjednodušení si představme jednu internetovou stránku jako běžný dokument. Každý dokument je složen ze záhlaví, obsahu dokumentu (těla) a zápatí. Obdobně je to u dokumentu HTML tedy jedné internetové stránky. Každá z těchto stránek by měla obsahovat sekci <head> tedy definici dokumentu a sekci <body> tělo dokumentu (zápatí pouze ukončuje tělo a celý dokument HTML). Obecně má dokument v jazyku HTML má předepsu tuto strukturu: Deklarace DTD je uvedena direktivou <!DOCTYPE. Kořenový element element html (značky <html> a </html>) reprezentuje celý dokument. Kořenový element je povinný, ale otevírací a ukončovací značka samotná povinná není (pokud tyto značky nebudou v těle dokumentu uvedeny, prohlížeč si je sám doplní podle kontextu). Hlavička elementu obsahuje metadata, která se vztahují k celému dokumentu. Definují např. název dokumentu, jazyk, kódování, klíčová slova, popis, použitý styl zobrazení. Hlavička je uzavřena mezi značky <head> a </head>. Element head je opět povinný, ale jeho otevírací a koncová značka povinná není, prohlížeč ji sám doplní podle kontextu. Tělo dokumentu obsahuje vlastní textt dokumentu. Vymezujee se značkami <body> a </body> >. Element body je povinný, ale jeho otevírací a koncová značka povinná není, prohlížeč ji sám doplní podle kontextu. OBRÁZEK 3. Ukázka komplexního kódu XHTML Zdroj: vsp.cz 17
Programování business aplikací 2..1.3 Seznam značek tagů Uvádíme seznam základních značek (X)HTML. Jedná se o celkový seznam tagů, avšak dnes již některé nejsou doporučovány z hlediska optimalizace e, jiné naopak slouží pouze k formátování, které by ale mělo být nahrazeno kaskádovým i styly, které jsou popsány v následující kapitoly. Tag Význam Párový <! >!doctype a abbr acronym address applet area b base basefont bgsound big blink blockquote body br button poznámka specifikace DTD odkaz, hyperlink, záložka ustálený výraz zkratka adresa Java aplet oblast v klikací mapě tučné písmo základ odkazů základní font zvuk na pozadí zvětšení písma blikání písma citace, odsazení tělo stránky + definice pozadí řádkový zlom tlačítko ne ne ne ne ne 18
Klientská část internetové aplikace caption center cite code col colgroup ddd del dfn dir div dl dt em embed fieldset font form frame frameset h1 h2 h3 hlavička tabulky vycentrování citace výpis kódu ovlivnění sloupce tabulky skupina sloupců tabulky definice termínu smazaný obsah nověě použitý termín zvláštní druh seznamu Oddíl seznam definic definovaný termín zvýraznění (kurzíva) objekt s plužinouu skupina polí písmo formulář Rám skupina rámů nadpis 1. úrovně nadpis 2 úrovně nadpis 3. úrovně ne ne asi ne 19
Programování business aplikací h4 h5 h6 head hr html i iframe img input ins kbd label layer legend li link map marquee menu meta multicol nobr nadpis 4. úrovně nadpis 5. úrovně nadpis 6. úrovně hlavička stránky vodorovná čára začátek HTML dokumentu kurzíva vložený rám obrázek vstupní pole přidaný text vstup z klávesnice popis pole hladina, vrstva popis pole položka seznamu nezobrazovaný odkaz klikací mapa běžící text typ seznamu informace o dokumentu sloupcová úpravaa nezalamovat obsah ne ne ne nepovinně ne 20
Klientská část internetové aplikace noembed noframes noscript object ol optgroup option p param pre q s samp script select small spacer span strike strong style sub sup alternativa k embed alternativa rámů alternativa ke skriptu objekt číslovaný seznam skupina voleb Volba odstavec parametry objektu předformátovaný text citace přeškrtnutý text ukázka výstupu skript, program výběrové pole zmenšení textu prázdné místo úsek textu přeškrtnutý text zvýraznění (tučně) zápis CSS stylu dolní index horní index ne nepovinně ne ne 21
Programování business aplikací table tbody td textarea tfoot th thead title tr tt u ul var tabulka tělo tabulky buňka tabulky velké vstupní pole patička tabulky hlavičková buňka tabulky hlavička tabulky titulek stránky řádek tabulky teletype podtržení textu odrážkový seznam formátování proměnné nepovinně nepovinně nepovinně 2..2 CSS V předešlé kapitole jsme si ukázali, jakým způsobem distribuujeme text, neboli obsah internetové prezentace. Jak již bylo zmíněno v úvodu kapitoly, je třeba se zaměřit také na vzhled prezentace či aplikace a její uživatelské rozhraní. Základní rozmístění prvkůů obstaráme pomocí použití jednotlivých tagů jazyka (X)HTML. Ale co v případě, že potřebujeme provést složitější formátování? V této chvíli musíme použít jiný jazyk CSS tzv. kaskádové styly. Zmíněné základní formátování lze využívat v kombinaci s kaskádovýmí styly, avšak toto je staré využití a v dnešní době se nedpoporučuje (jde např. o použití tagů <i> pro kurzívu). Co si pod zmíněným formátováním představit? Jedná se např. o font písma, typografii písma, barvu, zarovnání, ohraničení, odsazení, okraje, pozicování apod. 2..2.1 Typy vkládání CSS Formátování pomocí kaskádových stylů můžete provádět třemi různými způsoby: 222
Klientská část internetové aplikace 1. Přímo v HTML kódu pomocí parametru style. Tento způsob ale není vhodným, jelikož nám uměle zvětšuje neobsahovou část prezentace a vyhledávači je penalizován. Jedná se o tzv. inline styly. 2. Druhým způsobem je nadefinování celého formátování v hlavičce pomocí tagů <style></style>. Tento format take není vhodný, protože stejně jako předešlý způsob zvětšuje neobsahovou cast kódu. 3. Třetím a nejběžněji používaným způsobem je definice kaskádových stylů v externím souboru. css a jeho připojení pomocí jednoho tagu v záhlaví. 4. text</div> PŘÍKLAD 3. <style> div {color:green} </style> Ukázka definice inline stylu v záhlaví PŘÍKLAD 3. Ukázka připojení externího stylu v záhlaví <link rel="stylesheet" media=" "screen" type=" text/css" href="http://www. vsp.cz/css/screen.css" /> Výhodou definice stylu v záhlaví je možnost specifikace zařízení. V uvedeném případě se jedná o kaskádové styly pro zobrazní, lze definovat ale také kaskádové styly pro tisk nebo mobilní zařízení. 2..2.2 Syntaxe, selektory CSS Důležitou vlastností, která je shodná pro všechny typy vkládání stylů, je možnost definice více parametrů např. barva zelená a zarovnání doprava: PŘÍKLAD 3. <div text</div> PŘÍKLAD 3. Ukázka inline stylu <div style= text-color:green >Můj Ukázka inline stylu style= text-color:green;text-align:right >Můj Dalším zjednodušením práce s kaskádovými styly jsou tzv. selektory, které lze kombinovat mezi sebou: body Tyto deklarace budou platit pro všechny výskyty elementu body. body p Tyto deklaracee budou platit pro všechny elementy p, které se nachází v elementu body, v jakékoliv hloubce. 23
Programování business aplikací body>div Tyto deklarace budou platit pro všechny elementy div, které jsou dětmi elementu body. To znamená, že pokud bychom měli element div, který se nachází v <body><blockquote><div> >, tyto deklarace by pro něj neplatily, protože tento div není přímým potomkem elementu body..trida Tyto deklarace budou platit pro všechny elementy, které mají v HTML nastavenou třídu trida. To se provádí pomocí HTML atributu class. #id Tyto deklarace budou platit pro všechny elementy, které mají v HTML nastavený identifikátor id. To se provádí pomocí HTML atributu id. sel1, sel2, sel3 Selektory můžeme seskupovat pomocí čárek. Následujícíí deklarace pak budou platit pro všechny selektory. OBRÁZEK 3. Ukázka komplexního kódu CSS Zdroj: vsp.cz 2..2.3 Omezení CSS CSS selektory neposkytují přístup k rodičovským prvkům, jako to umožňují sofistikovanější jazyky jako například XPath. Nemůžete například nastylovat jen ty odstavce, které obsahují odkaz. Horizontální kontrola prvků na stránce je intutivní a jednoduchá, naopak vertikální stylování už působí problém. Například na obyčejné vertikální centrování obsahu se musí používat poměrně složité kombinace a hacky, které ještě nemusí být dopředně kompatibilní.[ 18] CSS neposkytuje možnost pro symbolický zápis proměnné nebo konstanty, všechny hodnoty musí být vepsány přímo v kódu. Například pokud se na vícero místech používá stejná barva, nemůže se použít symbolický zápis barva= red; a poté už jen psát proměnnou barva, všude se musí uvádět přímo hodnota red. 24
Klientská část internetové aplikace CSS neumí počítat výrazy, prohlížečee například neporozumí výrazu margin left: 10% 3em + 4px;. Webdesigner si to vše musí spočítat sám. CSS2 nenabízí žádnou možnost pro tvorbu kulatých rámečků nebo jiných kulatých objektů. Pracuje pouze s obdélníky. CSS2 nenabízí žádnou možnost, jak jednomu elementu přiřadit více obrázků na pozadí. 2..3 JavaScript JavaScript je multiplatformní, objektově orientovaný skriptovací jazyk, který se používá jako interpretovaný programovací jazyk pro internetové prezentace a aplikace. Jsou jím obvykle ovládány různé interaktivní prvky uživatelského rozhraní (tlačítka, validace formulářů, animace, grafické efekty s obrázky a jiné). Jak bylo zmíněno, jedná se o samostatný jazyk, který je provozovaný na straně klienta a vykonává určité funkce. Jelikož náplní tohoto dílčího modulu není výuka samotného programování, odkážeme zájemce o bližsí informace na nepřeberné množství odkazů ať již na základy samotného jazyka, tak i na zjednodušené využívání již připravených knihoven funkcí (např. pro fotogalerie, formuláře apod.) Ukázka jednoduchéhoo kódu pro vyvolání interaktivní PŘÍKLAD 3. hlášky <form> <input type="button" onclick= "alert('opravdu chcete kliknout?') )" value="varovani"> </form> KONTROLNÍ OTÁZKY Jaký je rozdíl mezi (X)HTML a CSS? Jaký má vliv technologie Flash na optimalizaci? 25
Programování business aplikací 3 Serverová část internetové aplikace ÚVOD V této kapitole se seznámíme s vývojem internetových aplikací a to v nejpoužívanějšímím anejoblíběnějším spojením skriptovacího jazyka PHP ve spojení s databází MySQL. Pamatujte, že tato kapitola je pouze úvodem do dané problematiky a pokud vás toto téma osloví, doporučuji sáhnout po některé z knih uvedených na konci této kapitoly. CÍLE KAPITOLY Po prostudování této kapitolya vypracování úkolůů budete UMĚT: ovládat základy jazyka PHP vytvářet a zpracovávat formuláře sestavovat SQL dotazy pro výběr dat Po prostudování této kapitolya vypracování úkolůů ZÍSKÁTE: znalosti jak tvořit dynamické stránky pro internet přehled o možnostech programování aplikací na internetu nutné znalosti pro práci s relačními databázemi Po prostudování této kapitolya vypracování úkolůů BUDETE SCHOPNI: vytvářet jednoduché interaktivní webové aplikace navrhovat, vytvářet a upravovat jednoduché databáze pracovat s databází MySQL 26
Serverová částt internetové aplikace 3..1 Nástroje pro tvorbu internetových aplikací Text subkapitoly 3..1.1 Statický a dynamický dokument U internetových aplikací rozlišujeme základní dva typy dokumentů statický dynamický Statický dokument se vyznačuje tím, že je jeho vzhled neměnný a uživatel si nemůže editovat jeho obsah pro jakoukoliv změnu v obsahuje, je odkázán na vývojáře. Statické dokumenty se používají předevím pro vytvoření vyzitek, prezentací firem, které chtějí být viděni na internetu, ale zároveň nehodlají investovat hodně prostředků na realizaci webových portalů. Opakem jsou pak dynamické dokumenty, odkterých očekáváme, že budou reagovat na uživatelské podměty. Výsledný vzhled je pak generován až za běhu aplikace. Dynamické dokumenty se dále dělí podle toho, kde probíhá jejich interpretace dynamický dokument na straně klienta dynamický dokement na strane server Mluvíme li o dynamických dokumentech na straně klienta, máme na mysli to, že jejich vytvoření, respektive modifikaci zajišťuje nejčastěji prohlížežž (klient). Jejich úkolem je zajištění interaktivity s uživatelem (např. změna obrázku při přejetí kurzorem, zareagovat na kliknutí tlačítka, kontrola dat ve formulářích nebo otevření, opuštění okna prohlížeče). Funguje to tak, že spolu s HTML stránkou je prohlížeči odeslán i programový kód (nejčastěji využívaný je JavaScript), který je ve vhodnou dobu na klientském počítači spuštěn. Největší jejich nevýhodou je závyslost na konkrétním prohlížeči (ruzné prohlížeče mohou podporovat např. pouze částečnou implementaci, nebo mohou obsahovat chyby atp.). Dynamické dokumenty na straně serveru jsou specifické tím, že jsou zpracovávány (interpretovány, spuštěny) na vzdáleném serveru. Z tohoto důvodu jejich výsledek nelze zobrazit v prohlížeči přímo (jako u HTML) ale potřebují pro svůj běch webový server (např. apache, IIS), který bude podporovat zvolený jazyk. Mezi jejich výhody patří nízká závislost na prohlížeči, schopnost řešitt složité a rozsáhlé úlohy (využívají výkon a prostor hostitelského serveru). Veškeré požadavky a data se přenášejí přes síťové spojení (protokol TCP). Mezi omezení (které jsou dány samotnou architekturou) patří neschopnost reagovat na uživatelské události vniklé u klienta (pohyb myši, stisk klávesy, atp.) toto však řeší dynamické dokumenty na straně klienta. Nejpoužívanější jazyky na straně serveru jsou PHP, ASP, CGI, ruby, java. Obrázek 4.1 přibližuje princip zpracování dokumentů na straně serveru konkrétně u jazykaa PHP. OBRÁZEK 4.1 Princip dynamických dokumentů na straně serveru 27