Jan
30

Modifier les Vues dans Yii

Modifier les Vues dans Yii

Voici le septième épisode de cette série Apprendre le Framework Yii, traduction de la série d’articles écrits par Larry Ullman il y a quelques mois. Vous pouvez trouver l’article original en anglais sur le site de l’auteur : Basic View Edits in Yii. Comme d’habitude, à partir de maintenant, c’est Larry qui parle…

Dans ce septième article, je vous propose de modifier un peu les fichiers générés automatiquement par le framework Yii. J’utiliserais comme dans les articles précédents l’exemple des employés et des services à titre d’illustration. Reportez-vous aux articles précédents pour plus d’informations au sujet de cet exemple.

Lorsque vous utilisez l’outil yiic en ligne de commande et Gii via le navigateur pour créer une nouvelle application, le framework Yii crée pour vous toute une série de fichiers : fichiers de configuration, contrôleurs, vues… Les vues sont un ensemble de fichiers PHP, organisés dans des dossiers. Le premier que nous allons modifier est le fichier protected/views/layouts/main.php (où protected est le dossier racine de votre application). C’est le gabarit (template) de chaque page au sein de l’application. Vous voudrez certainement changer radicalement le contenu de ce fichier pour donner à ces pages l’apparence que vous aurez choisie, mais je soulignerai quelques points avant cela.

Pour commencer, dans la section HEAD, vous pouvez voir que des fichiers externes sont utilisés grâce à cette ligne de code :

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/main.css" />

Lorsque vous voyez Yii::app(), cela signifie que l’on accède à l’application dans son entier. Grâce à cela, vous pouvez accéder aux informations à propos d’un utilisateur qui consulte une page de votre site, ou à propos des pages les plus consultées, … Yii::app()->request fait plus spécifiquement référence à la page qui est actuellement appelée. La partie ->baseUrl désigne l’URL racine de votre application, comme http://www.example.com. Il est recommandé d’utiliser Yii::app()->request->baseUrl pour faire appel à des fichiers externes (CSS, JavaScript, images, …) car ces chemins relatifs sont plus adaptés si vous utilisez les URL modifiées de Yii (telle que http://www.example.com/index.php/site/login).

Ensuite, vous pouvez voir que le titre de la page est déterminé dynamiquement :

<title><?php echo CHtml::encode($this->pageTitle); ?></title>

Par défaut, le titre de la page sera constitué du titre de l’application (tel que défini dans le fichier de configuration) complété par un texte qui identifie la page en cours. Plus tard, je vous montrerai comment personnaliser cette partie. La méthode CHtml::encode() est utilisée pour protéger le site des attaques de type Cross-Site Scripting (XSS). Vous verrez qu’il est utilisé abondamment (et à juste titre) dans les fichiers Vues.

Vous trouvez également la ligne de code suivante dans le fichier layout :

<div id="logo"><?php echo CHtml::encode(Yii::app()->name); ?></div>

Yii::app()->name est le nom de l’application web, tel que défini dans le fichier config/main.php. Vous pouvez l’utiliser à votre guise dans vos fichiers Vues.

Ensuite, le fichier de mise en page par défaut utilise un widget :

