Créer le formulaire

Ecrire la vue login est très simple. On débute avec un tag form dont l'attribut action sera l'URL de l'action login décrite précédemment. On rajoute ensuite les libellés (labels) et les champs (input) pour les attributs déclarés dans la classe LoginForm. A la fin on ajoute un bouton d'envoi (submit). Tout cela est fait en HTML habituel.

Yii fourni cependant des classes spéciales (helpers) facilitant la création de cette vue. Par exemple, on peut créer un champ de saisie de texte en utilisant CHtml::textField(); Ou encore pour créer une liste déroulante (drop-down list), on peut utiliser CHtml::dropDownList().

Info: On pourra se demander si les helpers sont vraiment utiles s'ils requièrent la même quantité de code comparé à du code HTML pur. En fait les helpers amènent plus que du code HTML. Par exemple, le code suivant génère un champ texte qui déclenchera la soumission du formulaire si sa valeur est éditée par un utilisateur.

CHtml::textField($name,$value,array('submit'=>''));

Sans les helpers, cela aurait nécessité plus de code et du javascript à bon escient.

Dans le code suivant, CHtml est utilisé pour créer le formulaire de connexion (login). On assumera que la variable $model représente une instance LoginForm.

<div class="form">
<?php echo CHtml::beginForm(); ?>
 
    <?php echo CHtml::errorSummary($model); ?>
 
    <div class="row">
        <?php echo CHtml::activeLabel($model,'username'); ?>
        <?php echo CHtml::activeTextField($model,'username') ?>
    </div>
 
    <div class="row">
        <?php echo CHtml::activeLabel($model,'password'); ?>
        <?php echo CHtml::activePasswordField($model,'password') ?>
    </div>
 
    <div class="row rememberMe">
        <?php echo CHtml::activeCheckBox($model,'rememberMe'); ?>
        <?php echo CHtml::activeLabel($model,'rememberMe'); ?>
    </div>
 
    <div class="row submit">
        <?php echo CHtml::submitButton('Login'); ?>
    </div>
 
<?php echo CHtml::endForm(); ?>
</div><!-- form -->

Le code ci-dessus génère un formulaire plus dynamique. Par exemple, CHtml::activeLabel() génère un libellé associé avec l'attribut du modèle. Si cet attribut à une erreur de saisie, la classe CSS du libellé changera à error, ce qui modifiera l'apparence du libellé avec les styles CSS correspondant à une erreur. De façon similaire, CHtml::activeTextField() génère un champ de saisie texte pour l'attribut du modèle et change sa classe CSS en cas d'erreur.

Si on utilise le fichier de style CSS form.css fourni par le script yiic, le formulaire généré est similaire à:

Page de connexion

Page de connexion avec erreurs

Depuis la version 1.1.1, un nouveau widget appelé CActiveForm est fourni afin de faciliter la création de formulaires. Ce widget est capable d'effectuer une validation consistante aussi bien du côté client que du côté serveur. Le code ci-dessus peut être réécrit comme suit en utilisant CActiveForm:

<div class="form">
<?php $form=$this->beginWidget('CActiveForm'); ?>
 
    <?php echo $form->errorSummary($model); ?>
 
    <div class="row">
        <?php echo $form->label($model,'username'); ?>
        <?php echo $form->textField($model,'username') ?>
    </div>
 
    <div class="row">
        <?php echo $form->label($model,'password'); ?>
        <?php echo $form->passwordField($model,'password') ?>
    </div>
 
    <div class="row rememberMe">
        <?php echo $form->checkBox($model,'rememberMe'); ?>
        <?php echo $form->label($model,'rememberMe'); ?>
    </div>
 
    <div class="row submit">
        <?php echo CHtml::submitButton('Login'); ?>
    </div>
 
<?php $this->endWidget(); ?>
</div><!-- form -->