Frameworks PHP et Javascript

Installer facilement FLOW3 beta 1

Publié le Mis à jour le

FLOW3 est le framework qui fera fonctionner TYPO3 5.0. Cependant, FLOW3 ne se réduit pas à la création d’un SGC (ou CMS si vous préférez). FLOW3 à pour ambition de concurrencer des frameworks réputés comme Symfony ou CodeIgniter dans le développement d’applications PHP.

Si cet article vous intéresse toujours, je vous conseille d’aller jeter un oeil à ces vidéos : http://vimeo.com/channels/207300

Certaines sont assez longues mais si vous vous intéressez vraiment à FLOW3, vous ne serez pas déçu de la présentation même si il est vrai que tout n’est pas parfait à l’heure actuelle et que beaucoup de travail reste à faire. Cependant, une version un peu plus stable est prévue pour cet été.

Bref, j’ai décidé de présenter l’installation de FLOW3 sur GNU/Linux. Ce tutoriel est inspiré de la présentation de FLOW3 par Robert Lemke et Karsten Dambekalns au T3CON11 qui s’est tenu à San Francisco du 9 au 11 juin 2011. C’est important de le souligner.

1. Récupérez FLOW3 avec git

Si vous ne connaissez pas git, un logiciel de gestion de versions comme SVN, ce n’est pas grave. Toutes les commandes nécessaires sont spécifiées dans ce tutoriel.

Récupérez sur votre serveur Apache la dernière version de FLOW3 grâce à la commande suivante :

$ git clone –recursive git://git.typo3.org/FLOW3/Distributions/Base.git

Une fois cette étape terminée, lancez éventuellement un script de vérification des permissions de vos fichiers :

$ sudo sh Base/Packages/Framework/FLOW3/Scripts/setfilepermissions.sh web web web

Ici, l’utilisateur « web », appartenant au groupe « web » est le seul à pouvoir mettre à jour les fichiers. Cette commande vérifiera donc les permissions de vos fichiers et effectuera les changements nécessaires.

Voilà ce que ça donne en pratique :

FLOW3 File Permission Script

Checking permissions from here upwards …
 (if a password prompt appears it’s from sudo)

Making sure Data and Web/_Resources exist …

Setting file permissions, this might take a minute …

2. Configuration de l’accès à la base de données

Il faut ensuite configurer la base de données. Il n’y a à ce jour pas d’assistant de configuration. Il faut donc configurer cet accès à la main.

Un fichier Settings.yaml.example est situé dans le répertoire Base/Configuration.
Il faut le copier et le nommer en Settings.yaml. Voici le contenu de ce fichier. Il est assez explicite :

FLOW3:
  persistence:
    backendOptions:
      driver: ‘pdo_mysql’
      dbname: ‘phoenix’   # adjust to your database name
      user: ‘root’        # adjust to your database user
      password:  »        # adjust to your database password
      host: ‘127.0.0.1’   # adjust to your database host
      path: ‘127.0.0.1’   # adjust to your database host
      port: 3306
#    doctrine:
       # If you have APC, you should consider using it for Production,
       # also MemcacheCache and XcacheCache exist.
#      cacheImplementation: ‘Doctrine\Common\Cache\ApcCache’
       # when using MySQL and UTF-8, this should help with connection encoding issues
#      dbal:
#        sessionInitialization: ‘SET NAMES utf8 COLLATE utf8_unicode_ci’

# On Windows, you might need to uncomment the following line and specify
# the location of the PHP binary manually.
#  core:
#    phpBinaryPathAndFilename: ‘C:/path/to/php.exe’

3. Configuration du Virtual Host

Le Virtual Host de FLOW3 doit être accessible depuis le navigateur et être déclaré dans Apache. Pour ma part, j’ai recopié une configuration d’un TYPO4 4.5.x. Attention car Le le Document Root doit être Web et non Base.

De plus, une variable SetEnv doit être spécifiée. L’environnement de développement est moins intensif niveau cache et les changements apparaissent plus vite. L’environnement de production est davantage optimisé pour l’affichage des pages.

Voici les deux entrées au choix dans le Virtual Host :

SetEnv FLOW3_CONTEXT Development
SetEnv FLOW3_CONTEXT Production

