TNPW1 Technologie pro publikování na webu

TNPW1TNPW1Technologie pro publikování na webuTechnologie pro publikování na webu

Přednáška č. 11-12Přednáška č. 11-12 Tipy k projektům (časté chyby)Tipy k projektům (časté chyby) Absolvování, zkouškaAbsolvování, zkouška Použitelnost webuPoužitelnost webu W4DW4D K čemu je PHPK čemu je PHP

Ing. Martin AdámekKatedra informačních technologií FIM UHK

Přednáška TNPW1 – Martin AdámekPřednáška TNPW1 – Martin Adámek 22

Tipy k projektům Tipy k projektům (Časté chyby v projektech)(Časté chyby v projektech)


PřístupnostPřístupnost

stránky musí být použitelné (přístupné)stránky musí být použitelné (přístupné)– při zapnutých/vypnutých stylechpři zapnutých/vypnutých stylech– při zapnutých/vypnutých obrázcíchpři zapnutých/vypnutých obrázcích– vyzkoušejte všechny 4 kombinacevyzkoušejte všechny 4 kombinace– obrázky musí mít obrázky musí mít správný alt popissprávný alt popis

vizte vizte manuál v přednášce č.3, slide25manuál v přednášce č.3, slide25

– barevný kontrast popředí a pozadíbarevný kontrast popředí a pozadíi pro alternativní popis obrázkůi pro alternativní popis obrázkůsnadná zkouška: snadná zkouška:

– stažení jasu (brightness, sluničko) monitoru a posvícení stažení jasu (brightness, sluničko) monitoru a posvícení lampičkou na monitor; příp. pohled z mírně jiného úhlulampičkou na monitor; příp. pohled z mírně jiného úhlu


PřístupnostPřístupnost

rozložení stránek se nesmí rozsypatrozložení stránek se nesmí rozsypat– při 2x Ctrl+ ve FF při 1280x1024pxpři 2x Ctrl+ ve FF při 1280x1024px

nesmí se zobrazit horizbar (vodorovný nesmí se zobrazit horizbar (vodorovný posuvník)posuvník)– při 800x600px a normální velikosti písmapři 800x600px a normální velikosti písma– ohlídejte si i vliv případného svislého ohlídejte si i vliv případného svislého

posuvníku na šířku stránkyposuvníku na šířku stránky– platí pro FF i IEplatí pro FF i IE

stejná fce. v IE i FFstejná fce. v IE i FF


PísmoPísmo

GenerickGenerická rodina písma v CSSá rodina písma v CSS

musí být uvedena právě jedna rodinamusí být uvedena právě jedna rodina– serif (patkové)serif (patkové)– sans-serif (bezpatkové)sans-serif (bezpatkové)– monospace (neproporciální)monospace (neproporciální)– příp. cursive, fantasypříp. cursive, fantasy

před rodinou může být 0 až N konkrétních před rodinou může být 0 až N konkrétních písem, písem, která do té rodiny patříkterá do té rodiny patří


PísmoPísmosprávně např.:správně např.:– font-family: Arial, Arial CE, Verdana, sans-serif; font-family: Arial, Arial CE, Verdana, sans-serif; – font-family: Times, serif;font-family: Times, serif;– font-family: sans-serif;font-family: sans-serif;– font-family: serif;font-family: serif;

špatně např.špatně např.– font-family: Times, Arial, serif; font-family: Times, Arial, serif;

/*směs patkového a bezpatkového*//*směs patkového a bezpatkového*/– font-family: Times, sans-serif; font-family: Times, sans-serif;

/*směs patkového a bezpatkového*//*směs patkového a bezpatkového*/– font-family: Times; /*chybí definice generické rodiny*/font-family: Times; /*chybí definice generické rodiny*/– font: Times; /*chybí definice generické rodiny*/font: Times; /*chybí definice generické rodiny*/

