De formation initiale informatique (de bac à +5), vous êtes un développeur confirmé en PHP/MySQL (environnement LAMP et WAMP) avec une expérience d’au moins 1 ans au sein d’une SSII ou d’une web agency.

Compétences requises :
- Framework PHP Symfony
- bonnes connaissances des environnements WAMP (Windows) et LAMP
- MySQL et SQL
- PHP (programmation objet)
- (X)HTML, DHTML , JavaScript, CSS.
- AJAX
- Javascript, jQuery
- standards du web (W3C)
- Connaissance de subversion

Qualités recherchées :
- curiosité
- force de proposition
- sens du travail en équipe

Disponibilité :
- ASAP

Poste à Montpellier 34000

Contactez Samuel Breton, Tél : 04 67 99 63 19
Email : contact@lexik.fr
CV + LM

Un programme qui semble très intéressant est ici : http://www.symfony-live.com/schedule

Si vous souhaitez participer aussi ne tardez plus à vous inscrire :  http://www.symfony-live.com/

Vous pourrez retrouver Yoann la bas.

Stage Développeur PHP :

Compétence : Connaissance de PHP5, POO
Profil : Rigoureux, curieux.
Mission : Vous integrez notre équipe de développement sur la réalisation de projet Interne : Intranet/Site Internet.
Développement avec le Framework Symfony

Stage Marketing et gestion site Internet

Compétence : Connaissance d’Internet, bureautique
Profil : Appliqué, bonne rédaction
Mission : Vous travaillerez sur la visibilité des projets mis en ligne ainsi que sur les actions marketing et le référencement.

Envoyez CV : contact@lexik.fr

La réponse à cette question ne pouvant pas tenir dans le modeste blog de Lexik.fr, je vais seulement vous expliquer comment intégrer la modification d’un champ « INPUT » en ajax dans un formulaire Symfony 1.2, à l’aide du plugin jQuery JEditable.

A ce stade, je vous recommande ce lien : JEditable

Pré-requis

• Comme d’habitude, l’éternel plugin : sfFormExtraPlugin
• Les JS :
  • jquery-1.3.2.min.js
  • jquery.jeditable.js

Le widget

Chemin :
[votre_projet]/plugins/sfFormExtraPlugin/lib/widget/sfWidgetFormInputEditInPlace.class.php

Code source :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?php
class sfWidgetFormInputEditInPlace extends sfWidgetFormInput
{
  public $object;
  public $route;
  public function __construct($option = array(), $messages = array(), $object = null, $route = null)
  {
    parent::__construct($option, $messages);
    $this->object = $object;
    $this->route = $route;
  }
  public function configure($options = array(), $messages = array())
  {
    parent::configure($options, $messages);
  }
  public function render($name, $value = null, $attributes = array(), $errors = array())
  {    
    $prefix = $this->generateId($name);    
    return sprintf(<<<EOF
<b id="%s">%s</b>
<script type="text/javascript">
$(function() {
  $("#%s").editable(
    "%s",
    {
      indicator : 'Saving...',      
      type   : "text",
      submit : "OK",
      style  : "inherit",
      id       : 'ajaxfield_id'
  });
});
</script>
EOF
    , $prefix, $value,
      $prefix,
      url_for($this->route, $this->object, array('absolute'=>true))
   );
  }
}

Pour ce widget, j’ai créer 2 attributs.

• object
  Cet attribut contient l’objet de la route objet Symfony.
  ^?View Code PHP

  4	public $object;

• route
  Cet attribut contient le nom de la route objet Symfony.
  ^?View Code PHP

  5	public $route;

Ces attributs nous permettent de générer l’URL de la page qui va valider et éventuellement sauvegarder les données postées par le widget JQuery.

36

url_for($this->route, $this->object, array('absolute'=>true))

Maintenant que l’outil est créé, utilisons le !
Toute la suite de l’article n’est qu’un exemple d’utilisation.

Schéma

Person:
  columns:
    firstname:
      type: string(255)
    lastname:
      type: string(255)
    email:
      type: string(255)

Routing

• show_person
  La route du formulaire.
• save_person_eip
  Route de l’action « executeSaveEIP » qui valide et sauve les champs du modèle « Person »

# Route du formulaire
show_person:
  url:     /person/show/:id
  class:   sfDoctrineRoute
  options: { model: Person, type: object }
  param:   { module: person, action: show }
 
# Route de la page sauvant les données postées en ajax
save_person_eip:
  url:     /person/saveEIP/:id
  class:   sfDoctrineRoute
  options: { model: Person, type: object }
  param:   { module: person, action: saveEIP }
  requirements:
    id: d+
    sf_method: [post]

Actions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// L'action pour le formulaire de base
public function executeShow(sfWebRequest $request)
{
  $this->person = $this->getRoute()->getObject();
  $this->form = new PersonForm($this->person);
}
 
