Podobné dokumenty
X36WWW. Vícevrstvá architektura webové aplikace Martin Klíma. Tvorba Webu 2 1

Šablonovací systém htmltmpl vypracoval: Michal Vajbar, Šablonovací systém htmltmpl

(X)HTML. Internetové publikování

Využití OOP v praxi -- Knihovna PHP -- Interval.cz

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Střední odborná škola a Střední odborné učiliště, Hořovice

Vývojařská Plzeň AngularJS

Tlačítkem Poskládej jiný počítač se hra vrátí na úvodní obrazovku a lze zvolit jiný obrázek.

Návrh a tvorba WWW stránek 1/38 PHP

VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra elektrotechniky a informatiky Obor Aplikovaná informatika

Formuláře. Internetové publikování

Aplikační vrstva. Úvod do Php. Ing. Martin Dostal

12. Základy HTML a formuláře v HTML

Úvod do PHP s přihlédnutím k MySQL

EVROPSKÝ SOCIÁLNÍ FOND. Úvod do PHP PRAHA & EU INVESTUJEME DO VAŠÍ BUDOUCNOSTI

Zobrazování dat pomocí tabulek

Architektura softwarových systémů

PRG036 Technologie XML

Informační systémy 2008/2009. Radim Farana. Obsah. Aktivní serverové stránky ASP. Active Server Pages. Activex Data Objects. LDAP database.

HTTP. Tenký klient. Server (HTML) IV. datová vrstva. III. vrstva aplikační logiky. I. presentační vrstva. II. vrstva webu.

SUM U3 SUM U4 SUM U5 SUM

Vstupní požadavky, doporučení a metodické pokyny

Webové Aplikace (6. přednáška)

Střední odborná škola a Střední odborné učiliště, Hořovice

Tvorba internetových aplikací v XHTML 2.0 BAKALÁŘSKÁ PRÁCE

Střední odborná škola a Střední odborné učiliště, Hořovice

Programování v jazyce JavaScript

Jak importovat šablony tiskových sestav do aplikace MarkTime PORTAL. Administrační manuál Bellman Group, s.r.o. 2007/09/23 verze 1.

Internet 02 - Tvorba statických www stránek za pomoci HTML tagů

Třídy a objekty. Třídy a objekty. Vytvoření instance třídy. Přístup k atributům a metodám objektu. $z = new Zlomek(3, 5);

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

PL/SQL. Jazyk SQL je jazykem deklarativním, který neobsahuje procedurální příkazy jako jsou cykly, podmínky, procedury, funkce, atd.

Proč Angular JS framework?

InterSystems Caché Post-Relational Database

Mediální komunikace. Vysoká škola mezinárodních a veřejných vztahů PhDr. Peter Jan Kosmály, Ph.D

Obrázek 6.14: Prohlížec nápovedy

Návrh a tvorba WWW stránek 1/14. PHP a databáze

Instrukce pro webmastery

ANOTACE vytvořených/inovovaných materiálů

Klíčová slova: dynamické internetové stránky, HTML, CSS, PHP, SQL, MySQL,

Pokročilé techniky tvorby sestav v Caché. ZENové Reporty

Maturitní témata z předmětu PROGRAMOVÉ VYBAVENÍ pro šk. rok 2012/2013

Databáze Caché CSP Custom Tags

Integrovaný agent obchodníka elektronického obchodu (IMA) Příručka správce

Hydroprojekt CZ a.s. WINPLAN systém programů pro projektování vodohospodářských liniových staveb. HYDRONet 3. Modul EDITOR STYLU

VZOROVÝ STIPENDIJNÍ TEST Z INFORMAČNÍCH TECHNOLOGIÍ

Jaku b Su ch ý 1

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA

Minebot manuál (v 1.2)

ANOTACE nově vytvořených/inovovaných materiálů

Django, 2. cvičení url, views, templates. Úvod

4. POČÍTAČOVÉ CVIČENÍ

George J. Klir. State University of New York (SUNY) Binghamton, New York 13902, USA

Jazyk C# a platforma.net

Algoritmizace a programování

Programování v jazyce JavaScript

8.2 Používání a tvorba databází

Programování v jazyce JavaScript

Individuální projekt z předmětu webových stránek Anketa Jan Livora

Jazyk C# - přístup k datům

Elektronická zdravotní karta

novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers

2) Napište algoritmus pro vložení položky na konec dvousměrného seznamu. 3) Napište algoritmus pro vyhledání položky v binárním stromu.