http://www.adamek.cz/fim/tvorba-webu/tipy-rady/http://www.adamek.cz/fim/tvorba-webu/tipy-rady/


Obrázky, kódObrázky, kód

Obrázky mají uvedenu skutečnou velikostObrázky mají uvedenu skutečnou velikost

náhledy vyrobíte skutečným zmenšením v náhledy vyrobíte skutečným zmenšením v graf. editorugraf. editoru

Čistota kóduČistota kódu

validita podle XHTML 1,0 Strict validita podle XHTML 1,0 Strict nebo XHTML 1,1nebo XHTML 1,1

nezneužití tabulek pro definici rozloženínezneužití tabulek pro definici rozložení


Styl pro tiskový výstupStyl pro tiskový výstupSkrýt hlavní menu Skrýt hlavní menu – pomocí pomocí display:nonedisplay:none;;– (ale neskrývejte nadpisy webu a stránky!)(ale neskrývejte nadpisy webu a stránky!)

Odstranit prázdné prostory po skrytých menuOdstranit prázdné prostory po skrytých menu– zrušit marginzrušit margin

V samostatném css souboruV samostatném css souboru– z XHTML nalinkován jako styl pro tiskz XHTML nalinkován jako styl pro tisk

(pak je při tisku automaticky použit)(pak je při tisku automaticky použit)– připojit k xhtml soubory více způsoby, pro fci ve FF i v IEpřipojit k xhtml soubory více způsoby, pro fci ve FF i v IE

vizte např. hlavičku vizte např. hlavičku www.www.adamekadamek.cz.cz

Zkontrolujte hlavně ve FF, tam tisk často zlobí (konce Zkontrolujte hlavně ve FF, tam tisk často zlobí (konce vnořeného obtékání)vnořeného obtékání)Obtékání obrázků a formátování nadpisů je vhodné Obtékání obrázků a formátování nadpisů je vhodné zachovat jako v zobrazení pro monitorzachovat jako v zobrazení pro monitor

Respektování formátu textuRespektování formátu textu

odřádkování v původním textu (ve zdrojovém odřádkování v původním textu (ve zdrojovém kódu) znamenají, že jeho autor určil hranice kódu) znamenají, že jeho autor určil hranice odstavcůodstavců– každý odstavec (který je fyzicky v textovém souboru, každý odstavec (který je fyzicky v textovém souboru,

zdrojovém kódu definován odřádkováním) je jako zdrojovém kódu definován odřádkováním) je jako odstavec označkován, aby byl jako odstavec odstavec označkován, aby byl jako odstavec interpretováninterpretován

musejí tam být a , příp. někde musejí tam být a , příp. někde zdrojový kód s odřádkováními textu, které se zdrojový kód s odřádkováními textu, které se

neprojeví na stránce => chybaneprojeví na stránce => chyba- a podobně používání h2 a h3a podobně používání h2 a h3- aby text na stránce nebyl slit v jednom odstavci – aby text na stránce nebyl slit v jednom odstavci –

musí být přehledně strukturovánmusí být přehledně strukturován


Nevhodné znakyNevhodné znaky

do URL (názvů souborů a adresářů) se do URL (názvů souborů a adresářů) se nehodí diakritika, velká písmena, mezerynehodí diakritika, velká písmena, mezery

u nadpisů a u záhlaví tabulek nepoužívejte u nadpisů a u záhlaví tabulek nepoužívejte dvojtečkydvojtečky


Odevzdání projektuOdevzdání projektu

adresu neuvádějte se zbytečným názvem adresu neuvádějte se zbytečným názvem souborusouboru– www.www.novaknovak.cz/index.html.cz/index.html – na vizitku ani do katalogu se to tak nepíšena vizitku ani do katalogu se to tak nepíše– a tedy ani jinama tedy ani jinam

