FuelPHP - Programmation de formulaire avancée

FuelPHP fournit une programmation de formulaire avancée via les classes Fieldset et Fieldset_Field. Fieldsetfournit une manière orientée objet de créer un formulaire. Il a un support complet pour les modèles. Il prend également en charge la validation côté client et côté serveur. Pour créer un formulaire à part entière, il suffit de créer un modèle avec un formulaire et un paramètre de validation appropriés. Découvrons la classe Fieldset et comment créer un formulaire en l'utilisant dans ce chapitre.

Fieldset

Fieldset est une collection de Fieldset_Fieldobjets. Fieldset_Field définit l'entrée individuelle d'un formulaire tel que prénom, nom, etc. avec les validations. La classe Fieldset a des méthodes pour ajouter / modifier / supprimer des champs. Il a des options pour identifier les champs définis dans un modèle et créer les champs à partir du modèle donné.Fieldsetutilise les classes Form et Validation en arrière-plan pour faire le vrai travail. Voyons quelques-unes des méthodes importantes de la classe Fieldset.

la forge

forgecrée une nouvelle instance Fieldset. Il a les deux paramètres suivants -

  • $name - identifiant du fieldset

  • $config- tableau de configuration. Les options possibles sont validation_instance et form_instance. validation_instance peut avoir un objet Validation et form_instance peut avoir un objet Form.

$employee_form = Fieldset::forge('employee');

exemple

instance renvoie l'instance Fieldset créée précédemment par identificateur.

$employee_form = Fieldset::instance('employee');

get_name

Obtient l'identifiant de l'instance de fieldset.

$employee_form = Fieldset::forge('employee'); 
$name = $employee_form->get_name();

ajouter

addcrée une nouvelle instance Fieldset_Field et l'ajoute à l'ensemble de champs actuel. Il contient les quatre paramètres suivants,

  • $name - nom du champ

  • $label - étiquette pour le terrain

  • $attributes - Attributs de balise HTML

  • $rules - règles de validation

$employee_field = $employee_form-> add (
   'employee_lastname', 
   'Lastname', 
   array ('class' => 'pretty_input')
);  

// with validation rules 
$employee_form->add ( 
   'email', 'E-mail', 
   array('type' => 'email', 'class' => 'pretty_input'), 
   array('required', 'valid_email') 
);

ajouter avant

add_before est similaire à add, sauf qu'il a un paramètre supplémentaire pour spécifier le champ avant lequel le champ nouvellement créé sera ajouté.

$employee_form->add_before (
   'employee_firstname', 
   'Firstname', 
   array ('class' => 'pretty_input'), 
   array(), 
   'employee_lastname'
);

effacer

delete supprime le champ spécifié de l'ensemble de champs.

$employee_form->delete('employee_firstname');

champ

field obtient soit tous les champs, soit celui spécifié à partir du jeu de champs.

$fields = $employee_form->field(); 
$lastname_field = $employee_form->field('employee_lastname');

construire

buildest un alias pour $ this-> form () -> build () . Génère le balisage HTML du formulaire.

$employee_form->build(Uri::create('employee/add'));

activer

enable réactive un champ précédemment désactivé.

$employee_form->enable('employee_firstname');

désactiver

disable permet de désactiver la construction d'un champ dans le fieldset.

$employee_form->disable('employee_firstname');

forme

form renvoie l'instance Form du jeu de champs actuel.

$form = employee_form->form();

add_model

add_model ajoute le champ du modèle dans l'ensemble de champs. Il a les trois paramètres suivants,

  • $class - nom de la classe

  • $instance - instance de la classe pour remplir les champs avec valeur

  • $method- nom de la méthode dans la classe. Cette méthode est utilisée pour ajouter des champs dans l'ensemble de champs. Orm \ Model a la méthode requise. Le nom de la méthode par défaut est set_form_fields.

$employee_form = Fieldset::forge('employee'); 
$employee_form->add_model('Model_Employee');

peupler

populate définit la valeur initiale des champs dans fieldset à l'aide de l'instance de modèle.

$emp = new Model_Employee(); 
$emp->name = "Jon"; 
$employee_form->populate($emp);

repeupler

repopulate est identique à populate, sauf qu'il remplit de nouveau les champs du fieldset.

validation

validation obtient l'instance de validation du jeu de champs actuel.

$validation = $employee_form->validation();

validé

Alias ​​pour $ this-> validation () -> validated ().

input

Alias ​​pour $ this-> validation () -> input ().

error

Alias ​​pour $ this-> validation () -> error ().

show_errors

Alias ​​pour $ this-> validation () -> show_errors ().

Exemple de travail

Créons un formulaire avancé pour ajouter un nouvel employé dans notre exemple d'application d'employé à l'aide de la classe Fieldset.

Mettre à jour le modèle

Mettez à jour le modèle d'employé avec les règles de validation nécessaires et ajoutez un observateur de validation comme suit.