// L'action qui traite le post en ajax
public function executeSaveEIP(sfWebRequest $request)
{
  // Récupération de l'objet de la route
  $this->person = $this->getRoute()->getObject();
 
  // Récupération des données postées par le widget JQuery
  $id = $request->getParameter('ajaxfield_id');
  $this->value = $request->getParameter('value');
 
  // Récupération du nom du champ
  if(ereg("person_(.*)$", $id, $key))
  {
    $champ = $key[1]; 
  }
 
  // Instanciation d'un formulaire lié à notre objet
  $form = new PersonForm();
 
  // Récupération du validateur du champ
  $validator = $form->getValidator($champ);
 
  // On tente de valider le champ
  try
  {
    $cleaned = $validator->clean($this->value);
    $this->person->set($champ, $this->value);
    $this->joueur->save();
  }
  catch(sfValidatorError $e)
  {
     // Erreur lors de la validation du champ 
     // La valeur à afficher dans le template doit être la valeur actuelle de l'objet
     $this->value = $this->person->get($champ);
  }
}

Templates

• showSuccess.php
  ^?View Code PHP

  <h1>Edition d'une personne</h1> <?php echo $form['firstname']->render();?><br> <?php echo $form['lastname']->render();?><br> <?php echo $form['email']->render();?><br>

• saveEIPSuccess.php
  ^?View Code PHP

  <?php echo $value ?>

Formulaire

• On construit chacun des widgets avec l’objet et le nom de la route.
• On définit les validators.

  public function configure()
  {
    // Widgets
    $this->widgetSchema['firstname'] = new sfWidgetFormEditInPlace(array(), array(), $this->getObject(), 'save_joueur_eip');
    $this->widgetSchema['lastname'] = new sfWidgetFormEditInPlace(array(), array(), $this->getObject(), 'save_joueur_eip');
    $this->widgetSchema['email'] = new sfWidgetFormEditInPlace(array(), array(), $this->getObject(), 'save_joueur_eip');
 
    // Validators
    $this->validatorSchema['firstname'] = new sfValidatorString();
    $this->validatorSchema['lastname'] = new sfValidatorString();
    $this->validatorSchema['email'] = new sfValidatorEmail();  
  }

View.yml

[...]
default:
  javascripts:    [jquery-1.3.2.min.js, jquery.jeditable.js]
[...]

Pré-requis

• Plugin sfFormExtraPlugin installé : sfFormExtraPlugin

Fichiers externes

• Télécharger jQuery UI
  (jquery-1.3.2.min.js, jquery-ui-1.7.1.custom.min.js)

  Vous pouvez télécharger une version « customizée » de jQuery UI ici :
  Télécharger JQuery UI

• Version française
  (uidatepicker-fr.js)

  Vous trouverez le patch français de ce plugin ici :

  Datepicker jQuery en français