uvádějte uvádějte www.novak.czwww.novak.cz URL bez subdomény www je někdy vhodné URL bez subdomény www je někdy vhodné uvádět s protokolemuvádět s protokolem– http://lide.uhk.cz/novakhttp://lide.uhk.cz/novak

díky „http://“ pozná eml klient, že jde o odkaz, i bez díky „http://“ pozná eml klient, že jde o odkaz, i bez subdomény „www“subdomény „www“


Odevzdání projektuOdevzdání projektu

URL v textu eml. zprávy (viz předchozí snímek)URL v textu eml. zprávy (viz předchozí snímek)

přiložte zip (příp. rar) archiv se všemi XHTML a přiložte zip (příp. rar) archiv se všemi XHTML a CSS souboryCSS soubory– obrázky ani jiné velké soubory (doc, pdf, ...) obrázky ani jiné velké soubory (doc, pdf, ...)

nepřibalujte; přibalte jen zdrojové kódy nepřibalujte; přibalte jen zdrojové kódy (.htm, .html, .css, příp. .php)(.htm, .html, .css, příp. .php)

– (velká příloha => smazání zprávy)(velká příloha => smazání zprávy)

při použití php přibalte nejen php soubory, ale i při použití php přibalte nejen php soubory, ale i vygenerované výsledné html souboryvygenerované výsledné html soubory

správný předmětsprávný předmět


RůznéRůzné

raději nepoužívejte wz.cz (nespolehlivý, pomalý)raději nepoužívejte wz.cz (nespolehlivý, pomalý)– využijte lide.uhk.czvyužijte lide.uhk.cz

description a title definujte různé pro jednotlivé description a title definujte různé pro jednotlivé stránkystránky

u projektů nad cca. 10 stránek v e-mailu při u projektů nad cca. 10 stránek v e-mailu při odevzdání uveďte, které konkrétní stránky (5 až odevzdání uveďte, které konkrétní stránky (5 až cca.10) odevzdáváte jako projektcca.10) odevzdáváte jako projekt– příliš mnoho kontrolovaných stránek:příliš mnoho kontrolovaných stránek:

zdlouhavé hledání požadovaných prvkůzdlouhavé hledání požadovaných prvků větší šance nalézt chybuvětší šance nalézt chybu


RůznéRůzné

Jazyková kulturaJazyková kultura– Web nejsou interní poznámkyWeb nejsou interní poznámky– Web je něčí prezentaceWeb je něčí prezentace Nezapomínejte na diakritikuNezapomínejte na diakritiku Velká písmena na začátku nadpisu, description, title, záhlaví tabulky, Velká písmena na začátku nadpisu, description, title, záhlaví tabulky,

položky menu, věty, ...položky menu, věty, ...Tématická ucelenostTématická ucelenost– na osobním webu nemohou být stránky nazvané „Tabulka“ nebo na osobním webu nemohou být stránky nazvané „Tabulka“ nebo

„Seznam“„Seznam“– má jít o praktický web o něčem, na zvolené témamá jít o praktický web o něčem, na zvolené téma

ne soubor úloh z TNPWne soubor úloh z TNPW

Pro tabulky nastavte v CSS čáryPro tabulky nastavte v CSS čáry– pro přehlednost a základní úpravupro přehlednost a základní úpravu

Pseudotřidou :hover měňte jen barvuPseudotřidou :hover měňte jen barvu– zásah do velikosti, podtržení, pozice, proložení nebo řezu písma => zásah do velikosti, podtržení, pozice, proložení nebo řezu písma =>

odkazy se pod myší budou hýbat! (utíkat zpod ní)odkazy se pod myší budou hýbat! (utíkat zpod ní)


RůznéRůzné

Před odevzdáním zkontrolujte na jiném PCPřed odevzdáním zkontrolujte na jiném PC– jiné rozlišení, prohlížeč, operační systém jiné rozlišení, prohlížeč, operační systém

(písma) ...(písma) ...– nepoužije se :visited nepoužije se :visited