Pascal. Katedra aplikované kybernetiky. Ing. Miroslav Vavroušek. Verze 7

PŘETĚŽOVÁNÍ OPERÁTORŮ

Funkce, podmíněný příkaz if-else, příkaz cyklu for

118. </div> 119. </div> 120. <div class="box"> 121. <div class="inside-box"> 122. <img src="./img/drogo-and-daenerys.jpg" alt="kresba Droga a

Střední škola pedagogická, hotelnictví a služeb, Litoměříce, příspěvková organizace

Úvod do programovacích jazyků (Java)

IB111 Programování a algoritmizace. Programovací jazyky

HTTP. Webový server. generátor HTML stránek (CGI, Perl, PHP, Python, Ruby, Java, ASP.NET) zpracování požadavku/ odeslání odpovědi.

PHP Best Practices. Please try to fit your code to 80 columns. That's decimal 80. A. Morton

Skriptovací jazyky. Obsah

Architektura aplikace

Pokročilé schopnosti OOP

Uložené procedury Úvod ulehčit správu zabezpečení rychleji

Výrazy a operátory. Operátory Unární - unární a unární + Např.: a +b

VISUAL BASIC. Práce se soubory

Martin Flusser. Faculty of Nuclear Sciences and Physical Engineering Czech Technical University in Prague. October 23, 2016

Úvod do Operačních Systémů

Ing. Přemysl Brada, MSc., Ph.D. Ing. Martin Dostal. Katedra informatiky a výpočetní techniky, FAV, ZČU v Plzni

M4 PDF rozšíření. Modul pro PrestaShop.

Hromadné úpravy digitálních fotografií, metadata a úložiště

20. Projekt Domácí mediotéka

Outdoor Expert. Uživatelský manuál. Verze aplikace: OutdoorExpert_Manual.docx 1 /

PSK3-9. Základy skriptování. Hlavička

Interpret jazyka IFJ2011

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

AJAX. Dynamické změny obsahu stránek

III/2 Inovace a zkvalitnění výuky prostřednictvím ICT

ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ

Příloha č. 18. Specifikace bloku PŘÍPRAVA. Příloha k zadávací dokumentaci veřejné zakázky Integrační nástroje, vstupní a výstupní subsystém

PB161 Programování v jazyce C++ Přednáška 10

Programování v C++ Úplnej úvod. Peta (maj@arcig.cz, SPR AG )

Django Urls, views, templates

Programování v jazyce C pro chemiky (C2160) 3. Příkaz switch, příkaz cyklu for, operátory ++ a --, pole

Střední odborná škola a Střední odborné učiliště, Hořovice

Zranitelnosti webových aplikací. Vlastimil Pečínka, Seznam.cz Roman Kümmel, Soom.cz

Redakční systém. SimpleAdmin Beta. Jan Shimi Šimonek

Stored Procedures & Database Triggers, Tiskové sestavy v Oracle Reports

Transkript:

X36 WWW Šablony Martin Klíma xklima@fel.cvut.cz

Čtryřvrstvá architektura Server Klient Prezentační logika Aplikační Logika Databáze 2

Výhody Jednotlivé vrstvy jsou nezávislé Lze je samostatně spravovat Možnost distribuovaného vývoje Jednodušší design 3

Jak na to v PHP Použití šablon (template) 4

Co šablony dělají Oddělují aplikační kód a prezentační kód Neoddělují jakýkoli kód a html, pouze se snaží tyto dvě logiky separovat. 5

Výhody a nevýhody Výhody Jednodušší vývoj Možnost dělby práce Průhledný a dobře spravovatelný kód Může být značně rychlé (cache) Nevýhody Složitý projekt, nutno integrovat více souborů Aditivní výpočetní výkon Nutnost parsovat šablony Nutnost naučit se další skriptovací jazyk 6

Jak to vypadá PHP Skript Aplikační logika POUZE ZDE vlož šablonovací engine vytvož šablonový objekt přiřaď parametry do objektu nahraj a zobraz template (šablonu) Template <html>... <body> <h1>{$nadpis}</h1> uživatelovo jméno: {$jmeno} </body> </html> 7

Existující enginy Smarty FastTemplate PHPLib... Můj vlastní? Schopností rychle parsovat Schopností provádět vlastní skriptovací kód Cache Náš dnešní favorit: Smarty 8

