A free and open-source book on ZF3 for beginners

Translation into this language is not yet finished. You can help this project by translating the chapters and contributing your changes.

4.12. Les Vues

Les vues appartiennent à la couche de présentation de l'application, leur objectif est de produire une sortie HTML renvoyée par le serveur aux visiteurs du site.

Avec Zend Framework 3, vous implémentez une vue en tant que fichier template, qui est un fichier avec l'extension .phtml ("phtml" signifie PHP + HTML). Les vues sont nommées ainso car elles contiennent généralement du code HTML mélangé avec des extraits de code PHP utilisés pour le rendu des pages.

Les vues sont situées généralement dans le sous-répertoire view du module (voir figure 4.5) :

Figure 4.5. Dossier view Figure 4.5. Dossier view

Pourquoi les fichiers vues ne sont-ils pas stockés dans le répertoire source du module ?

Les vues (fichiers .phtml) ne sont pas stockés dans le répertoire src/du module car ce ne sont pas des classes PHP habituelles et elles n'ont pas besoin d'être chargées par une fonction d'autoloading. Les templates de vues sont résolus par une classe ZF3 dédiée appelée view resolver. C'est pourquoi les vues sont stockées dans le dossier view du module.

Les vues peuvent avoir des comportements différents, en fonction des variables que vous leur transmettez à partir de la méthode d'action du contrôleur. Les données sont transmises pour afficher les vues à l'aide d'un conteneur de variable ViewModel.

Par exemple, implémentons la vue correspondant à l'action aboutAction() de notre contrôleur index. La page A Propos (about) affiche le titre et quelques informations sur notre application Hello World.

Pour créer le fichier de la vue, dans votre fenêtre NetBeans, accédez au dossier view/application/index (voir figure 4.6) et faites un clic droit sur le nom du dossier "index". Dans le menu contextuel qui apparaît, sélectionnez l'élément de menu Nouveau->Fichier PHP.

Figure 4.6.  Menu contextuel Figure 4.6. Menu contextuel

Dans la boîte de dialogue "Nouveau fichier PHP" qui apparaît (figure 4.7), entrez le nom about.phtml et cliquez sur le bouton Terminer.

Figure 4.7. Menu contextuel Figure 4.7. Menu contextuel

La vue about.phtmlsera créée et affichée dans le volet droit de la fenêtre NetBeans. Dans ce fichier, entrez ce qui suit :

<h1>A Propos</h1>

<p>
    L'application Hello World.
</p>

<p>
    Nom de l'application : <?= $this->escapeHtml($appName); ?>
</p>

<p>
    La description de l'application : <?= $this->escapeHtml($appDescription); ?>.
</p>

Comme vous pouvez le voir, la vue est une page HTML habituelle avec plusieurs fragments de code PHP. Un script de vue restitue simplement les données que vous lui transmettez avec le conteneur de variable ViewModel. Par exemple, à la ligne 8, nous obtenons la valeur de la variable $appName et l'affichons dans le flux de sortie standard.

Dans la vue, vous pouvez facilement accéder aux variables transmises depuis l'action du contrôleur. Par exemple, pour obtenir la valeur de la variable contenant le nom d'application, utilisez la syntaxe $appName or $this->appName. Ces deux manières d'accéder à la variable sont valent, la première nécessite moins d'écriture (donc nous l'utiliserons par la suite) mais la seconde permet de la différencier des variables du fichier .phtml.

Notez aussi que nous utilisons l'aide de vue (view helper) EscapeHtml pour échapper la chaîne affichée sur la page afin de rendre le site web résistant aux attaques de pirates.

Vous devriez toujours échapper les variables que vous affichée sur vos pages. L'échappement permet d'être sûr qu'aucun code malveillant n'est injecté sur votre page.

Dans votre vue, vous pouvez également utiliser des opérations de contrôle de simples (comme if, foreach ou switch) pour faire varier l'apparence de la page en fonction de la valeur d'une variable.

Maintenant, regardons à quoi ressemble notre page A Propos. Saisissez l'URL "http://localhost/application/about" dans la barre de navigation de votre navigateur. La page À propos devrait apparaître (voir figure 4.8) :

Figure 4.8. Page A Propos Figure 4.8. Page A Propos

En général, le code PHP que vous utilisez à l'intérieur des vues doit être aussi simple que possible. Les vues ne modifient généralement pas les données transmises par le contrôleur. Par exemple, une vue peut utiliser le modèle que vous lui passez pour parcourir les lignes d'une table de base de données et afficher les éléments sur une page HTML, mais elle ne doit jamais créer ou modifier une table.


Top