(záznam lze smazat v developer toolbaru)(záznam lze smazat v developer toolbaru)– obrázky nejsou nataženy v chache obrázky nejsou nataženy v chache

(lze smazat)(lze smazat)

Tabulky: Popisek „caption“, záhlaví „th“Tabulky: Popisek „caption“, záhlaví „th“


Další časté chybyDalší časté chyby

vizte prezentaci k cvičení č.6 (CSS)vizte prezentaci k cvičení č.6 (CSS)– nadpisynadpisy– písmapísma– barvybarvy

projděte si xls tabulku s hodnoceními projděte si xls tabulku s hodnoceními projektů na webuprojektů na webu + přečtěte si + přečtěte si komentáře buněkkomentáře buněk


Duplicitní souhrn toho životně nejdůležitějšího:Duplicitní souhrn toho životně nejdůležitějšího:A few very basic rules for making of static websiteA few very basic rules for making of static website

Name file with main page of site "index.htm" or "index.html" Name file with main page of site "index.htm" or "index.html" – so page at file "something/index.htm" will be available at address "something/" or so page at file "something/index.htm" will be available at address "something/" or

"something""something"

Do not use dangerous characters (like space, capital letters, letters with national Do not use dangerous characters (like space, capital letters, letters with national diacritic) in names of files and folders (ergo in URL/address/link) diacritic) in names of files and folders (ergo in URL/address/link) Use easily visible title of site and title of page at top part of each page Use easily visible title of site and title of page at top part of each page

– name of page will be in tag h1name of page will be in tag h1– name of main page can be simply substituted by name of sitename of main page can be simply substituted by name of site

Use consistent navigationUse consistent navigation– the same place and style of the menu and headers at each page of the website the same place and style of the menu and headers at each page of the website

Define alternative text (tag alt) for images Define alternative text (tag alt) for images Really resize images used in page (edit file with image using graphic editor) – Really resize images used in page (edit file with image using graphic editor) – attributes width and height in an xhtml code has to be equal to real size of image attributes width and height in an xhtml code has to be equal to real size of image Keep color contrast (big enough colour difference) between text and background Keep color contrast (big enough colour difference) between text and background Insert a link to an xhtml validator into each page, Insert a link to an xhtml validator into each page,

– check validity of each page (checking of an (X)HTML validity is separate, always for one check validity of each page (checking of an (X)HTML validity is separate, always for one page – not for whole site) page – not for whole site)

– correct errors (always solve the first error at list only; then recheck validity and continue with correct errors (always solve the first error at list only; then recheck validity and continue with new first error from new list) new first error from new list)

[ [ www.adamek.cz/en/fim/tnpw1www.adamek.cz/en/fim/tnpw1 ] ]


Absolvování předmětu,Absolvování předmětu,zkouškazkouška


Absolvování předmětuAbsolvování předmětuMísto cvičení 11 jsou dobrovolné konzultace Místo cvičení 11 jsou dobrovolné konzultace projektů pro zájemceprojektů pro zájemce

Odevzdání projektůOdevzdání projektů– do konce semestrudo konce semestru– svému cvičícímusvému cvičícímu– info: info: www.adamek.cz/fimwww.adamek.cz/fim , resp. pokyny cvičícího , resp. pokyny cvičícího

ZkouškaZkouška– písemný testpísemný test– převážně teorie z přednášekpřevážně teorie z přednášek– 2 praktické příklady (psaní XHTML a CSS kódu)2 praktické příklady (psaní XHTML a CSS kódu)– každý u svého cvičícíhokaždý u svého cvičícího


Tipy ke zkoušceTipy ke zkoušce