Jak to funguje 1. Proveď se PHP skript aplikační logika 2. Vytvoř se Templatovací objekt 3. Tomuto objektu se přiřaď datové struktury z ap. logiky 4. Zavolej metodu display 1. je zapnuta cache? ano-jdi na bod 8 2. ne existuje přeložená šablona? ano jdi na bod 5 3. proveď lexikální analýzu šablony 4. expanduj příkazy pseudoskriptu do podoby PHP kódu 5. přeloženou šablonu ulož 6. proveď příkazy pseudoskriptu 7. výsledek ulož do cache (pokud je zapnuta) 8. výsledek zobraz na standardní výstup 9

První úkol: zobraz seznam klientů Předpoklad je, že máme databázi uzivatelů. Zobraz jenom jejich seznam Aplikační logika vytvoří datovou strukturu pole uzivatelů vytvoří templatovací objekt přiřadí pole nechá zobrazit Prezentační logika definuje, jak toto pole zobrazit 10

Příklad použití SMARTY příprava <? require('smarty.class.php'); class T_Template extends Smarty { function T_Template() { $prefix = 'c:/www_root/testserver/smarty/template/'; $this->smarty(); $this->template_dir = $prefix.'templates/'; $this->compile_dir = $prefix.'templates_c/'; $this->config_dir = $prefix.'configs/'; $this->cache_dir = $prefix.'cache/'; } $this->caching = false; $this->assign('app_name','test'); }?> 11

Jak vypadá funkce pro načtení pole define("uzivatel","session_uzivatel"); define("db_host", "localhost"); define("db_uzivatel", "root"); define("db_heslo", "root"); define("db_jmeno", "test"); // vraci vysledek sql dotazu nad db function dotaz ($sql) { mysql_connect(db_host, DB_UZIVATEL,DB_HESLO); mysql_select_db(db_jmeno); $vysledek = mysql_query($sql); return $vysledek; } function poleuzivatelu () { $vysledek = array(); // sestav dotaz $dotaz = "SELECT * FROM uzivatel"; // nacti vysledek $sql_vysledek = dotaz($dotaz); // osetreni chyby pri komunikaci s db if (!$sql_vysledek) die("nepodarilo se spojit s databazi"); // iteruj radky v db while ($radek = mysql_fetch_assoc($sql_vysledek)) { $vysledek[] = $radek; } // vrat pole radku return $vysledek; 12

Jak vypadá aplikační logika <? require_once("funkce.inc"); require_once("init_smarty.php"); // nacti pole uzivatelu $pole_uzivatelu = poleuzivatelu(); // vytvor sablonu $templatovaci_objekt = & new T_Template(); //prirad data do sablony $templatovaci_objekt->assign_by_ref("uzivatele", $pole_uzivatelu); // nech to zobrazit $templatovaci_objekt->display('index.tpl');?> 13

Jak vypadá template <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>pokusna sablona</title> </head> <body> <table summary="seznam uzivatelu db"> {section name=i loop=$uzivatele} <tr> </tr> {/section} </table> </body> </html> <td>{$uzivatele[i].jmeno}</td> <td>{$uzivatele[i].prijmeni}</td> 14 Chyba!!!

Jak vypadá template - správně <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>pokusna sablona</title> </head> <body> <table summary="seznam uzivatelu db"> {section name=i loop=$uzivatele} <tr> </tr> {/section} </table> </body> </html> <td>{$uzivatele[i].jmeno escape:"htmlall"}</td> <td>{$uzivatele[i].prijmeni escape:"htmlall"}</td> 15 Ochrana proti HTML neplatnému výstupu

Nový požadavek text ve dvou sloupcích PHP kód zůstává beze změny Prezentační logika se mění 16

Modifikovaná prezentační logika <table summary="seznam uzivatelu db"> {section name=i loop=$uzivatele} {if ($smarty.section.i.iteration mod 2) == 1} <tr> {/if} <td>{$uzivatele[i].jmeno escape:"htmlall"}</td> <td>{$uzivatele[i].prijmeni escape:"htmlall"}</td> {if ($smarty.section.i.iteration mod 2) == 0} </tr> {/if} {/section} {if $smarty.section.i.rownum mod 2 == 1} <td> --- </td> <td> --- </td> </tr> {/if} </table> Lichá položka? Ano: vlož značku <tr> Sudá položka? Ano: ukonči značku </tr> Co se stane, když je lichý počet položek 17

Výsledek 18

Další požadavek: střídání řádků Řešení: opět čistě jen prezentační logika 19

