Symfony dla projektantów stron

Pierwszy wpis o tym jak programista Symfony chciałby współpracować z projektantem stron WWW. Zakładam, że jestem programistą Symfony i stworzyłem jedną aplikację o nazwie frontend przy pomocy Symfony i Doctrine. Wygląd aplikacji jest bardzo siermiężny a poniższa wiedza to to co próbuje przekazać projektantowi stron aby, już bez mojej pomocy, mógł samodzielnie zmodyfikować szablony wpływające na wygląd strony.

Struktura MVC

Symfony jest frameworkiem MVC. Model – View – Controller. Dla projektanta stron najistotniejsza jest oczywiście warstwa View, przy czym Symfony korzysta z systemu szablonów. Dla potrzeb szablonów ważne jest aby poznać wszystkie dostępne ścieżki (routes) które może realizować kontroler. Plik z definicjami ścieżek znajduje się w /apps/frontend/config/routing.yml a definicja jednej ścieżki w tym pliku wygląda:

obiekt_show:
      url:     /obiekt/pokaz/:slug
      param:   { module: obiekt,  action: pokaz }

Plik może mieć dowolną liczbę takich ścieżek. Kontroler otrzymuje  żądanie od użytkownika porównuje go do _url_ i jeśli pasuje, wywołuje odpowiedni _action_ (tutaj ‘pokaz’) w odpowiednim _module_ (tutaj ‘obiekt’). Dwukropek przed nazwą członu w _url_ oznacza zmienną, dlatego _url_ może wyglądać tak:

    /obiekt/pokaz/zielony-obiekt

lub tak:

    /obiekt/pokaz/zupelnie-inny-czerwony

_obiekt_show_ to nazwa ścieżki używana później do generowania url’i za pomocą url_for (patrz niżej).

Struktura szablonów

Filozofia Symfony odnośnie szablonów polega na wykorzystaniu zwykłych plików .php. Instrukcje wykorzystywane w szablonach to tagi php i są ograniczone do zestawu podobnego jaki używa się w innych systemach szablonów (np. Smarty).

Przyjmuje, że mamy tylko jedną aplikację i programista nazwał ją frontend. Każdy szablon dla konkretnego modułu znajduje się w katalogu /apps/frontend/nazwa_modulu/templates, szablony globalne znajdują się w katalogu /apps/frontend/templates

Do wyświetlenia wyniku działania akcji z przykładu powyżej kontroler używa szablonu zapisanego w pliku /apps/frontend/modules/obiekt/templates/pokazSuccess.php. “Dokleja” końcówkę `Success.php` do nazwy akcji. Każdy szablon jest natomiast ‘dekorowany’ layout’em znajdującym się w /apps/frontend/templates/layout.php.

Tworzenie szablonów

Najczęścięj wykorzystywane tagi php w szablonach to:

  • <?php echo $zmienna ?> wyświetla zawartość zmiennej
  • <?php echo $obiekt->getNazwaPola() ?> wyświetla wartość pola obiektu
  • <?php echo url_for(”nazwa_sciezki?nazwa_zmiennej=wartosc-zmiennej”) ?> generuje url, np. dla potrzeb  tagu <a href=”<?php eco url_for(…) ?>”/>, dla powyższego przykładu będzie to: <?php echo url_for(”obiekt_show?slug=obiekt-nienazwany”) ?>
  • <?php foreach ($obiekt_lista as $obiekt) : ?> pętla przez listę obiektów, wewnątrz pętli (do znacznika `<?php endforeach; ?>`) można wykorzystywać zmienną $obiekt
  • <?php endforeach; ?> koniec pętli
  • <?php echo include_partial(”nazwa_modulu/nazwa_czesci”) ?> wstawia część szablonu (partial) znajdującego sie w pliku /apps/frontend/nazwa_modulu/templates/_nazwa_czesci.php
  • <?php echo include_component(”nazwa_modulu/nazwa_komponentu”) ?> wstawia część komponentu (component) znajdujacego sie w pliku /apps/frontend/nazwa_modulu/templates/_nazwa_komponentu.php

Taki zestaw powinien wystarczyć, pozostałą logikę winien realizować kontroler.