• Intégration dans Symfony
  1. JS
     Copiez les fichiers :
     [jquery UI]/js/jquery-1.3.2.min.js
     [jquery UI]/js/jquery-ui-1.7.1.custom.min.js
     uidatepicker-fr.js
     directement dans [votre_projet]/web/js
  2. CSS
     • Copiez le fichier :
       [jquery UI]/css/jquery-ui-1.7.1.custom.css dans :
       [votre_projet]/web/css.
     • !! Attention !! :
       J’ai dû remplacer toutes les occurrences de :
       url(images/ par :
       url(../images/
  3. Images
     N’oubliez pas de copier le contenu de :
     [jquery UI]/css/smoothness/images dans :
     [votre_projet]/web/images

View.yml

N’oubliez pas de faire référence aux fichiers externes dans le view :

default:
  http_metas:
    content-type: text/html
 
  metas:
    #title:        symfony project
    #description:  symfony project
    #keywords:     symfony, project
    #language:     en
    #robots:       index, follow
 
  stylesheets:    [main.css, jquery-ui-1.7.1.custom.css]
 
  javascripts:    [jquery-1.3.2.min.js, uidatepicker-fr.js, jquery-ui-1.7.1.custom.min.js]
 
  has_layout:     on
  layout:         layout

sfWidgetFormJQueryI18nDate.class.php

J’ai modifié la classe sfWidgetFormJQueryDate pour qu’elle soit compatible avec un format de date français.
De plus, on peut facilement configurer les options du widget jQuery.

• Code source :
  Fichier : sfWidgetFormJQueryI18nDate.class.php
  Chemin : /plugins/sfFormExtraPlugin/lib/widget/
  ^?View Code PHP

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112

  <?php /* * This file is part of the symfony package. * (c) Fabien Potencier <fabien.potencier@symfony-project.com> * * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */   /** * sfWidgetFormJQueryDate represents a date widget rendered by JQuery UI. * * This widget needs JQuery and JQuery UI to work. * * @package symfony * @subpackage widget * @author Fabien Potencier <fabien.potencier@symfony-project.com> * @version SVN: $Id: sfWidgetFormJQueryDate.class.php 12875 2008-11-10 12:22:33Z fabien $ */ class sfWidgetFormJQueryI18nDate extends sfWidgetFormI18nDate { /** * Configures the current widget. * * Available options: * * * image: The image path to represent the widget (false by default) * * config: A JavaScript array that configures the JQuery date widget * * culture: The user culture * * @param array $options An array of options * @param array $attributes An array of default HTML attributes * * @see sfWidgetForm */   protected function configure($options = array(), $attributes = array()) { $this->addOption('image', false); $this->addOption('config', $options["config"]); $this->addOption('culture', $options["culture"]); $this->addOption('years', $options["years"]);   parent::configure($options, $attributes);   if ('en' == $this->getOption('culture')) { $this->setOption('culture', 'en'); } }   /** * @param string $name The element name * @param string $value The date displayed in this widget * @param array $attributes An array of HTML attributes to be merged with the default HTML attributes * @param array $errors An array of errors for the field * * @return string An HTML tag string * * @see sfWidgetForm */ public function render($name, $value = null, $attributes = array(), $errors = array()) { $prefix = $this->generateId($name);   $image = ''; if (false !== $this->getOption('image')) { $image = sprintf(', buttonImage: %s, buttonImageOnly: true', $this->getOption('image')); } return parent::render($name, $value, $attributes, $errors). $this->renderTag('input', array('type' => 'hidden', 'size' => 10, 'id' => $id = $this->generateId($name).'_jquery_control', 'disabled' => 'disabled')). sprintf(<<<EOF <script type="text/javascript">   function %s_read_linked() { \$("#%s").val(\$("#%s").val() + "/" + \$("#%s").val() + "/" + \$("#%s").val());   return {}; }   function %s_update_linked(date) { \$("#%s").val(date.substring(0, 2)); \$("#%s").val(parseInt(date.substring(3, 5), 10)); \$("#%s").val(date.substring(6, 10)); }   \$("#%s").datepicker(\$.extend({}, { minDate: new Date(%s, 1 - 1, 1), maxDate: new Date(%s, 12 - 1, 31), onSelect: %s_update_linked, beforeShow: %s_read_linked, %s showOn: "both" %s }, \$.datepicker.regional["%s"]));   </script> EOF , $prefix, $id, $this->generateId($name.'[day]'), $this->generateId($name.'[month]'), $this->generateId($name.'[year]'), $prefix, $this->generateId($name.'[day]'), $this->generateId($name.'[month]'), $this->generateId($name.'[year]'), $id, min($this->getOption('years')), max($this->getOption('years')), $prefix, $prefix, $this->getOption('config'), $image, $this->getOption('culture') ); } }

• Explication des modifications :
  1. Ligne 20 :
     Notre widget dérive désormais de sfWidgetFormI18nDate
     ^?View Code PHP

     20	class sfWidgetFormJQueryDate extends sfWidgetFormI18nDate

  2. Lignes 40, 41 et 42:
     On ajoute les options « config », « culture » et « years » avec le paramètre « options » de la fonction « configure » :
     ^?View Code PHP

     40 41 42

     $this->addOption('config', $options["config"]); $this->addOption('culture', $options["culture"]); $this->addOption('years', $options["years"]);

  3. Lignes 85 et 86
     • Il faut inverser l’ordre du jour et du mois pour être compatible avec un format français, ce qui revient dans un sprintf, à changer l’ordre des lignes dans le code.
     • Il faut faire un parseInt sur le mois pour transformer « 01″ en « 1″, parseInt est la fonction javascript permettant de caster une chaîne de caractères en Integer :
       Premier paramètre : la chaîne à caster (ici : date.substring(3, 5) )
       Deuxième paramètre : Le système numérique à utiliser (ici décimal : 10)
     ^?View Code PHP

     85 86

     \$("#%s").val(date.substring(0, 2)); \$("#%s").val(parseInt(date.substring(3, 5), 10));

  4. Lignes 95 et 109
     • On passe les options directement dans le premier argument.
       Le %s de la ligne 95 correspond au $this->getOption(‘config’) de la ligne 109
       Le %s de la ligne 98 correspond au $this->getOption(‘culture’) de la ligne 109
     • Ligne 109 : passage des options et da la culture au widget.
     ^?View Code PHP

     108	$prefix, $prefix, $this->getOption('config'), $image, $this->getOption('culture')

Exemple d’utilisation

• Schéma
  ^?View Code YML

  person: columns: [...] birthday: type: timestamp [...]

• Formulaire (Instanciation du widget)
  ^?View Code PHP

  [...] public function configure() { for($i = 1900; $i<2010; $i++) { $years[$i] = $i; } $this->widgetSchema['birthday'] = new sfWidgetFormJQueryI18nDate( array('config' => 'yearRange: \'1900:2009\', changeYear: true, changeMonth: true,', 'culture' => 'fr', 'years'=> array_combine($years, $years)) ); } [...]

• Aperçu
  

Sources

• Symfony Internationalisation and Localisation
• Symfony Widgets
• jQuery UI
• Remy Solnais jquery et datepicker en Français
• W3schools parseInt en Javascript
• PHP.net fonction sprintf
• ImageShack

Classe formulaire

Définition des widgets et des validators.

Action

Déclaration du formulaire.
ex :

$this->form = new ContactForm();

Template

Affichage.
ex :

<form action="&lt;?php echo url_for('contact/index') ?&gt;" method="post">
 
<input type="submit" />
</form>

Pré-requis :

• Le lien qui m’a permis de faire ce post :
  http://trac.symfony-project.org/wiki/HowToUseFCKeditor
• Un module admin doctrine nommé ici « contenu », avec un champ nommé « html » de type CLOB
• Le plugin sfFormExtraPlugin installé (http://www.symfony-project.org/plugins/sfFormExtraPlugin)

Intégrer FCK

• Télécharger les fichiers
  http://www.fckeditor.net/download
• Copier les dans web/js/fckeditor
• Modifier
  

  /apps/backend/config/settings.yml

  ^?View Code YAML

  ... .settings: rich_text_fck_js_dir: js/fckeditor ...

Créer un nouveau widget pour sfFormExtraPlugin

Créer ce fichier :

/plugin/sfFormExtraPlugin/lib/widget/sfWidgetFormTextareaFCK.class.php

<?php
/**
    * FCK Form widget
    *
    * @package    ***
    * @subpackage lib
    * @author     $LastChangedBy: PoWl $
    * @version    SVN: $Id: sfWidgetFormTextareaFCK.class.php 81 2008-12-08 00:39:59Z PoWl $
    */
 
class sfWidgetFormTextareaFCK extends sfWidgetFormTextarea
{
    /**
        * @param array $options     An array of options
        * @param array $attributes  An array of default HTML attributes
        *
        * @see sfWidgetForm
        */
    protected function configure ($options = array(), $attributes = array())
    {
        $this->addOption ('editor', 'fck');
        $this->addOption ('css', false);
 
        parent::configure ($options, $attributes);
    }
 
    /**
        * @param  string $name        The element name
        * @param  string $value       The value displayed in this widget
        * @param  array  $attributes  An array of HTML attributes to be merged with the default HTML attributes
        * @param  array  $errors      An array of errors for the field
        *
        * @return string An HTML tag string
        *
        * @see sfWidgetForm
        */
    public function render ($name, $value = null, $attributes = array(), $errors = array())
    {
        $editorClass = 'sfRichTextEditorFCK';
        if (!class_exists ($editorClass)) {
            throw new sfConfigurationException (sprintf ('The rich text editor "%s" does not exist.', $editorClass));
        }
 
        $editor = new $editorClass ();
        if (!in_array ('sfRichTextEditor', class_parents ($editor))) {
            throw new sfConfigurationException (sprintf ('The editor "%s" must extend sfRichTextEditor.', $editor));
        }
 
        $attributes = array_merge ($this->attributes, $this->getOptions ());
        $editor->initialize ($name, $value, $attributes);
        return $editor->toHTML ();
    }
}
?>

J’ai fait trois modifications dans le fichier proposé par le site dont je donne le lien plus haut :

1. Ligne 1 : Attention au cas ou le short tag n’est pas activé
2. Standardisation du nom de la classe (sfWidgetFormTextareaFCK)
3. Ligne 49 : Il faut modifier cette ligne pour pouvoir passer des attributs HTML par defaut au widget:
   ^?View Code PHP

   $attributes = array_merge ($this->attributes, $this->getOptions ());

Utilisation

Modifier le formulaire de Contenu :

/lib/form/doctrine/ContenuForm.class.php

$this->widgetSchema['html'] = new sfWidgetFormTextareaFCK(
  array(),
  array('height'=>'700','width'=>'800'
));
     ...

Configurer l’upload de fichiers

Remplacer le fichier situé dans :

/web/js/fckeditor/editor/filemanager/connectors/php/config.php

Par celui-là :

http://trac.symfony-project.org/attachment/wiki/HowToUseFCKeditor/config.new

Il y a 2 lignes importantes :
1. UserFilesPath
   ^?View Code PHP

   $Config['UserFilesPath'] = DIRECTORY_SEPARATOR . 'userfiles' . DIRECTORY_SEPARATOR ;

   que l’on transforme comme ceci :

   ^?View Code PHP

   $Config['UserFilesPath'] = /uploads/fck/ ;

2. UserFilesAbsolutePath
   ^?View Code PHP

   $Config['UserFilesAbsolutePath'] = $_SERVER[DOCUMENT_ROOT] . $Config['UserFilesPath'] ;

   Qu’il vous faut éventuellement modifier si la racine de votre projet n’est pas la même que celle de votre serveur:

   ^?View Code PHP

   $Config['UserFilesAbsolutePath'] = $_SERVER[DOCUMENT_ROOT] . /myProject/ . $Config['UserFilesPath'] ;

• http://trac.symfony-project.org/wiki/HowToUseFCKeditor
• http://www.symfony-project.org/plugins/sfFormExtraPlugin
• http://www.fckeditor.net/download

http://forum.symfony-project.org/index.php/m/66906/?srch=tinymce+3+steps#msg_66906

En français et expliqué plus en détails, ça donne :

Intégrer Tiny MCE

• Télécharger et copier :
  http://tinymce.moxiecode.com/download.php
  dans :

  /web/js/tinyMCE

• Modifier ce fichier :

  /apps/backend/config/settings.yml

  ^?View Code YML

  all: .settings: sf_rich_text_js_dir: js/tinyMCE

Installer le plugin sfFormExtraPlugin:

symfony plugin:install sfFormExtraPlugin

Modifier le widget sfWidgetFormTextareaTinyMCE.class.php

Il faut modifier le plugin !

/plugins/sfFormExtraPlugin/lib/widget/sfWidgetFormTextareaTinyMCE.class.php

Fichier :

<?php
class sfWidgetFormTextareaTinyMCE extends sfWidgetFormTextarea
{
  protected function configure($options = array(), $attributes = array())
  {
    $this->addOption('theme', 'advanced');
    $this->addOption('width');
    $this->addOption('height');
    $this->addOption('config', '');
  }
  public function render($name, $value = null, $attributes = array(), $errors = array())
  {
    $attributes = array_merge($this->attributes, $attributes); 
    ...

Utilisation

Modifier ce fichier :

/lib/form/doctrine/ContenuForm.class.php

<?php
class ContenuForm extends BaseContenuForm
{
  public function configure()
  {
      $this->widgetSchema['texte'] =  new sfWidgetFormTextareaTinyMCE(
      array(
        'width'=>550,
        'height'=>350,
        'config'=>'theme_advanced_disable: "anchor,image,cleanup,help"',
        'theme'   =>  sfConfig::get('app_tinymce_theme','advanced'),
      ),
      array(
        'class'   =>  'tiny_mce'
      )
    );
    $js_path = sfConfig::get('sf_rich_text_js_dir') ? '/'.sfConfig::get('sf_rich_text_js_dir').'/tiny_mce.js' : '/sf/tinymce/js/tiny_mce.js';
    sfContext::getInstance()->getResponse()->addJavascript($js_path);
  }
}

Une autre méthode beaucoup plus puissante existe : la gestion intervallaire. Vous pouvez trouver une explication détaillée de cette méthode ici :
http://sqlpro.developpez.com/cours/arborescence/.

Nous allons voir dans cet article comment implémenter celle-ci dans un projet symfony 1.2 avec doctrine.

Pré-requis

• Un backend symfony 1.2, doctrine
• Comment créer un projet symfony 1.2 Doctrine :
  http://www.symfony-project.org/jobeet/1_2/Doctrine/en/03
• Comment créer une application backend :
  http://www.symfony-project.org/jobeet/1_2/Doctrine/en/12
• Tout ce post est basé sur le travail des gens de ce lien (en anglais) :
  http://redotheoffice.com/

Schéma

/config/doctrine/schema.yml

Tree:
  actAs:
    NestedSet:
      hasManyRoots: true
      rootColumnName: root_id
  columns:
    name:
      type: string(255)

Module

Créez le module :

 symfony doctrine:generate-admin backend Tree --module=tree

Formulaire

Modifiez la classe de formulaire :

/lib/form/doctrine/TreeForm.class.php

widgetSchema['parent_id'] = new sfWidgetFormDoctrineChoice(array(
      'model' => 'tree',
      'add_empty' => '~ (object is at root level)',
      'order_by' => array('root_id, lft',''),
      'method' => 'getIndentedName'
      ));
    $this->validatorSchema['parent_id'] = new sfValidatorDoctrineChoice(array(
      'required' => false,
      'model' => 'tree'
      ));
    $this->setDefault('parent_id', $this->object->getParentId());
    $this->widgetSchema->setLabel('parent_id', 'Child of');
 
  }
 
  public function updateParentIdColumn($parentId)
  {
    $this->parentId = $parentId;
    // further action is handled in the save() method
  }
 
  protected function doSave($con = null)
  {
    parent::doSave($con);
 
    $node = $this->object->getNode();
 
    if ($this->parentId != $this->object->getParentId() || !$node->isValidNode())
    {
      if (empty($this->parentId))
      {
        //save as a root
        if ($node->isValidNode())
        {
          $node->makeRoot($this->object['id']);
          $this->object->save($con);
        }
        else
        {
          $this->object->getTable()->getTree()->createRoot($this->object); //calls $this->object->save internally
        }
      }
      else
      {
        //form validation ensures an existing ID for $this->parentId
        $parent = $this->object->getTable()->find($this->parentId);
        $method = ($node->isValidNode() ? 'move' : 'insert') . 'AsFirstChildOf';
        $node->$method($parent); //calls $this->object->save internally
      }
    }
  }
}

Modèle

Modifiez la classe du modèle :

/lib/model/doctrine/Tree.class.php

getIndentedName());
  }
  public function getParentId()
  {
    if (!$this->getNode()->isValidNode() || $this->getNode()->isRoot())
    {
      return null;
    }
    $parent = $this->getNode()->getParent();
    return $parent['id'];
  }
  public function getIndentedName()
  {
    return str_repeat('- ',$this['level']).$this['name'];
  }
}

