MOD NIKU. Jiří Kubica. Ostrava 2011

STUDIJJNÍ OPOR O RA MOD DULU IT V PODN NIKU ÁST DÍLLČÍ ČÁ PROGRAMOVÁN NÍ BUSINESSS AP PLIKA ACÍ Bro onislav Heryyán Jiří Kubica O Ostrava 201 11

Náázev: Studijní op pora modulu u IT v podniku u – Programo ování busineess aplikací Au utoři: Ing. Bronisslav Heryán, Ing. Jiří Kubiica Vyydání: první, 2011 Po očet stran: Vysoká ško Tisk: ola podnikán ní, a. s. Vysoká ško ola podnikán ní, a. s. v Ostravě Vyydala: Michálkovvická 1810/18 81 710 00 Osttrava – Slezsská Ostrava © © © © Vysoká škol la podnikání,, a.s. v Ostravě ISBN 978‐80‐7 7410‐058‐1

OBSAH Úvvod ....................................................................................................................................... 5 VÝÝSTUPY Z UČ ČENÍ .................................................................................................................. 6 1

Technickéé prostředkyy internetovéé komunikace........................................................... 7 1.1

HW,, SW ................................................................................................................. 8

1.1.1

Hardware ....................................................................................................... 8

1.1.2

Software ...................................................................................................... 10

1.2

hnologie klieent‐server, vyybavení obou u stran ................................................ 10 Tech

1.3

Kom munikační pro otokoly na in nternetu ................................................................. 12

1.3.1 1.4 2

Nasaazení internetové aplikace .......................................................................... 13

Klientská část interneetové aplikacce ............................................................................ 15 2.1

HTML ............................................................................................................... 16 (X)H

2.1.1

Popis jazykaa ................................................................................................. 16

2.1.2

Základní strruktura HTM ML dokumenttu ........................................................ 17

2.1.3

Seznam znaaček ‐ tagů .................................................................................. 18

2.2

. ................................................................................................... 22 CSS ....................

2.2.1

Typy vkládáání CSS ........................................................................................ 22

2.2.2

Syntaxe, selektory CSS ................................................................................ 23

2.2.3

Omezení CSSS ................................................................................................ 24

2.3 3

Aplikační prrotokoly ..................................................................................... 12

JavaaScript ............................................................................................................ 25

Serverováá část intern netové aplikaace .......................................................................... 26 3.1

Násttroje pro tvo orbu internettových aplikaací ....................................................... 27

3.1.1

Statický a d dynamický do okument ................................................................ 27

3.1.2

Editory pro tvorbu interrnetových ap plikací ................................................. 28

3.2

Základy jazyka PHP .............................................................................................. 30

3.2.1

Vložení PHP P scriptu do jjazyka HTMLL .......................................................... 31

3.2.2

Komentáře ................................................................................................... 32

3.2.3

obrazovku ................................................................................... 33 Výstup na o

3.2.4

Proměnné .................................................................................................... 33

3.2.5

Operátory .................................................................................................... 34

3.2.6

Řídící strukttury ............................................................................................ 36

3.3

Dataabáze MySQL ................................................................................................. 41

3.3.1 3.4

MySQL .......................................................................................... 41 Příkazy v M

Dataabáze v PHP ................................................................................................... 41

3.4.1

Připojení k databázi ..................................................................................... 41

4

Optimalizzace internettové aplikacee ............................................................................ 43 4.1

Rozd dělení optim malizací ........................................................................................ 44

4.1.1 4.2

Online a offfline optimalizace ..................................................................... 44

Online optimalizzace ‐ SEO ................................................................................... 44

4.2.1

On‐page faktory .......................................................................................... 44

4.2.2

Off‐page faktory .......................................................................................... 45

4.2.3

Konverze ...................................................................................................... 45

4.3

ditovací nástrroje ........................................................................ 45 Analytické a aud

4.3.1

Google Anaalytics .......................................................................................... 45

4.3.2

Google Webmaster Too ols ........................................................................... 46

4.3.3

olkit ............................................................................................ 47 MS SEO Too

4.3.4

WooRank ..................................................................................................... 49

4.3.5

oje ............................................................................................... 51 Další nástro

4.4

Nejččastější chyby ................................................................................................. 51

4.4.1

Zásadní chyyby .............................................................................................. 51

4.4.2

Obsahové cchyby .......................................................................................... 51

4.4.3

SEO chyby .................................................................................................... 51

4.4.4

Ostatní chyyby .............................................................................................. 52

Po oužitá literattura a další zd droje .......................................................................................... 53

Úvvod

Ú Úvod Vá ážené studen ntky, vážení sstudenti. Internet je dnees nejvíce see dynamicky rozvíjející meedium. Jeho přednosti jso ou jasně dan né – rychlost sdíleení informaccí, geografickká neomezen nost, dosažittelnost a dallší. Aby dneššní po odnikatel usp pěl ve své ob boru, musí see o internet, jjako o zdroj informací a marketingovvé medium zajím mat s maxiimální péčí. Abyste se v moři infformací o ttechnických a teechnologickýcch aspektech h vyznali, přřipravili jsmee pro Vás zá ákladní studiijní oporu prro díílčí část IT v v podniku – Programová ání business aplikací. Věěříme, že da ané informacce bu udou pro Vá ás odrazným m můstkem pro hloubějjší prozkoum mání této prroblematiky a po ochopení všeech souvislosstí týkajících h se návrhu, tvorby a op ptimalizace internetovýcch ap plikací či prezzentací. Vzzhledem k to omu, že inteernet a jeho o technologiee se vyvíjí obrovským o teempem, berte prrosím tento text jako základní osno ovu potřebn ných informa ací. Aktuálníí informace k jednotlivým téématům mů ůžete čerpatt z uvedenýcch odkazů na n (jak jinakk) internetovvé zd droje – ať jižž se jedná o oficiální preezentace jedn notlivých násstrojů či tech hnologií, takk I za ajímavé blogyy předních o osobností či ffirem zabývajjících se inteernetovým m marketingem či op ptimalizacem mi. Zá ávěrem nezb bývá než po opřát hodně štěstí při absolvování modulu m „IT v podniku“ a hllavně hodně zábavy běheem získáváníí spousty novvých a jistě užitečných znalostí. Auto oři

5

Prrogramováníí business ap plikací

V VÝSTUPY Y Z UČENÍ Znalo ost základníh ho program mování interrnetových p prezentací a aplikací Znalo ost prezentaačních techn nologií v intternetu – HTTML, CSS, JaavaScript Základ dní znalost serverových prostředkků ‐ databázzového servveru MySQLL a skriptovacího jazyka PHP Znalo ost technickýých a markeetingových analýz internetové preezentace Znalo ost základnícch optimalizzačních mettod

6

ostředky internetové kom munikace Teechnické pro

1 Techn nické prrostředkky intern netové komuniikace Ú ÚVOD Ka apitola se za aměřuje na prostředky internetové i komunikacee, to znamen ná, že budete neejdříve sezná ámeni se speecifiky HW a SW u serverrů, dále si přiiblížíme tech hnologii klien nt‐ seerver, na kteeré je postavveno fungová ání veškerýcch internetovvých aplikacíí. Popíšeme si ta aké komunikkační protokkoly na inteernetu, bez kterých si dnešní svět nedokážem me přředstavit a posledním p t tématem je nasazení internetové aplikace, a kdee si popíšem me rů ůzné možnosti jejich nasa azení. CÍÍLE KAPITOLY Y Po o prostudová ání této kapiitoly a vypra acování úkollů budete UM MĚT: vybratt vhodné řeššení pro nasaazení interne etové aplikacce zařadiit komunikačční protokolyy mezi aplikační a síťové protokoly Po o prostudová ání této kapiitoly a vypra acování úkollů ZÍSKÁTE: znalossti z oblasti p protokolů na internetu přehleed v jednotlivvých možnosstech nasaze ení internetových aplikaccí základ dní informacee o technolo ogii klient‐serrver Po o prostudová ání této kapiitoly a vypra acování úkollů BUDETE SC CHOPNI: popsat rozdíl mezii uživatelským m PC a serve erem komun nikovat se seerverem pom mocí HTTP prrotokolu skrzze telnet

7


1..1 HW, SW W Zd de se nebud deme zabývaat klasickým hardware a a software používaným p na pracovníích stanicích, tyto znalosti předpokládááme, že si již přinášííte z modu ulu Informačční ko ompetence aa zaměříme sse na specifiika spojené s provozováním internettových aplikací tj.. serverů. Proto, pokud V Vám termínyy jako je zákkladní deska, processor, paměť atd. nic neeříkají, doporučuji Vám n nejdříve šáhn nout po opořře IK a prostu udovat kapitolu B1.