UWAGI:

  1. Nazwy szablonów mają końcówkę Success.php
  2. Nazwy części lub komponentu poprzedzone są znakiem podkreślenia ‘_’ i nie mają końcówki Success
  3. Dla tworzącego szablon nie ma różnicy pomiędzy include_partial a include_component (różnica występuje po stronie kontrolera i trzeba pamiętać aby używać takiej składni jak w już stworzonym szablonie przez programistę).
  4. Jeśli nazwa_modulu = ‘global’ wówczas części lub komponentu należy szukać w katalogu głównym szablonów, czyli w katalogu: /apps/frontend/templates/_nazwa_czesci_lub_komponentu

Więcej o szablonach można przeczytać tutaj: http://www.symfony-project.org/book/1_2/07-Inside-the-View-Layer

Szablony i zmienne

W każdym szablonie istnieje pewna liczba zmiennych przekazywanych przez kontroler (czyli programistę) do tego szablonu, które można wykorzystać (np. za pomocą `<?php echo $zmienna ?>`). Nazwy tych zmiennych widać w szablonach już stworzonych przez programistę. Dla każdego szablonu zestaw tych zmiennych jest przeważnie inny.

Szablony i formularze

Osobnego omówienia zasługują szablony obsługujące formularze do wprowadzania danych. Szablony te zawierają najczęściej tag `<?php echo $form ?>`, który wyświetla formularz w postaci tabeli. Formularz i jego pola zdefiniowaną są w warstwie Component jednakże istnieje wiele sposobów na ładniejsze wyświetlenie formularza niż w formie tabeli. Najczęściej stosuje się:

  • <?php echo $form ?> wyświetla kompletny formularz w postaci tabeli
  • <?php echo $form['name']->renderRow() ?> wyświetla pole ‘name’ w postaci wiersza tabeli (`<tr>zawartość tutaj</tr>`)
  • <?php echo $form['name']->renderLabel() ?> wyświetla etykietę przypisaną do pola
  • <?php echo $form['name']->render() ?> wyświetla pole formularza (input tag)
  • <?php echo $form['name']->renderError() ?> wyświetla komunikat błędu w postaci `<ul class=”error_list”><li>error1</li></ul>`

Dzięki powyższym tagom można dowolnie kształtować formularz. Pamiętać trzeba jednak, że w przypadku gdy rezygnujemy z wyświetlania kompletnego fomularza za pomocą pierwszego tagu należy zawsze gdzieś wewnątrz fomularza zawrzeć tag `<?php echo $form->renderHiddenFields() ?>`. Szczególnie jest to ważne w przypadku zabezpieczenia CSRF.

Skąd wziąć nazwy pól dla poszczególnych formularzy ? Jeden formularz przeważnie odpowiada jednemu obiektowi zdefiniowanemu w /config/doctrine/schema.yml, który może wyglądać tak:

Uzytkownik:
  actAs:
    Geographical: true
    Timestampable: true
    Sluggable:
      fields: [nick]
      unique: true
  columns:
    nick:
      type: string(100)
      unique: true
      minlength: 2
    email:
      type: string(100)
      email: true
      notblank: true
      unique: true

_Uzytkownik_ to nazwa obiektu, który przeważnie odpowiada nazwie modułu. Nazwy pól zaczynają się po znaczniku ‘columns:’

Więcej informacji na temat szablonów i formularzy tutaj: http://www.symfony-project.org/forms/1_2/en/03-Forms-for-web-Designers

Zasoby dla strony

Wszystkie zasoby dla strony znajdują się w katalogu /web.

Pliki javascript w katalogu /web/js. W szablonach, jeśli chcesz użyć konkretnego skryptu, należy używać tagu:

<?php use_javascript("/js/jquery.maphilight.js"); ?>

Pliki css są w katalogu /web/css. W szablonach, jeśli chcesz użyć konkretnego css, należy używać tagu:

<?php use_css("/css/alternative_css.css") ?>

Obrazki przyjęło się umiesczać w katalogu /web/images/ a w kodzie jako

<img src="/web/images/display_me.jpg" />

Powodzenia !

0 Komentarzy

Komentarze zostały wyłączone.