Actions

Modifier la classe action du module :

/apps/backend/modules/tree/actions

addOrderBy('root_id, lft');
  }
 
  public function executeBatch(sfWebRequest $request)
  {
    if ("batchOrder" == $request->getParameter('batch_action'))
    {
      return $this->executeBatchOrder($request);
    }
 
    parent::executeBatch($request);
  }
 
  public function executeBatchOrder(sfWebRequest $request)
  {
    $newparent = $request->getParameter('newparent');
 
    //manually validate newparent parameter
 
    //make list of all ids
    $ids = array();
    foreach ($newparent as $key => $val)
    {
      $ids[$key] = true;
      if (!empty($val))
        $ids[$val] = true;
    }
    $ids = array_keys($ids);
 
    //validate if all id's exist
    $validator = new sfValidatorDoctrineChoiceMany(array('model' => 'Tree'));
    try
    {
      // validate ids
      $ids = $validator->clean($ids);
 
      // the id's validate, now update the tree
      $count = 0;
      $flash = "";
 
      foreach ($newparent as $id => $parentId)
      {
        if (!empty($parentId))
        {
          $node = Doctrine::getTable('Tree')->find($id);
          $parent = Doctrine::getTable('Tree')->find($parentId);
 
          if (!$parent->getNode()->isDescendantOfOrEqualTo($node))
          {
            $node->getNode()->moveAsFirstChildOf($parent);
            $node->save();
 
            $count++;
 
            $flash .= "
Moved '".$node['name']."' under '".$parent['name']."'.";
          }
        }
      }
 
      if ($count > 0)
      {
        $this->getUser()->setFlash('notice', sprintf("Tree order updated, moved %s item%s:".$flash, $count, ($count > 1 ? 's' : '')));
      }
      else
      {
        $this->getUser()->setFlash('error', "You must at least move one item to update the tree order");
      }
    }
    catch (sfValidatorError $e)
    {
      $this->getUser()->setFlash('error', 'Cannot update the tree order, maybe some item are deleted, try again');
    }
 
    $this->redirect('@tree');
  }
 
  public function executeDelete(sfWebRequest $request)
  {
    $request->checkCSRFProtection();
 
    $this->dispatcher->notify(new sfEvent($this, 'admin.delete_object', array('object' => $this->getRoute()->getObject())));
 
    $object = $this->getRoute()->getObject();
    if ($object->getNode()->isValidNode())
    {
      $object->getNode()->delete();
    }
    else
    {
      $object->delete();
    }
 
    $this->getUser()->setFlash('notice', 'The item was deleted successfully.');
 
    $this->redirect('@tree');
  }
 
  public function executeListNew(sfWebRequest $request)
  {
    $this->executeNew($request);
    $this->form->setDefault('parent_id', $request->getParameter('id'));
    $this->setTemplate('edit');
  }
 
  protected function processForm(sfWebRequest $request, sfForm $form)
  {
    $form->bind($request->getParameter($form->getName()), $request->getFiles($form->getName()));
    if ($form->isValid())
    {
      $this->getUser()->setFlash('notice', $form->getObject()->isNew() ? 'The item was created successfully.' : 'The item was updated successfully.');
 
      $tree = $form->save();
 
      $this->dispatcher->notify(new sfEvent($this, 'admin.save_object', array('object' => $tree)));
 
      if ($request->hasParameter('_save_and_add'))
      {
        $this->getUser()->setFlash('notice', $this->getUser()->getFlash('notice').' You can add another one below.');
 
        //$this->redirect('@tree_new');
      }
      else
      {
        //$this->redirect('@tree_edit?id='.$tree['id']);
      }
    }
    else
    {
      $this->getUser()->setFlash('error', 'The item has not been saved due to some errors.');
    }
  }
}