1..1.1 Hardware Po okud jste měěli někdy mo ožnost nahléédnout do ce eníku kompo onent určenýých pro server, assi Vás zarazilaa jejich výrazzně vyšší cen na oproti běžžným osobníím počítačům m. Důvodem m je sn naha cokoliv co se můžee pokazit po okud možno zdvojit (duplikovat) a m mít tak zálo ohu v případě selh hání určité komponentyy a zajistit tím t pokud možno m nepřřetržitý provvoz seerveru a tím i jeho služeb b. S nepřetržitým m provozem souvisí i jedn na velmi důle ežitá vlastno ost některých h komponent a to ou je možnosst je připojit resp. odpojit (tj. provéstt jejich výměěnu) za plnéh ho provozu b bez nu utnosti servver vypnout (např. pro ovést výměn nu vadné součástky). TTuto vlastno ost naazýváme hott swapping. Běžně se můžeme m setkat i s termíínem hot pllugging, což je ozznačení pro možnost přidání nového o hardware aa rozšířit takk funkcionalitu současné ého syystému (napřř. USB zařízení jako jsou externí diisky, myši, tiskárny, příp padně PCMC CIA kaarty v notebo oocích). Seervery bývajíí obvykle um místěny ve speciálních místnostech, které nazývám me serverovvny něěkdy též dattová centra (Obr. 2.1). Tyto T místnossti jsou typické tím, že jsou vybave eny výýkonnou klimatizací (pro zajištěníí optimálnícch teplot), protipožárn ním systéme em (o obvykle na plynné bázzi např. FM M‐200, aby nedošlo k p poškození H HW), záložn ním syystémem en nergie UPS společně s s dieselovým mi motorgen nerátory (několik sério ově zaapojených UPS U jednoteek s bateriovvými moduly, pro nezzbytně nutn nou dobu než n naaběhnou dieeselové mottorgenerátorry), dvojitou u podlahou (v podlaze bývá vede ena ko ompletní kab beláž, mnohd dy zde bývá systém kanálů pro rozvvod chladnéh ho vzduchu od kliimatizace) a vzhledem k velké k váze HW se můžžeme setkat i se zpevněnou podlaho ou. Dáále bychom zde mohlyy zařadit kam merový systtém, bezpeččnostní systém dveří, pro p zaajištění vstup pu pouze au utorizovaným m osobám, nebo pro sn nížení prašnosti povinno ost přřezouvání, náávleků. OBRÁZEEK 2.1

Pohled na ttypickou servverovnu

Z Zdroj: hardfo orum.com 8

ostředky internetové kom munikace Teechnické pro Skkříně, jež vid díme na ob br. 2.1, nazýýváme rack skříň. Do těchto „racků“ se monttují jednotlivé serrvery (důvod dem je úspora místa, be ezpečnost, atd.). a Každá takováto skříň bsahuje n po ozic, všechnyy pozice mají pevně dané é rozměry pro o dosažení u univerzálnostti a ob vzzájemné kom mpatibility – jedna pozicee v rack skřín ni se označuje jako 1U (p pokud uvidím me teedy např. u seerveru označčení 2U, jedn ná se o serve er zabírající d dvě pozice v rack skříni). To omu všemu je přizpůsob ben i case seerveru (serverová skříň), který se obvykle prováádí v ttzv. rack mo ount provedeení. Na obráázku 2.2 si lze všimnout sofistikovaného provede ení (u uspořádaní) jednotlivých j komponentt s maximáln ní snahou op proštění se od zbytečnýých kaabelů a nutn nosti cokolivv „šroubovatt“. Např. pro o zajištění potřebného p cchlazení uvn nitř skkříně ‐ systéém několika samoregulo ovatelných hot h swap věětráků (tak aby v přípaadě seelhání některrého z nich mohly ostattní přebrat je eho úlohu), dva zdroje napájení (op pět prro případ porruchy), velkéé množství ho ot swap diskků (na uvedeném obrázku u 2.2). OBRÁZEEK 2.2

2U server o od Dellu

Z Zdroj: Dell pitolu pak tvoří servero ové základní desky (mottherboard o obr. 2.3), kte eré Saamotnou kap krrom několikaa záložních p prvků (např. zdvojení biosu), jsou opttimalizoványy především na výýkon. Největšším jejich rozzdílem oprotti uživatelskýým počítačům m jsou: •

•

•

