Zend Framework : Premiers pas avec Zend_Application

 

Avec l'arrivée de la version 1.8 de Zend Framework, la configuration du bootstraping peut paraitre à première vue déroutante pour les novices et même pour les confirmés qui ont l'habitude de travailler avec les versions précédentes du Framework. Dans ce tutoriel nous allons essayer de vous montrer comment configurer une application MVC avec Zend_Application. Vous allez voir que la solution proposée par le Zend Framework permet d'avoir un code clair et organisé qui vous évitera aussi de créer vous-même une solution maison. La testabilité de l'application sera plus élevée, ainsi que le degré de réutilisation des objets.

Lire la suite…

Trouvez mes articles sur developpez.com

 

Trouvez mes articles sur le site de référence des développeurs francophones.

Mes articles seront dès à présent publiés sur Developpez.com, j’annoncerai sur ce blog toutes les nouvelles publications. 

Mon site perso sur developpez.com aityahia.developpez.com

Zend_Tool Créer une application basée sur Zend Framewrok

1. Introduction

Avec l’avènement de la version 1.8 du Zend Framework, vous avez certainement remarquez que plusieurs nouveaux composants sont venues embellir le Framework parmi eux on distingue Zend_Tool qui est particulièrement différent des autres.

La majorité des composants sont des class à leur plus haut niveau et agissent au cœur de votre application pour vous faciliter les tâches de développement les plus courante ce qui n’est pas le cas avec Zend_Tool qui est un espace de nom qui regroupe un certains nombres de class, il peut être apparenté beaucoup plus un outil de travail à l’instar de votre IDE qu’a un composant.

2. Présentation.

Lors du développement d’application avec Zend Framework plusieurs tâches sont répétitives et communes à tous les projets particulièrement si vous voulez adopter une architecture MVC, celle-ci nécessite du temps, de la réflexion et ne font pas la particularité et l’utilité de votre application, pour exemple la création de la structure initiale, le bootstrap, les contrôleurs et actions, les vues le gestionnaire d’exceptions...

Zend_Tool a été développé dans la perspective de promouvoir l’aspect RAD du Framework pour offrir au développeur un gain de temps qui sera consacré aux parties utile de leur code.

Comme nous l’avons dit plus haut Zend_tool est différent des autres composants en quelque sorte c’est un petit Framework pour créer et gérer des applications basé sur Zend Framework.

Initialement l’outil a été développé pour interagir avec un seul client qui est la ligne de commande, mais avec l’abstraction de la class client il est désormais possible au développeur d’implémenter leur propre client avec le Protocol de leur choix (XML-RPC, SOAP…).

Dans les jours à venir vous verrez certainement apparaitre des IDE qui offriront des options tel que Créer un projet ZF, Ajouter une action, Ajouter un model…...

3. Installation est configuration de l’outil ligne de commande (CLI Tool).

Le CLI Tool (Commande ligne tool) est l’interface principale avec laquelle le développeur peut requêter avec Zend_tool par l’intermédiaire de l’invite de commande, afin de pouvoir utiliser cet outil il vous avez besoin de l’installer et de le configurer.

Télécharger la dernière version de Zend Framework si vous ne l’avez pas encore fais, décompressé le package vers un dossier de votre choix.

3.1. Windows.

· Dans le dossier bin du package, copiez les deux fichiers zf.bat et zf.php dans le même dossier ou se trouve votre php.exe

· Rajouter le chemin vers php.exe dans votre PATH , pour qu’il soit accessible partout.

· Mettez votre Library Zend Framework dans votre dossier system PHP include_path généralement C:\PHP5\Pear que vous pouvez récupérer avec la commande

C:\> php –i | find « include_path »

Si pour une raison vous n’avez pas envie de mettre la librairie ZF dans votre include-path vous pouvez alternativement définir l’une des variables d’environnement ZEND_TOOL_INCLUDE_PATH_PREPEND ou ZEND_TOOL_INCLUDE_PATH vers le dossier ou vous avez mis le Framework.

Vous pouvez dès à présent tester votre configuration, ouvrez votre invite de commande (cmd.exe) et tapez la commande

C:\> zf show phpinfo

Si vous avez votre configuration php qui s’affiche devant vous c’est que vous avez correctement configuré votre outil.

3.2. Linux.

Dans le dossier bin du package copiez les deux fichiers zf.sh et zf.php dans le même dossier que votre php.bin

Mettez votre Library Zend Framework dans votre dossier PHP include_path ,  vous pouvez retrouvez l’emplacement de votre include path avec la commande suivante

mypc@user$ Php -i | grep include_path

4. Créer un projet

Pour créer un projet avec zend_tool_project rien de plus simple, dans votre invite de commande tapez la commande suivante dans le dossier ou vous voulez créer votre projet

C:\> zf create project zfProject

Comme vous pouvez directement indiquer le chemin complet ou sera créer votre projet

C:\> zf create project c:\wamp\www\zfProject

Si vous accédé a votre site via votre navigateur vous aurais un page qui ressemble à ça

5. Ajouter un contrôleur

Comme pour la création de projet la commande, supposant que nous voulons créer un controller login, il suffit de se positionner à l’intérieur du projet et de taper la commande suivante.

C:\> Zf create controller login

Vous aurais en résultat un écran qui ressemble à ça :

6. Ajouter une action

Supposant que maintenant nous voulons ajouter une action logout a notre Controller login,

C:\> zf create action logout login

Si vous jetez un œil à votre projet vous allez remarquer une structure similaire à ce qui suit et nous avons fais tous ça avec seulement 3 lignes de commande

7. Conclusion.

Je trouve que cet outil est une valeur ajouté au Framework, puisque il ne permet pas seulement de faire un gain de temps au développeur car il favorise aussi le maintien d’une structure propre et commune aux projets basé sur Zen Framework.

SharePoint Numérotation Auto Incrémenté pour vos documents

 

Il est parfois nécessaire d’attribuer un numéro automatique (AutoInc) pour vos formulaires InfoPath enregistrer sur un serveur SharePoint, nous allons vous montrer dans ce tutoriel comment y arriver sans aucune ligne de code, nous allons prendre un cas pratique qui est celui d’un bon de commande interne.

I-Pré-requis

Avant de commencé des connaissances sur la conception des formulaires InfoPath et sites SharePoint (des bibliothèques de documents en particulier) sont nécessaire afin de mieux comprendre ce qui va suivre.

II-Introduction