Je vous recommande le contexte de développement.

4. Vérification de l’installation

Si l’installation est correcte, vous devriez avoir ceci (cliquez sur l’image pour agrandir) :

Vérification de l'installation de FLOW3

Il s’agit d’une page basique qui résume quelques étapes à accomplir et qui affiche quelques liens vers la documentation de FLOW3. Attention car une partie de la documentation (en local) doit être générée au préalable pour être affichée.

5. Mises à jour depuis git

Il existe deux lignes de commande à connaître. La première est affectuer une seule fois, par exemple juste après avoir récupérer le framework, la seconde ligne, elle, doit être effectuée régulièrement pour récupérer les dernières mises à jour de FLOW3.

$ git submodule foreach « git checkout master »

$ git submodule foreach « git pull –rebase »

Ces commandes sont à effectuer dans le dossier « Base ».

6. Structure de FLOW3

Voici rapidement une présentation des dossiers de FLOW3 :

« Build » : contient des scripts, ressources pour générer de la doc, test unit
« Cache » pour mettre en cache les données (visible dans le contexte de production)
« Configuration » contient les fichiers de configuration du framework
« Data » : temporaires et persistentes données du système, logs.
Packages : peut contenir une application, d’autres frameworks, de la documentation, des librairies que vous souhaitez intégrer… Le contenu de ce dossier doit suivre une convention stricte de nommage et il faut obligatoirement un fichier Package.php
« Web » : partie visible du site (comme les ressources publiques -> Resources/Public)

7. Générer un package (ou paquet)

Voir la commande ci dessous où nous allons générer un paquet appelé « Demo » :

./flow3_dev flow3:package:create –package-key Demo

Notez que cette commande sera simplifiée prochainement. En effet, il ne sera plus obligatoire de préciser –package-key.

A l’avenir :
./flow3_dev flow3:package:create Demo

Voici ce qu’affiche le shell :

New package « Demo » created at « /home/www/sites/flow3_dev/Base/Packages/Application/Demo/ ».

Cet outil est très basique et vous verrez qu’il faudra rajouter quelques fichiers pour avoir un rendu dans le navigateur.

$ ls -l

drwxrws— 4 web web 4096 2011-06-20 22:04 Build
drwxrws— 4 web web 4096 2011-06-21 14:49 Configuration
drwxrws— 5 web web 4096 2011-06-21 09:32 Data
lrwxrwxrwx 1 web web   38 2011-06-20 22:04 flow3 -> Packages/Framework/FLOW3/Scripts/flow3
lrwxrwxrwx 1 web web   42 2011-06-20 22:04 flow3_dev -> Packages/Framework/FLOW3/Scripts/flow3_dev
drwxrws— 4 web web 4096 2011-06-21 10:32 Packages
-rw-rw—- 1 web web  725 2011-06-20 22:04 Readme.txt
drwxrws— 3 web web 4096 2011-06-21 07:47 Web

Nous allons créer un contrôleur standard pour afficher un petit test dans le navigateur.

$ cd Packages/Application/Demo/Classes
$ mkdir Controller
$ touch Controller/StandardController.php

Notre contrôleur s’appelle « Standard ». Renseigner ensuite le code suivant dans le contrôleur :

<?php

namespace F3\Demo\Controller;

class StandardController extends \F3\FLOW3\MVC\Controller\ActionController {

    /**
     * Index controller
     *
     * Just a sample controller to test FLOW3
     *
     * @param string $name
     * @return string
     */
    public function indexAction($name) {
        $welcome = « Hello $name »;
        $this->view->assign(‘welcome’, $welcome);

        $this->flashMessageContainer->add(‘Please, enter a name!’);

        // Pour un rendu sans Fluid
        //return « Hello $name »;
    }
}

?>

On spécifie premièrement l’espace de nom pour le contrôleur. Ensuite, on spécifie une action « index » avec en annotation, le paramètre attendu et son type (chaine, date, email, etc). FLOW3 transforme automatiquement les paramètres passés dans une URL en variable mais il est possible de spécifier depuis les annotations les types de variables attendus pour plus de sécurité.

Dans le fichier Packages/Application/Demo/Meta/Package.xml, vous pouvez spécifier des informations relatives au package, un peu à la manière du fichier ext_emconf.php dans TYPO3.

