Blog en ZF – étape 3 : Utilisation du Zend_Layout pour le template
Dev

Blog en ZF – étape 3 : Utilisation du Zend_Layout pour le template

3 min read

Notre blog affiche bien notre contenu, mais on doit actuellement coder notre code HTML dans chaque vue. A ce stade, on pourrait s’en contenter, mais comme nous allons avoir plusieurs pages, cela n’est pas viable. Il nous faut donc un template. La création du template nous permettra de ne pas répéter le code pour chaque nouveau contenu et de changer notre mise en plage simplement en modifiant un seul fichier.

La solution existe : le Zend_Layout.

Pour cet exemple, j’ai préparé un fichier Zip, contenant un template html. Je me suis inspiré du site www.alsacreations.com, qui vous propose plusieurs modèles prêts à l’emploi. Vous pouvez accéder à tous les templates d’alsacréations sur cette page : http://www.alsacreations.com/static/gabarits/liste.html.

Le fichier Zip que je vous ai préparé et que vous pouvez télécharger ici, contient donc un fichier phtml, et 2 fichiers CSS.

1. Mise en place des fichiers :

Dans le répertoire public, créer un répertoire css et y déposer les 2 fichiers Css.

Dans le répertoire application, créer le répertoire layouts et scripts. copier le fichier layout.phtml.

Par défaut, le Zend_Layout utilisera ce fichier pour rendre nos vues.

2. Configurer le Zend_Layout

Ajouter le code suivant dans application/configs/application.ini :

resources.layout.layoutPath = APPLICATION_PATH . "/layouts/scripts"
resources.view[] =
resources.view.encoding = "UTF-8"

Dans le fichier template, vous trouverez ce code :

<div id="contenu">
content
</div>

Cela permet de rendre le contenu de notre vue à cette endroit.

3. Modifier notre fichier de vue

Nous pouvons maintenant supprimer de ce fichier (application/views/scripts/index/index.phtml) tout le code html de la page, et ne garder que ceci :

<?php
    foreach($this->entries AS $row) {
        $lien = $this->url(array('controller'=>'articles', 'action' => 'detail', 'id'=>$row->art_id ));
?>
    <div class="article">
        <h2><a href="<?= $lien; ?>"><?= $row->art_titre; ?></a></h2>
        <span class="date"><?= $row->art_date; ?> </span>
        <p class="chapeau"><?= $row->art_chapeau ?> </p>
    </div>
<?php
    }
?>

Il faut faire la même chose pour le fichier de détail (application/views/scripts/articles/detail.phtml) :

<div class="article_detail">
    <h1><?= $this->data->art_titre; ?></h1>
    <span class="date"><?= $this->data->art_date; ?> </span>
    <p class="chapeau"><?= $this->data->art_chapeau ?> </p>
    <p class="corps"><?= $this->data->art_contenu ?> </p>
</div>

4. Rendons ces menus dynamiques

Dans le template, vous pouvez trouver ce code :

<div id="navigation">
    <?= $this->action('index', 'menu'); ?>
    <?= $this->action('categories', 'menu'); ?>
</div>

Comme ces menus sont amenés à être modifié et dynamique pour les catégories, nous allons utiliser un controleur menu et 2 actions : index et categories.

Exécuter ces commandes à la racine du blog, en ligne de commande :

zf create controller menu
zf create action categories menu

Pour cette exemple, nous allons laisser du code html dans ces 2 vues, mais nous les modifierons plus tard pour les rendre dynamique, notamment pour afficher la liste des catégories.

Dans /application/views/scripts/menu/index.phtml, ajoutez ce code :

<ul>
    <li><a href="/">Accueil</a></li>
    <li><a href="/auteurs/">Auteurs</a></li>
    <li><a href="/historique/">Historique</a></li>
</ul>

et dans /application/views/scripts/menu/categories.phtml :

<h3>Catégories</h3>
<ul>
	<li><a href="/categorie/1/">Catégorie 1</a></li>
	<li><a href="/categorie/2/">Catégorie 2</a></li>
	<li><a href="/categorie/3/">Catégorie 3</a></li>
	<li><a href="/categorie/4/">Catégorie 4</a></li>
	<li><a href="/categorie/5/">Catégorie 5</a></li>
</ul>

 

5. Résultat

Retournons maintenant sur notre page index, et observons le résultat :

screenshot_home.png

c’est quand même plus sympa, non ?

A voir ou revoir :

Visited 4 times, 1 visit(s) today
Tags

Articles liés