Dans ce tutoriel nous n’allons pas nous focaliser sur la création d’un formulaire InfoPath ou sur la création du site SharePoint, nous allons juste voir comment attribuer un numéro automatique aux formulaires enregistrés dans notre bibliothèque.

Pour réaliser ce tutoriel vous devrais disposer de SharePoint Services et d’InfoPath 2007.

Afin d’arriver a notre but l’astuce consiste à récupérer, incrémenté ID le plus grand de notre Librairie et de l’attribuer a notre formulaire au moment de l’envoie de celui-ci au serveur donc l’utilisateur ne verra le numéro qu’une fois le formulaire est été envoyé, c’est un peut contraignant mais c’est inévitable pour ne pas avoir des doublons dans le cas d’une utilisation simultané 

III-Mise en œuvre

Nous supposons que vous avez déjà créé votre formulaire et une bibliothèque de formulaire InfoPath nommé pour Bon de Commande Interne.

Dans votre formulaire InfoPath ajouter un champ Texte pour le numéro si ce n’est pas encore fait que nous allons nommer ici NumBC.

Pour récupérer ID de notre DocLib nous aurons besoin de créer une connexion de données qui va aller chercher le numéro le plus grand sur notre serveur,

III-1 Définition des connexions de données.

Dans InfoPath allez dans le menu outils –> Connexions de données vous verrez la fenêtre suivante

Cliquez sur le bouton ajouter

Choisissez une connexion réception de données et cliquez sur suivant.

Choisissez Bibliothèque ou liste SharePoint comme la source de données.

Ensuite Saisissez l’url complète vers votre DocLib comme indiqué que l’image (vous pouvez faire un copiez collez dans barre d’adresse de votre navigateur quand vous est sur votre librairie).

 

Sélectionnez la bibliothèque Bon de Commande Interne qui devra paraitre dans votre liste

 

Décochez tous les autres champs a l’exception de la colonne ID et veillez a ce que la case Inclure les données pour le formulaire actif soit décoché cliquez sur suivant et ne faite rien dans la 6eme étape

Nommez la connexion GetIDs et veillez aussi à décocher la case Extraire automatiquement les données a l’ouverture du formulaire et cliquez sur Terminer

De la même manière nous allons créer une autres connexion mais cette fois ci d’envoi  des données  toujours vers une librairie ou liste SharePoint

Lorsque vous arrivez à la 3eme étape clique sur le bouton formule a coté du nom de fichier

Ensuite cliquez sur le bouton Insérer une formule

Allez chercher la fonction concat() cliquez sur  Ok ensuite vous aurez une fonction du genre “concat(double-cliquer pour insérer un champ; double-cliquer pour insérer un champ; double-cliquer pour insérer un champ)” , Insérer a la place du premier paramètre un nom pour votre bon de commande exemple “BCI N°” pour le second paramètre allez cherchez le Champs NumBC

 

En résultat vous aurez une fonction qui ressemble a ceci concat(“BC N°”;NumBC).

Vous pouvez cliquez sur vérifier formule pour vous assurer qu’il n’y pas d’erreurs, cliquez sur OK et nommer votre connexion Envoi.

Nous pouvons maintenant fermer notre fenêtre Connexions de données.

III-2 Définition des paramètres d’envoi. Allez dans le menu Outils –> Options d’envoi

• cochez la case Autoriser les utilisateurs à envoyer ce formulaire
• choisissiez l’option  Effectuer une action personnalisée à l’aide des règles
• cliquez sur le bouton Avancer et choisissez fermer le formulaire  dans la liste de choix Après l’envoi
• cliquez ensuite sur le bouton Règles

  Suite a une contrainte de la fonction max() qui renvoi une valeur NaN lorsque la bibliothèque est vide nous somme obliger de gérer a part le cas de la création du premier formulaire, pour ce faite nous allons créer trois règles conditionnelle au lieu d’une.

  III-2.1 Récupérer ID courant

  Nous allons tous d'abord créer une règle avec une seul action et sans condition pour récupérer la liste des IDs de notre bibliothèque grâce à la connexion GetIDs que nous avant définit précédemment.

 

Ajoutez une action

• choisissez dans l’action Exécuter une requête via une connexion de données
• choisissez la connexion GetIDs

  Nommez la règle “Récupération des IDs”

  III-2.2 Cas d’une bibliothèque vide

  Quand le cas  d’une bibliothèque vide est vérifié nous savons d’ores et déjà que le numéro à attribuer est 1.

  Aouter une règles cliquez sur le bouton définir une condition.

 

 

Sélectionnez “Sélectionnez un champ ou un groupe” et vous verrez apparaitre la fenêtre qui suit

• Sélectionnez la source de données GetIDs
• allez cherchez le champ ID
• Sélectionnez “Nombre d’occurrences de ID“
• Ok

Sélectionnez “est égal à“ comme opérateur et Zéro pour la valeur.

Nous allons maintenant ajouter deux actions à notre règle.

La première sélectionnez une action de type Définir la valeur d’un champ, pour le champ choisissez NumBC et pour la valeur tapez tous simplement 1.

Pour la deuxième action  sélectionnez  Envoyer via une connexion de données avec la connexion Envoi que nous avons créé en second lieu.

Nous avons terminé avec notre deuxième règle nommez la “envoi 1er formulaire” ou bon il vous semble.

III-2.3 Cas d’une bibliothèque non vide

Nous allons maintenant créer notre troisième et dernière règle.

Définissez une condition comme nous l’avons fais avec la deuxième règle mais cette fois avec l’opérateur est supérieur à zéro

Ajouter une action de type Définir la valeur d’un champ comme nous l’avion fais avec la deuxième action mais pour la valeur de champs insérer une formule et cliquez sur ajouter Insérer une fonction

Choisissez la fonction max()

  Allez chercher le champ ID

Ajouter +1 à la fonction max(@ID)+1

En final vous aurez une action qui ressemble à ceci.

Nous allons maintenant ajouter une deuxième action de type Envoyer via une connexion de données comme nous l’avions fais avec la deuxième règle.

Nommez votre règle “envoi formulaire” et fermer toute vos fenêtres

IV- Publication du formulaire

Et voila  c’est fini vous pouvez dès à présent publier et testé votre formulaire

Remarque qu’après l’insertion du premier formulaire sur votre serveur, la deuxième règle et les conditions que nous avons définis ne servent plus a rien et engendre des traitements inutiles, il est préférable de les supprimer et ne gardé que la première et troisième règle en ôtant la condition.

AJAX et PHP protégez vos requêtes http

