NETTE!!! OSTRAVA!!!

Mam novinu jak cyp! Tak 11.11. v 11.11 ho­din (by si to zapamatovaly i babky z Ludgeřovic) zfarame na 3 hodiny na Bani (Vysoke škole pro štajgery). Esli nas nezavali, řeknu vam o vyvoji webových aplikací v PHP a Nette Framework. Bude to tu v baraku RV101.

Zfarat možu fšeci, kere zajima vyvoj webovych aplikaci, ať už dělaji jakesik programovaci jazyky nebo maji framework co o něm neslyšela ani svačinařka z NHKG. Jo! A je to zadara!

Řekneme a ukažem si:

• jake je fajne používat frameworky
• základy Nette Framework co je to AJAX, DRY, KISS, MVC
• ukážu, jak s využitím Nette Frameworku vývoj aplikací zjednodušit, urychlit a eliminovat bezpečnostní rizika
• zkusíme si něco naprogramovat

Jako esli bude aj ohňostroj jak na odpustu v Kravařu to nevim, ale aji tak to bude fajne, takže dovalte na faračku! (Je to taky na xichtbuku).

Ukázkový příklad z WebExpa 2009

Na WebExpu jsem měl přednášku nazvanou RIA jednoduše – JavaScript + AJAX + PHP + Nette Framework. Pokusil jsem se ukázat, jak snadno lze psát AJAXové aplikace za použití Nette Framework a jQuery. Během přednášky vznikl jednoduchý příklad, který vám nyní dávám ke stažení.

Protože přednáška byla zaměřená na začátečníky a posluchače, kteří Nette Framework zatím neznají, začal jsem na zelené louce stažením frameworku z webu a poté psal celý kód naživo. Doufal jsem, že divák spíš odpustí různá zaškobrtnutí, která k živému programování patří, než abych z rukávu vycopy&pastoval předpřipravené kusy kódu a posluchače připravil o niť. Ale sebekriticky přiznávám, že nervozita zapracovala a těch zaškobrtnutí mělo být mnohem méně 

Ovocný příklad si můžete vyzkoušet on-line – ovoce a zeleninu můžete přetahovat po ploše, přičemž jejich polohu si server pamatuje v session a tak zůstane zachována i po obnovení stránky. Dále lze plody matky Země přetahovat do modrého nákupního košíku.

Kód jsem ještě doplnil o pár komentářů, aby byl srozumitelnější, a vy si jej můžete stáhnout:

→ WebExpo2009.de­mo.zip

Video z přednášky zatím není k dispozici, ale mělo by se objevit na StreamHostingu.

Kosmetické HTML

V některých rodinách panuje zvyk před odjezdem na dovolenou celý byt vygruntovat. Proč? To kdyby se k nim vloupal zloděj, aby si nepomyslel něco špatného. Do stejného pytle patří kodéři puntičkářsky dbající na vzhled HTML kódu jejich stránek. To aby se jejich kód snáze vykrádal, aby je lepič na Webtrhu nepomluvil.

Sám jsem děsný perfekcionista. Takže mě žralo, že hezky naformátovaná PHP šablona:

<?php
$items = array('user', 'see', 'too');
?>

<ul>
<?php foreach ($items as $item): ?>
        <li><?php echo htmlSpecialChars($item) ?>
<?php endforeach ?>
</ul>

generuje ošklivý HTML kód:

<ul>
        <li>user        <li>see <li>too</ul>

Jak už asi víte, v Nette Framework lze ekvivalentní šablonu zapsat pomocí přehlednějšího Curly Brackets filtru:

<ul>
{foreach $items as $item}
        <li>{$item}
{/foreach}
</ul>

Filtr má v sobě zabudovanou kosmetickou drobnost – podle určité heuristiky se snaží učinit perfekcionistické duši za dost. A vygeneruje tento výstup:

<ul>
        <li>user
        <li>see
        <li>too
</ul>

Já vím, pro mnohé z vás je to detail, ale pro nás chronické puntičkáře zásadní feature ;)

p.s. jsou situace, kdy jde o velmi praktickou vlastnost, pokud třeba generujete plain text nebo Texy kód, kde na formátování a správném odřádkování hodně záleží

p.s.s. tahle feature má nulový vliv na rychlost generování stránky

Tento týden vám hacknou web

Co chvíli je hlášena bezpečnostní díra na dalším významném webu (Alza, Mapy.cz, BontonLand). Nebo je díry zneužito. Zkuste si vyhledat slova XSS zranitelnost a pochopíte, proč je Cross Site Scripting (XSS) dnes jednou z nejrozšířenějších a nejnebezpečněj­ších děr.