Ensuite, il faut indiquer à FLOW3 qu’un nouveau package est disponible. Ca se fait depuis le fichier Base/Configuration/PackageStates.php
Il suffit d’ajouter une nouvelle entrée dans le tableau existant :

‘Demo’ =>
array (
‘state’ => ‘active’,
)

Enfin, pour ceux que ça intéresse, nous allons utiliser Fluid pour le rendu.

8. Rendu avec Fluid

Fluid est le moteur de templating utilisé conjointement avec FLOW3 et Extbase.

On distingue tout d’abord le master layout, c’est à dire la charte graphique du site, l’entourage pour faire simple. Ensuite, il y a les templates pour chaque contrôleur.

Nous allons ainsi créer un dossier Private dans le dossier « Resources » de notre paquet (ou package).
Packages/Application/Demo/Resources/Private/Layouts/Master.html

Notez bien le nom de ce fichier, sans le html car nous allons le spécifier dans le template du contrôleur.

Ensuite, créez un dossier « Templates » si il n’existe pas encore dans Packages/Application/Demo/Resources/Private/. Vous avez certainement dû ajouter un dossier « Layout » de toute manière. Créez ensuite un dossier pour chaque contrôleur, soit ici Standard, en veillant à bien respecter la casse.
Créez ensuite un fichier index.html dans ce dossier. Il s’agit en effet de l’action appelée pour ce contrôleur.

Si on résume, vous devez avoir ceci :

Packages/Application/Demo/Resources/Private/
Packages/Application/Demo/Resources/Private/Layouts
Packages/Application/Demo/Resources/Private/Layouts/Master.html
Packages/Application/Demo/Resources/Private/Templates
Packages/Application/Demo/Resources/Private/Templates/Standard/
Packages/Application/Demo/Resources/Private/Templates/Standard/index.html

Dans le fichier Master.html, indiquez le code HTML suivant :

<!DOCTYPE HTML>
<html>
<head>
<title>FLOW3 – Demo</title>

<f:base/>

</head>
<body>

<section>
<f:render section= »content »/>
</section>

</body>
</html>

On appelle la section intitulée « content » au milieu de la page. Il s’agit d’un gabarit très basique 🙂

Ensuite, dans le fichier index.html, indiquez le code suivant :

<f:layout name= »Master » />

<f:section name= »content »>
<!– all content inside the section « content » will be displayed now –>
{welcome}
</f:section>

Comme vous l’avez peut-être deviné, on appelle le Master template pour ce contrôleur. Ensuite, on identifie la section « content » pour copier le code généré de cette section dans le Master template.

Appelez ensuite la page depuis votre navigateur :

http://localhost/demo/standard/index?name=Christian

Test FLOW3 / Fluid

9. Petites remarques

Il n’est pas nécessaire de modifier les fichiers Configuration/Routes.yaml et Packages/Application/Demo/Configuration/Routes.yaml pour ce test. En effet, FLOW3 détecte correctement l’appel du contrôleur, ainsi que les requêtes effectuées.

Enfin, concernant la documentation de FLOW3, elle n’est plus à jour malheureusement. Les développeurs ont été très actifs dernièrement et ils n’ont pas pu mettre à jour la documentation. On nous promet cependant une mise à jour prochainement, ainsi que des exemples pour se faire la main avec le frmaework.

Publicités

L’api de FLOW3 également sur api.typo3.org

Publié le

L’api de FLOW3 rejoint désormais celles de TYPO3, Fluid et Extbase sur api.typo3.org

De l’Ajax dans une extension TYPO3

Publié le Mis à jour le

L’Ajax est très utilisé de nos jours… enfin, cette utilisation est plus ou moins réussie en fonction des projets. Trop d’Ajax tue parfois l’Ajax. Bref, avec TYPO3, il existe plusieurs solutions. Je vais néanmoins vous en présenter une : il s’agit de xajax. L’avantage de la bibliothèque xajax par rapport à ses concurrentes (prototype ou JSQuery par exemple), c’est qu’elle est très simple d’utilisation et ne nécessite donc pas de connaissances particulières.

Son utilisation dans un plugin frontend est relativement aisée, pourvu que l’on ne recharge pas la page 🙂