Lorsque on développe des applications PHP avec une interface AJAX, on ne peut jamais être sûre que les requêtes reçus par le serveur proviennent de votre application et c’est requêtes peuvent être plus au moins dangereuse pour votre system.

Pour parier a ce problèmes nous allons mettre un grade-fou qui va rejeté toutes requêtes provenant d’un domaine inconnu.

La technique consiste a fixé une variable pour chaque session qui sera transmise au client lors de ça création et qui va servir d’identité pour nos requêtes, si par hasard nous recevons une requêtes n’incluant pas cette variable celle-ci sera automatiquement rejeté.

Mise en œuvre

index.php

session_start();

 if (!isset($_SESSION['token']))
 {
  $token = md5(uniqid(rand(),TRUE)); //création et cryptage de id
  $_SESSION['token'] = $token; // sauvgarde de id
  setcookie('token',$_SESSION['token'],time()+3600); //expédition de id au client
 }

Nous créons d’abord un index unique que nous allons crypter en MD5 ensuite nous sauvegardons celui-ci dans la variable de session $_SESSION[‘token’] et finalement nous l’expédions au client sous forme de cookies.

myfile.js

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

readCookie est une fonction classique pour récupérer la valeur d’un cookies par son nom, vous pouvez utiliser la fonction prédéfinis de votre Framework AJAX si elle existe.

myfile.js

token = readCookie('token');
$.post("test.php", { token: token });

Nous envoyons notre demande au serveur avec notre id,j’ai pris comme exemple une requête post JQuery étant le Framework le plus utilisé.

test.php

if ($_POST['token'] == $_SESSION['token'])
	   {
	   //	exécuter votre traitement 
	   	
	   } 

Coté serveur nous testons la similitude de l’ID envoyé par le client et celui sauvegardé au niveau de notre serveur si c’est le cas nous pouvons exécuter tranquillement notre traitement.

IDE pour ExtJS

ExtJS est sans doute l’un des meilleurs Framework AJAX du moments mais développer avec n’est pas partie de plaisir pour les novices et même pour les plus expérimenté vue les nombreuses propriétés, méthodes et événement dont il faut se souvenir et le pire est que la casse et respecté. 

Mais soyez sans crainte ce n’est pas ce qui va vous empêcher de vous y mettre, les IDE ou EDI sont la pour nous décharger de cette tâche, après mes recherche j’ai repéré deux IDE intéressant dont Aptana et Spket

Aptana

Aptana est un IDE complet pour le développement web basé sur eclipse il  offre des support et plugins  pour plusieurs langages et des plugins plusieurs bibliothèques AJAX dont ExtJS,l’installation du plugins est d’une simplicité inouïe, vous n’avez qu’a cocher l’option ExtJS dans le Help Install Aptana Features... .

  

l’inconvénient avec le plugins d’Aptana est qu’il ne s’install pas sur d’autres plateformes eclipse tel que PDT ou Zend Studio.

Spket.

Spket est un puissant EDI JavaScript gratuit pour un usage non commercial ,il peut être installé tout seul (standalone) ou comme plugins pour tous EDI basé sur eclipse d’ou son avantage, il nous offre l’achèvement de code et la coloration syntaxique.

un tutoriel est disponible sur le site officiel nous montrons comment installé l’extension ExtJS,je vais publier prochainement un tutoriel complet sur l’installation du plugins sur PDT eclipse ou Zend Studio.  

Grille ExtJS et Zend Framework (3eme partie)

Dans cette partie nous allons en premier lieux ajouter la fonctionnalité d’édition directement sur notre grille pour ce faite ne devons revenir sur notre ColumnModel pour redéfinir les colonnes en leur rajoutant les éditeurs (editor) adéquat pour chacune d’elle, mais avant tous nous allons déclarer un deuxièmes DataStore pour récupérer la listes des familles.
notre ColumnModel deviendra comme suit:

public/js/grille.js

famillesDataStore = new Ext.data.Store({
    id : 'famillesDataStore',
    proxy : new Ext.data.HttpProxy({
       url : 'index/grille',
       method : 'POST'

      }),
    baseParams : {
     gAction : "gListeFamille"
    },
    reader : new Ext.data.JsonReader({
       root : 'results',
       id : 'id'
      }, [{
         name : 'id',
         type : 'int',
         mapping : 'id'
        }, {
         name : 'Libelle',
         type : 'string',
         mapping : 'Libelle'
        }

      ]),

    sortInfo : {
     field : 'Libelle',
     direction : "ASC"
    }

   });


articlesCols = new Ext.grid.ColumnModel([{
    header : 'Ref.',
    allowBlank : false,
    readOnly : true,
    dataIndex : 'ref',
    width : 60,
    hidden : false,
    editor : new Ext.form.TextField({ // rules about editing
     allowBlank : false,
     maxLength : 9,
     maskRe : /([a-zA-Z0-9\s-]+)$/
    })
   }, {
    header : 'Désignation',

    dataIndex : 'designation',
    width : 200,
    hidden : false,
    editor : new Ext.form.TextField({ // rules about editing
     allowBlank : false,
     maxLength : 20,
     maskRe : /([a-zA-Z0-9\s]+)$/
    })
    // alphanumeric + spaces allowed

  } , {
    header : 'Qte',
    readOnly : true,
    dataIndex : 'Qte',
    width : 50,
    align : 'right',
    hidden : false,
    editor : new Ext.form.NumberField({
       allowBlank : false,
       decimalSeparator : ',',
       allowDecimals : true,
       allowNegative : false,
       blankText : '0',
       maxLength : 4
      })

   }, {
    header : 'Prix',
    readOnly : true,
    dataIndex : 'Prix',
    width : 80,
    hidden : false,
    renderer : Ext.util.Format.formatNumber
      .createDelegate(Ext.util.Format),
    align : 'right',
    editor : new Ext.form.NumberField({
       allowBlank : false,
       decimalSeparator : ',',
       allowDecimals : true,
       allowNegative : false,
       blankText : '0',
       maxLength : 11
      })

   }, {
    header : 'Id Famille',
    readOnly : true,
    dataIndex : 'famille',
    width : 50,
    align : 'right',
    hidden : true,
    editor : new Ext.form.NumberField({
       allowBlank : false,
       allowDecimals : false,
       blankText : '0',
       maxLength : 4
      })

   }, {
    header : 'Familles',
    dataIndex : 'LibFamille',
    width : 150,
    editor : new Ext.form.ComboBox({
       store : famillesDataStore,
       typeAhead : true,
       triggerAction : 'all',
       mode : 'remote',
       displayField : 'Libelle',
       listeners : {
        select : {
         fn : function(e, rec) {
          var sm = articlesListGrid
            .getSelectionModel()
            .getSelected();
          sm.set('famille', rec.id);
         }
        }
       },

       listClass : 'x-combo-list-small'// ,

      })
   }, {
    header : 'Date d\'entrée',
    readOnly : true,
    dataIndex : 'date_ent',
    width : 80,
    hidden : false,
    renderer : Ext.util.Format.dateRenderer('d/m/Y'),
    editor : new Ext.form.DateField({
       format : 'd/m/Y'

      })

   }]);

 articlesListGrid = new Ext.grid.EditorGridPanel({
  id : 'articlesListGrid',
  title : 'liste des employe',
  store : articlesDataStore,
  width : 700,
  height : 350,
  cm : articlesCols,
  frame : true,
  clicksToEdit : 1,

  enableColLock : false,

  selModel : new Ext.grid.RowSelectionModel({
     singleSelect : true
    }),
  tbar : [{
     text : 'Ajouter',
     handler : function() {
      articleAction = 'gAjouter';
      var p = new article({
         ref : '',
         designation : '',
         Qte : '0',
         Prix : '0',
         date_ent : (new Date()).clearTime(),
         famille : '0'

        });

      articlesListGrid.stopEditing();
      articlesCols.setEditable(0, true);
      articlesDataStore.insert(0, p);
      articlesListGrid.startEditing(0, 0);
     }
    }]

   
  });

