Comment mettre en place un Layout avec le Zend-Framework 1.8

On va voir ensemble comment utiliser les Layouts, placeholder, helper dans le Zend Framework 1.8 (et supérieur). En effet, depuis la version 1.8, la gestion n’est plus automatique, mais en 2 temps 3 mouvements c’est réglé.

Qu’est ce qu’un Layout ?

Un layout est un template, ou alors un squelette vide de votre site. Il n’y a aucun contenu, il n’y a presque que du code HTML. Les layouts sont très pratique, car ils permettent de ne pas avoir copier / coller tout le code html identique sur chaque pages. On peut donc faire des templates par defaut pour un grand nombre de page.

Dans tous les cas, un script de layout est nécessaire. Les scripts de layout utilisent simplement Zend_View (ou une implémentation particulière personnalisée). Les variables de layout sont enregistrées dans le placeholder Layout, et peuvent être accédées via l’aide de vue placeholder ou directement en tant que propriétés de l’objet layout.

D’après la documentation de Zend Framework

Sommaire

Exemple de layout ou template général.

Voici un exemple de template :

Exemple de template

Exemple de template

On voit qu’on a diviser notre gabarit de page en quatre zones (complètement arbitrairement) :

  • En haut : le Header
  • En bas : le Footer
  • A gauche : le menu de navigation
  • A droite : le contenu

Voici ce qu’est un layout : le layout c’est la partie qui ne change pas :  Header, Footer, Menu.

Mise en place du Layout.

Il faut commencer par choisir un emplacement pour les fichiers. Moi j’ai choisit  APPLICATION_PATH "/layouts/scripts" (par défaut, cf la doc de Zend). Dans ce dossier on va créer notre premier layout, qu’on appellera : layouts.phtml. L’extension .phtml est l’extension standard pour les layouts dans zend.

Une fois ce fichier créé, il faut renseigner à zend qu’on va utiliser un layout. On va donc ajouter au fichier de configuration application.ini ces quelques lignes :

; LAYOUT
resources.layout.layout = "layout"
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"

Grâce a ces deux lignes, Zend va automatiquement chercher le script /layouts/scripts/layout.phtml et l’utiliser. A partir de ce moment, le script de vues devient plus leger, avec seulement un partie du code html. Donc pour résumé : Dans le layout, il y a beaucoup de HTML (balise html, head, title, body) et dans les vues du php et peu de html. OK ? Si vous avez un doute sur les view (vue) c’est ici, et sur les controllers c’est la.

Maintenant on peut encore plus customiser (personnaliser)  notre layout. Comme lui mettre une titre par défaut, choisir son encodage, choisir son doc type etc… Tout ce fait dans le bootstrap :

/**
     * Initialize session
     *
     * @return Zend_View
     */
    protected function _initView()
    {
        // Initialize view
        $view = new Zend_View();
        $view->doctype('XHTML1_STRICT');
        $view->headTitle('Ma premiere application avec Zend');
        $view->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=UTF-8');
        // Add it to the ViewRenderer
        $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('ViewRenderer');
        $viewRenderer->setView($view);
        // Return it, so that it can be stored by the bootstrap
        return $view;
    }

(Note : Si quelqu’un pouvait m’expliquer le passage avec « getStaticHelper(‘ViewRenderer’) » que je n’ai pas compris. Pour ceux qui se demande d’où ce sort ce code que je ne comprend pas : de la doc de Zend-Framework. ) Donc oui, c’est pour ça que vous avez besoin de moi et moi de vous, pour débroussaillé le chemin lol.

Enfin il faut faire le fichier layouts.phtml

<?php echo $this->doctype() ?>
<html>
<head>
    <?php echo $this->headTitle() ?>
    <?php echo $this->headLink() ?>
    <?php echo $this->headStyle() ?>
    <?php echo $this->headScript() ?>
    <?php echo $this->headMeta() ?>
</head>
<body>
    <?php echo $this->layout()->content ?><br />
</body>
</html>