<?php  
   class Model_Employee extends Orm\Model { 
      protected static $_connection = 'production'; 
      protected static $_table_name = 'employee'; 
      protected static $_primary_key = array('id'); 
      
      protected static $_properties = array ( 
         'id',  
         'name' => array ( 
            'data_type' => 'varchar',
            'label' => 'Employee Name', 
            'validation' => array ( 
               'required',  
               'min_length' => array(3),  
               'max_length' => array(80) 
            ), 
            'form' => array ( 
               'type' => 'text' 
            ), 
         ),  
         'age' => array ( 
            'data_type' => 'int', 
            'label' => 'Employee Age', 
            'validation' => array ( 
               'required',  
            ), 
            'form' => array ('type' => 'text' ), 
         ), 
      );  
      
      // Just add the Observer, and define the required event 
      protected static $_observers = array('Orm\\Observer_Validation' => array ( 
         'events' => array('before_save'))); 
   }

Ici, nous avons défini les règles de validation pour les champs de nom et d'âge et ajouté un nouvel observateur pour effectuer la validation côté serveur avant d'enregistrer le modèle dans la base de données. La même règle de validation créera également les attributs de validation d'entrée nécessaires dans le formulaire.

Créer un formulaire

Créez une nouvelle action, action_advancedform dans le contrôleur d'employé comme suit.

public function action_advancedform() { 
   
   // create a new fieldset and add employee model
   $fieldset = Fieldset::forge('employee')->add_model('Model_Employee');  
   
   // get form from fieldset 
   $form = $fieldset->form();  
   
   // add submit button to the form 
   $form->add('Submit', '', array('type' => 'submit', 'value' => 'Submit'));  
   
   // build the form  and set the current page as action  
   $formHtml = $fieldset->build(Uri::create('employee/advancedform'));  
   
   // set form in data 
   $data = array(); 
   $data['form'] = $formHtml;  
   return Response::forge(View::forge('employee/advancedform', $data, false)); 
}

Ici, nous avons créé le formulaire en utilisant fieldset et l'envoyons à la vue. Ensuite, ajoutez une vue pour l'action,fuel/app/views/employee/advancedform.php comme suit.

<!DOCTYPE html> 
<html lang = "en"> 
   
   <head> 
      <title>Employee :: add page</title> 
      <meta charset = "utf-8"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <?php echo Asset::css('bootstrap.css'); ?> 
      
      <style>  
         table { 
            width: 90%; 
         }  
         table tr { 
            width: 90% 
         }
         table tr td { 
            width: 50% 
         }  
         input[type = text], select { 
            width: 100%; 
            padding: 12px 20px; 
            margin: 8px 0; 
            display: inline-block; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            box-sizing: border-box; 
         }  
         input[type = submit] { 
            width: 100%; 
            background-color: #3c3c3c; 
            color: white; 
            padding: 14px 20px; 
            margin: 8px 0; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
         }  
         div { 
            border-radius: 5px; 
            background-color: #f2f2f2; 
            padding: 20px; 
         } 
      </style> 
   </head> 
   
   <body> 
      <div class = "container"> 
         <?php
            if(isset($errors)) { 
               echo $errors; 
            } 
            echo $form; 
         ?> 
      </div> 
   </body> 
   
</html>

Maintenant, en demandant la page http://localhost:8080/employee/add affichera le formulaire suivant.

Formulaire de processus

Mettez à jour la méthode d'action, action_advancedform pour traiter le formulaire et ajoutez les données d'employé saisies par l'utilisateur dans la base de données du contrôleur d'employés comme suit.

public function action_advancedform() { 
   
   // create a new fieldset and add employee model 
   $fieldset = Fieldset::forge('employee')->add_model('Model_Employee');  
   
   // get form from fieldset 
   $form = $fieldset->form();  
   
   // add submit button to the form 
   $form->add('Submit', '', array('type' => 'submit', 'value' => 'Submit')); 
   
   // build the form  and set the current page as action  
   $formHtml = $fieldset->build(Uri::create('employee/advancedform'));  
   
   if (Input::param() != array()) { 
      try { 
         $article = Model_Employee::forge(); 
         $article->name = Input::param('name'); 
         $article->url = Input::param('age'); 
         $article->save(); 
         Response::redirect('employee/list'); 
      
      } 
      catch (Orm\ValidationFailed $e) { 
         $view = View::forge('employee/advancedform'); 
         $view->set('form', $formHtml, false); 
         $view->set('errors', $e->getMessage(), false); 
      } 
   } 
   
   return Response::forge($view); 
}

Ici, nous avons été redirigés vers la page de la liste des employés, une fois que les données saisies par l'utilisateur sont validées et enregistrées dans la base de données. Sinon, on nous montrera à nouveau le formulaire.

Créer le formulaire

Maintenant, demandez l'URL, http://localhost:8080/employee/addet entrez quelques données d'employés et soumettez le formulaire. Si les données ne sont pas fournies, le formulaire demandera à l'utilisateur de saisir les données comme indiqué dans la capture d'écran suivante.

Si l'utilisateur contourne la validation côté client, le serveur validera le formulaire et affichera une erreur comme indiqué dans la capture d'écran suivante.

Si les données ont réussi la validation côté client et serveur, les données de l'employé seront enregistrées dans la base de données et la page sera redirigée vers la page de liste.