Silex: načítání souborů YAML prakticky

Přestože v tomto seriálu stavíme webové stránky bez administrace, neznamená to, že bychom nebyli schopni jejich obsah ovlivňovat jinak, než rovnou úpravou HTML v šablonách Twig.

Připravíme si textový soubor, ve kterém budou testimoniály. Tedy různá doporučení klientů fiktivní firmy, jejíž webové stránky v seriálu stavíme. Když budeme chtít přidat další záznam, prostě jenom zeditujeme textový soubor a web si jej již převezme. Na stránce budeme vždy zobrazovat jeden náhodně vybraný záznam.

Zároveň od tohoto dílu seriálu trošku zvolníme. Stále můžete počítat s frekvencí zhruba jednoho dílu týdně, ale už nebudu kombinovat více témat do jednoho. Základ pro sestavení webu už umíte, takže budeme probírat vždy jen jedno konkrétní téma, jako nyní práci s YAML.

Co jsou soubory a syntaxe YAML?

Slovo YAML je vlastně zkratka od YAML Ain't Markup Language. Jedná se o textový soubor se speciální syntaxí, pomocí kterého můžete definovat sérii dat, aniž by bylo nutné používat nějaké speciální značky, jako je tomu třeba v případě XML.

Z toho plyne, že zápis YAML je nejenom snadné se naučit (v podstatě se není co učit), ale v také můžete takový soubor velice rychle naplnit daty.

YAML se hojně využívá pro konfigurační definice ve frameworku Symfony 2, ze kterého Silex vychází. Nebude tedy na škodu, když se jej naučíme používat. Najdete jej mimochodem i v Drupalu 8, kde nahradí dosavadní soubory *.info.

Jak vypadá zápis YAML

Vše, co v YAML zapisujete, potřebuje určitý způsob formátování, který znamená v podstatě jediné: potřebujete odsazení položek specifikujících vlastnosti každého prvku a popisy oddělené dvojtečkou.

Nejlépe to pochopíte z následujícího příkladu:

polozka1:
    vlastnost: Nějaká vlastnost
    jina-vlastnost: Něco dalšího
    cislo: 12

polozka2:
    vlastnost: Libovolný text
    jina-vlastnost: Zase nějaký popis
    cislo: 134

Příprava YAML pro naše testimoniály

Na stránce budeme mít boxík, který zobrazí vždy jedno náhodné doporučení ze seznamu testimoniálů, které budeme mít uvedeny v souboru YAML. Zobrazené informace budou obsahovat vždy samotný výrok, jméno osoby, její pozici ve firmě, název firmy a odkaz na web dané firmy.

Z toho vyplývá, že soubor YAML bude vypadat nějak takto:

firma:  
    vyrok: "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
    jmeno: Jan Novák
    pozice: vedoucí marketingu
    firma: Vymyšlená firma, a.s.
    url: http://www.domena.tld/

jinafirma:  
    vyrok: "Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
    jmeno: Josef Čech
    pozice: živnostník
    firma: Čechova pilka
    url: http://www.pilouscech.tld/

Záznamy pro firmu samozřejmě zopakujete tolikrát, z kolika budete chtít na webu vybírat. Ve struktuře složky s webem na Silexu si připravte novou složku data a do ní soubor uložte pod názvem testimonials.yml.

Podpora YAML v Silexu

Nyní musíme Silexu přidat podporu pro načítání a především zpracování souborů YAML. V příkazovém řádku se přesuňte do složky se svým projektem a použijte composer pro napojení podpory k YAML. Zadejte následující příkaz:

composer require symfony/yaml

Nyní se přesuňte do souboru index.php a na jeho začátek za napojení autoloaderu přidejte tento řádek:

use Symfony\Component\Yaml\Yaml;

Tip: co je to Composer a jak s ním pracovat, jste se v kostce dozvěděli v druhém dílu seriálu.

Načtení dat ze Silexu a jejich předání šabloně

Testimoniál budeme zobrazovat na stránce s referencemi. Najděte tedy definici routy pro tuto stránku a upravte ji následujícím způsobem. Nejprve přidejte řádek pro načtení dat ze souboru YAML. Následně použijte parser a vložte záznamy do pole $testimonialy.