Voila on a notre Layout en place. Maintenant, il s’agit de comprendre comment il fonctionne.

Comprendre les placeholders et les helpers.

Si vous avez bien suivi le Tutos, vous avez vu que dans le bootstrap on a déjà mis des valeurs par défault. Ces valeurs, normalement c’est la vue (view) qui les passe aux layouts. Dans notre cas, le bootstrap crée en avance le layout (je rappel que presque tout est objet). Néanmoins il reste bien évidemment possible de changer ces valeurs.

C’est quoi un helpers ou Script de Vue ?

D’après la documentation de Zend :

Dans vos scripts de vue, il est souvent nécessaire d’effectuer certaines actions complexes encore et encore : par exemple, formater une date, générer des éléments de formulaire, afficher des liens d’action. Vous pouvez utiliser des classes d’aide pour effectuer ce genre de tâches.

Petite traduction : un helper va être une classe que l’on va utiliser souvent dans les vues. Il évite les taches répétitives. Par exemple une zone pour savoir si l’utilisateur est loggué. Par contre la je vais vous laisser voir les exemple directement sur la doc de Zend. D’ailleur on verra prochainement comment faire un helper pour vérifier si la personne est loggué.

C’est quoi un placeholders ?

D’après la documentation de zend :

L’aide de vue Placeholder est utilisé pour faire persister le contenu entre les scripts de vues et les instances de vues. Il offre aussi des fonctionnalités utiles comme l’agrégation de contenu, la capture de contenu de scripts de vues pour une utilisation ultérieure, et l’ajout de texte pré ou post contenu (et la personnalisation des séparateurs de contenu).

Petite traduction. Les Placeholders sont des genres de variables. On les utilises pour faire passer du code HTML mis en forme (la pluspart du temps) depuis la vue vers le layout. Vu que le layout est générique, il faut savoir rester général sur les noms des placeholders. Enfin les placeholders sont persistants : c’est a dire qu’on peut les utilisers dans une première vue, puis dans une autre vue ou dans un autre script…

Comment Utiliser un placeholders ?

Dans le layout, le placeholder s’utilise de cette façon  :

<?php echo $this->placeholder('PH1');?><br />
	<?php echo $this->placeholder('PH2');?><br />
	<?php echo $this->placeholder('PH3');?><br />

Pour le layout, il n’y a pas 15 000 facon de les utiliser. Par contre dans une vue, on peut les utilisers de plusieurs facon :

  • Comme une variable :
$this->placeholder('PH1')->set("j'utilise mon placeholder PH1");
  • Comme un agrégateur de variables, avec plein d’outils mis a disposition.
$this->placeholder('PH2')->exchangeArray(array(1,2,3));
$this->placeholder('PH2')->setPrefix("<ul>n    <li>")
                         ->setSeparator("</li><li>n")
                         ->setIndent(4)
                         ->setPostfix("</li></ul>n");

La on decoupe notre tableau gràce a la fonction exchangeArray. Puis on rajoute des balise html avant et après. Le code parle de lui même.

  • Comme un agrégateur de contenu
$this->placeholder('PH3')->captureStart();
?>
La on utilise notre<br>
Placeholders PH3<br>
qui est sur plusieurs lignes <br />
Et qui contient des balises html, ca ne dérange pas.
<?php
$this->placeholder('PH3')->captureEnd();

La on utilise des méthodes qui vont commencer la capture puis terminer la capture. Tout ce qui sera entre ces deux méthodes seront contenue par le placeholder.

Enfin il faut savoir qu’il existe un bon nombre de configurations pour les placeholders. Je vous conseil de regarder la doc. On peut y apprendre a identer le code, ajouter des préfix, suffix etc…

Comment faire pour changer le titre de ma page ?

Voila le code, je vous l’explique après :

$this->headTitle('Mon nouveau titre','SET');

Explication : Implementation d’un placeholders dans un helper