večer před zkouškou si projděte zdrojové kódy večer před zkouškou si projděte zdrojové kódy projektu (připomenutí syntaxí)projektu (připomenutí syntaxí)projděte si úkoly ze cvičeníprojděte si úkoly ze cvičení(a prezentace z přednášek a cvičení :) )(a prezentace z přednášek a cvičení :) )znakové sady:znakové sady:– win-1250win-1250 (CP-1250) – (CP-1250) – středoevropskástředoevropská– win-1251win-1251 – – azbukaazbuka+základní latinka (bez češtiny)+základní latinka (bez češtiny)– UTF-8UTF-8 – – univerzálníuniverzální (mírně datově náročnější) (mírně datově náročnější)– ISO 8859-2ISO 8859-2 – Latin2 – Latin2

přibližně slovanská latinkapřibližně slovanská latinkapodobná podobná jako win-1250jako win-1250, ale starší, ale starší


Použitelnost webuPoužitelnost webu(efektivní webdesign)(efektivní webdesign)


Základy použitelnostiZáklady použitelnostipoužitelnost webu = efektivní webdesignpoužitelnost webu = efektivní webdesign– intuitivní pochopitelnost webu, jeho struktury a navigace pro intuitivní pochopitelnost webu, jeho struktury a navigace pro

návštěvníkanávštěvníkanečte návody „jak použít tento obchod“nečte návody „jak použít tento obchod“obvykle obvykle nečte nečte ani obsah stránky !ani obsah stránky !

– prolétává očima, kouká na nadpisy, na obrázky, na začátky textůprolétává očima, kouká na nadpisy, na obrázky, na začátky textů

– testuje se na dobrovolnících pomocí zátěžových testůtestuje se na dobrovolnících pomocí zátěžových testů

je jednou z disciplín v rámci tvorby webuje jednou z disciplín v rámci tvorby webu– vedle:vedle:

technické kvality (učivo TNPW, validita kódu, ... )technické kvality (učivo TNPW, validita kódu, ... )přístupnosti pro zdravotně či technicky znevýhodněné návštěvníkypřístupnosti pro zdravotně či technicky znevýhodněné návštěvníkyobsahu webu, jeho formy a struktury (formulace textů, ...)obsahu webu, jeho formy a struktury (formulace textů, ...)grafikygrafikySEO je tvořeno kombinací všech! SEO je tvořeno kombinací všech! (jen příchod z vyhledávače nestačí – zmatený návštěvník odchází (jen příchod z vyhledávače nestačí – zmatený návštěvník odchází bez nákupu či jiného užitku)bez nákupu či jiného užitku)


Základy použitelnostiZáklady použitelnostinutné požadavky:nutné požadavky:– konzistence webu, hlavně navigacekonzistence webu, hlavně navigace

všude stejný vzhled stránkyvšude stejný vzhled stránkyvšude stejné umístění a struktura menu (a nadpisů)všude stejné umístění a struktura menu (a nadpisů)

– odevšud odkaz o jednu úroveň výš a na hlavní stránkuodevšud odkaz o jednu úroveň výš a na hlavní stránkuGoogle přivádí dovnitř webu, nelze užít „zpět“Google přivádí dovnitř webu, nelze užít „zpět“odkaz na hlavní stranu: obvykle logo nahoře nebo vlevo nahořeodkaz na hlavní stranu: obvykle logo nahoře nebo vlevo nahoře

– odkazy vedoucí na jeden cíl mají stejný popisodkazy vedoucí na jeden cíl mají stejný popis– odkazy vedoucí na různé cíle mají různé popisyodkazy vedoucí na různé cíle mají různé popisy– úzce souvisí s přístupností (pro zdravotně či technicky úzce souvisí s přístupností (pro zdravotně či technicky

handicapované)handicapované)odkazy popsány výstižněodkazy popsány výstižněodkazy podtrženyodkazy podtrženyzvlášť označeny odkazy vedoucízvlášť označeny odkazy vedoucí

– mimo web mimo web – na soubor (místo na stránku) + uvedení velikostina soubor (místo na stránku) + uvedení velikosti– do nového panelu nebo okna (to ale nedělat zbytečně)do nového panelu nebo okna (to ale nedělat zbytečně)


