martedì 6 ottobre 2009

symfony, creazione modulo frontend e layout

Con i dati di esempio inseriti nel database possiamo creare il modulo per la visualizzazione degli articoli nel frontend. In symfony un'applicazione è suddivisa in moduli ed ogni modulo fornisce un determinato insieme di funzionalità. In particolare in Lyra avremo un modulo per ogni tipo di contenuto gestito dal cms. Il modulo article sarà quindi il primo che creeremo

Generazione di un modulo

./symfony doctrine:generate-module --with-show  --non-verbose-templates frontend article LyraArticle

A patto che si sia configurato un host virtuale per il progetto come descritto in symfony, creazione progetto e applicazione, si può già vedere qualcosa nel browser con

http://lyra/frontend_dev.php/article

L'aspetto non è certo gradevole da vedere, gli articoli inclusi nei dati di esempio sono visualizzati in un formato tabellare senza alcuna particolare formattazione. Questo perché non abbiamo configurato alcun layout.

Personalizzazione del layout

In symfony ogni pagina HTML è generata a partire da una sorta di template globale, il layout, che ne determina la struttura (aspetto e dimensioni di header, footer, area principale e colonne) quelle parti di codice cioè che sono comuni a più pagine.

Il contenuto specifico di ogni pagina è invece generato da template che vengono incorporati nel layout. Questa figura tratta dalla documentazione ufficiale rende bene l'idea del meccanismo.

Per il layout ho adattato un template gratuito dalla struttura molto semplice.

apps/frontend/templates/layout.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <?php include_http_metas() ?>
    <?php include_metas() ?>
    <?php include_title() ?>
    <?php use_stylesheet('main.css') ?>
  </head>
  <body>
    <div id="wrapper">
      <div id="content">
        <div id="top">
          <div id="logo">
            <h1>Logo</h1>
            <h4>Slogan</h4>
          </div>
          <div id="links">
            <ul>
              <li><?php echo link_to('Home','@homepage');?></li>
              <li><a href="#">Articoli</a></li>
              <li><a href="#">Contattaci</a></li>
            </ul>
          </div>
        </div>
        <div id="header">
          <h3>Titolo pagina</h3>
        </div>
        <div id="contentarea">
          <div id="leftbar">
            <?php if ($sf_user->hasFlash('notice')): ?>
            <div class="flash_notice">
              <?php echo __($sf_user->getFlash('notice')) ?>
            </div>
            <?php endif; ?>

            <?php if ($sf_user->hasFlash('error')): ?>
            <div class="flash_error">
              <?php echo __($sf_user->getFlash('error')) ?>
            </div>
            <?php endif; ?>
            <?php echo $sf_content ?>
          </div>
          <div id="rightbar">
            <h4>Menu</h4>
          </div>
        </div>
        <div id="footer">
          <div id="lyra-powered">
            <a href="#">Powered by Lyra</a>
          </div>
          <div id="validator">
          <p>Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a></p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Credo si veda chiaramente che questa è la 'cornice' della pagina. I contenuti sono inseriti da queste istruzioni

<?php echo $sf_content ?>

include il contenuto principale della pagina (corpo dell'articolo, lista articoli sulla pagina di una categoria e simili) che come vedremo è generato da una action e dal relativo template.

<?php include_http_metas() ?>
<?php include_metas() ?>
<?php include_title() ?>

includono i metatag e il contenuto del tag <TITLE>. Da notare anche

<?php use_stylesheet('main.css') ?>

che genera il tag <link> per includere un foglio di stile. Il file main.css è stato inserito in web/css.

Oltre al file del layout e al foglio di stile sono necessarie le immagini per lo sfondo e la testata: sono state inserite in web/images. Delle altre parti del codice del layout avremo modo di parlare in futuro.

Se a questo punto digitiamo di nuovo nel browser

http://lyra/frontend_dev.php/article

vediamo che l'aspetto della pagina rispecchia il layout anche se il contenuto (nell'esempio l'elenco articoli) è ancora in un formato tabellare 'grezzo'.

Questo perché non abbiamo ancora personalizzato il template della action. Cosa che faremo la prossima volta. A questo punto ho eseguito il commit della revisione 8 su Google Code.

Nessun commento:

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.