Generator

Modifiez le fichier :

/apps/backend/modules/tree/config/generator.yml

generator:
  class: sfDoctrineGenerator
  param:
    model_class:           Tree
    theme:                 admin
    non_verbose_templates: true
    with_show:             false
    singular:              ~
    plural:                ~
    route_prefix:          tree_tree
    with_doctrine_route:     1
 
    config:
      actions: ~
      fields:  ~
      list:
        title:   Gestions des catégories
        max_per_page: 999999
        batch_actions:
          order:
            label: Update tree order
          _delete: ~
        object_actions:
          new:
            label: Add Child
          _edit:    ~
          _delete:  ~
        actions:
          _new:
            label: Add Root
      filter:  ~
      form:    ~
      edit:
        title: Editing Categorie "%%name%%"
      new:     ~

Templates

Créez les fichiers suivant :
• _list.php
  

  /apps/backend/modules/tree/templates_list.php

  ^?View Code PHP

  <div class="sf_admin_list"> getNbResults()): ?> <table id="main_list" border="0" cellspacing="0"> <thead> <tr> <th id="sf_admin_list_batch_actions"> <input id="sf_admin_list_batch_checkbox" onclick="checkAll();" type="checkbox" /></th> $sort)) ?> <th id="sf_admin_list_th_actions"></th> </tr> </thead> <tfoot> <tr> <th colspan="8"> haveToPaginate()): ?> $pager)) ?>   $pager->getNbResults()), $pager->getNbResults(), 'sf_admin') ?> haveToPaginate()): ?> $pager->getPage(), '%%nb_pages%%' => $pager->getLastPage()), 'sf_admin') ?></th> </tr> </tfoot> <tbody> getResults() as $i => $tree): $odd = fmod(++$i, 2) ? 'odd' : 'even' ?> <tr id="node-<?php echo $tree['id'] ?>" class="sf_admin_row <?php echo $odd ?><?php // insert hierarchical info $node = $tree->getNode(); if ($node->isValidNode() && $node->hasParent()) { echo">getParent()->getId(); } ?>"> $tree, 'helper' => $helper)) ?> $tree)) ?> $tree, 'helper' => $helper)) ?></tr> </tbody></table> </div> <script type="text/javascript"><!--mce:0--></script>