Alors la je vous est perdu sur le titre. en fait ce n’est que pour les puristes et ceux qui veulent tout savoir que je l’ai ecrit comme ca. Sinon la on met met juste le titre de notre page en argument de la méthode headTitle. Mais d’ou vient ce « SET »‘. Et bien sans SET, par défault les méthodes head*** ajoute le code a la fin de ce qu’il y a deja. Ce qui est extremement pratique pour les CSS et JS (cf la prochaine note). Mais on peut aussi écraser la valeur du titre, ajouter le nouveau avant ou après etc… Alors pourquoi « Implementation d’un placeholders dans un helper ». Et bien en fait dans zend il existe déjà beaucoup de helper (comme vu plus haut), vous les utiliser mais vous ne le savez peut etre pas. Ensuite, headtitle par exemple est un placeholders, certe particulier, mais c’en est un. Voila vous savez tout !!

On retrouves nos petits fichiers : 

<?php

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{

    public function run()
    {
        // Cela permet d'avoir le fichier de configuration disponible depuis n'importe ou dans l'application.
        Zend_Registry::set('config', new Zend_Config($this->getOptions()));
        parent::run();
    }

    /**
    * Initialize Module
    *
    * @return Zend_Application_Module_Autoloader
    */
    protected function _initAutoload()
    {
        $loader = new Zend_Application_Module_Autoloader(array(
            'namespace' => '',
            'basePath'  => APPLICATION_PATH));
        return $loader;
    }

    /**
    * Initialize data bases
    *
    * @return Zend_Db::factory
    */
    protected function _initDb()
    {
    	//on charge notre fichier de configuration
    	$config = new Zend_Config($this->getOptions());
        //On essaye de faire une connection a la base de donnee.
    	try{
             $db = Zend_Db::factory($config->resources->db);
             //on test si la connection se fait
             $db->getConnection();
         }catch ( Exception $e ) {
             exit( $e -> getMessage() );
         }
         // on stock notre dbAdapter dans le registre
         Zend_Registry::set( 'dba', $db );
         return $db;
    }

	/**
     * Initialize session
     *
     * @return Zend_Session_Namespace
     */
    protected function _initSession()
    {
        // On initialise la session
        $session = new Zend_Session_Namespace('budget', true);
        return $session;
    }

    /**
     * Initialize session
     *
     * @return Zend_View
     */
    protected function _initView()
    {
        // Initialize view
        $view = new Zend_View();
        $view->doctype('XHTML1_STRICT');
        $view->headTitle('Ma premiere application avec Zend');
        $view->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=UTF-8');
        // Add it to the ViewRenderer
        $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('ViewRenderer');
        $viewRenderer->setView($view);
        // Return it, so that it can be stored by the bootstrap
        return $view;
    }

}

<?php
$this->headTitle('Mon nouveau titre','SET');

$this->placeholder('PH1')->set("j'utilise mon placeholder PH1");

$this->placeholder('PH2')->exchangeArray(array(1,2,3));
$this->placeholder('PH2')->setPrefix("<ul>n    <li>")
                         ->setSeparator("</li><li>n")
                         ->setIndent(4)
                         ->setPostfix("</li></ul>n");

$this->placeholder('PH3')->captureStart();
?>
La on utilise notre<br>
Placeholders PH3<br>
qui est sur plusieurs lignes <br />
Et qui contient des balises html, ca ne dérange pas.
<?php
$this->placeholder('PH3')->captureEnd();

<?php echo $this->doctype() ?>
<html>
<head>
    <?php echo $this->headTitle() ?>
    <?php echo $this->headLink() ?>
    <?php echo $this->headStyle() ?>
    <?php echo $this->headScript() ?>
    <?php echo $this->headMeta() ?>
</head>
<body>
	<?php echo $this->placeholder('PH1');?><br />
	<?php echo $this->placeholder('PH2');?><br />
	<?php echo $this->placeholder('PH3');?><br />
    <?php echo $this->layout()->content ?><br />
</body>
</html>
[production]
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0
includePaths.library = APPLICATION_PATH "/../library"
bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
bootstrap.class = "Bootstrap"
resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers"