Nous allons définir ici la modification et l'ajout dans une même fonction, ce qui va compliquer un peut les choses mais va nous économisé énormément de code.
Pour pouvoir modifier, c’est simple, un double ou un simple click  (tous dépendra de la propriété clicksToEdit) sur la ligne souhaité et elle passe en mode édition mais pour l’ajout nous aurons besoin d’ajouter un bouton ajouter à notre grille.
Les grille ExtJS nous offre la possibilité de lui ajouter une barre d’outil qui va accueillir tous les boutons dont nous aurons besoin, vous allez voir c’est très simple, mais avant tous nous aurons besoin de déclarer une variable articleAction et une class record qui aurons pour rôle : .
articleAction permet à notre fonction d’enregistrement de déterminer si il s'agit d’un ajout ou d’une modification par défaut la variable et initialisé à “Modifier” et lorsque nous cliquons sur le bouton ajout nous la mettons a jours à “Ajout”.
le record article nous permet d’initialiser le nouvel enregistrement à insérer.

public/js/grille.js

// déclaration et initialisation articleAction.
 var articleAction = 'Modifier';
// déclaration de la classs record.
var article = Ext.data.Record.create([
   // the "name" below matches the tag name to read, except "availDate"
   // which is mapped to the tag "availability"
   {
  name : 'ref',
  type : 'string'
 }, {
  name : 'designation',
  type : 'string'
 }, {
  name : 'Qte',
  type : 'int'
 }, {
  name : 'Prix',
  type : 'float'
 }, {
  name : 'LibFamille',
  type : 'date',
  dateFormat : 'd/m/Y'
 }, {
  name : 'date_ent',
  type : 'date'
 }]);

 ....
 ....

selModel : new Ext.grid.RowSelectionModel({
     singleSelect : false
    }),
  tbar : [{
     text : 'Ajouter',
     iconCls:'ajout'
     handler : function() {
      articleAction = 'gAjouter';
      var p = new article({
         ref : '',
         designation : '',
         Qte : '0',
         Prix : '0',
         date_ent : (new Date()).clearTime(),
         famille : '0'

        });

      articlesListGrid.stopEditing();
      articlesCols.setEditable(0, true);
      articlesDataStore.insert(0, p);
      articlesListGrid.startEditing(0, 0);
     }
    }]

   
  });

Dans l’événement click du bouton (handler ) nous avons initialisé la variable articleAction et le record article.
Nous allons maintenant écrire notre fonction EnregistrerArticle qui va se charger de transmettre au serveur les données et l’action a entreprendre (ajout ou modification).

public/js/grille.js

function EnregistrerArticle(e) {

  Ext.Ajax.request({
   waitMsg : 'Enregistrement en cours...',
   url : 'index/grille',
   params : {
    gAction : articleAction,
    ref : e.record.data.ref,
    designation : e.record.data.designation,
    Qte : e.record.data.Qte,
    Prix : e.record.data.Prix,
    famille : e.record.data.famille, 
    date_ent : e.record.data.date_ent.format('Y-m-d')

   },
   success : function(response) {
    var result = eval(response.responseText);
    switch (result) {
     case 1 :
      articlesDataStore.commitChanges(); 
      articlesDataStore.reload();
      articleAction = 'Modifier';
      // reload our datastore.
      break;
      case 2 :
        Ext.MessageBox.alert('un article du même code exist déja !');
      break;
     default :
      Ext.MessageBox.alert('les données ne sont pas enregistré...');
      break;
    }
   },
   failure : function(response) {
    var result = response.responseText;
    Ext.MessageBox.alert('Erreur',result);
   }
  });
 }
  articlesListGrid.on('afteredit', EnregistrerArticle);
 

Dans la dernière ligne du code ci-dessus nous affectons à notre fonction a l’événement 'afteredit' qui se produit juste après qu'une cellule de notre grille est modifié notre fonction d’enregistrement.
nous avez terminé les modification sur notre fichier grille.js, maintenant nous allons repassé a notre contrôleur afin qu’il puisse répondre aux requête d’édition et d’ajout. 

Application/controllers/index.php

case "gListeFamille" :
      $famille = new familles();
         $resultat = $famille->fetchAll()->toArray(); 
        
      break;
case "gAjouter" :
      $article = new Articles ();
      $id = $formData['ref'];
      $row = ($article->find($id));
      if (empty($row['ref']))
      {
      unset($formData['gAction']);
        $article->insert($formData);
       $resultat = 1; 
      }
      else 
      {$resultat = 2;} // un Article du meme code exist déja
      // $resultat = .....     
      break;
      
     case "gModifier" :
                        
      $article = new Articles ();
      $id = $formData['ref'];
      $row = ($article->find($id));
      
      unset($formData['ref']);
      unset($formData['gAction']);
      $where = $article->getAdapter()->quoteInto('ref = ?', $id);
      $article->update($formData,$where);
      $resultat = 2;
     
      break;
 