Prezentační logika střídání řádků <table summary="seznam uzivatelu db"> {section name=i loop=$uzivatele} {if ($smarty.section.i.iteration mod 2) == 1} <tr class="{cycle values="lichy, sudy"}"> {/if} <td>{$uzivatele[i].jmeno escape:"htmlall"}</td> <td>{$uzivatele[i].prijmeni escape:"htmlall"}</td> {if ($smarty.section.i.iteration mod 2) == 0} </tr> {/if} {/section} {if $smarty.section.i.rownum mod 2 == 1} <td> --- </td> <td> --- </td> </tr> {/if} </table> Cyklicky střídá parametry oddělené čárkou 20

Střídání řádků vložení CSS stylu <title>pokusny formular</title> <style type="text/css"> tr.lichy { background-color: grey; } tr.sudy { background-color: white; } </style> </head> <table summary="seznam uzivatelu db"> {section name=i loop=$uzivatele} {if ($smarty.section.i.iteration mod 2) == 1} <tr class="{cycle values="lichy, sudy"}"> {/if} <td>{$uzivatele[i].jmeno escape:"htmlall"}</td> <td>{$uzivatele[i].prijmeni escape:"htmlall"}</td> {if ($smarty.section.i.iteration mod 2) == 0} </tr> {/if} {/section} {if $smarty.section.i.rownum mod 2 == 1} <td> --- </td> <td> --- </td> </tr> {/if} </table> Pozor! Konflikt značek { a } Smarty parser interpretuje tyto značky 21

Střídání řádků vložení CSS stylu <title>pokusny formular</title> {literal} <style type="text/css"> tr.lichy { background-color: grey; } tr.sudy { background-color: white; } </style> {/literal} </head> <table summary="seznam uzivatelu db"> {section name=i loop=$uzivatele} {if ($smarty.section.i.iteration mod 2) == 1} <tr class="{cycle values="lichy, sudy"}"> {/if} <td>{$uzivatele[i].jmeno escape:"htmlall"}</td> <td>{$uzivatele[i].prijmeni escape:"htmlall"}</td> {if ($smarty.section.i.iteration mod 2) == 0} </tr> {/if} {/section} {if $smarty.section.i.rownum mod 2 == 1} <td> --- </td> <td> --- </td> </tr> {/if} </table> Neinterpretuj jako Smarty kód Pozor! Konflikt značek { a } Smarty parser interpretuje tyto značky 22

Vkládání šablon Šablony lze libovolně vnořovat Výhoda: Řešení elementárních problémů Elegance Znovupoužitelnost Nevýhoda: Více souborů Problém s cache (může být výhoda) 23

Příklad Vytvořte seznam uživatelů Seznam bude obecný Každá položka v seznamu bude zobrazovat detail uživatele 24

Řešení: aplikační logika zůstává <? require_once("funkce.inc"); require_once("init_smarty.php"); // nacti pole uzivatelu $pole_uzivatelu = poleuzivatelu(); // vytvor sablonu $templatovaci_objekt = & new T_Template(); //prirad data do sablony $templatovaci_objekt->assign_by_ref("uzivatele", $pole_uzivatelu); // nech to zobrazit $templatovaci_objekt->display('index2.tpl');?> 25

Šablona první úrovně rozložení seznamu <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>pokusny formular</title> </head> <body> {foreach from=$uzivatele item=aktualni_uzivatel} {include file="detail_uzivatele.tpl"} {/foreach} </body> </html> Iteruj přes pole $uzivatele aktualni položku prirad do promenne $aktualni_uzivatel Vlož definici detailu 26

Šablona druhé úrovně detail {* v teto sablone predpokladam, ze informace o uzivateli jsou v poli v promenne $aktualni uzivatel*} <hr> Smarty komentář. Je odstraněn při překladu šablony <div>jméno: {$aktualni_uzivatel.jmeno}</div> <div>příjmení: {$aktualni_uzivatel.prijmeni}</div> <div>logovací jméno: {$aktualni_uzivatel.logovacijmeno}</div> Vložená šablona dědí definované proměnné 27

Šablona druhé úrovně detail {* v teto sablone predpokladam, ze informace o uzivateli jsou v poli v promenne $aktualni uzivatel*} <hr> Smarty komentář. Je odstraněn při překladu šablony <div>jméno: {$aktualni_uzivatel.jmeno escape:"htmlall"}</div> <div>příjmení: {$aktualni_uzivatel.prijmeni escape:"htmlall"}</div> <div>logovací jméno: {$aktualni_uzivatel.logovacijmeno escape:"htmlall"}</div> Vložená šablona dědí definované proměnné 28