• _list_footer.php
  

  /apps/backend/modules/tree/templates_list_footer.php

  ^?View Code PHP

  <em>After changing the order of the tree, the new order should be saved. This is currently implemented as a batch action, so please choose <strong>Update tree order</strong> from the 'Choose an action' dropdown and click on 'Go' to save the new order.</em>

• _list_td_batch_actions.php
  

  /apps/backend/modules/tree/templates_list_td_batch_actions.php

  ^?View Code PHP

  <input class="sf_admin_batch_checkbox" name="ids[]" type="checkbox" value="<?php echo $tree->getPrimaryKey() ?>" /> <input id="select_node-<?php echo $tree->getPrimaryKey() ?>" name="newparent[<?php echo $tree->getPrimaryKey() ?>]" type="hidden" />

• _list_td_tabular.php
  

  /apps/backend/modules/tree/templates/_list_td_tabular.php

  ^?View Code PHP

  <span class="<?php echo $tree->getNode()->isLeaf() ? 'file' : 'folder' ?>">   </span>

CSS/JS

• CSSCréez ce fichier :
  

  /web/css/jQuery.treeTable.css

  ^?View Code CSS

  /* jQuery TreeTable Core 2.0 stylesheet * * This file contains styles that are used to display the tree table. Each tree * table is assigned the +treeTable+ class. * ========================================================================= */   /* jquery.treeTable.collapsible * ------------------------------------------------------------------------- */ .treeTable tr td .expander { background-position: left center; background-repeat: no-repeat; cursor: pointer; padding: 0; zoom: 1; /* IE7 Hack */ }   .treeTable tr.collapsed td .expander { background-image: url(../images/toggle-expand-dark.png); }   .treeTable tr.expanded td .expander { background-image: url(../images/toggle-collapse-dark.png); }   /* jquery.treeTable.sortable * ------------------------------------------------------------------------- */ .treeTable tr.selected, .treeTable tr.accept { background-color: #ccccff !important; color: #fff !important; }   .treeTable tr.collapsed.selected td .expander, .treeTable tr.collapsed.accept td .expander { background-image: url(../images/toggle-expand-light.png); }   .treeTable tr.expanded.selected td .expander, .treeTable tr.expanded.accept td .expander { background-image: url(../images/toggle-collapse-light.png); }   .treeTable .ui-draggable-dragging { color: #000; z-index: 1; }

  Créez ce fichier :

  /web/css/main.css

  ^?View Code CSS

  table span { background-position: center left; background-repeat: no-repeat; padding: .2em 0 .2em 1.5em; }   table span.file { background-image: url(../images/page_white_text.png); }   table span.folder { background-image: url(../images/folder.png); }

• JavascriptCréez ce fichier :
  

  /web/js/jQuery.treeTable.js

  ^?View Code JAVASCRIPT

  /* jQuery treeTable Plugin 2.2 - http://ludo.cubicphuse.nl/jquery-plugins/treeTable/ */ (function($) { // Helps to make options available to all functions // TODO: This gives problems when there are both expandable and non-expandable // trees on a page. The options shouldn't be global to all these instances! var options;   $.fn.treeTable = function(opts) { options = $.extend({}, $.fn.treeTable.defaults, opts);   return this.each(function() { $(this).addClass("treeTable").find("tbody tr").each(function() { // Initialize root nodes only whenever possible if(!options.expandable || $(this)[0].className.search("child-of-") == -1) { initialize($(this)); } }); }); };   $.fn.treeTable.defaults = { childPrefix: "child-of-", expandable: true, indent: 19, initialState: "collapsed", treeColumn: 0 };   // Recursively hide all node's children in a tree $.fn.collapse = function() { $(this).addClass("collapsed");   childrenOf($(this)).each(function() { initialize($(this));   if(!$(this).hasClass("collapsed")) { $(this).collapse(); }   $(this).hide(); });   return this; };   // Recursively show all node's children in a tree $.fn.expand = function() { $(this).removeClass("collapsed").addClass("expanded");   childrenOf($(this)).each(function() { initialize($(this));   if($(this).is(".expanded.parent")) { $(this).expand(); }   $(this).show(); });   return this; };   // Add an entire branch to +destination+ $.fn.appendBranchTo = function(destination) { var node = $(this); var parent = parentOf(node);   var ancestorNames = $.map(ancestorsOf($(destination)), function(a) { return a.id; });   // Conditions: // 1: +node+ should not be inserted in a location in a branch if this would // result in +node+ being an ancestor of itself. // 2: +node+ should not have a parent OR the destination should not be the // same as +node+'s current parent (this last condition prevents +node+ // from being moved to the same location where it already is). // 3: +node+ should not be inserted as a child of +node+ itself. if($.inArray(node[0].id, ancestorNames) == -1 && (!parent || (destination.id != parent[0].id)) && destination.id != node[0].id) { indent(node, ancestorsOf(node).length * options.indent * -1); // Remove indentation   if(parent) { node.removeClass(options.childPrefix + parent[0].id); }   node.addClass(options.childPrefix + destination.id); move(node, destination); // Recursively move nodes to new location indent(node, ancestorsOf(node).length * options.indent); }   return this; };   // Add reverse() function from JS Arrays $.fn.reverse = function() { return this.pushStack(this.get().reverse(), arguments); };   // Toggle an entire branch $.fn.toggleBranch = function() { if($(this).hasClass("collapsed")) { $(this).expand(); } else { $(this).removeClass("expanded").collapse(); }   return this; };   // === Private functions   function ancestorsOf(node) { var ancestors = []; while(node = parentOf(node)) { ancestors[ancestors.length] = node[0]; } return ancestors; };   function childrenOf(node) { return $("table.treeTable tbody tr." + options.childPrefix + node[0].id); };   function indent(node, value) { var cell = $(node.children("td")[options.treeColumn]); var padding = parseInt(cell.css("padding-left"), 10) + value;   cell.css("padding-left", + padding + "px");   childrenOf(node).each(function() { indent($(this), value); }); };   function initialize(node) { if(!node.hasClass("initialized")) { node.addClass("initialized");   var childNodes = childrenOf(node);   if(!node.hasClass("parent") && childNodes.length > 0) { node.addClass("parent"); }   if(node.hasClass("parent")) { var cell = $(node.children("td")[options.treeColumn]); var padding = parseInt(cell.css("padding-left"), 10) + options.indent;   childNodes.each(function() { $($(this).children("td")[options.treeColumn]).css("padding-left", padding + "px"); });   if(options.expandable) { cell.prepend(''); $(cell[0].firstChild).click(function() { node.toggleBranch(); });   // Check for a class set explicitly by the user, otherwise set the default class if(!(node.hasClass("expanded") || node.hasClass("collapsed"))) { node.addClass(options.initialState); }   if(node.hasClass("collapsed")) { node.collapse(); } else if (node.hasClass("expanded")) { node.expand(); } } } } };   function move(node, destination) { node.insertAfter(destination); childrenOf(node).reverse().each(function() { move($(this), node[0]); }); };   function parentOf(node) { var classNames = node[0].className.split(' ');   for(key in classNames) { if(classNames[key].match("child-of-")) { return $("#" + classNames[key].substring(9)); } } }; })(jQuery);

view.yml

Modifiez ce fichier :

/apps/backend/config/view.yml

default:
  http_metas:
    content-type: text/html
 
  metas:
    #title:        symfony project
    #description:  symfony project
    #keywords:     symfony, project
    #language:     en
    #robots:       index, follow
 
  stylesheets:    [main.css, jQuery.treeTable.css]
 
  javascripts:
    - http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
    - http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js
    - jquery.treeTable.js
 
  has_layout:     on
  layout:         layout

Routing

Il faut rajouter la règle de routage « tree » !!

/apps/backend/config/routing.yml

tree_tree:
  class: sfDoctrineRouteCollection
  options:
    model:               Tree
    module:              tree
    prefix_path:         tree
    column:              id
    with_wildcard_routes: true
tree:
  class: sfDoctrineRouteCollection
  options:
    model:               Tree
    module:              tree
    prefix_path:         tree
    column:              id
    with_wildcard_routes: true
# default rules
homepage:
  url:   /
  param: { module: default, action: index }
 
default_index:
  url:   /:module
  param: { action: index }
 
default:
  url:   /:module/:action/*

Clear Cache

On vide le cache :

symfony cc

Fixtures

Ajouter ce fichier :

/data/fixtures/data.yml

Tree:
  Tree_1:
    name: Couleurs
    root_id: '1'
    lft: '1'
    rgt: '8'
    level: '0'
  Tree_2:
    name: Bleu
    root_id: '1'
    lft: '6'
    rgt: '7'
    level: '1'
  Tree_3:
    name: Rouge
    root_id: '1'
    lft: '2'
    rgt: '3'
    level: '1'
  Tree_4:
    name: Vert
    root_id: '1'
    lft: '4'
    rgt: '5'
    level: '1'
  Tree_5:
    name: Langages
    root_id: '5'
    lft: '1'
    rgt: '14'
    level: '0'
  Tree_6:
    name: Serveur
    root_id: '5'
    lft: '8'
    rgt: '13'
    level: '1'
  Tree_7:
    name: Client
    root_id: '5'
    lft: '2'
    rgt: '7'
    level: '1'
  Tree_8:
    name: Javascript
    root_id: '5'
    lft: '5'
    rgt: '6'
    level: '2'
  Tree_9:
    name: ActionScript
    root_id: '5'
    lft: '3'
    rgt: '4'
    level: '2'
  Tree_10:
    name: PHP
    root_id: '5'
    lft: '11'
    rgt: '12'
    level: '2'
  Tree_11:
    name: ASP
    root_id: '5'
    lft: '9'
    rgt: '10'
    level: '2'

build-all-reload

symfony doctrine:build-all-reload

Les images :

A copier dans web/images

	page_white_text.png
	folder.png
	toggle_collapse_dark.png
	toggle_collapse_light.png
	toggle_expand_dark.png
	toggle_expand_light.png

Aperçu

Vous devriez avoir ça !

Sources :

• http://sqlpro.developpez.com/cours/arborescence/
• http://www.symfony-project.org/jobeet/
• http://redotheoffice.com/