Archiwa tagu: TWIG

meet.php

Prezentacja na MeetPHP#8

Zapraszam wszystkich czytelnik??w na spotkanie meetPHP #8 ju?? w najbli??sz? sobot?(tj. 9.02.2013) o 17 w Poznaniu!

logo

Jak by kto?? nie zauwa??y??, to w agendzie jestem r??wnie?? wyszczeg??lniony 😉 A ponad to z tag??w tego wpisu mo??na wywnioskowa? o czym b?dzie moja prezentacja.

Do zobaczenia!

symfony_black_02

[Ubuntu] Instalacja LESS oraz Integracja z Symfony2 Assetic

Ostatnio staje si? bardziej popularny LESS. By go zintegrowa? z Symfony2 za pomoc? Assetic’a i zachowa? pr?dko??? ??adowania strony bez przeskoku spowodowanego kompilacj? LESS’a przez JavaScript less.js.

Dzi?ki temu pliki less b?d? skompilowane do normalnego css. Dodatkowo mo??na je wrzuci? bezpo??rednio na serwer do static contentu np. Amazon S3.

Schemat dzia??ania Less Node.js i Assetica

Schemat dzia??ania Less Node.js i Assetica

  1. Instalacja Less

    1. Instalacja Node.js
       sudo apt-get update
       sudo apt-get install git-core curl build-essential openssl libssl-dev
       git clone https://github.com/joyent/node.git
       cd node
       chmod +x ./configure
       ./configure
       make
       sudo make install
       node -v
      
    2. Instalacja NPM
      wget http://npmjs.org/install.sh --no-check-certificate
      sudo ./install.sh
    3. Instalacja Less
      sudo npm install less  --global

      Parametr global jest niezwykle istotny, gdy?? nie b?dziesz m??g?? potem uzyska? dost?pu do lessa

    4. Dodanie PATH Less’a do ~/.bashrc
      Edytuj plik: ~/.bashrc

      gedit ~/.bashrc
      

      Dodaj now? lini? na ko??cu pliku:

       PATH=$PATH:$HOME/node_modules/less/bin
      
    5. Teraz trzeba prze??adowa? profil Basha
       source ~/.bashrc
      
    6. Testujemy Less!
       lessc wejscie_less.less > wyjscie_css.css
  2. Integracja z Symfony2 i Assetic
    1. Konfiguracja Assetic
      Edytujemy config.yml i dodajemy 3 lini? zwi?zane z lessem tak jak to wida? na przyk??adzie poni??ej:

      # app/config/config.yml
      assetic:
          debug:          %kernel.debug%
          use_controller: false
          filters:
              cssrewrite: ~
              less:
                  node: /usr/local/bin/node
                  node_paths: [/usr/local/lib/node]
              yui_css:
                  jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
              yui_js:
                  jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
      
    2. Edytujemy nasz g????wny plik layoutu(base.html.twig)
      Dodaj?c warto??? less, do argumentu filter:

      #base.html.twig
      ...
      <head>
      {% stylesheets filter='less,?yui_css' '@AcmeBundle/Resources/less/main.less' %}
          <link href="{{ asset_url }}" rel="stylesheet" media="screen" />
      {% endstylesheets %}
      </head>
      ...
      
    3. Budujemy assety za pomoc? Assetic’a
      php app/console assetic:dump --env=prod
      
    4. Cieszymy si? ??migaj?cym arkuszem styli kompilowanym z less’a!
symfony_black_02

Symfony2 – Dodawanie Klasy CSS do pola formularza zawieraj?cego b???d

Case

Webdeveloper przygotowa?? nam HTML do strony zawieraj?cej formularz.Przy b???dzie walidacji pola formularza. Pole to ma otrzyma? dodatkowo klas? CSS error. Je??eli to nie zostanie zaimplementowane, to kleint b?dzie w??ciek??y, szef da po premii. A webdeveloper co ci??? psd2html b?dzie mie? ci? za Lamera!

#Rozwi?zanie: 1 (Ugly)

Jest to proste, jednak wrzuca nam logik? do template??w TWIG’a. Przez co tracimy na czytelno??ci plik??w TWIG. Templaty „tyj?” przez ci?g??e wklejanie tego samego kodu.
Czytaj dalej

symfony_black_02

Symfony2 Zmienne globalne w plikach TWIG

Jedn? przydatn? rzecz? przy tworzeniu widoku naszej aplikacji we frameworku symfony2, s? zmienne globalne dost?pne w TWIG’u.

Przydaj? si? one do wy??wetlania:

  • aktualnie zalogowanego u??ytkownika
  • aktualnie u??ytego modu??u
  • aktualnie u??ytego nazwy routingu
  • pobrania zmiennej z sesji
  • pobranie baseURL() strony

I wielu wielu innych.

Czytaj dalej