Nous pouvons dès a présent testé notre code, vous pouvez constaté qu’il est belle et bien possible de modifier et d’ajouter des enregistrement.
Nous arrivons a la fin de cette partie qui est un peut complexe,si nous avons déclarer notre clé primaire auto-incrémenté les chose serais plus simple.
Dans la prochaine et dernière partie nous verrons comment ajouter à notre grille une barre de pagination et recherche rapide,si vous avez des problèmes faire fonctionner votre grille ou des commentaires je serai ravi d’y réponde.

Grille ExtJS et Zend Framework (2eme partie)

Dans cette partie nous allons construire et afficher notre grille, pour ce faite nous avons besoin de définir ces propriétés et sa source de données (DataStore dans le jargon ExtJS).

DataStore

Le DataStore est un tableaux de données qui peut être charger depuis n’importe quel source de données (XML, JSON...etc) ,pour que notre grille puisse afficher des données elle doit être impérativement attacher un DataStore, à un moment donnée si nous voulons changer le contenu de notre grille nous devrons changer celui du DataStore.

Pour commencer nous allons créer un nouveau fichier javascript grille.js dans le dossier js et nous lui ajouterons les fragments de  code qui suivent à la filé .

public/js/grille.js

var articlesDataStore;
var articlesCols;
var articlesListGrid;
var articlesListWindow;

Ext.onReady(function(){
   Ext.QuickTips.init();

Dans ce bout de code nous avons déclarer les variables dont nous aurons besoin plus bas, si vous avez remarqué le code ExtJS commence toujours par Ext.OnReady,cette méthode nous assure que tous les éléments ont été chargé avant de commencer a exécuté les scripts.

Nous allons maintenant définir notre DataStore.

public/js/grille.js

articlesDataStore = new Ext.data.Store({
       id: 'articlesDataStore',
    proxy: new Ext.data.HttpProxy({       // on vas utiliser une requette Http
                url: 'index/grille',  //url de l'action qui gère notre grille
                method: 'POST'       //on va utiliser la méthode poste pour notre requette
    
            }),
       baseParams:{gAction: "gListe"},  //on défini les paramètre à transmettre au l'action
         reader: new Ext.data.JsonReader({   
         root: 'results',
         totalProperty: 'total',
         id: 'id'
       },
    [ 
         {name: 'ref', type: 'string', mapping: 'ref'},
         {name: 'designation', type: 'string', mapping: 'designation'},
         {name: 'Qte', type: 'int', mapping: 'Qte'},
         {name: 'Prix', type: 'float', mapping: 'Prix'},
         {name: 'famille', type: 'string', mapping: 'famille'},
   {name: 'Libelle', type: 'string', mapping: 'Libelle'},
         {name: 'date_ent', type: 'date', mapping: 'date_ent'}
         
       ]),
       
       sortInfo:{field: 'ref', direction: "ASC"}
    
     });

Nous avons déterminés ci-dessus le proxy, BaseParams, reader et la  définition des champs du DataStore dont:

Proxy : définit la méthode, url et le type de requête à transmettre à notre Action dans notre cas (POST, ‘index/grille’ et Http).

BaseParams : c’est les données qui seront transmise via la requête, dans notre cas nous envoyons une variable gAction avec la valeur gListe.

reader : définit la structure et lit les valeurs des données de retour transmises par l’action grille.

Attention la casse est respecté dans les noms de colonnes, le mapping doit être tel qu'il est définit dans votre base de données et le champ name au dataIndex du ColumnModel.

ColumnModel

dans le ColumnModel nous allons définir l’apparence et le comportement de chaque colonne de la grille

public/js/grille.js

  articlesCols = new Ext.grid.ColumnModel([
  {
   header: 'Ref.',
   readOnly: true,
   dataIndex: 'ref', 
   width: 60,
   hidden: false
  },
  {
   header: 'Désignation',
   readOnly: true,
   dataIndex: 'designation', 
   width: 200,
   hidden: false
  },
  {
   header: 'Qte',
   readOnly: true,
   dataIndex: 'Qte', 
   width: 50,
   align:'right',
   hidden: false
  },
  {
   header: 'Prix',
   readOnly: true,
   dataIndex: 'Prix', 
   width: 80,
   hidden: false,
   renderer: Ext.util.Format.formatNumber.createDelegate(Ext.util.Format),
            align:'right',
  
  },
  {
   header: 'Familles',
   readOnly: true,
   dataIndex: 'famille',
   width: 50,
   hidden: true
  },
  {
   header: 'Familles',
   readOnly: true,
   dataIndex: 'Libelle',
   width: 150,
   hidden: false
  },
  {
   header: 'Date d\'entrée',
   readOnly: true,
   dataIndex: 'date_ent', 
   width: 80,
   hidden: false,
   renderer:Ext.util.Format.dateRenderer('d/m/Y')
  }
  ]);

Malheureusement ExtJS 2.0 n’inclut pas de base un moyen de formatage pour les monétaires ou pour le groupage des numériques par millier, alors les membres de la communauté ExtJS on développé une extension qui nous permettra de formater notre colonne Prix.

lien de téléchargement de l’extension.

Nous  devrons mettre cette extension dans notre dossier js et insérer le script dans le l’entête de notre layout

Comme nous avons terminé de définir le DataStore et le ColumnModel, nous somme enfin prêts à créer notre grille, dans notre exemple nous avons choisi de mettre celle-ci dans une fenêtre flottante mais ce n’est pas une nécessité, vous la placer dans n’importe quel conteneur.  

public/js/grille.js

 
      articlesListGrid =  new Ext.grid.EditorGridPanel({
          id: 'articlesListGrid',
       title:'liste des employe',
          store: articlesDataStore,     // Définition du lien avec le DataStroe
       cm: articlesCols,        // affectation des colonnes  
       enableColLock:false,
       selModel: new Ext.grid.RowSelectionModel({singleSelect:false})

       });
       
  articlesListWindow = new Ext.Window({  //nous mettons notre grille dans une fenêtre flottante
      id: 'articlesListWindow',
      title: 'list articles',
      closable:true,
      width:700,
      height:350,
      plain:true,
      layout: 'fit',
     items: articlesListGrid  
    });
  
  articlesDataStore.load();
 
  articlesListWindow.show();   // Display our window
  
 
});

Nous avons terminé la conception de notre grille mais tous de même nous ne pourrons pas encore l’afficher, nous devons d’abord effectuer quelques modifications sur l’action grille de notre contrôleur Index comme nous l’avons prédis dans la première partie.