1. Tout d’abord, vous devez passer par le quickstarter dans TYPO3 pour créer un début d’extension. Ensuite, vous devez déclarer votre plugin comme étant de type USER_INT. Si vous déposez ce plugin sur une page, seul celui-ci ne sera pas mis en cache.

Vous pouvez déclarer votre plugin comme ceci :
plugin.tx_monplugin_pi1 = USER_INT

2. Ensuite, vous devez inclure la classe xajax dans votre pi1 :

/* Include xaJax */       
require_once (t3lib_extMgm::extPath(‘xajax’) . ‘class.tx_xajax.php’);

L’initialisation de l’objet xajax se poursuit. N’oubliez pas de déclarer la variable xajax dans votre classe !

Dans class tx_monplugin_pi1 extends tslib_pibase {

/* xajax */
var $xajax;

3. Vous pouvez créer ensuite une fonction d’initialisation que vous appelerez dans votre méthode main()

function initList() {

        //$this->conf = $conf;
       
        // Instanciation de l’objet ajax
        $this->xajax = t3lib_div::makeInstance(‘tx_xajax’);
       
        // Appel à une fonction pour décoder les données
        $this->xajax->decodeUTF8InputOn();
       
        // Encodage de la réponse au format UTF-8
        $this->xajax->setCharEncoding(‘utf-8’);
       
        // Pour éviter les conflits avec l’extension, on rajoute un prefix supplémentaire
        $this->xajax->setWrapperPrefix($this->prefixId);
       
        // Affichage des messages dans la barre de statut
        $this->xajax->statusMessagesOn();
       
        // Mode debug
        $this->xajax->debugOff();
       
        // Nom des fonctions PHP pour le traitement des données (très important)
        $this->xajax->registerFunction(array(‘processFormData’, &$this, ‘processFormData’));
       
        // If this is an xajax request call our registered function, send output and exit
        $this->xajax->processRequests();
       
        // Else create javacript and add it to the normal output
        $GLOBALS[‘TSFE’]->additionalHeaderData[$this->prefixId] =              $this->xajax->getJavascript(t3lib_extMgm::siteRelPath(‘xajax’));

}

4. Vous devez ensuite créer un formulaire en frontend et lui donner un id unique :

$content .= ‘
<form name="formajax" id="formajax"
action="’.$this->pi_getPageLink($GLOBALS[‘TSFE’]->id).’"
method="post"> Field:<input type="text" name="field" id="field" size="20" value="nom"><br> Table :<input type="text" name="table" size="30" id="table"><br>
Criteria:<input type="text" name="critere" size="50" id="critere" value="uid<10"><br> <input type="button" onclick="’ . $this->prefixId . ‘processFormData(xajax.getFormValues(\’submittest\’))" value="Envoyer" > </form><div id="results"> Resultats</div>
‘;

Trois informations importantes :
– le nom du formulaire
– processFormData pour l’évenement onclick. Un évenement onChange aurait également été possible.
– la zone HTML pour la réponse : <div id="results"> Resultats</div>

La fonction processFormData est chargée de récupérer les données et de les traiter.

Dans mon extension :

function processFormData($data) {

        $this->piVars = $data[$this->prefixId];
        
        // On transmet les données reçues à une autre fonction pour le traitement (ex : requête en base)
        $content = $this->sGetFormResult($data["field"], $data["table"],
$data["critere"]);

       // préparation de la réponse
      $objResponse = new tx_xajax_response();
     
      // ‘results’ est le nom de l’id où apparaitra la réponse
      $objResponse->addAssign(‘results’, ‘innerHTML’, t3lib_div::view_array($content));
      return $objResponse->getXML();

}

Voilà, c’est tout simple. N’hésitez pas à poser vos questions ou remarques 🙂

[EDIT]
J’oubliais quelques liens :

Extension xajax sur le TER
Documentation sur le TER
Site officiel xajax

PHP Frameworks

Publié le Mis à jour le

PHP Frameworks… le site des frameworks ! Enfin, ce site recense les principaux frameworks et dresse un petit tableau comparatif des fonctionnalités. On espère voir FLOW3 bien évidemment. A noter Akelos, un framework qui me semble très sympatique et prometteur.

PHP Frameworks