<?php $this->widget('zii.widgets.CMenu',array(...

Les widgets offrent la possibilité d’inclure une portion de code PHP dans une vue en utilisant un fichier externe. Ils sont parfaits pour les éléments qui ne sont pas liés à une Vue spécifique, et que vous voulez placer où vous le souhaitez. De plus, ils vous permettent de séparer ces morceaux de code pour en simplifier la maintenance et la portabilité. Le code ci-dessus signifie que l’on souhaite ajouter le composant CMenu. Ce widget fit partie de l’extension Zii du framework Yii. Pour en apprendre davantage sur les widgets, reportez-vous à la documentation de Yii.

Note concernant Yii 1.1 : Depuis Yii 1.1, certaines des meilleures extensions ont été placée dans un espace de nom (NDT : namespace), zii. Alors que les versions antérieures passaient par un composant MainMenu, Yii 1.1 utilise le widget CMenu. La mise en page par défaut utilise également le widget CBreadcrumbs, qui fait aussi partie des extensions Zii.

Enfin, le script de layout contient la ligne suivante, qui est la plus importante :

<?php echo $content; ?>

Vous ne trouverez aucune autre référence à la variable $content ailleurs dans le code. Remarquez aussi qu’elle s’appelle tout simplement $content, et pas $this->content ni $model->content. C’est là que le contenu spécifique à la page sera inséré dans le layout. Le reste du code HTML et PHP correspond au template utilisé pour l’ensemble du site; la valeur de $content est ce qui distingue une page X d’une page Y. Mais comment cela marche-t-il ?

Astuce : La structure exacte des URL va dépendre du fait que vous avez ou non activé le composant urlManager, ainsi que de la façon dont vous l’aurez configuré. Consultez l’article sur la configuration de Yii pour en savoir plus.

Si vous consultez une page comme http://example.com/index.pp/employee/view/id/1, qui permet d’afficher l’employé dont l’ID est 1, la méthode actionView() de EmployeeController est appelée. Cette méthode charge le Modèle Employee dont la clé primaire est 1, et affiche ensuite la vue View, en lui passant en paramètre le Modèle. Le code correspondant est le suivant (issu de protected/controllers/EmplyeeController.php) :

public function actionView($id)
{
$this->render('view',array(
'model'=>$this->loadModel($id),
));
}

La méthode loadModel() de cette classe Contrôleur récupère le Modèle, mais je ne détaillerai pas ce point maintenant. En revanche, le code $this->render() indique le nom de la Vue à afficher (dans ce cas, view). Cela signifie que Yii exécute le script protected/views/employee/view.php. Ce script utilise une variable $model (passée en paramètre dans le code ci-dessus) pour afficher les informations concernant l’employé dans un certain contexte (plus exactement, le script view.php fait appel à zii.widgets.CDetailView pour lister les détails). Le résultat de l’exécution de ce script de Vue est assigné en arrière-plan à la variable $content, et ainsi placée au bon endroit dans la mise en page. C’est ainsi que l’affichage des Vues fonctionne.

Remarquez que vous pouvez facilement utiliser différents layouts pour différentes sections de l’application. Pour ce faire, dans la méthode du Contrôleur, modifiez la valeur du layout avant d’afficher la Vue. Fournissez à cette méthode le nom du fichier layout en supprimant l’extension. Par exemple, le code suivant indique qu’il faut utiliser protected/views/layouts/home.php dans l’action Index :

class SiteController extends CController
{...
public function actionIndex()
{...
$this->layout = 'home';

Depuis quelques versions de Yii, le framework crée deux layouts de base, l’un étant une mise en page en une colonne, et l’autre en deux colonnes. Chacun d’eux fait appel au template main.php. Le cContrôleur précise ensuite quel layout doit être utilisé dans l’ensemble du Contrôleur :

class EmployeeController extends Controller
{
public $layout='//layouts/column2';

Remarque : $this->layout à l’intérieur d’une méthode de classe est équivalent à la variable publique $layout utilisé en dehors des méthodes (comme, par exemple, dans le code ci-dessus). Le premier exemple modifie le layout pour une action particulière tandis que le second exemple modifie le layout pour l’ensemble du Contrôleur.

Passons à présent aux scripts de Vue. En général, je commence par modifier l’affichage basique. Par exemple, l’apparence par défaut d’une Vue de type show est un tableau présentant les informations du Modèle, constitué de labels et des valeurs correspondantes. Vous ne souhaitez probablement pas afficher l’ensemble des données du Modèle, et vous préfèrerez certainement un affichage fait de DIV ou de paragraphes. Ce sont des modifications simples. Comme le montre le code précédent, les informations du Modèle sont passées en paramètre sous le nom model. Vous pouvez donc utiliser $model->ceQueVousVoulez pour accéder aux valeurs des différents attributs du Modèle.

Astuce : si vous vous identifiez sur le site (en utilisant les identifiants admin/admin si vous avez conservé la configuration par défaut) et que vous vous rendez à l’adresse www.example.com/index.php/department, vous pouvez déjà créer quelques départements dans la base pour que les explications qui suivent prennent tout leur sens.

Les Vues index et admin affichent toutes les deux une série d’enregistrements grâce au widgets Zii. index.php utilise le widget CListView et se sert du script _view.php comme template. Si vous modifiez _view.php ou bien la façon dont CListView est configuré (dans index.php), ces listes d’enregistrements seront modifiées. La page admin, que vous pouvez consulter en cliquant sur le lien « Manage XXX », utilise le widget CGridView. Ce widget crée un tableau de données, avec les liens permettant d’afficher, de modifier ou de supprimer les enregistrements listés. Ce tableau peut faire l’objet d’une pagination ou d’une recherche à l’aide d’Ajax. C’est un exemple très concret de la façon dont Yii vous facilite le travail. La figure suivante présente la liste des services, sans aucune modification apportée au code généré par Yii :

Administration des services

Administration des services

Les Vues create et update contiennent quelques lignes concernant les en-têtes (NDT : fil d’Ariane et menu), suivies de l’inclusion du formulaire View :

<?php echo $this->renderPartial('_form', array('model'=>$model)); ?>

Ce code affiche une Vue partielle à un endroit donné, en passant en paramètre les informations du Modèle  à _form.php.

Dans le code généré, le formulaire Department est utilisable tel quel, puisqu’il n’affiche qu’un champ input correspondant au nom du service. Pour le Modèle Employee, par contre, nous devons personnaliser un peu le formulaire. Vous pouvez le constater en consultant la page www.example.com/index.php/employee/create/.

Par défaut, les formulaires créés avec Gii génèrent un champ de formulaire pour chaque attribut du Modèle, à l’exception de la clé primaire. Cependant, certains champs, comme les dates de création ou de modification, seront renseignés automatiquement et n’ont pas vocation à apparaître dans un formulaire présenté à l’utilisateur. De même, lorsque nous utilisons des Modèles liés, comme ici Employee et Department, vous préfèrerez afficher une liste déroulante dans le formulaire des employés permettant de choisir le nom du service auquel il sera associé. Le code généré par Yii ne fait pas cela pour vous : il permet seulement l’affichage d’un champ de texte destiné à afficher l’id du service associé :

<?php echo $form->textField($model,'departmentId'); ?>

La variable $form est une instance de la classe CActiveForm. La méthode textField() permet de créer un champ input de type text. Le premier paramètre indique que l’input est relatif à l’objet $model (qui correspond à une instance du Modèle courant, issu du Contrôleur). Le second paramètre l’attribut du Modèle auquel est associé l’input.

Pour créer une liste déroulante associée à un autre Modèle, remplacez ce code par :

<?php echo $form->dropDownList($model,'departmentId', CHtml::listData(Department::model()->findAll(), 'id', 'name')); ?>

La méthode dropDownList() de l’objet $form crée une liste déroulante. Le premier paramètre lie cet élément au Modèle associé au formulaire, c’est-à-dire $model, la même variable qui a été passée à la Vue qui est affichée. Le deuxième paramètre est le nom du champ de formulaire (même nom que l’attribut du Modèle) : ici, le champ departmentId du Modèle Employee. Ensuite, vous devez préciser à la méthode la liste des valeurs à utiliser dans la liste déroulante. Pour cela, vous utiliserez la méthode CHtml::listData(). Cette méthode retourne une liste de valeurs utilisables dans les listes déroulantes. Dans notre exemple, il s’agira de la liste des services. Pour la récupérer, nous utilisons une fonction de Yii permettant de récupérer l’ensemble des enregistrements correspondant à un Modèle : NomDuModèle::model()->findAll(). Les deux derniers paramètres (de la méthode CHtml::listData()) sont les champs à utiliser dans la liste déroulante en tant que valeur et texte à afficher. Ici, nous utilisons id (id du service) et name.

Vous voudrez probablement aussi supprimer ou modifier les liens d’accès aux fonctions d’administration qui apparaissent dans les fichiers Vues.

Enfin, vous pouvez modifier le titre de la page. Pour cela, vous pouvez utiliser le code :

<?php $this->pageTitle = $model->something; ?>

Remarquez que l’on assigne une valeur à $this->pageTitle, et pas à $model->pageTitle. Vous pouvez vous servir du contenu de $model (en utilisant, par exemple, la valeur d’un champ nom) pour définir le titre de la page. Vous pouvez également y ajouter le nom de l’application en y concaténant la valeur de Yii::app()->name.

Voici la fin de ce septième épisode concernant l’édition des fichiers Vue que vous pouvez effectuer lorsque vous déployez une nouvelle application avec Yii. Larry et moi-même vous remercions de votre intérêt pour cette série. Je vous rappelle que vous pouvez retrouver l’article original sur le site de l’auteur : Basic View Edits in Yii.

Dans le prochain article (le dernier de la série), nous verrons comment modifier les Contrôleurs. Vous constaterez d’ailleurs qu’il y a assez peu de choses à y modifier.

Chapitre suivant : Modifier les Contrôleurs dans Yii »



Poster un commentaire

Edito

Bienvenue sur Mémorandom.

Mémorandom est le blog de 2 développeurs web, Appo et Nico.

Vous y trouverez des informations sur différents domaines touchant de près ou de loin au développement web

Tutoriels Yii Framework

Nos derniers articles

Blogs Dev

Liens

Étiquettes