počet paměťových h slotů (tedyy maximální p počet paměťťových modu ulů, kterými lze základ dní deska osaadit a s tím ssouvisí i maxximální počett GB RAM), zzpravidla jejiich počet bývá nejmééně 8 (uživatelské počítačče mívají 4 aa notebooky dokonce jen n 2 obr. 2.2) sloty),, ale lze se seetkat i s 22 slloty (např. u serveru na o počet procesorů, v základu maají stejně jakko uživatelskké počítače p patici pouze na ma (např. na obr. 2.3 si lze jeden procesor, ovšem typicky se setkávááme se dvěm u dvou patic na procesorry) a více pro ocesory všimnout v levém horním rohu počítačů je tto známka lo ow‐ integrrovaná graficcká karta – zaatím co u užživatelských p endovvého řešení ((tedy levné řřešení určené é pro kancelářské práce,, nenáročné na grafickký výkon), u u serverů see rozhodně nejedná o levné deskyy, ale snahaa o

9


• •

integrraci a minim malizaci nezbytně důle ežitých prvkků pro exisstenci serve eru (graficcká karta je potřeba pou uze pro samotnou instalaci nebo opravu serveru u a pro běěžný provoz serveru je to o v podstatě zbytečná komponenta) obvykkle jsou osazeeny dvěma in ntegrovaným mi síťovími kaartami obecn ně méně „mu ultimediální““ (stejně jako o zde není po otřeba graficcký výkon, ne ení potřeb ba ani kvalitního audio výstupu – mnohdy neejsou audio konektory ani a v zadu u vyvedeny vviz. obr. 2.3)

OBRÁZEEK 2.3

esorová záklaadní deska o od Intelu Dvou proce

Z Zdroj: Intel

1..1.2 Softw ware So oftware lze d dělit z mnohaa různých hleedisek, obecn ně jej dělímee na: • •

systém mový aplikační

daalší hlediska dělení moho ou být např. dle licencí, rrozhraní, dru uhu, účelu, funkčnosti, atd. Prro naše účely si vystačííme s obecn ným dělením m rozšířeným m o nadřazeenou katego orii seerverové a klientské částii tj.: •

•

serverr o o klient o o

systémovýý sw aplikační ssw systémovýý sw aplikační ssw

1..2 Techno ologie klie ent‐server, vybavení obou stran n Mluvíme‐li o technologii M t k klient‐server r, máme na mysli vztah komunikujíccích uzlů v síti. s Ob becně je dělííme na:

10 0

ostředky internetové kom munikace Teechnické pro • •

klient‐‐server peer tto peer

U technologiee klient‐serveer, jsou komu unikující uzlyy striktně rozzděleny na kklientskou čáást, ktterá využívá sslužeb serverů (obvykle jje to tedy užživatelská čásst) a serverovou část, kte erá naabízí své slu užby ostatníím viz. obr. 2.4. Komu unikace probíhá tak, žee klient poššle po ožadavek serrveru, ten jejj zpracuje a p pošle zpět výýsledek. OBRÁZEEK 2.4

Komunikace klient – server

Z Zdroj: pepa.z zvonicek.info o mezi jednotlivými uzly naa stejné úrovvni U technologiee peer to peeer, probíhá komunikace m (všechny kom munikační uzzly jsou si rovny), r to znamená, z žee „peer“ po oskytuje služžby osstatním a zárroveň využívvá služeb ostaatních (v pod dstatě je serrverem a klieentem zárove eň, prroto se tou to o technologiií nebudemee speciálně vě ěnovat). Typ pickou aplikací peer to pe eer je například sd dílení souborru ve Window ws nebo tore enty atp. OBRÁZEEK 2.5

Komunikace peer to pe eer

Z Zdroj: cs.virg inia.eu

11


1..3 Komun nikační pro otokoly naa internetu u Ko omunikační p protokoly přřímo souvisejí se sedmi vvrstvým referenčním mo odelem ISO‐O OSI (n norma ISO 74 498). SCHÉMA A 2.1

OSI Referenční model ISO‐O

7. aplikačn ní Uživatelskká část

http, pop3, h smtt

6 6. prezentač ční 5. relačníí

SSL, NetBIOS

4 4. transport tní

U UDP, TCP, .. .

3. síťová

IPv4, IPv6, ..

OS

2. spojováá Ovladačee 1. fyzickáá Z Zdroj: autor Po opisem jednotlivých vrsttev se zde nebudeme zaabývat, ale jaak už vyplývá ze schémaatu 2.1 ‐ komunikkační protoko oly můžeme rozdělit ted dy dle toho, zda spadají do uživatelsské čáásti, nebo čássti operačníh ho systému ttj: • •

síťovéé aplikační

1..3.1 Aplikkační proto okoly Exxistuje nepřeberné mno ožství aplikaačních proto okolů, mezi nejpoužívanější aplikačční prrotokoly můžžeme zařaditt například: • • • •

12 2

poštovvní – pop3, imap, smtp webovvé – http, htttps soubo orové – ftp, ssftp, tftp pro přřenos audia aa videa – rtp, rtcp, mms, SIP, H.323

ostředky internetové kom munikace Teechnické pro Neejdůležitějším m protokoleem pro intternetové aplikace a je http (hypeertext transffer prrotocol) prottokol, který sse používá p pro přenos h hypertextovýých dokumen ntů ve formáátu HTTML. V souččasnosti je používán pro o přenos libo ovolných info ormací a po omocí rozšíře ení M MIME je tak m možno přenést libovolný typ souboru. Prrotokol fungu uje na principu dotaz‐odpověď. Klien nt (např. prohlížeč) navážže ze servere em sp pojení, poté zašle požad davek na weebový serve er a ten mu na jeho po ožadavek zaššle od dpověď a sp pojení je potté ukončeno o. Jedná se tak t o bezesttavovou kom munikaci, ressp. prrotokol http je bezestavvový. Komun nikace probíhá v textovvé podobě (ttedy pouze za po omocí tisknu utelných znaaků) a proto o je komunikkace čitelná i běžným uživatelem (vviz. přříklad 2.1). Prrotokol http používá pro komunikaci několik dotaazovacích meetod, nepoužžívanější jsou u: • •

• •

GET –– požadavek na uvedený objekt (nap př. webovou stránku), po ožadavek mů ůže obsah hovat parameetry – velikosst je omezen na na 512B POST – odesílá užživatelská daata na server (používá se např. pro odeslání dat z uláře na servver) – může o obsahovat ve elké množstvví dat (veliko ost je omeze ena formu nastavvením samottného webovvého serveru u) PUT –– nahraje data na server DELETTE – smaže data ze serveru

PŘÍKLAD D 2.1

Pro lepší přředstavu si vyzkoušíme simulaci webového P w klienta pomo ocí telnetu a jednotlivé příkazy budem me zadávat ru učně, čímž sii vyzkoušímee, jak probíháá komunikacce m mezi klientem m a serverem m za pomocí protokolu http.

1..4 Nasaze ení interne etové aplikkace Výývojový diagram pro nasaazení. Po okud chcemee provozovatt internetovéé aplikace, m máme samoseebou několikk možností. • • • • •

Webhosting Serverr housing Dedikované servery Managged servery Virtuáální servery

13

Prrogramováníí business ap plikací KONTROLNÍÍ OTÁZKY

Vyjm menujte alesp poň tři způso oby nasazení internetovéé aplikace. Jaké protokoly see používají u poštovních sserverů? Jaký je rozdíl mezzi technologiií klient‐server a peer to peer? K čem mu slouží hot swapping u u serverů? STTUDIJNÍ LITEERATURA 1. Roseb brok, E., Filso on, E. Linux, A Apache, MySSQL a PHP. GRADA Publisshing : Praha. 2005. ISBN 802412 2601 Group Stránkky projektu PH HP [online]. 2001‐2011. [cit. 2011‐10 0‐2]. Dostupn né 2. PHP G z: . 3. Apach he software ffoundation H HTTP Server p project [onlin ne]. 2011. [ccit. 2011‐10‐1 1]. Dostupné z: .

14 4

Klientská část internetové aplikace

2 Klienttská čásst intern netové aaplikace e Ú ÚVOD Kllientská čásst internetové aplikacee nebo preezentace zajjišťuje kvaliitní distribu uci zp pracovaných dat směrem m ke koncovéému uživateli. Jelikož pla atí staré pra avidlo, že obal prrodává, je nu utné se vždy zaměřit takéé na design a a uživatelskéé rozhraní da ané aplikace či prrezentace takk, aby veškerá aktivita, kkterá byla investována d do vývoje sam motného jádrra syystému nepřiišla vniveč. CÍÍLE KAPITOLY Y Po o prostudová ání této kapiitoly a vypra acování úkollů budete UM MĚT: jak a kk čemu se po oužívá JavaSccript, Flash a další doplňkkové technologie Po o prostudová ání této kapiitoly a vypra acování úkollů ZÍSKÁTE: základ dní přehled o o formátován ní pomocí CSSS Po o prostudová ání této kapiitoly a vypra acování úkollů BUDETE SC CHOPNI: se orieentovat v zákkladních HTM ML tazích

15


2..1 (X)HTM ML „H HyperText Markup M Langguage, označovaný zkraatkou HTMLL, je značkovvací jazyk pro p hyypertext. Je jedním z jazzyků pro vytváření stránek v systém mu World Wide Web, kte erý um možňuje pub blikaci dokum mentů na Internetu.“ Wikkipedia Taakto zní jedn na z definic, cco to jazyk H HTML je. V naašem kontexxtu tvorby bu usiness aplikací see zaměřením m na tvorbu a optimalizaaci interneto ových prezen ntací k dostaačující definicce, žee jazyk HTMLL nám vytváří a formátujee nejdůležitě ější část prezentace – ted dy obsah.

2..1.1 Popiss jazyka Jazyk HTML je charaktterizován množinou m zn naček (tzv. tagů) a jejich atribu utů mentu a tím se deefinovaných pro danou vverzi. Mezi zznačky se uzavírají části textu dokum urrčuje význam m (sémantika) obsaženéého textu. Názvy N jednottlivých značeek se uzavírrají mezi ostré závvorky < a >. ntu tvořená o otevírací znaačkou, nějakýým obsahem m a odpovídající ukončovací Čáást dokumen zn načkou tvoří tzv. elemen nt (prvek) do okumentu. Například N <sstrong> je ottevírací značčka prro zvýraznění textu a <strong>Čeervená Karkulka je elemeent obsahujjící zvvýrazněný texxt. Součástí obsahu elem mentu mohou být další vnořené elem menty. Atribu uty jso ou doplňující informace, které upřesňují vlastnossti elementu. Zn načky jsou obvykle o párové, přičemž koncové značka je shod dná se značkkou počátečční, jen má před názvem znak lomítko. PŘÍKLA AD 3.

Ukázka páárového tagu u – odstavecc

<
N Nejaky te ext <
PŘÍKLA AD 3.

Ukázka ne epárového taagu – vodoro ovná čára a zalomen9 odstavce

<
<
PŘÍKLA AD 3.

Ukázka páárového tagu u s parametrry – odkaz zaanořeného do jiného tagu

<
Naše N šk kola má zkratk ku VŠP.

16 6

Klientská část internetové aplikace <

2..1.2 Záklaadní strukttura HTML dokumentu Prro zjednodušení si před dstavme jed dnu internettovou stránkku jako běžžný dokument. Kaaždý dokumeent je složen ze záhlaví, o obsahu doku umentu (těla) a zápatí. Obdobně je to o u do okumentu HTML H tedy jedné j intern netové strán nky. Každá z těchto strránek by mě ěla ob bsahovat sekkci ‐ ‐ tedy defin nici dokumen ntu a sekci ‐ těělo dokumen ntu (záápatí pouze ukončuje těllo a celý dokkument HTML). Ob becně má do okument v jaazyku HTML m má předepsaanou tuto strrukturu: ‐ ‐

‐

‐

Deklarrace DTD – jee uvedena direktivou a <) rep prezentuje ce elý ment. Kořen nový elemen nt je povinn ný, ale otevíírací a ukon nčovací značčka dokum samottná povinná není (pokud d tyto značkyy nebudou vv těle dokum mentu uveden ny, prohlíížeč si je sám m doplní podlle kontextu).. Hlaviččka elementu u – obsahujee metadata, kkterá se vztaahují k celém mu dokumentu. Definu ují např. názzev dokumentu, jazyk, kódování, k klííčová slova, popis, použžitý styl zo obrazení. Hlavička je uzzavřena mezzi značky a . Eleme ent head je opět po ovinný, ale jeho otevíraací a konco ová značka povinná ne ení, oplní podle kkontextu. prohlíížeč ji sám do Tělo dokumentu d – obsahuje vlastní textt dokumenttu. Vymezujee se značkaami a >. Element bo ody je povinný, ale jeho otevírací a kkoncová značčka povinn ná není, proh hlížeč ji sám doplní podle e kontextu. OBRÁZEK 3.

Ukázka kom mplexního kó ódu XHTML

Z Zdroj: vsp.cz

17


2..1.3 Seznaam značekk ‐ tagů Uvvádíme sezn nam základních značek (X)HTML. ( Jedná se o ceelkový seznaam tagů, avššak dn nes již někteeré nejsou do oporučoványy z hlediska o optimalizacee, jiné naopaak slouží pou uze k fformátováníí, které by ale mělo být nahrazeno kkaskádovými styly, kteréé jsou popsáány v následující kapitoly. Tag

Párový

Význam

poznámka

ano o

!doctype

speciifikace DTD

ne

a

odkaaz, hyperlink,, záložka

ano o

ab bbr

ustálený výraz

ano o

accronym

zkrattka

ano o

ad ddress

adressa

ano o

ap pplet

Java aplet

ano o

arrea

oblasst v klikací m mapě

ne

b

tučnéé písmo

ano o

baase

záklaad odkazů

ne

baasefont

záklaadní font

ne

bggsound

zvuk na pozadí

ano o

bigg

zvětššení písma

ano o

blink

blikání písma

ano o

blockquote

citace, odsazení

ano o

bo ody

tělo sstránky + definice pozadíí

ano o

brr

řádko ový zlom

ne

bu utton

tlačíttko

ano o

18 8

Klientská část internetové aplikace caaption

hlavička tabulky

ano o

ceenter

vycen ntrování

ano o

citte

citace

ano o

co ode

výpiss kódu

ano o

co ol

ovlivnění sloupcee tabulky

ne

co olgroup

skupina sloupců ttabulky

ne

dd d

defin nice termínu

ano o

deel

smazzaný obsah

ano o

dffn

nověě použitý term mín

ano o

dir

zvlášštní druh sezn namu

ano o

divv

Oddííl

ano o

dl

seznaam definic

ano o

dtt

defin novaný termíín

ano o

em m

zvýraaznění (kurzíva)

ano o

em mbed

objekkt s plužinou u

asi

fieeldset

skupina polí

ano o

fo ont

písmo

ano o

fo orm

form mulář

ano o

fraame

Rám

ne

fraameset

skupina rámů

ano o

h1 1

nadp pis 1. úrovně

ano o

h2 2

nadp pis 2 úrovně

ano o

h3 3


ano o

19

Prrogramováníí business ap plikací h4 4


ano o

h5 5


ano o

h6 6


ano o

heead

hlavička stránky

ano o

hrr

vodo orovná čára

ne

httml

začáttek HTML do okumentu

ano o

i

kurzííva

ano o

ifrrame

vložeený rám

ano o

im mg

obrázek

ne

input

vstup pní pole

ne

ins

přidaaný text

ano o

kb bd

vstup p z klávesnice

ano o

label

popiss pole

ano o

layyer

hladiina, vrstva

ano o

leggend

popiss pole

ano o

li

položžka seznamu u

nep povinně

lin nk

nezobrazovaný o odkaz

ano o

map

klikaccí mapa

ano o

marquee

běžíccí text

ano o

menu

typ seznamu

ano o

meta

inforrmace o doku umentu

ne

multicol

sloup pcová úpravaa

ano o

no obr

nezalamovat obssah

ano o

20 0

Klientská část internetové aplikace oembed no

bed alternativa k emb

ano o

no oframes

alternativa rámů

ano o

no oscript

alternativa ke skrriptu

ano o

ob bject

objekkt

ano o

ol

číslovvaný seznam m

ano o

op ptgroup

skupina voleb

ano o

op ption

Volbaa

ne

p

odstaavec

nep povinně

paaram

parametry objekttu

ne

prre

předformátovanýý text

ano o

q

citace

ano o

s

přeškkrtnutý text

ano o

saamp

ukázka výstupu

ano o

sccript

skrip pt, program

ano o

seelect

výběrové pole

ano o

sm mall

zmen nšení textu

ano o

sp pacer

prázd dné místo

ne

sp pan

úsek textu

ano o

strike

přeškkrtnutý text

ano o

strong

zvýraaznění (tučněě)

ano o

styyle

zápiss CSS stylu

ano o

su ub

dolníí index

ano o

su up

horní index

ano o

21

Prrogramováníí business ap plikací table

tabulka

ano o

tb body

tělo ttabulky

ano o

td d

buňkka tabulky

nep povinně

teextarea

velkéé vstupní pole

ano o

tfo oot

patiččka tabulky

ano o

th h

hlavičková buňkaa tabulky

nep povinně

th head

hlavička tabulky

ano o

tittle

tituleek stránky

ano o

tr

řádek tabulky

nep povinně

tt

teletype

ano o

u

podtržení textu

ano o

ul

odrážžkový seznam m

ano o

vaar

form mátování prom měnné

ano o

2..2 CSS V předešlé kapitole jsme si ukázali, jaakým způsobem distribu uujeme text, neboli obssah internetové prezentace. Jak již bylo zmíněno v úvvodu kapitolyy, je třeba se zaměřit taaké naa vzhled prezzentace či ap plikace a její uživatelské rrozhraní. Záákladní rozm místění prvků ů obstaráme pomocí pou užití jednotlivých tagů jaazyka (X)HTM ML. Ale co v přípaadě, že potřeebujeme pro ovést složitě ější formátovvání? V této chvíli musím me po oužít jiný jazzyk – CSS tzvv. kaskádovéé styly. Zmín něné základn ní formátováání lze využívvat v kombinaci s kaskádovým s mí styly, avvšak toto je staré vyu užití a v dn nešní době se needpoporučujje (jde např. o použití taggů pro ku urzívu). Co o si pod zmííněným form mátováním představit? p Je edná se nap př. o font píssma, typograafii píísma, barvu, zarovnání, o ohraničení, odsazení, okraje, pozicováání apod.

2..2.1 Typy vkládání C CSS Fo ormátování p pomocí kaskáádových stylů můžete prrovádět třem mi různými zp působy:

22 2

Klientská část internetové aplikace 1. Přímo o v HTML kód du pomocí parametru p sttyle. Tento způsob z ale n není vhodnýým, jelikožž nám uměle zvětšuje neobsahovo ou část preezentace a vvyhledávači je penaliizován. Jedná se o tzv. inline styly. 2. Druhýým způsobem m je nadefin nování celého formátováání v hlavičcee pomocí taagů <style>. Tento T formatt take není vhodný, pro otože stejně jako předešlý způsob zvětšuje neeobsahovou cast kódu. 3. Třetím m a nejběžn něji používaaným způso obem je deefinice kaskádových styylů v exteerním souborru. css a jeho o připojení po omocí jedno oho tagu v zááhlaví. 4. PŘÍKLA AD 3. Ukázka inline stylu
Můj text PŘÍKLA AD 3. < <style>

Ukázka de efinice inline e stylu v záhllaví

d div {colo or:green} < PŘÍKLA AD 3. Ukázka přřipojení exte erního stylu vv záhlaví type="text/css" < > Výýhodou defin nice stylu v zzáhlaví je mo ožnost speciffikace zařízení. V uveden ném případě se jedná o kaskáádové styly pro zobrazn ní, lze defino ovat ale takéé kaskádovéé styly pro tisk t neebo mobilní zzařízení.

2..2.2 Syntaaxe, selekttory CSS Dů ůležitou vlastností, která je shodná p pro všechny ttypy vkládán ní stylů, je mo ožnost definice vícce parametrů – např. barva zelená a zarovnání do oprava:

PŘÍKLA AD 3.

Ukázka inline stylu styl le=“text-color:gr reen;text t-align:r right”>Můj

Daalším zjednodušením práce p s kaskádovými styly s jsou tzv. t selekto ory, které lze ko ombinovat m mezi sebou: bo ody – Tyto deeklarace bud dou platit pro o všechny výýskyty elementu body. bo ody p – Tytto deklaracee budou plaatit pro všecchny elemen nty p, kteréé se nacházíí v elementu bod dy, v jakékolivv hloubce.

23

Prrogramováníí business ap plikací ody>div – Tyyto deklaracce budou pllatit pro vše echny elemeenty div, kteeré jsou děttmi bo elementu bod dy. To znamená, že pokkud bychom měli elemeent div, kterýý se nachází v body>
>…, tyto dekklarace by prro něj neplattily, protože tento div ne ení
Ukázka kom mplexního kó ódu CSS

Z Zdroj: vsp.cz

2..2.3 Omezení CSS CSSS selektory neposkyttují přístup k rodičovvským prvkkům, jako to umožň ňují so ofistikovanějšší jazyky jako například d XPath. Ne emůžete naapříklad nastylovat jen ty od dstavce, kterré obsahují o odkaz. Ho orizontální kontrola k prvvků na strán nce je intuttivní a jedno oduchá, nao opak vertikáální styylování už pů ůsobí probléém. Například d na obyčejn né vertikální centrování o obsahu se musí po oužívat pom měrně složitté kombinacce a hacky,, které ješttě nemusí být dopřed dně ko ompatibilní.[18] CSSS neposkytuje možnost pro symbolický zápis proměnné nebo konsttanty, všech hny ho odnoty musíí být vepsányy přímo v kó ódu. Napříklaad pokud se na vícero m místech použíívá stejná barva, nemůže see použít syymbolický záápis barva=red; a potéé už jen pssát prroměnnou baarva, všude sse musí uvád dět přímo ho odnota red.

24 4

Klientská část internetové aplikace očítat výrazyy, prohlížečee například neporozumí n výrazu margin‐left: 10% % ‐ CSSS neumí po 3eem + 4px;. W Webdesigner si to vše musí spočítat sáám. CSSS2 nenabízí žádnou možnost m pro tvorbu kulatých rámečků nebo jiiných kulatýých ob bjektů. Pracu uje pouze s o obdélníky. CSSS2 nenabízí žádnou možžnost, jak jed dnomu elementu přiřaditt více obrázkků na pozadí..

2..3 JavaSccript JavaScript je multiplatform m mní, objekto ově orientovaaný skriptovvací jazyk, ktterý se použíívá jako interpretovaný progrramovací jazyyk pro intern netové prezeentace a aplikace. Jsou jjím ob bvykle ovlád dány různé interaktivní prvky uživatelského ro ozhraní (tlačítka, validaace fo ormulářů, aniimace, graficcké efekty s o obrázky a jin né). Jak bylo zmíněěno, jedná se o samostatný jazyk, ktterý je provo ozovaný na straně klientaa a vyykonává určiité funkce. Jelikož J nápln ní tohoto díílčího modulu není výuka samotného prrogramováníí, odkážeme zájemce o b bližsí informaace na nepřeeberné množžství odkazů ať jižž na základyy samotného jazyka, taak i na zjed dnodušené využívání v jižž připravenýých kn nihoven funkkcí (např. pro o fotogalerie,, formuláře aapod.)

Ukázka jednoduchého o kódu pro vvyvolání inteeraktivní hlášky

PŘÍKLA AD 3. <

< > <
KONTROLNÍÍ OTÁZKY

Jaký je rozdíl mezzi (X)HTML a CSS? Jaký má vliv technologie Flash h na optimallizaci?

25


3 Serve erová čáást interrnetové aplikacce Ú ÚVOD V této kapitolee se seznám míme s vývojeem interneto ových aplikaccí a to v nejp používanějším ím an nejoblíběnějšším spojením m skriptovacího jazyka PHP ve sp pojení s data abází MySQ QL. Pa amatujte, žee tato kapito ola je pouze úvodem do dané probleematiky a po okud vás totto tééma osloví, d doporučuji sá áhnout po něěkteré z knih uvedených n na konci této o kapitoly. CÍÍLE KAPITOLY Y Po o prostudová ání této kapiitolya vypracování úkolů ů budete UM MĚT: ovládat základy jaazyka PHP vytvářřet a zpracovvávat formuláře sestavvovat SQL do otazy pro výb běr dat Po o prostudová ání této kapiitolya vypracování úkolů ů ZÍSKÁTE: znalossti jak tvořit d dynamické stránky pro in nternet přehleed o možnostech program mování aplikkací na intern netu nutné znalosti pro o práci s relaččními databáázemi Po o prostudová ání této kapiitolya vypracování úkolů ů BUDETE SC CHOPNI: vytvářřet jednoducché interaktivvní webové aaplikace navrho ovat, vytvářeet a upravovvat jednoduché databáze pracovvat s databázzí MySQL

26 6

Seerverová částt internetovéé aplikace

3..1 Nástro oje pro tvo orbu intern netových aplikací Teext subkapito oly

3..1.1 Staticcký a dynaamický dokkument U internetových aplikací ro ozlišujeme záákladní dva ttypy dokumeentů • •

statickký dynam mický

v neměěnný a uživaatel si nemů ůže Sttatický dokument se vyzznačuje tím, že je jeho vzhled ed ditovat jeho obsah – pro jakoukoliv zzměnu v obsahuje, je odkkázán na vývvojáře. Staticcké do okumenty see používají předevím p pro o vytvoření vyzitek, preezentací firem m, které chttějí býýt viděni na internetu, ale zároveň n nehodlají invvestovat hod dně prostřed dků na realizaci webových porrtalů. pakem jsou pak dynamické dokumeenty, odkterýých očekáváme, že budo ou reagovat na Op užživatelské po odměty. Výsledný vzhled je pak gene erován až za běhu aplikace. Dynamiccké do okumenty see dále dělí po odle toho, kd de probíhá je ejich interpreetace • •

dynam mický dokum ment na stran ně klienta dynam mický dokem ment na stran ne server

Mluvíme‐li o d M dynamických h dokumenteech na stran ně klienta, m máme na myysli to, že jejiich vyytvoření, resspektive mod difikaci zajišťuje nejčastěji prohlížežž (klient). Jejjich úkolem je zaajištění interaktivity s uživatelem (např. zm měna obrázkku při přejetí kurzore em, zaareagovat naa kliknutí tlaččítka, kontrola dat ve formulářích neb bo otevření, opuštění okkna prrohlížeče). Fu unguje to takk, že spolu s HTML stránkou je prohlížeči odeslán n i programo ový kó ód (nejčastěji využívaný jje JavaScript), který je ve e vhodnou do obu na klien ntském počítači sp puštěn. Nejvvětší jejich nevýhodou je závyslo ost na konkkrétním pro ohlížeči (ruzzné prrohlížeče mo ohou podpo orovat napřř. pouze částečnou implementaci, nebo mohou ob bsahovat chyyby atp.). Dyynamické do okumenty na n straně seerveru jsou specifické tím, že jsou zpracováváány (in nterpretován ny, spuštěny) na vzdálen ném serveru. Z tohoto dů ůvodu jejich výsledek nelze zo obrazit v pro ohlížeči přímo (jako u HTML) ale po otřebují pro svůj běch w webový servver (n např. apache, IIS), který b bude podporovat zvolen ný jazyk. Mezi jejich výho ody patří nízzká záávislost na prrohlížeči, sch hopnost řešitt složité a ro ozsáhlé úlohyy (využívají vvýkon a prosttor ho ostitelského serveru). Veškeré V požadavky a data se přen nášejí přes síťové spoje ení (p protokol TCP). Mezi omezení o (které jsou dány d samotnou architeekturou) paatří neeschopnost rreagovat na uživatelské u události vnikklé u klienta (pohyb myši, stisk klávesy, attp.) – toto vššak řeší dynaamické dokumenty na straně klienta. Nejpoužívaanější jazyky na straně serveru u jsou PHP, A ASP, CGI, ruby, java. Ob brázek 4.1 přřibližuje prin ncip zpracováání okumentů naa straně servveru – konkréétně u jazykaa PHP. do OBRÁZEEK 4.1

Princip dynamických do okumentů naa straně servveru

27


Z Zdroj: autor

3..1.2 Edito ory pro tvo orbu intern netových aplikací Jádro samotnýých internetových apliakkcí, ať už klie enstké nebo serverové čáásti aplikace,, si můžeme představit jako kompilát texttových soborrů obsahujícíí řídící příkazzy a strukturyy v rů ůzných progrramovacích jazycích. Důleežitým poznaatkem je práávě skutečno ost, že se jed dná o textové soubory, z čeho ož vyplívá možnost je ed ditovat v libo ovolném texxtovém edito oru jako je i například notepad d ve window ws. Pozor na editory pro tvorbu doku umentů jako o je M Word, nebo Write (so MS oučástí Open nOffice), nejen že nejsou vhodným nástrojem, ale a po okud neuložííte výsledek jako prostý ttext, nebude e výsledný so oubor použittelný (mluvím me saamozřejmě o o nativním fo ormátu dané aplikace tj. p příponách jako jsou .doc,, .docx atd.).. Ed ditory můžem me rozdělit d do několika kkategorií na základě jejicch vybavenosti a nastrojíích ulehčující prácci s tvorbou iinternetovýcch aplikací. • • •

primittivní (např. notepad, nano, …) pokročilé (např. PSSPad, NetBeans, Eclipse, KDevelop, … …) visuální (HTML Beauty, MS Fro ont Page, MSS Visual Web b developer, …)

Prrimitivní edittory plní zákkladní funkci a tou je příímá editace zdrojových kódů vetšinou beez dalších specializovan s ných nástrojjů. Občas se vyskytuje podpora p pro zvýrazně ění syyntaxe na záákladě přípo ony. U těchtto editorů je předpokláádaná výborrná znalost jak j pssané aplikacce, tak sam motná znalo ost program movacího, reesp. značkovvacího jazyka. V současné do obě se pou užívají spíše pro rychlou u opravu ch hyb, jako no ouzové řeše ení. becně se aplikace v tomtto prostředí nevyvýjí. Ob okročilé editory nabízejí,, oproti prim mitivním edittorům, celou u řadu speciáálních nástro ojů Po (viz. Obr. 4.2) jakou jsou například: • tvorbaa projektu • přehleedná struktura projektu • stromová strukturra psaného kkódu, třídy • zvýrazzněna syntaxxe • našep ptávání • realtim me zobrazen ní, resp. oprava chyb • ladící možnosti matické formátování • autom • code ffolding (skrývvání částí kódu) 28 8

Seerverová částt internetovéé aplikace •

…

Naa první poh hled je jasnáá oblíbenostt těchto násstrojů u vývvojářů. Dovo oluje tak vě ětší so oustředěnostt a efektivittu při vývojji. V současn nosti se jed dná o asi n nejpoužívaně ější kaategorii edito orů používan ných pro tvorrbu webovýcch aplikací. OBRÁZEEK 4.2

NetBeans

Z Zdroj: autor oslední kateggorií a stále oblíbenější jjsou visuální editory (viz. Obr. 4.3), kkteré umožn nují Po něěkteré prvkyy aplikace (přředevším tedy formuláře e) visualisovvat a urychlitt a zjednodu ušit tím m vývoj aplikkací. Většino ou se používaají při vývoji informačnícch systémů, kde je potře eba vyytvořit spousstu formulářů ů.

29

Prrogramováníí business ap plikací OBRÁZEEK 4.3

Web develop per MS Visual W

Z Zdroj: micros soft.com

3..2 Základ dy jazyka P PHP PH HP je jedním m z jazyků, konkrétně scriptovacích s h jazyků, kteerý se použíívá pro tvorrbu dyynamických iinternetovýcch aplikací, jaako jsou například • • • • • • •

intern netové obcho ody podnikové informační systémyy (ať už intranetové nebo o internetovéé) diskussní fóra redakčční systémy vyhled dávače a katalogy webovvý poštovní čči databázovvý klienti drobn nosti typu počítadla, ankeety, atd.

Sccriptovací jazyk PHP po odporuje jakk procedurální tak i OO OP (objektvvě orientovaané prrogramováníí), obsahujee taktéž neezbytnou po odporu pro práci s dattabázemi a v neeposlední řáádě obsahuje také podporu pro práci se so ouborovým systémem, či um možnuje spo ouštět příkazyy samotného o operačního o systému. 30 0

Seerverová částt internetovéé aplikace Jeelikož je PHP P velmi rozsáhlé, naším cílem nebude kompletní zvládnutí tohoto jazyyka (p pro představu u knihy věnu ující se tomu uto jazyku čítají obvykle přes 600 strran), ale pou uze ossvojení si jeeho základn ních konstru ukcí. V případě hlubšího o zájmu o tuto tématiiku do oporučuji pro ostudovat litteraturu uvedenou na ko onci této kapitoly.

3..2.1 Vlože ení PHP scrriptu do jazyka HTML Jak už bylo řeečeno, PHP skript se zaapisuje v texxtovém tvarru. Pro získáání výsledného HTTML je před dán PHP inteerpretu (běžžícím na we ebovém servveru). Samottný PHP skrript ob bsahuje jedn nak kusy no ormálního HTTML kódu a a pak i kusyy PHP kódu. Když webo ový seerver obdrží požadavek n na zpracován ní takového skriptu, vezm me části HTM ML tak jak jssou a pokud naraazí na část s PHP s kodém m tu provede a výsledek zkombinujje do jedno oho výýsledného HTTML souboru u, který násleedně přepošle klientovy. Exxistují tři způsoby jak vložžit PHP kód d do HTML stráánky • • •

<scrip pt language=””PHP”>[PHP kód]

Po okud bychom m chtěli pou užívat prví variantu, v mu uselibychom m zapnut v kkonfiguraci tzv. zkkrácené tagy (konkrétně se jedná o short_open_ttags). Proto se nečastěji používá dru uhá vaarianta, kterrou zde bud deme taktéž používat. Příklad P 4.2 popisuje p ukáázku zápisu se vččleněným PH HP kódem. PŘÍKLAD D 4.2

Z Zápis kódu v editoru

T Textový (HTM ML) výstup z PHP interpreetu

Z Zobrazení v p prohlížeči

31


Z Zdroj: autor ové strukturyy, příkazy, deklarace, d fu unkce musí být oddělen ny středníke em. Vššechny dato Po okud se vám objeví při zo obrazená strránky chyba „„Parse errorr“, většinou tto znamená, že Váám někde ch hybí středník,, uvozovka n nebo konec závorky. PŘÍKLAD D 4.2

V Vytvořte PHP P skript, kterýý zobrazí v p prohlížeči věttu „Ahoj světte !“. ŘEŠENÍÍ 4.2

3..2.2 Kome entáře Ko omentáře jso ou úseky kód dů, které serrver ani proh hlížeč nezobrrazuje, resp. nezpracovávvá. Věětšinou slou uží ke zvýšení přehled dnosti psané ého kódu, případně p popisu dané ého prroblému (naapř. po měěsíci, kdy see vrátite ke e zdrojovém mu kódu, sii již nemussíte paamatovat, proč p jste zvolili danou konstrukci, nebo proč jste zadali nestandard dní paarametry a né běžné atp.). U ro ozsáhlejších programů jsou j naprossto nezbytnou po odmínkou. Naučte N se prroto komenttáře používat hned, později je budeete používat již au utomaticky. Taaké syntaxe kkomentářů (způsobů jejicch zápisů) je hned několiik •

32 2

jednořřádkový kom mentář ‐ začín ná uvozovacím znakem aa končí konceem řádku o // Text – kkomentář je uvozen dvěm mi lomítky o # Text – ko omentář je u uvozen tzv. h hash znakem (Alt+Ctrl+3))

Seerverová částt internetovéé aplikace •

Více řádkový komentář – začín ná sekvencí //* (lomeno, hvězdička) aa končí opaččně tj. */

PŘÍKLAD D 4.3

Ukázka pou užití komentáářů

3..2.3 Výstu up na obraazovku 3..2.4 Prom měnné Prroměnné v jaazyce PHP, se s nemusí (n na rozdíl od jiných proggramovacích jazyků jako je naapř. C++, C#,, Java) deklaarovat ani exxplicitně uváádět její typ.. Název prom měnné se vžždy uvvozuje znakem $ a náásleduje názvem proměnné složen né ze znakků A‐Z, a‐z, _ (p podtržítko), 0‐9. Pozor název proměnné nesmí začínat číslicí. V přříkladu 4.4 je zo obrazeno někkolik správnýých i chybnýcch názvů pro oměnných. PŘÍKLAD D 4.4

Ukázka pou užití názvu prroměnných

N Níže je uvede eno několik n názvů proměěnných

N Naopak chyb bné názvy pro oměnných jssou r dlle typu přiřaazené hodno oty Tyyp proměnnéé se mění zaběhu podlee potřeby, respektive daané proměn nné. Tabulkka 4.1 zob brazuje přehled primittivních (zákkladních) tyypů prroměnných. TABULK KA 4.1 Typ

Přehled primitivních typů proměnn ných

Názevv PHP

v Pop pis

33


Logický

Boolean

Uch hovává hod dnotu „pravvda“ nebo „neravda“.. Zap pisuje se jaako TRUE a FALSE (n na velikostii písm menek nezálleží, můžemee tak napsatt třeba tRUEE a FaalsE).

Celočíselný

Integeer

Uch hovává celá kkladná i zápo orná čísla (a nulu). Jejich h orzssah je cca od d ‐2 biliónů p po +2 bilióny..

Desetinné ččíslo Float, Real

Uch hovává desettiná čísla. S p přesností obyyčejně na 14 4 desetinných míst m a rozsahem, kde číslo začínáá jedn ničkou a můžže mít 308 nul.

Řetězec

Uch hovává textyy neboli řettězce. Řetězzec je znak,, neb bo sada znaků, v PHP prakticky neomezené délky

Stringg

3..2.5 Operrátory Op perátory v jaazyce PHP jso ou velmi pod dobné ostatn ním jazykům (např. C++), jejich základ dní přřehled uvádíí tabulka 4.2 2. Dalším bežžne používaným operáto orem je . (teečka), která se po oužívá pro zřřetězezení něěkolika řetězzců. TABULK KA 4.2

34 4

Přehled zákkladních ope erátorů


PŘÍKLAD D 4.5

Ukázka pou užití matematických operrací

35

Prrogramováníí business ap plikací PŘÍKLAD D 4.6

Adresa

3..2.6 Řídící strukturyy Jazyk PHP po odporuje mn noho nejběžžnějších řídíících struktu ur dostupnýých v ostatníích prrogramovacích jazycích. Ř Řídící struktu ury můžeme rozdělit do d dvou skupin • •

podmínkové řídicíí struktury cyklickké řídicí struktury

Po odmínkové řřídicí struktury ovlivňují b běh program mu a umožňu ují na základ dě stanovenýých po odmínek vykkonat nebo p přeskočit urččité bloky kó ódu. Cyklické řídicí strukttury vykonávvají urrčitý kód víceekrát. Počet opakování jee opět určen podmínkou. 3.2.6.1 Pod dmínkové říd ídící struktu ury odmínkové řídicí ř struktu ury jsou nejjdůležitějším mi prvky, jež umožňují p programu vo olit Po mezi různými průběhy (věětvení progrramu), přičemž volba je založena naa rozhodnutíích přřijímaných ažž během spu uštění prograamu. Syntaxe e je následujíící • • •

if (výraaz, podmínka) { ………. } if (výraaz, podmínka) { ………. } eelse {………. } if (výraaz, podmínka) { ………. } eelse if {……….. } else {……… …. }

V závorce se testuje proměnná typu boolean nebo o jakýkoliv výýraz pomocí porovnávacíích op perátorů. PŘÍKLAD D 4.7

36 6

užití konstrukkce if, else Ukázka pou


PŘÍKLAD D 4.8

Ukázka pou užití konstrukkce if, else if,, else

Přříkaz switch (přepínače)) se používaají k eleganttnímu nahraazení dlouhýých konstrukcí if,elseif. Příkazzu switch see předá výraaz, jenž se pak p v jednotllivých altern nativytách caase po orovnává se všemi potřeebnými hodn notami. Je‐li nalezena sho oda, je vykon nán následujjící kó ód, dokud se nenarazí na příkaz breakk. Syntaxe je e následující •

switch h (podmínka) { case vyraz1: case vyraz2: case vyrazn: ult: defau }

Výýše uvedená syntaxe vpo odstatě nahrazuje tu to kkonstrukci •

if (vyraaz1) {……….}

37

Prrogramováníí business ap plikací elseif (vyraz2) {…… …….} …….} elseif (vyrazn) {…… else {… ……….} PŘÍKLAD D 4.9

Ukázka pou užití konstrukkce switch, caase, default

P Pokud bycho om do proměěnné $CodeName přiřad dily proměnn nou $name1 1, výsledek b by b byl následujíc cí:

3.2.6.2 Cykllické řídící sstruktury Cyyklické řídicí struktury, jaak jsme už uvvedly v úvod du, se používvají pro opakkování určité ého bloku program mového kódu u. Rozlišujem me dva typy ttěchto strukttur‐ for a while. Syyntaxe příkazzu for je následující •

for (prrvní_výrazy; pravdivostní_výrazy; inkkrementační__výrazy) {…...}

38 8

Seerverová částt internetovéé aplikace PŘÍKLAD D 4.10

užití cyklu forr Ukázka pou

O něco jednod dušší je konsstrukce whilee, kde rozeznáváme dvaa typy a to s podmínkou na zaačátku a podmínkou naa konci cyklu. Základním m jejich rozzdílem je, žee cyklus wh hile s p podmínkou n na konci se vvždy alespoň jednou provvede. Násled duje syntaxe obou variant • •

while((podminka) {{……….} do {…… …….} while(p podminka);

PŘÍKLAD D 4.11

Ukázka pou užití cyklu wh hile s podmín nkou na začátku

39


PŘÍKLAD D 4.12

Ukázka pou užití cyklu wh hile s podmín nkou na koncci

40 0


3..3 Databááze MySQL 3..3.1 Příkaazy v MySQ QL Daatabáze MySSQL obsahujee několik dru uhů příkazu aa to pro • • • •

definicci výběr manip pulaci s daty oprávnění

Deefiniční příkaazy CREATE TTABLE, DROP P TABLE se po oužívají pro úpravy strukktury databázze. Neejčastějším a nejpoužívvanějším přříkazem je příkaz pro výběr dat SELECT. Je eho zjeednodušená syntaxe je n následující •

SELECT [seznam polí] FROM [název tab bulek] WHER RE [podmínkka] ORDER BY [seřazzení]

Mezi příkazy pro manipullaci s daty patří: M p INSERTT pro přidáníí nových datt do databáze, UP PDATE, REPLLACE pro editaci již existtujících dat a DELETE prro odmazání í již existujícíích daat.

3..4 Databááze v PHP 3..4.1 Připo ojení k dataabázi Prro připojení kk databázi a spouštění do otazů se pou užívají násled dující příkazy • • •

mysql_connect(seerver, uživateel, heslo) mysql_select_db(n nazev_datab baze) mysql_query(dotaaz)

Jeejich typické vvyužití přibližuje příklad 4.13

41

Prrogramováníí business ap plikací PŘÍKLAD D 4.13

pojení k databázi MySQL Ukázka přip

KONTROLNÍÍ OTÁZKY

Jaký je hlavní rozzdíl mezi cyklem while s podmínkou na konci a cyyklem while s podm mínkou na zaačátku? K čem mu slouží cykkly v program movacích jazicích? K čem mu se používvá skriptovaccí jazyk PHP?? Jaké druhy příkazzů rozlišujem me v databázích? STTUDIJNÍ LITEERATURA 4. Koflerr, M., Oggl, B B. PHP 5 a MyySQL5. Comp puter press : Brno. 2007.. ISBN 97880 025118139 5. Košekk, J. PHP. GRA ADA Publishing : Praha. 1 1999. ISBN 80 071693731 6. Gutmaans, A., Bakkken, S., Rethaans, D. Mistrroství v PHP 5 5. Computerr press : Brno o. 2005. ISBN 80‐251 1‐0799‐X

42 2

ptimalizace iinternetové aplikace Op

4 Optim malizace e interne etové aplikace Ú ÚVOD Úččelem intern netové aplika ace nebo preezentace nen ní pouze existtovat. Primá árním cílem jje, ab by Vám da ané aplikacee přinášela maximální zisk. Jak ttyto t zisky zvyšovat, ja ak op ptimalizovat prezentaci a a jak tyto změny měřit see dozvíte v ná ásledující kam mitole. CÍÍLE KAPITOLY Y Po o prostudová ání této kapiitolya vypracování úkolů ů budete UM MĚT: Porozumět probleematice optim malizace inte ernetové aplikace Zpraco ovat základní optimalizačční audit Ošetřiit zjištěné chyby Po o prostudová ání této kapiitolya vypracování úkolů ů ZÍSKÁTE: Znalossti pro celkovvé pochopen ní problemattiky optimalizzace Inform mace nutné p pro ošetření nejčastějších h chyb Znalossti pro měřen ní výkonosti Vaší aplikace e Po o prostudová ání této kapiitolya vypracování úkolů ů BUDETE SC CHOPNI: Provésst audit pom mocí volně do ostupných náástrojů Vyznat se v základních pojmecch měření náávštěvnosti Kontro olovat tvorbu nové nebo o úpravy stávvající internetové prezenttace

43


4..1 Rozdělení optim malizací Op ptimalizace internetovýcch aplikací se s dnes zjed dnodušuje pouze p na op ptimalizaci pro p vyyhledávače – – SEO (Searrch Engine Optimization O n). Pojem optimalizace o je však tře eba ch hápat v širšícch souvislosteech.

4..1.1 Onlin ne a offline e optimalizzace Záákladní rozděělení optimaalizace lze vytvoři v analo ogicky dle ro ozdělení světtů na reálnýý a virtuální – rozzdělujeme teedy offline optimalizaci o – tj. vše, co o provádíte mimo intern net prroto, abyste přivedli pottenciální zákazníky na vaaši interneto ovou prezenttaci či aplikaaci. M Může se jed dnat např. o informacce na tiště ěných mateeriálech (vizitky, inzeráty, billboard,…), v radiových v či televizních h reklamách, v osobní komunikaci aapod. Na vše ech těěchto místech je dnes vh hodné uváděět adresy na vaši internetovou prezeentaci, kde sii je aťť již cílený či náhodnýý příjemce daného sdělení schop pný dohledaat podrobně ější informace. nline – analogicky se jedná o všech hny Drruhou částí optimalizacee je pak opttimalizace on acctivity, které provozujetee na internet a směřují k maximalizacci výkonu vašší prezentace e či ap plikace.

4..2 Online e optimalizzace ‐ SEO V rámci dané dílčí části modulu m se budeme b zam měřovat pouze na onlinee optimalizaaci, něěkdy nepřesn ně označovanou jako SEO O. Co to vlasttně SEO je? „SSEO je balíčeek metod, které umožňují vyhledávačům snadněěji nalézat, in ndexovat, tříídit a hodnotit webový obsah.“ Lee Odden n, CEO Top Ra ank Online M Marketing Optimalizacee nalezitelnossti na interneetu“ Marek P Prokop „O webu z vyh „P Proces zvyšo ování objemu u a kvality návštěvnosti n hledavačů prostřednictvvím přřirozených neboli n neplaacených (orrganických či č algoritmicckých) výsleedků hledán ní.“ W Wikipedia

4..2.1 On‐p page faktorry On n‐page fakto ory jsou fakto ory optimalizzace, které se přímo nacházejí na dané interneto ové prrezentaci či aaplikaci a kteeré může pro ovozovatel nebo jeho weebmaster ovllivňovat. Jed dná see především o: Teextový obsah h Vaaliditu (pravo opis) značkovvacího jazykaa (X)HTML Un nikátnost ob bsahu Ko orektní hlaviččky dokumentů a meta ttagy Ob bsah tagu tittle Ob bsah tagu deescription Ro obots.txt – in nformace pro o roboty Sittemap.xml – technickáá mapa stránek včetně preferenccí jednotlivýých stránek a informací o po oslední změn ně na stráncee místění/neumístění‐vícenásobné um místění nadpissu 1. Úrovněě H1 Um Sttruktura nadpisů dle hlou ubky – H1, H2, H3… 44 4


4..2.2 Off‐p page faktorry Jeestliže on‐pagge faktory p pojednávaly o o samotné in nternetové p prezentaci, lze z názvu o off‐ paage faktorů vydedukovaat, že se jedná o vše mimo Vaši prezentaci (ale pořád na internetu). Tyyto faktory se dnes považují za zásadní, přeestože splněění a správvné page faktorů ů je dnes pod dmínka nutnáá. naastavení on‐p M Mezi základní off‐page fakktory patří: Po očet zpětnýcch odkazů Kvvalita zpětnýých odkazů An nchor texty Teexty v okolí o odkazu Téématicky pod dobný obsah h na stránce ss odkazem

4..2.3 Konvverze Taak, jako se vyvíjí svět internetu a internetových prezen ntací, vyvíjí se i chápáání ússpěšnosti intternetové prrezentace. V dřevních V dobách se kvvalita prezen ntace brala dle d ho odnocení tzvv. GTPR (Go oogle Toolbaar Page Ran nk) a S‐Rankk (obdobné hodnocení od Seeznam.CZ). Jedná se však ne o hodn nocení dané prezentace ale pouze o o jakési čísellné vyyjádření jejích onpage a o offpage parametrů. Po ostupem čassu se začala m měřit návštěěvnost prezentací – a to jak z pohled du zobrazenýých stránek, tak předevšímz p pohledu ceelkových návvštěv nebo návštěvníků. Dnes se dají d jednotlivé infformace obohatit o ceelkové chování uživatellů, zdroje n návštěvnosti a přředevším konverze na cíle. c Cíle si stanovuje s prrovozovatel internetovéé prezentace e – jedná se napřř. o odesláníí objednávkyy, odeslání kontaktního k formuláře, strávení urččité do oby na prezentaci apod. Celkový po oměr návště ěvníků na sp plněné cíle p pak určuje tzv. ko onverzi, což by měla býýt dnes pro každého pro ovozovatele internetovéé prezentace e či ap plikace stěžejní proměnn ná, dle které se má řídit.

4..3 Analyttické a aud ditovací náástroje V následujících h podkapito olách si uveedeme něko olik základní nástrojů, kkteré můžem me po oužít pro účeely analytickéé – zjišťován ní stavu preze entací a jejicch technickýcch nedostatkků, a dále pro účeely analytickéé z pohledu m měření návšttěvnosti a ko onverzí.

4..3.1 Googgle Analytics Go oogle Analyttics je analyttický nástrojj určený pro o podrobné sledování věětšiny aspektů, ktteré potřebu ujete znát pro p úspěšný provoz inte ernetové aplikace či preezentace. Jaako jeden z mála n nástrojů Vám m poskytuje u ucelené informace o návvštěvnících a jejich chováání, možňuje Vám m nadefinovvat jednotlivéé cíle internetové prezentace a nasttavit konverze. um Výýhodou je možnost m pro opojení s dalšími nástrojji Google – např. Googgle Webmastter To ools pro účely řešení chyyb nalezenýcch robotem, nebo např. Google AdW Words či jinýých reeklamních síítí, kdy prim mo ve svých h reportech mate možn nost zobrazit nákladovo ost jednotlivých splněných cílů ů či celkové n náklady reklaamních kampaní.

45


odní obrazovvky Google A Analytics Ukázka úvo

Z Zdroj: Google e.com

4..3.2 Googgle Webmaaster Toolss Go oogle Webm master Toolss je čistě teechnický násstroj pro sp právce webu u. Po nasaze ení um možňuje získkat od vyhled dávače Googgle detailní in nformace o vviditelnosti dané aplikace e či prrezentace. Zároveň Z nab bízí jedinečn nou možnosst zjistit vzn niklé dupliciity meta taagů deescription neebo title a to o skrz všechny stránky n na prezentacci (a to doko once i aktuállně neeindexovanéé, pokud poskytnete svůj soubor sitem map.xml). Daný nástroj jje poskytovaaný zd darma a lzee jej provázaat s nástrojeem Google Analytics taak, aby spo olu poskytovvali uccelené inform mace např. o o vyhledávan ných slovech h v rámci Vašší prezentace a následné ém ch hování uživatelů. V souččasné době je j v nástroji implementována již také funkce pro p sleedování tlačíítek sociální sítě Google++

46 6

ptimalizace iinternetové aplikace Op OBRÁZEEK 5.2

odní stránky nástroje Go oogle Webmaaster Tools Ukázka úvo

Z Zdroj: Google e.com OBRÁZEEK 5.2

Informace o o description n a title

Z Zdroj: Google e.com

4..3.3 MS SSEO Toolkitt MS SEO Toolkkit je nástro M oj poskytovaaný společno ostí Microsoft a původn ně určený jaako do oplněk systéému IIS. Dan ný nástroj lzze ale provo ozovat zcela samostatněě a jako jed den z vvelmi mála u umožňuje po omocí nativn ní desktopové aplikace reekurzivně an nalyzovat celou internetovou prezentaci. Kromě stand dardních nedostatků v rrámci onpage optimalizaace

47

Prrogramováníí business ap plikací ojímá díky simulaci chovvání robota vvyhledávače také problematiku kano onických URLL a po něěkolikanásob bného přesm měrování. Kromě K duplicity meta tagů title a description po oskytuje v ráámci technické analýzy vvýsledky shodné s Google Webmasteer Tools, avššak prroaktivním řeešením lze tyyto chyby od dhalit dříve, n než je reporttuje vyhledávvač. OBRÁZEEK 5.4

Výpis reporrtů MS SEO T Toolkit

Z Zdroj: MS SEO O Toolkit OBRÁZEEK 5.5

Podrobné in nformace o chybě detekkované MS SSEO Toolkit

Z Zdroj: MS SEO O Toolkit

48 8


4..3.4 WooRank Woorank je online W o nástro oj pro celko ové auditováání interneto ové prezentaace. V základ dní veerzi, která jee poskytován na zdarma lze l kombino ovat offpage i onpage faaktory a jejiich ceelkový vliv na n dohledateelnost dané stránky. V rámci nástroje Wooran nk se generu uje čísselné hodnocení v rozmezí 0‐100, které vyjadřuje proccentuální kvvalitu celko ové prrezentace. Jeelikož je dan ný nástroj orrientovaná v některých v č částech na ttrh v USA, ne ení možné brát ceelkový výkon n prezentacee stejně, jako o např. výstu upy z jiných lokalizovanýých náástrojů určen ný pro český trh.

49


ooRank Ukázka částti auditu Wo

Z Zdroj: Woora ank.com

50 0


4..3.5 Dalšíí nástroje Naa internetu je k dohledání nepřeb berné množžství auditovacích nebo o analytickýých náástrojů, přípaadně různých doplňků p pro interneto ové prohlížečče, které posskytují údaje e o SEEO parametrech. Vzhled dem k jejich h počtu a někdy n sporným výslednýým hodnotáám do oporučujemee studentům m se zaměřit především na seznam výše v uveden ných globálníích náástrjů. Pro částečnou č o optimalizaci é informace o konkrétn ní stránce pak p nebo rychlé uvvádíme seznaam nejčastějji doporučovvaných rozšířření pro proh hlížeč Googlee Chrome: Alexa Traffic R Rank 1.1.0 ‐ o oficialni rozsiireni Alexy ollabim 0.2.8 8 – plugin, který k je nutn ný pro zjišťo ování pozicee ve vyhledávačích pomo ocí Co náástroje Collabim W Web Develope er 0.3.1 – ob becný nástrojj určený pro vývojáře SEEO Profesional Toolbar 1.2.3 ‐ poskyttuje i S‐Rank SEEO & Website Analysis 0.2.9.3 ‐ Woorrank SEEO Doctor 2.0 0 SEEO for Chrom me 0.9.4 SEEO SERP Worrkbench 0.9.6 SEEO Site Toolss 2.91 SEEO Quake 0.9 9.14.1

4..4 Nejčasstější chyby V této podkapitole uvád díme nejčasttější chyby, které se vám mohou projevit na internetové prezentaci p a základní doporučení pro p jejich odstranění. o N Některé chyyby mohou být párové (napřř. chyba ‐ sttránka nenaalezena společně s chyb bou odkazu na neeexistující strránku).

4..4.1 Zásad dní chyby Jeedná se o zássadní chyby d detekované vv prezentaci,, které moho ou zapříčinit částečné nebo do okonce úplnéé zrušení ind dexace. Sttránka obsah huje více kan nonických fo ormátů Sttránka obsah huje chybný odkaz UR RL odkazu neexistuje

4..4.2 Obsaahové chyb by Ch hyby, které vvznikají v obssahové částii prezentace a mají za náásledek snížeené hodnoce ení ko onkrétní stránky. Sttránka obsah huje obecné cchyby HTMLL, není validní

4..4.3 SEO cchyby Ch hyby s přímo ou vazbou na optimaliizaci, jejiž eliminací e do ojde k maxim mální podpo oře vyyhledávače p pro danou strránku. Ch hybí nadpis H H1 Sttránka obsah huje více nad dpisů H1

51

Prrogramováníí business ap plikací brázek IMG n neobsahuje alternativní text Ob Ch hybí popis stránky Ch hybí titulek sstránky Po opis stránky jje shodný s ttitulkem stráánky Tittulek stránkyy je příliš kráátký Tittulek stránkyy je příliš dlo ouhý Po opis stránky jje příliš krátkký Po opis stránky jje příliš dlouhý Tittulek stránkyy začíná bran ndovým jménem Po opis stránky začíná brand dovým jméneem

4..4.4 Ostattní chyby Osstatní chyby, aktuálně nemusí způso obovat problémy, avšak jedná se o ssituace, kdy za urrčitých okoln ností (předeevším budou ucími opravvami) mohou u v důsledku u těchto ch hyb vn niknout chyb by zásadní. Sttránka omezeena pomocí robots.txt Sttránka může obsahovat n několikanáso obné přesmě ěrování

52 2

oužitá literattura a další zd droje Po

P Použitá l literatura a další zdroje 1. Roseb brok, E., Filso on, E. Linux, A Apache, MySSQL a PHP. GRADA Publisshing : Praha. 2005. ISBN 802412 2601 Group Stránkky projektu PH HP [online]. 2001‐2011. [cit. 2011‐10 0‐2]. Dostupn né 2. PHP G z: . 3. Apach he software ffoundation H HTTP Server p project [onlin ne]. 2011. [ccit. 2011‐10‐1 1]. Dostupné z: . B. PHP 5 a MyySQL5. Comp puter press : Brno. 2007.. ISBN 4. Koflerr, M., Oggl, B 97880 025118139 5. Košekk, J. PHP. GRA ADA Publishing : Praha. 1 1999. ISBN 80 071693731 6. Gutmaans, A., Bakkken, S., Rethaans, D. Mistrroství v PHP 5 5. Computerr press : Brno o. 2005. ISBN 80‐251 1‐0799‐X 7. Smička, R. Optima alizace pro vyyhledávače – – SEO [onlinee]. 2007. [cit.. 2011‐10‐3].. Dostupné z: . 11. [cit. 2011‐09‐10]. Dosstupné z: 8. Google Inc., Googlle Analytics [[online]. 201 . 9. Google Inc., Googlle Webmasteer Tools [online]. 2011. [cit. 2011‐09‐‐10]. Dostupné z: . 10. Microsoft Corporaation, Free SEEO Toolkit [o online]. 2011 1. [cit. 2011‐0 09‐10]. web/seo>. Dostupné z:

53

MOD NIKU. Jiří Kubica. Ostrava 2011

Recommend Documents