Zend Framework - Mise en page

Une mise en page représente les parties communes de plusieurs vues, par exemple, l'en-tête et le pied de page. Par défaut, les mises en page doivent être stockées dans leview/layout dossier.

Une configuration de mise en page est définie sous le view_manager section dans le module.config.php.

La configuration par défaut de l'application squelette est la suivante -

'view_manager' => array( 
   'display_not_found_reason' => true, 
   'display_exceptions' => true, 
   'doctype' => 'HTML5', 
   'not_found_template' => 'error/404', 
   'exception_template' => 'error/index', 
   'template_map' => array( 
      'layout/layout' => __DIR__ . '/../view/layout/layout.phtml', 
      'application/index/index' => __DIR__ . '/../view/application/index/index.phtml', 
      'error/404' => __DIR__ . '/../view/error/404.phtml', 
      'error/index' => __DIR__ . '/../view/error/index.phtml', 
   ), 
   'template_path_stack' => array( 
   __DIR__ . '/../view', 
),

Ici le template_mapest utilisé pour spécifier la mise en page. Si la mise en page n'est pas trouvée, elle renverra une erreur. Jetons un œil à la mise en page principale de l'application squelette.

Layout.phtml

<?= $this->doctype() ?> <html lang = "en"> <head> <meta charset = "utf-8"> <?= $this->headTitle('ZF Skeleton Application')->setSeparator(' - ')>
         setAutoEscape(false) ?>
      <?= $this->headMeta() ->appendName('viewport', 'width = device-width, initial-scale = 1.0') ->appendHttpEquiv('X-UA-Compatible', 'IE = edge') ?> <!-- Le styles --> <?= $this->headLink(['rel' => 'shortcut icon', 'type' => 
         'image/vnd.microsoft.icon', 
         'href' => $this->basePath() . '/img/favicon.ico']) ->prependStylesheet($this->basePath('css/style.css')) 
         ->prependStylesheet($this->basePath('css/bootstraptheme.min.css')) ->prependStylesheet($this->basePath('css/bootstrap.min.css')) 
      ?>  
      
      <!-- Scripts --> 
      <?= $this->headScript() ->prependFile($this->basePath('js/bootstrap.min.js')) 
         ->prependFile($this->basePath('js/jquery-3.1.0.min.js')) ?> </head> <body> <nav class = "navbar navbar-inverse navbar-fixed-top" role = "navigation"> <div class = "container"> <div class = "navbar-header"> <button type = "button" class = "navbar-toggle" data- toggle = "collapse" data-target = ".navbar-collapse"> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> <a class = "navbar-brand" href = "<?= $this->url('home') ?>"> 
                  <img src = "<?= $this->basePath('img/zf-logo-mark.svg') ?> " height = "28" alt = "Zend Framework <?= \Application\Module:: VERSION ?>"/> Skeleton Application </a> </div> <div class = "collapse navbar-collapse"> <ul class = "nav navbar-nav"> <li class = "active"><a href = "<?= $this->url('home') ?>">Home</a></li> 
               </ul> 
            </div> 
         </div> 
      </nav> 
   
      <div class = "container"> 
         <?= $this->content ?> <hr> <footer> <p>© 2005 - <?= date('Y') ?> by Zend Technologies Ltd. All rights reserved.</p> </footer> </div> <?= $this->inlineScript() ?> 
   </body> 
</html>

Lorsque vous analysez la mise en page, il utilise principalement les assistants d'affichage, dont nous avons parlé dans le chapitre précédent. En regardant de plus près, la mise en page utilise une variable spéciale,$this->content. Cette variable est importante car elle sera remplacée par le script de vue (modèle) de la page demandée.

Créer une nouvelle mise en page

Créons une nouvelle mise en page pour notre module Tutoriel.

Pour commencer, créons un tutorial.css file sous le répertoire «public / css».

body { 
   background-color: lightblue; 
} 
h1 { 
   color: white; 
   text-align: center; 
}

Créer un nouveau fichier de mise en page newlayout.phtmldans / myapp / module / Tutorial / view / layout / et copiez le contenu de la mise en page existante. Ensuite, ajoutez letutorial.css feuille de style à l'aide de HeadLink classe d'assistance à l'intérieur de la section de tête de disposition.

<?php echo $this->headLink()->appendStylesheet('/css/tutorial.css');?>

Ajouter un nouveau about lien dans la section de navigation à l'aide du URL assistant.

<li><a href = "<?= $this->url('tutorial', ['action' => 'about']) ?>">About</a></li>

Cette page de mise en page est commune à l'application du module de didacticiel. Mettre à jour leview_manager section du fichier de configuration du module du didacticiel.

'view_manager' => array( 
   'template_map' => array( 
      'layout/layout' => __DIR__ . '/../view/layout/newlayout.phtml'), 
   'template_path_stack' => array('tutorial' => __DIR__ . '/../view',), 
)

Ajouter le aboutAction fonction dans le TutorialController.

public function aboutAction() { 
}

Ajouter le about.phtml sur myapp / module / Tutorial / view / tutorial / tutorial / avec le contenu suivant.

<h2>About page</h2>

Maintenant, vous êtes prêt à enfin exécuter l'application - http://localhost:8080/tutorial/about.

↰ Previous page Next page ↱

Zend Framework - Mise en page

Layout.phtml

Créer une nouvelle mise en page

Tutoriel Zend Framework