Základy použitelnostiZáklady použitelnostivolitelně (velmi vhodné):volitelně (velmi vhodné):– Drobečková navigaceDrobečková navigace

„„Nacházíte se: web > sekce > podsekce > .. > stránka“Nacházíte se: web > sekce > podsekce > .. > stránka“– každý drobeček je odkazem na patřičnou stránku/sekcikaždý drobeček je odkazem na patřičnou stránku/sekci

výhodyvýhody– link na hlavní stránkulink na hlavní stránku– link o úroveň výšlink o úroveň výš– informace „kde jsem“informace „kde jsem“– informace „kde najdu podobné/obecnější“informace „kde najdu podobné/obecnější“– snadná realizacesnadná realizace

příklad: příklad: www.www.adamekadamek.cz/.cz/basnebasne//modernimoderni--pohadkypohadky/vlk-na-lovu/vlk-na-lovu


(W4D)(W4D)

W3 (WWW):W3 (WWW):– World Wide Web World Wide Web

W4W4– Worth World Wide Web Worth World Wide Web

Worth: Worth: – kvalitní, hodnotný, dostatečně důležitý pro ospravedlnění své existencekvalitní, hodnotný, dostatečně důležitý pro ospravedlnění své existence

-Zásady W4D nejsou pro kvalitní web nezbytné.Zásady W4D nejsou pro kvalitní web nezbytné.-Jejich dodržování však snižuje rizika omezení jeho přístupnosti a Jejich dodržování však snižuje rizika omezení jeho přístupnosti a použitelnosti. použitelnosti. -Respektování W4D automaticky znamená dodržování technických standardůRespektování W4D automaticky znamená dodržování technických standardů

-Výtah podstatného z W4D byl postupně zmíněn během semestruVýtah podstatného z W4D byl postupně zmíněn během semestru

Podrobnosti: Podrobnosti: http://www.pixy.cz/dogma/dogmaw41/cs/http://www.pixy.cz/dogma/dogmaw41/cs/


K čemu je PHP?K čemu je PHP?


PHP – Základní principPHP – Základní princip

přípona .phppřípona .phpv souboru XHTML kód, navíc do něj dle potřeby místy vloženo PHPv souboru XHTML kód, navíc do něj dle potřeby místy vloženo PHP

„„dynamická“ stránka (opak statické)dynamická“ stránka (opak statické)„„skript na straně serveru“skript na straně serveru“– php, asp.net, perl, ...php, asp.net, perl, ...– xhtml kód se finálně vytváří při každém zavolání URL, do prohlížeče jde xhtml kód se finálně vytváří při každém zavolání URL, do prohlížeče jde

výsledek zpracování skriptu serveremvýsledek zpracování skriptu serveremversus „skript na straně prohlížeče“versus „skript na straně prohlížeče“– javascriptjavascript– vykonáván prohlížečemvykonáván prohlížečem– uživatel má přístup ke zdrojovému kóduuživatel má přístup ke zdrojovému kódu– nejistota fce v různých prohlížečíchnejistota fce v různých prohlížečích– vhodný např. pro ověření obsahu formuláře před jeho odeslánímvhodný např. pro ověření obsahu formuláře před jeho odesláním– příp. validní otevření odkazu v novém panelu/okněpříp. validní otevření odkazu v novém panelu/okně– web na něm nesmí být závislý! musí použitelně fungovat i bez něj!web na něm nesmí být závislý! musí použitelně fungovat i bez něj!


K čemu je PHPK čemu je PHP

vložení části kódu stránkyvložení části kódu stránkycentralizace XHTML šablony (!)centralizace XHTML šablony (!)– podobně jako styly na jednom místě v CSS,podobně jako styly na jednom místě v CSS,

i společné XHTML může být na jednom místěi společné XHTML může být na jednom místě– vložení konkrétního obsahu stránky dle potřebyvložení konkrétního obsahu stránky dle potřeby

