Zend Framework : Tutoriel exemple d’auto-complétion avec Zend_Dojo_Form_Element_FilteringSelect et Zend_Dojo_Data

Cet article est une traduction du billet de Sudheer Satyanarayana que vous retrouverez en VO sur Techchorus.
Zend Framework offre beaucoup de possibilités pour l’interface utilisateur avec les classes de Zend_Dojo. Dans cet article, nous allons voir ensemble comment construire un élément de formulaire avec la fonctionnalité d’auto-complétion.

Il est préférable que vous soyez familier avec

• Zend_Controller_Action
• Zend_Layout
• Zend_Form

Serait ce agréable si je vous disais que vous n’avez besoin d’aucune connaissance en JavaScript ? Zend_Dojo permet en effet aux développeurs PHP de construire des formulaires dynamiques et attrayant sans écrire une seule ligne de code JavaScript.

Cet exemple a été testé avec la version 1.7.0 du Zend Framework.

Dans cet exemple, nous allons construire un élément texte où le visiteur pourra soit sélectionner l’utilisateur dans la liste déroulante ou saisir le nom d’utilisateur. Lorsque le nom d’utilisateur est saisi au clavier, l’élément de formulaire génère une liste déroulante en filtrant les données à partir des données saisies. Jettez un oeil à l’exemple Dijit FilteringSelect pour comprendre le type d’élément de formulaire que nous allons construire.

FilteringSelect diffère du Widget Dojo Combobox en ce que, la valeur de l’élément du formulaire doit être fournie dans la liste. Aussi, vous pouvez afficher le nom d’utilisateur sur l’écran et définir le ‘User ID’ comme élément de valeur.Nous allons utiliser l’helper d’action autoCompleteDojo pour envoyer les données JSON.
Commençons à coder.

Etape 1: Définir l’environnement Dojo dans notre fichier de Bootstrap.

^?View Code PHP

// Create new view object if not already instantiated
//$view = new Zend_View();
Zend_Dojo::enableView($view);
$view->dojo()
    ->addStyleSheetModule('dijit.themes.tundra')
    ->setDjConfigOption('usePlainJson', true)
    ->disable();

Dans cet exemple, nous utilisons par défaut le CDN défini dans Zend_Dojo. Vous n’avez pas besoin d’ajouter les fichiers JavaScript sur votre serveur. Nous appliquons la feuille de style ‘tundra’.

Etape 2: Créer le controlleur. Créez le fichier DemoController.php dans votre répertoire controller et ajouter le code ci-dessous :

^?View Code PHP

class DemoController extends Zend_Controller_Action
{
    public function indexAction()
    {
    }
 
    public function userlistAction()
    {
    }
 
    public function getForm()
    {
    }
 
}

Comme vous pouvez le voir, il s’agit juste du squelette de notre controlleur. Nous y ajouterons le code dans un moment.

Nous construisons notre formulaire dans la fonction getForm(). Dans une application réelle vous pouvez créer le formulaire dans une classe et un fichier différent. Dans indexAction nous affichons le formulaire et traitons les données fournies par l’utilisateur. In userlistAction nous générons les données au format JSON qui est requis par l’élément filteringSelect.

Etape 3: Créer le formulaire et ses éléments. Placez le code suivant dans la
fonction getForm().

^?View Code PHP

$form = new Zend_Form;
 
 $userId = new Zend_Dojo_Form_Element_FilteringSelect('userId');
 $userId->setLabel('Select a user')
            ->setAutoComplete(true)
            ->setStoreId('userStore')
            ->setStoreType('dojo.data.ItemFileReadStore')
            ->setStoreParams(array('url'=>'/demo/userlist'))
            ->setAttrib("searchAttr", "username")
            ->setRequired(true);
 
 $submit = $form->createElement('submit', 'submit');
 
 $form->addElements(array($userId, $submit));
 
 return $form;

$userId est l’élément de formulaire contenant le widget Dojo filteringSelect. Nous donnons le nom userStore à nos données. Nous précisons que les données seront fournies à partir de l’url /demo/userlist. Enfin, nous attribuons ‘username’ à ‘searchAttr’.

Etape 4: Préparer la base de données

^?View Code SQL

CREATE TABLE `user` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 100 ) NOT NULL ,
) ENGINE = InnoDB
 
INSERT INTO `zf``user` (
`id` ,
`username`
)
VALUES (
NULL , 'jamey'
), (
NULL , 'hryan'
), (
NULL , 'jennyross'
), (
NULL , 'natebrg'
), (
NULL , 'deric'
);

Créez des données exemples et insérez les dans la base de données.

Etape 5: Récupérer les données de la base de données, les convertir au format JSON et les envoyer.

J’utilise la base de données MySQL « ZF » dans cet exemple. Insérez le code ci-dessous pour userlistAction(). Je me connecte à la base de données directement depuis l’action dans cet exemple. En pratique, vous pourriez vous connecter à la base de données depuis un point central tel que le bootstrap ou depuis un front controller plugin.

^?View Code PHP

       $db = new Zend_Db_Adapter_Pdo_Mysql(array(
            'host'     => '127.0.0.1',
            'username' => 'zf',
            'password' => 'password',
            'dbname'   => 'zf'
        ));
 
        $result = $db->fetchAll("SELECT * FROM user");
        $data = new Zend_Dojo_Data('id', $result);
        $this->_helper->autoCompleteDojo($data);

Cela prend seulement trois lignes pour récupérer les données et lees envoyer au format que demande Dojo. Nous passons deux paramètres id and $result au constructeur de Zend_Dojo_Data. ‘id’ est l’identifiant unique de la table de notre base de données. Le helper d’action autoCompleteDojo est simple d’emploi. Il désactive le layout et le view renderer. Il met en place les données d’entête appropriées et envoi les données en utilisant l’objet Zend_Dojo_Data.

Faites pointer votre navigateur sur demo/userlist, vous devriez recevoir les données dans un fichier. Dojo se sert de ce fichier via dojo.data.ItemFileReadStore.

Etape 6: Configurer indexAction(). Ajouter le code ci-dessous à la fonction indexAction().

^?View Code PHP

$form = $this->getForm();
 
        if ($this->_request->isPost()) {
 
            if ($form->isValid($_POST)) {
                /*
                 * Process data
                 */
                $userId = $this->_getParam('userId');
                //$userId contains the userId input by the user
            } else {
               $form->populate($_POST);
 
               $this->view->form = $form;
            }
 
        } else {
 
           $this->view->form = $form;
        }

Etape 7: Définir la vue et le layout
Dans le script de vue index.phtml, insérez le code suivant :

Demo

^?View Code PHP

echo $this->form;

Dans le fichier de layout, afficher le contenu Dojo et configurez la classe de la balise body à ‘tundra‘. Lorsque vous utilisez echo $this->dojo(), les liens vers les fichiers JavaScript Dojo sont affichés. Cela imprime également le code JavaScript que le Zend Framework génère pour vous.

^?View Code HTML

    dojo()->addStylesheetModule('dijit.themes.tundra');
    ?>

layout()->content ?>

A première vue, il apparait que l’on a écrit beaucoup de code pour obtenir ce résultat. Lorsque vous aurez compris l’ensemble du processus, vous verrez qu’il est vraiment très simple de construire des éléments de formulaire avec la fonctionnalité d’auto-complétion.

J’ai joint les fichiers à ce post pour que vous puissiez vous y référer.

Vous pouvez également jetter un oeil à :

Ajouter un sélecteur de date sympa dans vos formulaires sans écrire une seule ligne de JavaScript

L’archive des sources de ce tutoriel (tar.gz)