; MODULES
resources.frontController.moduleDirectory = APPLICATION_PATH "/modules"
resources.frontController.defaultControllerName = "index"
resources.frontController.defaultAction = "index"
resources.frontController.defaultModule = "Frontend"
; LAYOUT
resources.layout.layout = "layout"
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"

[staging : production]

[testing : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1

[development : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1

; DATABASE
resources.db.adapter = "pdo_mysql"
resources.db.params.host = "localhost"
resources.db.params.username = "budget2"
resources.db.params.password = "budget2"
resources.db.params.dbname = "budget2"
resources.db.params.date_format = "YYYY-MM-ddTHH:mm:ss"
resources.db.isDefaultTableAdapter = true





Articles en rapport :

23 juillet 2009 dans Zend Framework | tags: , , , , , , , | Rédigé par : Greg

9 Commentaires

VtZjuillet 23rd, 2009 at 23 h 11 min

Impec’ les ptits fichiers a la fin ;)
Je t’avou que la partie des placeholders m’a un peu perturbé.
Quelques petites fautes de frappes
« Et bien en fai dans zend il existe deja »
« un helper va être un class que »

(ouais un peu inutile les fautes de frappes mais c’est pour toi hein)

pour le getStatic d’après ma compréhension
c’est pour retrouver des méthodes statiques qui ont été appeler par Helpbroker (c’est ce que j’ai compris de la doc’)

et

Gregjuillet 23rd, 2009 at 23 h 27 min

Ok, merci, je corrige ca de suite ….
Sinon Merci pour le helpbrocker …

Laurentaoût 4th, 2009 at 10 h 10 min

Merci pour l’exemple.

J’ai un petit souci au niveau des modules, p-e pourrais tu m’aider un peu.

J’ai une erreur si je ne mets pas ces deux ligne du fichier .ini en commentaire

resources.frontController.moduleDirectory = APPLICATION_PATH « /modules »
resources.frontController.defaultModule = « Frontend »

Je suppose que je dois créer un folder « modules » sous le folder « application » mais je ne sais pas ce que je dois mettre dedans.

Merci d’avance

Gregaoût 8th, 2009 at 0 h 56 min

voila, tu peux mettre un dossier « modules » sous le folder « application » et dedans tu fais la meme architectures : controller / modules / view etc …. (de mémoire)
Mais si tu veux faire encore plus simple tu peux suivre mon autre tutos su les Zend Tools : http://blog.lyrixx.info/zend/initialisation-dun-projet-zend/

marre de pas trouver de bon tuto completnovembre 27th, 2009 at 12 h 57 min

Sans mvc c’est possible d’avoir un exemple ?

Gregnovembre 27th, 2009 at 16 h 17 min

@marre de pas trouver de bon tuto complet :
Alors déjà tu as le droit d’etre poli ! Si tu regardes les autres commentaires, les visiteurs sont polis, et ca ne me dérange pas du tout de répondre a leur questions !
Sinon dans tous les cas je ne sais pas comment fonctionne les layouts sans MVC ! et j’avoue que la j’ai pas du tout envie de chercher …

benoxyjanvier 4th, 2010 at 12 h 02 min

Bonne et heureuse année et que tu continue à faire des tutos aussi interessant.
Merci pour tes tutos je suis débutant avec zend et cela m’aide considérablement.
Une question pour que tes exemples fonctionnes que dois-je mettre dans l’indexAction de mon IndexControleur ?

Gregjanvier 4th, 2010 at 22 h 30 min

Merci pour ton commentaires benoxy.
Tu n’as rien a mettre dans ton controller a part une action vide pour que cela fonctionne :D

SaiRazmai 8th, 2010 at 13 h 55 min

Merci pour le tuto surtout pour la config plus besoin du fameux startMvc par contre faut autoriser le charment du répertoire layouts/sripts/ :s sinon ca marche niquel :p .

ps: il ya un « s » en trop dans ton tuto lol quote » qu’on appellera : layouts.phtml. » , je crois que c’est plutôt layout.phtml :)

Laisser un commentaire

Votre commentaire :