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.