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

V minulém dílu seriálu o tvorbě webu s frameworkem Silex jsem vám slíbil, že se naučíme zpracovávat soubory YAML. Vyzkoušíme si vytvoření seznamu doporučení na naši fiktivní firmu a jejich následné zobrazování na webu v šabloně Twig.

Reklama

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.

Reklama

Komentáře

Pěkný seriál. Sám používám Nette, ale rád se kouknu na něco nového. Těším se na další díly. Bylo by fajn, kdyby se v dalších dílech objevilo celé Symfony, alespoň základy. Není něco takového v plánu?

A našel jsem drobnou chybu - v testimonials.yml je web, ale v šabloně používáš url.

Díky za upozornění. Sice jsem to pak i kontroloval a zkoušel, ale zřejmě jsem to do článku vykopíroval ze dvou zdrojů. YAML jsem tu opravil.

Symfony 2 bude časem. On je Silex fajn v tom, že se člověk naučí třeba ten YAML a Twig, bez kterých to v Symfony 2 nejde. Respektive místo YAML jde XML, ale to zase nemám rád já.

V dalším dílu bude práce s kontaktním formulářem, což se zase využije v Symfony 2 při práci s většími formuláři. Dále chci probrat Assetic a Cache, opět věci, které lze využít v Symfony. Plánů mám ještě dost.

No a až dojdou a pokud bude zájem, můžete zkusit něco jednoduššího se Symfony. Ale měl jsem i ohlasy, jestli nechci ukázat něco o CodeIgniteru.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Rad bych timto podekoval. Jsem ten typ "programatora" co stavi v PHP frontendy pro MySQL tabulky - a to formou include hlavicka, include paticka a kazda stranka ma svuj php soubor. Zadne OOP, proste stara klasika. O frameworku jsem slysel na kazdem rohu, nekolikrat jsem se pokousel i ruzne php frameworky rozbehat, ale proste jsem nepochopil jak to v nich funguje. Tento serial o Silexu je vynikajici, konecne vim jak na to, proc to tak je, teda, nevim, ale snazim se to pochopit, vyzkouset a pouzit ve svych intranet aplikacich. Tesim se na formulare a uvital bych nejaky CRUD system. Naucil jsem se pouzivat xCrud, ale jeste to neni uplne ono, predstavoval bych si mozna neco co budu moct vic ohybat.

Diky za serial, tesim se na nove casti! :-)

Díky. Už jste další, kvůli kterému přemýšlím, jestli neudělat alespoň dva články o CodeIgniteru a GroceryCRUD. Je to jednoduchý framework, není nutné tam řešit nějaké šablony či konfigurace, prostě staré dobré obyčejné PHP. A ve spojení s tím GroceryCRUD jako dělané pro tvorbu frontendů k databázovým tabulkám. Sám s tím tak u některých projektů funguju.

Samozřejmě můžeme to zakomponovat časem i do Silexu a případě do článku k Symfony, až nastane čas, ale toto by možná bylo fajn odbočení. Co? Ještě někdo, pro koho by něco podobného bylo zajímavé?

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Zajimalo by me, zda umi GroceryCRUD vlozit dalsi tabulku NESTED TABLE, pouzivam to dost casto v xCrudu, viz priklad: http://xcrud.com/demos/index.php?page=nested&theme=bootstrap

Myslím si, že ano. Používá DataTables a to jako takové to umí https://datatables.net/examples/ajax/deep.html

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Přidat komentář