Záležitost nepříjemná pro provozovatele webů a snad ještě víc pro dodavatele. Může poškodit jméno, může dojít na pokuty, žaloby, nebo jen pokazí vztah s klientem. Jak se proti XSS bránit? Tzv. escapováním řetězců. Bohužel naprostá většina odborníků v tom plave. (Nechci být netaktní a někoho se dotknout, snad jen řeknu, že z „československých IT celebrit“ znám asi jen jednoho člověka, který se ve věci do hloubky vyzná.) Tudíž i články o této problematice na známých webech jsou, řekněme, nepřesné.

Navíc ono escapování se obvykle provádí v šabloně, padá tak na bedra kodéra. Tedy nejkritičtější místo vyžadující vysokou erudici řeší člověk nepovolaný. Jak taková věc může dopadnout? To přeci víme – viz první odstavec.

Spasí vás Nette Framework

Rád bych vám představil jednu killer feature šablonovacího systému Nette Framework. Vlastnost tak zásadní, že sama o sobě je důvodem framework zvolit. Nebo klidně z něj použít jen šablony.

• čím jste větší firma, tím je pro vás vlastnost důležitější
• žádný konkurenční framework ji dodnes nemá ¹⁾

Nette Framework v šablonách escapuje automaticky. Jeho vlastnost Context-aware escaping rozezná, ve které části dokumentu se nacházíte a podle toho zvolí správné escapování.

Teď zabrousím do techničtější roviny. Jak to funguje, nejlépe uvidíte na příkladu. Mějme proměnnou $var a tuto šablonu:

<p onclick="alert({$var})">{$var}</p>

<script>
document.title = {$var};
</script>

Zápis {$var} znamená vypsání proměnné. Jenže každé vypsání je nutné ještě explicitně ošetřit, dokonce na každém místě jinak. Kodér musí (například ve Smarty) připsat příslušné modifikátory, nesmí se přitom splést a hlavně nic opomenout.

V Nette Framework není potřeba nic ošetřovat. Vše se udělá automaticky, správně a důsledně!

Pokud dosadíme do proměnné $var = 'Šířka 1/2"', framework vygeneruje HTML kód:

<p onclick="alert(&quot;Šířka 1\/2\&quot;&quot;)">Šířka 1/2&quot;</p>

<script>
document.title = "Šířka 1\/2\"";
</script>

Samozřejmě je myšleno i na situaci, když je potřeba vypsat proměnnou bez ošetření, například proto, že obsahuje text článku včetně HTML značek. V takovém případě se použije zápis {!$var}, kde vykřičník srozumitelně funguje jako výstražné znaménko.

Konec technické odbočky. Díky Nette Framework najednou platí, že

• podoba šablony zůstala jednoduchá
• vy se nemusíte bát, že kodér někde něco opomene
• a zároveň v něm nepotřebujete mít top odborníka na escapování ;)
• práce jde mnohem snáze

Další informace o chytrých šablonách najdete třeba na Zdrojáku nebo v návodu, kterak je lze používat samostatně.

p.s.: pokud jste čekali, že se tento článek bude věnovat jiné novince – dědění bloků – pak vydržte, objeví se tu příští týden

---

Kuk na screencast

Potěším všechny začátečníky, kteří se chtějí seznámit s Nette Frameworkem. Odedneška je to mnohem snazší. Máme pro vás totiž profesionální screencast. Tedy výukové video, kde sledujete obrazovku počítače a posloucháte lektora, který vás naučí prvním krokům s frameworkem. Jde o první počin z plánované série screencastů.

Přeji vám dobrý obraz a ostrý zvuk!

• Screencast: Stáhnutí a zprovoznění Nette Framework

Ze zákulisí

Málokdo si umí představit, že za těmi 10 minutami videa se skrývají dlouhé desítky hodin práce a výzkumu. Snoubí se tu totiž celá řada disciplín, po pedagogické stránce je potřeba vést diváka od jednoduchého ke složitému a nesklouznout mimo trasu, po vizuální stránce je potřeba zaujmout, po technické stránce musíte správně zvolit a nastavit video kodek nebo vyčistit zvuk. Musím proto moc poděkovat Tomáši Vítkovi, že vytrval točit klikou a screencast dotáhl až do současné podoby. Věci, které zbývá doladit, už lze považovat za technické detaily.

A ještě zbývá přidat intro ;)