podle parametru v URL ( podle parametru v URL ( &stranka&stranka=produkty )=produkty )– vždy volán např. www.web.cz/index.phpvždy volán např. www.web.cz/index.php&&clanek=1158clanek=1158– pomocí mod-rewrite možno parametry zamaskovat jako pěknou pomocí mod-rewrite možno parametry zamaskovat jako pěknou

URL typu: www.web.cz/sekce/podsekce/strankaURL typu: www.web.cz/sekce/podsekce/stranka– menu, title, apod. pro menší projekty (cca.10 stran) může být menu, title, apod. pro menší projekty (cca.10 stran) může být

natvrdo v index.php, pro větší projekty využití databází (SQL)natvrdo v index.php, pro větší projekty využití databází (SQL)

zpracování formuláře, e-shop, ...zpracování formuláře, e-shop, ...doplňkové drobnostidoplňkové drobnosti– automatický text, práce s časem, logautomatický text, práce s časem, log


Více o PHPVíce o PHP

následující slidy po Ing.Freylichovinásledující slidy po Ing.Freylichovi

http://www.adamek.cz/fim/tvorba-webu/odhttp://www.adamek.cz/fim/tvorba-webu/odkazy/kazy/

GoogleGoogle

(příp. TNPW2)(příp. TNPW2)


Co je PHP?Co je PHP?

Skriptovací jazyk, umožňující programování na straně serveru.Skriptovací jazyk, umožňující programování na straně serveru.

Stránka je při každém požadavku na její zobrazení v prohlížeči Stránka je při každém požadavku na její zobrazení v prohlížeči vygenerována (příkazy PHP skriptu jsou interpretovány)vygenerována (příkazy PHP skriptu jsou interpretovány)

generování stránky probíhá na serveru – nikoliv v prohlížečigenerování stránky probíhá na serveru – nikoliv v prohlížeči

hovoříme o tzv. dynamicky generovaných stránkách hovoříme o tzv. dynamicky generovaných stránkách

nebo o tzv. dynamice na straně serverunebo o tzv. dynamice na straně serveru

PHP – vložení do (X)HTMLPHP – vložení do (X)HTML

Kód PHP lze volně vkládat do zdrojového kódu HTMLKód PHP lze volně vkládat do zdrojového kódu HTML

Úsek PHP kódu uzavíráme do sekvence znakůÚsek PHP kódu uzavíráme do sekvence znaků

<? <? php_kódphp_kód ?> ?>

<?php <?php php_kódphp_kód ?> ?>

Alternativní vložení:Alternativní vložení:

Pokud v konfiguračním souboru Pokud v konfiguračním souboru php.iniphp.ini povolíme direktivu povolíme direktivu asp_tagsasp_tags, můžeme používat také sekvenci , můžeme používat také sekvenci <% ... %><% ... %>


PHP – využitíPHP – využití

PHP využíváme pro specifické úpravy a automatizované vytvoření PHP využíváme pro specifické úpravy a automatizované vytvoření vlastní HTML stránky před jejím odesláním uživateli.vlastní HTML stránky před jejím odesláním uživateli.

generování stránky probíhá na serveru – nikoliv v prohlížečigenerování stránky probíhá na serveru – nikoliv v prohlížeči

hovoříme o tzv. dynamicky generovaných stránkách hovoříme o tzv. dynamicky generovaných stránkách

nebo o tzv. dynamice na straně serverunebo o tzv. dynamice na straně serveru


PHP – využitíPHP – využití

Velmi častým využitím PHP je komunikace s databází a její obsluha Velmi častým využitím PHP je komunikace s databází a její obsluha (databáze tvoří datovou základnu dynamického webu)(databáze tvoří datovou základnu dynamického webu)

1)1) Z databáze se vyextrahují potřebná dataZ databáze se vyextrahují potřebná data