Application/Controllers/IndexController.php

    switch ($gAction) {
     case "gListe" :
       $data = array();
       $rows =$article->lister();
            foreach ($rows as  $key=>$row)
                    {
                     $date =new Zend_Date($rows[$key]['date_ent'] ,Zend_Date::ISO_8601);
                     $rows[$key]['date_ent'] =$date->toString('MM/dd/yyyy');
                    
                     }
        $data['results'] = $rows;
                          $data['total'] = count($rows);
                          $resultat = Zend_Json :: encode($data);
      break;

  

Nous avons défini ici la traitement à effectuer lorsque en reçoit la requête POST quand gAction = gListe comme suit.

1. Récupération de la liste des articles.
2. Conversion des dates du format MySQL en format JavaScript  YYYY-MM-DD =>  mm/dd/yyyy.
3. encodé le tous en JSON.

Dans cette exemple nous avons défini tous les traitements dans notre action ce qui n’est pas très judicieux, le mieux est de définir des fonctions dans notre model auxquelles nous ferons appel pour mieux respecter le concept MVC et de décharger notre action pour une meilleur clarté de notre code.

Nous rajoutons maintenant la touche finale en appelons le script grille.js dans notre vue Index.

Application/views/scripts/index.phtml

<script type="text/javascript" src="<?php echo $this->baseUrl();?>/public/Js/grille.js"></script>

Nous arrivons a la fin de cette partie qui consiste à afficher la grille mais ce n’est pas encore fini, dans la partie suivante nous allons lui rajouter un peut de punch en lui ajoutant les fonctionnalités d’édition,d’ajout et de suppression.

Grille ExtJS et Zend Framework (1er Partie)

 

Préambule

Dans ce tutoriel nous allons réaliser une grille ExtJS dans le model MVC de Zend Framework en  corrélation avec Zend_Zb_Table,  celle-ci  ne va pas se contenté d’afficher nos données mais elle nous permettra aussi de modifier, ajouter, supprimer ou encore d’effectuer des recherches, entre autre elle sera doté d’une barre de pagination.
le présent tutoriel a été testé avec la version 1.7.4 de Zend Framework et de la version 2.0 d’ExtJS.
Comme cet article risque d’être un peut long nous allons le scinder en plusieurs parties.  

Pré-requis :

Nous supposons que vous avez  une assez bonne maitrise de PHP , du model MVC  de Zend Framework ainsi que des connaissances de base en Ajax.  

Mise en œuvre

Pour commencer nous allons créer un nouveau projet Zend Framework avec la structure conventionnel (voir ce tutoriel Débutez avec Zend Framework approche MVC) , acquérir et installer ExtJS comme décrit dans ce billet.

Base de données (conception).

Pour notre tutoriel nous prendrons comme exemple une liste d’articles en stock pour ce faite nous aurons besoin d’une base de données avec deux tables (articles et famille d’articles).
Table articles

Champs	Type	Commentaires
ref	VARCHAR (20) PK	Référence
designation	VARCHAR(50)	Désignation de l’article
qte	INT(11)	Quantité en stock
prix	DOUBLE (14,2)	Prix unitaire
famille	INT	code famille d’article
date_ent	DATE	date de 1er entrée

Table familles

Champs	Type
id	INT(11)
libelle	VARCHAR(30)

le scripts ci-dessous va nous permettre de créer et ajouter quelques données exemple à nos deux tables .

Script sql

--
-- Structure de la table `articles`
--

CREATE TABLE IF NOT EXISTS `articles` (
  `ref` varchar(20) NOT NULL,
  `designation` varchar(50) NOT NULL,
  `Qte` int(11) NOT NULL,
  `Prix` double(14,2) NOT NULL,
  `famille` int(11) NOT NULL,
  `date_ent` date NOT NULL,
  PRIMARY KEY (`ref`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Contenu de la table `articles`
--

INSERT INTO `articles` (`ref`, `designation`, `Qte`, `Prix`, `famille`, `date_ent`) VALUES
('3112-0006', 'Enveloppes F25', 5, 20.00, 1, '2009-01-20'),
('3114-0001', 'Cartouche d''encre A45', 5, 200.00, 2, '2009-02-02'),
('3117-0007', 'lecteur DVD', 3, 1400.00, 3, '2009-02-20');

-- --------------------------------------------------------

--
-- Structure de la table `familles`
--

CREATE TABLE IF NOT EXISTS `familles` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `Libelle` varchar(30) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Contenu de la table `familles`
--

INSERT INTO `familles` (`id`, `Libelle`) VALUES
(1, 'Fournitures de bureau'),
(2, 'Consommables informatique'),
(3, 'Matériels informatique'),
(4, 'Pèces de rachange');

maintenant que notre base de données a été créer nous la allons nous connecter à celle-ci, dans votre bootstrap vous rajouter le fragment de code suivant.

Application\bootstrap.php.

 ....... 
 ......

$db = Zend_Db::factory('Pdo_Mysql', array(
    'host'     => 'localhost',
    'username' => 'root',
    'password' => '',
    'dbname'   => 'zfextjs'
));
Zend_Db_Table::setDefaultAdapter($db);
 ........
 ........

Nous avons utilisé cette méthode de connexion dans un but de simplicité n’étant pas la meilleur, nous vous conseillons d’utiliser un fichier de configuration distinct comme c’est défini dans  ce cours .Présentation du Zend Framework - Premiers pas. que je vous recommande fortement si vous ne l’avez pas déjà fait
Nous allons maintenant créer nos deux class qui vont encapsuler nos tables.

Application\models\Articles.php.

<?php
class Articles extends Zend_Db_Table {
 protected $_name = 'articles';
 protected $_primary = array ('ref' );
 
 public function lister() {
  $select = $this->select ();
  $select->from ( 'articles', '*' )
    ->setIntegrityCheck ( false )
    ->join ( 'familles', 'familles.id=articles.famille', 'Libelle' );
  return $this->fetchAll ( $select )->toArray();
 }

}

Application\models\Familles.php

class familles extends Zend_Db_Table
{
    protected $_familles = 'familles';
}

Maintenant nous allons nous intéresser à notre contrôleur, suivant l’action de l’utilisateur  notre grille envoi au contrôleur une requête post a travers un champs que nous allons nommé gAction et d’après ça valeur  nous déterminerons l’action à entreprendre sur notre base de données, nous définissons les valeur possible de gAction comme suit: 

• gListe          : pour lister les données
• gAjouter      : pour insérer un nouvel enregistrement.
• gModifier     : pour modifier un enregistrement existant.
• gSupprimer : pour supprimer un enregistrement
• gChercher   : pour faire une recherche

Application\controllers\IndexController.php

 class IndexController extends Zend_Controller_Action {
 
 function indexAction() {
  $this->view->title = "liste des articles";
 
 }
 
 function grilleAction() {
  
  $this->_helper->layout->disableLayout ();
  $this->_helper->removeHelper ( 'viewRenderer' );
  
  if ($this->_request->isPost ()) {
   
   Zend_Loader::loadClass ( 'Zend_Filter_StripTags' );
   $f = new Zend_Filter_StripTags ( );
   $gAction = $f->filter ( $this->_request->getPost ( 'gAction' ) );
   if (! empty ( $gAction )) {
    
    $article = new Articles ();
    
    switch ($gAction) {
     case "gliste" :
      // Action lister....
      // $resultat = .....     
      break;
     case "gAjouter" :
      
      // $resultat = .....     
      break;
     case "gModifier" :
      //....
      

      break;
     case "gSupprimer" :
      
      break;
     case "gChercher" :
      
      break;
     default :
      break;
    }
    
    $this->getResponse ()->clearBody ();
    $this->getResponse ()->setHeader ( 'Content-Type', 'text/x-json' );
    $this->getResponse ()->setBody ( $resultat );
   }
  
  }
 }
}

c’est pas fini sinon ça sera trop beau, nous allons revenir plusieurs fois sur ce contrôleur afin de renseigner toutes les actions au fil de l’avancement du tutoriel. 
nous arrivons à la fin de cette première partie qui a consisté à préparer le Zend Framework à accueillir et répondre aux requêtes de notre grille  dans la second partie nous allons nous focaliser sur son affichage. 

Authentification avec Zend_Auth et un formulaire ExtJS en MVC

Objectif :

Notre objectif dans ce tutoriel est de réaliser une authentification avec Zend_Auth et un formulaire ExtJS qui ressemblera  à ça:   

Pré-requis

Des connaissances en PHP, Zend Framework en particulier Zend_Auth et le model MVC sont fortement recommandé, pour avoir un aperçu je vous invite à suivre ces tutoriels.

• Débutez avec Zend Framework approche MVC
• Débutez avec Zend_Auth

dans ce tutoriel nous allons reprendre l’exemple Débutez avec Zend_Auth  qui explique très clairement comment fonctionne le processus d’authentification avec Zend_Auth et nous apporterons les modifications nécessaire pour qu’il puisse interagir avec notre formulaire AJAX.

Mise en œuvre

Pour arriver a notre but, nous aurons besoin de modifier le contrôleur et la vue d’authentification.

Le formulaire

Pour réaliser notre formulaire de login nous aurons besoin du Framework Ajax ExtJs que vous pouvez télécharger librement sur le  site officiel qui inclus une licence  open source selon l’usage

Lien de téléchargement ExtJS.

Une fois que vous avez téléchargé le Framework vous allons mettre celui-ci dans  dans le dossier prévu pour les scripts et nous allons créer un nouveau fichier login.js, à la fin votre dossier public aura la structure suivante:  

les fichiers styles.css et icon_padlock.png sont la juste pour définir l’icone (le petit cadenas) de la barre de titre de notre fenêtre.

icon_padlock.png

 

Public\css\styles.css

.image_login
{
padding-left:20px;
background:url(../images/icon_padlock.png) no-repeat 1px 0px;
}
.lbError
{
 color :red;
}

code css à rajouter a votre stylesheet.

 

public\js\login.js

Ext.onReady( function() {
 Ext.QuickTips.init();

 // Créer une variable qui va contenir notre FormPanel

  var login = new Ext.FormPanel( {
   labelWidth :80,
   url :'auth/login',
   frame :true,
   bodyStyle :'padding:5px;',
   defaultType :'textfield',
   monitorValid :true,
   // Création des deux champs nom d'utilisateur et mot de passe
   // la proprité name est celle qui est envoyez au serveur avec
   // la méthode POST.
   items : [ {
    fieldLabel :'Utilisateur',
    id :'username',
    name :'username',
    allowBlank :false
   }, {
    fieldLabel :'Mot de passe',
    id :'password',
    name :'password',
    inputType :'password',
    allowBlank :false
   }, {
    id :'lbError',
    name :'lbError',
    cls :'lbError',
    xtype :'label',
    text :'',
    width :160
   } ],

   buttons : [ {
    text :'Login',
    formBind :true,
    // Function lorsque en clique sur le boutton login
    handler : function() {

     login.getForm().submit(
       {
        method :'POST',
        waitTitle :'Conexion en cours...',
        waitMsg :'envoi des données...',
        
        success : function(form, action) {
         if (action && action.result) {
          var redirect = action.result.link;
          window.location = redirect;
         }
        },

        // en cas d'echec de l'autentification .
        // en renvois à l'utilisateur le motif

        failure : function(form, action) {

         login.getComponent('lbError').setText(
           action.result.msg.text);

         if (action.result.msg.code == '2') {
          login.getComponent('username').focus();
         } else if (action.result.msg.code == '3') {
          login.getComponent('password').focus();
         }

        }
       });
    }
   } ]
  });

  // ici on vas créer une fenetre qui va contenir Notre formPanel

  var win = new Ext.Window( {
   layout :'fit',
   title :'Identifiez vous',
   iconCls :'image_login',
   width :300,
   height :150,
   closable :false,
   resizable :false,
   modal :true,
   plain :true,
   border :false,
   items : [ login ]
  });
  win.show();
 });

 

Le but de ce tutoriel n’est pas de vous montrer comment créer une fiche avec ExtJS mais  de voir comment cette fiche va interagir avec l’action d’authentification, si vous voulez avoir plus de détails sur le code ci-dessus je vous recommande de jeter un œil à cet article et ce tutoriel (en anglais).

Néanmoins je tiens a vous expliquer ce qui ce passe lorsque on clique sur le bouton login.

Notre formulaire envoie une requête http  avec la méthode POST à l’url indiqué dans la première ligne mise en surbrillance (ligne 8) et attend au retour une réponse au format JSON sucess :true  ou sucess:false, nous incluons aussi d’autres informations tel que le lien de redirection en cas de succès  ou le text et le code de l’erreur dans la cas contraire.

affichage du formulaire

Pour pouvoir afficher notre formulaire nous devons initialiser le header de notre layout car vous aurais besoin peut être d’utiliser d’autres Widget ExtJs dans votre application.

Application\layouts\layout.phtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title><?php echo $this->escape($this->title); ?></title>
    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo $this->baseUrl();?>/public/css/styles.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $this->baseUrl();?>/public/js/ext/resources/css/ext-all.css"> 
 <script type="text/javascript" src="<?php echo $this->baseUrl();?>/public/js/ext/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="<?php echo $this->baseUrl();?>/public/js/ext/ext-all.js"></script>
</head>
<body>
<div id="content">
    <h1><?php echo $this->escape($this->title); ?></h1>
 
    <?php echo $this->layout()->content; ?>
</div>
</body>

ensuite dans l’action index de notre contrôleur auth nous affichons le formulaire

Application\views\scripts\auth\index.phtml

<script type="text/javascript" src="<?php echo $this->baseUrl();?>/Public/Js/login.js"></script>

Vous pouvez maintenant essayez d’afficher votre formulaire, si ce n’est pas le cas vous avez certainement loupé quelque chose.

Une fois que notre formulaire est terminé nous allons  nous intéressés au contrôleur qui va faire le plus gros du travail.

Application\controllers\AuthController.phtml

<?php
class AuthController extends Zend_Controller_Action {
 
 public function indexAction() {
  $this->view->headTitle ( 'Login' );
 }
 
 public function loginAction() {
  
  $this->_helper->layout->disableLayout ();
         $this->_helper->removeHelper('viewRenderer');
  
  if ($this->_request->isPost ()) {
   
   Zend_Loader::loadClass ( 'Zend_Filter_StripTags' );
   $f = new Zend_Filter_StripTags ( );
   $username = $f->filter ( $this->_request->getPost ( 'username' ) );
   $password = $f->filter ( $this->_request->getPost ( 'password' ) );
   
   if (empty ( $username )) {
    $message = "{success: false, errors: { reason: 'Please provide a username.' }}";
   
   } else {
    // setup Zend_Auth adapter for a database table
    Zend_Loader::loadClass ( 'Zend_Auth_Adapter_DbTable' );
    $dbAdapter = Zend_Registry::get ( 'dbAdapter' );
    $authAdapter = new Zend_Auth_Adapter_DbTable ( $dbAdapter );
    $authAdapter->setTableName ( 'users' );
    $authAdapter->setIdentityColumn ( 'username' );
    $authAdapter->setCredentialColumn ( 'password' );
    
    // Set the input credential values to authenticate against
    $authAdapter->setIdentity ( $username );
    $authAdapter->setCredential ( md5 ( $password ) );
    
    // do the authentication
    $auth = Zend_Auth::getInstance ();
    
    try {
     $result = $auth->authenticate ( $authAdapter );
     
     switch ($result->getCode ()) {
      case Zend_Auth_Result::FAILURE_IDENTITY_NOT_FOUND :
       $message = "{success: false, msg: {text: 'Utilisateur non trouvé !', code: '2'}}";
       break;
      case Zend_Auth_Result::FAILURE_CREDENTIAL_INVALID :
       $message = "{success: false, msg: {text: 'mot de passe incorect', code: '3'}}";
       break;
      case Zend_Auth_Result::SUCCESS :
       
       $data = $authAdapter->getResultRowObject ( null, 'password' );
       
       if ($data->UserLevel > 0) {
        $auth->getStorage ()->write ( $data );
        $message = "{success:true, link: '" . $this->_request->getBaseUrl () . "'}";
       
       } else {
        $result->auth->clearIdentity ();
        
        $message = "{success:false, msg: {text: 'non autoriser, code:'2'}}";
       }
       break;
     }
    
    } catch ( Zend_Db_Adapter_Exception $e ) {
     
     $message = "{success:false, msg: {text: 'Erreur de conexion, " . $e->getMessage () . "', code:'6'}}";
    } catch ( Zend_Exception $e ) {
     
     $message = "{success:false, msg: {text: 'Erreur Systeme, " . $e->getMessage () . "', code:'6'}}";
    }
    
    $this->getResponse ()->clearBody ();
    $this->getResponse ()->setHeader ( 'Content-Type', 'text/x-json' );
    $this->getResponse ()->setBody ( $message );
   
   }
  }
 
 }

}

Si nous regardons le code de près nous remarquerons  qu'il n'ya pas de grand changement par apport au contrôleur définit dans le tutoriel que je vous est cité au début de cet article.

 

Application\controllers\AuthController.phtml

$this->_helper->layout->disableLayout ();
$this->_helper->removeHelper('viewRenderer');

Comme nous l’avons dit précédemment la réponse attendu par notre formulaire doit être au format JSON et ne doit contenir aucun autre caractère, c’est à cet effet que nous devons désactiver le layout de l’action login et le rendu de la form pour évité d’inclure notre entête dans la réponse.

 

Application\controllers\AuthController.phtml

    switch ($result->getCode ()) {
      case Zend_Auth_Result::FAILURE_IDENTITY_NOT_FOUND :
       $message = "{success: false, msg: {text: 'Utilisateur non trouvé !', code: '2'}}";
       break;
      case Zend_Auth_Result::FAILURE_CREDENTIAL_INVALID :
       $message = "{success: false, msg: {text: 'mot de passe incorect', code: '3'}}";
       break;
      case Zend_Auth_Result::SUCCESS :
       
       $data = $authAdapter->getResultRowObject ( null, 'password' );
       
       if ($data->UserLevel > 0) {
        $auth->getStorage ()->write ( $data );
        $message = "{success:true, link: '" . $this->_request->getBaseUrl () . "'}";
       
       } else {
        $result->auth->clearIdentity ();
        
        $message = "{success:false, msg: {text: 'non autoriser, code:'2'}}";
       }
       break;
     }
    
    } catch ( Zend_Db_Adapter_Exception $e ) {
     
     $message = "{success:false, msg: {text: 'Erreur de conexion, " . $e->getMessage () . "', code:'6'}}";
    } catch ( Zend_Exception $e ) {
     
     $message = "{success:false, msg: {text: 'Erreur Systeme, " . $e->getMessage () . "', code:'6'}}";
    }

Dans cette partie nous créons notre chaine JSON selon la réponse de Zend_Auth.

la réponse prend le format {sucess:true, link:’url de redirection’} en cas de succès et {sucess:false,msg{text:’message d’erreur,code:’code erreur’}} en cas d’échec

 

Application\controllers\AuthController.phtml

$this->getResponse ()->clearBody ();
$this->getResponse ()->setHeader ( 'Content-Type', 'text/x-json' );
$this->getResponse ()->setBody ( $message );

et finalement nous envoyons la réponse à notre formulaire qui va nous rediriger vers l’url que nous lui avons indiqué ou nous affiche un message d’erreur et nous invite a s’authentifier à nouveau.

Vous pouvez télécharger le code source complet. de l’exemple.