Pomocí funkce array_rand() vybereme z pole s testimoniály jen jednu hodnotu a tu přiřadíme do proměnné $testimonial.

Nyní zbývá jen předání získaných hodnot do vykreslovače šablony. To jsme ještě nezkoušeli. Všimněte si, že funkci render() je možné jako druhý atribut předat pole, kde do různých klíčů naplníme různé údaje. V tomto případě jen předáme informace o náhodně vybraném testimoniálu (což je ve své podstatě pole s indexy vyrok, jmeno, pozice, firma a web).

$app->get('/reference', function() use($app) {
  $yamlReference = file_get_contents(__DIR__.'/../data/testimonials.yml');
  $testimonialy = Yaml::parse($yamlReference);
  $testimonial = $testimonialy[array_rand($testimonialy)];
  return $app['twig']->render('reference.html.twig',array(
    'testimonial' => $testimonial
  ));
})->bind('reference');

Vykreslování proměnných v Twigu

Pomocí výše uvedené konstrukce předáváme proměnnou, tedy pole $testimonial do šablony reference.html.twig. V ní si musíme s těmito informacemi nějak poradit a zobrazit je.

Pokud bychom předali už rovnou třeba řetězec nebo číslo, pak stačí v šabloně zapsat {{ promenna }} a na daném místě se by se vykreslila její hodnota. My však předáváme pole, se kterým je třeba pracovat pomocí zápisu {{ pole.hodnota }}.

Na místě, kde budete chtít náhodně vybraný testimonial, tedy uveďte například tuto kombinaci HTML a zápisu Twig:

<div id="testimonials">
  <h3><a href="{{ testimonial.url }}">{{ testimonial.firma }}</a></h3>
  <p>{{ testimonial.vyrok }}
  <br>
  <br>
  <span class="testimonial_name">{{ testimonial.jmeno }}, {{ testimonial.pozice }}</span></p>
</div>

Alternativa – procházení pole v Twigu a zobrazení všech položek pomocí smyčky

Pokud bychom chtěli zobrazit všechny testimoniály načtené ze souboru YAML, pak bychom měli do šablony předat celé vícerozměrné pole se všemi testimoniály. To následně pomocí smyčky v Twigu procházet a postupně tu zobrazit jeden testimoniál za druhým. Můžeme si to nastínit.

Routa by se upravila následovně:

$app->get('/reference', function() use($app) {
  $yamlReference = file_get_contents(__DIR__.'/../data/testimonials.yml');
  $testimonialy = Yaml::parse($yamlReference);
  return $app['twig']->render('reference.html.twig',array(
    'testimonialy' => $testimonialy
  ));
})->bind('reference');

Fragment v Twigu musí být poté doplněn o smyčku for, ve které projdeme pole s testimoniály a postupně každý záznam předáme do pole testimonial. Zároveň zde využijeme klíč, tedy označení jednotlivých testimoniálů v YAML k tomu, abychom měli různá ID značky DIV, která v HTML bude držet kostru každého záznamu.

{% for key, testimonial in testimonialy %}
  <div id="testimonial-{{ key }}">
    <h3><a href="{{ testimonial.url }}">{{ testimonial.firma }}</a></h3>
    <p>{{ testimonial.vyrok }}
    <br>
    <br>
    <span class="testimonial_name">{{ testimonial.jmeno }}, {{ testimonial.pozice }}</span></p>
  </div>
{% endfor %}

Nač se můžete těšit příště

S pomocí výše uvedeného postupu by pro vás neměl být problém načítat jakákoli serializovaná data ze souboru YAML a následně je zobrazovat na webu.

Tip: Zkuste si jednoduché cvičení. Připravte si obrázky do galerie, ve funkci pro definování routy si načtěte obrázky z určené složky (PHP funkce scandir()) a předejte jejich seznam v podobě pole do Twigu. Následně jej projděte a zobrazte si jednoduchou galerii na stránce.

Do dalšího pokračování jsem si pro vás nachystal práci s formuláři. Vyzkoušíme si na web přidat jednoduchý kontaktní formulář a následně data z něj odesílat na e-mail.