2)2) Předvedou se do požadovaného formátu, provedou se s nimi Předvedou se do požadovaného formátu, provedou se s nimi případné výpočty, uspořádají se, ...případné výpočty, uspořádají se, ...

3)3) Využijí se pro vytvoření a naplnění obsahu generované (X)HTML Využijí se pro vytvoření a naplnění obsahu generované (X)HTML stránkystránky

Typickým příkladem je použití PHP v kombinaci s MySQL databází Typickým příkladem je použití PHP v kombinaci s MySQL databází – lze však využít i jiné DB (PostgreSQL, MSSQL, ...)– lze však využít i jiné DB (PostgreSQL, MSSQL, ...)

PHP – syntaxePHP – syntaxe

PHP skript je složen z jednotlivých příkazů. PHP skript je složen z jednotlivých příkazů.

Příkazy PHP jsou odděleny středníkem. Příkazy PHP jsou odděleny středníkem.

Mezi příkazy lze vkládat libovolný počet mezer, tabelátorů, atd.Mezi příkazy lze vkládat libovolný počet mezer, tabelátorů, atd.

TextovTextový odstavec v HTML kóduý odstavec v HTML kódu

<<??

příkaz 1příkaz 1;;

ppříkaz 2;říkaz 2;

?>?>TextovTextový odstavec číý odstavec číslo slo <? echo $cislo; ?><? echo $cislo; ?> TextovTextový odstavec v HTML kóduý odstavec v HTML kódu


PHP - proměnnéPHP - proměnné

Slouží k uchování hodnot, které používáme ve skriptech. Slouží k uchování hodnot, které používáme ve skriptech.

Každá proměnná začíná znakem "Každá proměnná začíná znakem "$$", po kterém následuje název ", po kterém následuje název proměnné. První znak názvu proměnné musí být písmeno nebo znak proměnné. První znak názvu proměnné musí být písmeno nebo znak "_"."_".

Deklarace proměnné a přiřazení hodnoty:Deklarace proměnné a přiřazení hodnoty:

$promenna = "Hello world!";$promenna = "Hello world!";

V PHP není potřeba proměnnou deklarovat předem.V PHP není potřeba proměnnou deklarovat předem.

V okamžiku přiřazení do proměnné se automaticky určí její typ.V okamžiku přiřazení do proměnné se automaticky určí její typ.


PHP – typy proměnnýchPHP – typy proměnných

integerinteger celé číslocelé číslo

doubledouble desetinné číslodesetinné číslo

stringstring znakový řetězecznakový řetězec

arrayarray polepole

objectobject objektobjekt

Typy proměnných nemusíme explicitně deklarovat.Typy proměnných nemusíme explicitně deklarovat.

Podle potřeby se Podle potřeby se automaticky přetypují.automaticky přetypují.

PHP –PHP – vývýpis hodnopis hodnoty ty proměnnéproměnné

Výpis hodnoty proměnné nebo textového řetězce:Výpis hodnoty proměnné nebo textového řetězce:<? echo $promenna ?><? echo $promenna ?><? echo "Nějaký text" ?><? echo "Nějaký text" ?>

Spojování řetězců (výrazů):Spojování řetězců (výrazů):V PHP lze vypsat více řetězců a proměnných najednouV PHP lze vypsat více řetězců a proměnných najednouJe třeba je spojit znakem "."Je třeba je spojit znakem "."

<? echo<? echo $prom1." nějaký text ".$prom2 ?> $prom1." nějaký text ".$prom2 ?>


PHP – komentáře v kóduPHP – komentáře v kódu

Jednořádkový komentář:Jednořádkový komentář:

// text komentáře// text komentáře

Víceřádkový komentářVíceřádkový komentář

/*/*

TextText

komentářekomentáře

*/*/

TNPW1 Technologie pro publikování na webu

Documents

Transcript of TNPW1 Technologie pro publikování na webu