Výsledek 29

Cache Jednou vygenerovaný výsledek může být uložen a použit znovu Výhoda: Výrazné zrychlení odezvy Méně dotazů do db Nevýhoda: Zabírá prostor na disku Aditivní kód Uživatel nedostává aktuální data Delší zpracování stránek, které nejsou v cache 30

Příklad jen aplikační logika <? require_once("funkce.inc"); require_once("init_smarty.php"); // nacti pole uzivatelu $pole_uzivatelu = poleuzivatelu(); // vytvor sablonu $templatovaci_objekt = & new T_Template(); $templatovaci_objekt->caching = true; Zapni cache //prirad data do sablony $templatovaci_objekt->assign_by_ref("uzivatele", $pole_uzivatelu); Zde NEšetříme čas // nech to zobrazit $templatovaci_objekt->display('index.tpl'); Zde šetříme čas?> 31

Příklad cache - oprava <? require_once("funkce.inc"); require_once("init_smarty.php"); // nacti pole uzivatelu $pole_uzivatelu = poleuzivatelu(); // vytvor sablonu $templatovaci_objekt = & new T_Template(); $templatovaci_objekt->caching = true; Zapni cache if (! $templatovaci_objekt->is_cached("index.tpl")) { //prirad data do sablony $templatovaci_objekt->assign_by_ref("uzivatele", $pole_uzivatelu); } Zde šetříme čas když to lze // nech to zobrazit $templatovaci_objekt->display('index.tpl'); Zde šetříme čas?> 32

Debug - ladění Umožňuje zobrazit parametry přiřazené k template objektu. Do těla template stačí napsat značku {debug} 33

Výsledek 34

Filtry Životní cyklus šablony Prochází řadou filtrů Před překladem Po překladu Po vykonání Prefilter Kompilace Postfilter Display Output filter 35

Prefilter Textový filter, kterým je prohnán template ještě předtím, než je zkompilován Hodí se k odstranění uživatelských komentářů, preprocessing obecně Prefilter Kompilace Postfilter Display Output filter 36

Postfilter Textový filter, kterým je prohnán template poté, co byl zkompilován Hodí se např. k přidání nějaké spec. informace Prefilter Kompilace Postfilter Display Output filter 37

Output filter Textový filter, kterým je prohnán template poté, co byl zkompilován Pracuje tedy nad kompletním výstupem Hodí se např. k zvýraznění některých slov, jejich potlačení, ochrana před vulgaritami atd. Prefilter Kompilace Postfilter Display (fetch) Output filter 38

Jak se filtry používají <? require_once("funkce.inc"); require_once("init_smarty.php"); function muj_output_filter($tpl_output, &$smarty) { // provede nejakou textovou manipulaci a vrati tento modifikovany text // budeme nahrazovat tyto vyrazy $vzor[0] = '/Trabant/'; $vzor[1] = '/Tatra 613/'; $vzor[2] = '/Lada/'; $nahrazeni[2] = 'splašený vysavač'; $nahrazeni[1] = 'papalášfáro'; $nahrazeni[0] = 'Žigulík'; // proved nahrazeni a vrat vysledek return preg_replace($vzor, $nahrazeni, $tpl_output); } // vytvor sablonu $templatovaci_objekt = & new T_Template(); // registrace výstupní funkce $templatovaci_objekt->register_outputfilter("muj_output_filter"); // nech to zobrazit $templatovaci_objekt->display('smarty_filter1.tpl');?> 39

Jak se filtry používají pokr. <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>pokus s filtrem</title> </head> <body> <h1>filtr</h1> <p>na této stránce se dějí zajímavé věci s filtry.</p> <p>franta říkal, že nejlepší auto je Trabant.</p> <p>pepa ale říkal, že on si koupí jedině Tatra 613.</p> <p>já si ale myslím, že nejlepší je Lada.</a> </body> </html> 40

Výsledek <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>pokus s filtrem</title> </head> <body> <h1>filtr</h1> <p>na této stránce se dějí zajímavé věci s filtry.</p> <p>franta říkal, že nejlepší auto je splašený vysavač.</p> <p>pepa ale říkal, že on si koupí jedině papalášfáro.</p> <p>já si ale myslím, že nejlepší je Žigulík.</a> </body> </html> 41

Děkujeme za pozornost