Redpik

API day : TYPO3 et les emails

OlivierSC — Wed, 07 Nov 2012 11:45:33 +0000

L'API TYPO3 regroupe un nombre impressionnant de fonctionnalités dont certaines ne sont pas très connues. Après avoir passé en revue les variables sessions puis la gestion des liens typolink, voici maintenant comment envoyer des emails dans ses développements avec le CMS TYPO3. Cette partie de l'API a été publiée avec la sortie de TYPO3 v4.5 et à fait l'objet d'un article dédié sur buzz.typo3.org.

A) Utilité de cette fonctionnalité

Pourquoi utiliser cette fonction? pourquoi ne pas utiliser directement la fonction "mail" de PHP? PARCE QUE!!!!! En premier lieu, cette fonction est beaucoup plus facile à utiliser que la fonction "mail" de PHP. Il est assez complexe de gérer les pièces attachées ainsi que les différentes parties de l'email avec la fonction "mail()" de base et les risques d'avoir un mail illisible ou mal formaté sont importants. De plus, la configuration de l'API mail de TYPO3 est regroupée dans l'install tool, ce qui veut dire qu'un changement de configuration sur son hébergement ne nécessite pas de retouche du code PHP, mais simplement d'adapter la configuration générale via l'install tool.

B) Fonctionnement de base

En se basant sur l'article dédié sur buzz.typo3.org, on peut préparer le code minimum pour l'envoi d'un email. [php] email au format HTML'; //on declare l'objet mail $email= t3lib_div::makeInstance('t3lib_mail_Message'); //on parametre l'emetteur $email->setFrom(array($emailEmetteur => $nomEmetteur)); //on parametre le destinataire $email->setTo(array($emailDestinataire => $nomDestinataire)); //on parametre le sujet de l'email $email->setSubject($sujet); //on ajoute le contenu sans preciser si c'est du texte ou de l'HTML $email->setBody($contenuHTML); //on envoie l'email $email->send(); ?> [/php] Et HOP, il est parti. Simple, non?
C) format de l'email (HTML ou texte brut)
Si on ne précise pas le format du contenu (HTML ou texte brut), le composant email décide à notre place en fonction de la présence ou l'absence de code HTML. Dans cette situation, l'affichage sur un lecteur compatible uniquement "texte brut" n'est pas garanti si le texte envoyé contient du code HTML. Pour conserver la compatibilité, nous allons forcer la partie HTML et ajouter la prise en compte de l'alternative textuelle. Pour cela on va modifier la dernière partie du script : [php] setBody($contenuHTML, 'text/html'); //on ajoute le contenu pour la version texte $email->addPart(strip_tags($contenuHTML), 'text/plain'); //on envoie l'email $email->send(); ?> [/php] L'email est maintenant compatible HTML et Texte brut.
D) Gestion des destinataires
Après avoir configuré le contenu, nous allons personnaliser les destinataires. Il existe plusieurs types de destinataires : - les destinataires "officiels" (fonctions setTo et addTo) - les destinataires en "copie" (fonctions setCc et addCc) - les destinataires en "copie cachée" (fonctions setBcc et addBcc) Pour chaque type de destinataires, il existe 2 fonctions permettant d'effectuer le paramétrage pour l'email : une fonction "set..." et "add...". La fonction "set..." permet de définir complètement le destinataire en supprimant le paramétrage précédent s'il existe. La fonction "add..." permet d'ajouter un nouveau destinataire sans supprimer les destinataires déjà paramétrés. Pour la suite, nous n'allons utiliser que les fonctions "set..." pour que cela soit plus simple à comprendre. On peut préciser des destinataires en copie (visible) : [php] setCc(array($emailDestinataireCopie => $nomDestinataireCopie)); //on envoie l'email $email->send(); ?> [/php] Ainsi que des destinataires en copie cachée (non visible) : [php] setBcc(array($emailDestinataireCopieCachee => $nomDestinataireCopieCachee)); //on envoie l'email $email->send(); ?> [/php]
E) Ajout de pièces jointes
Il peut être utile de joindre une pièce jointe à un email, comme le Powerpoint de ses dernières vacances sur la côte d'azur, ou encore une vidéo avec plein de petits lolcats trop mignons: [php] attach(Swift_Attachment::fromPath('fileadmin/mes_super_vacances_en_maillot_de_bain.ppt')); //on envoie l'email $email->send(); ?> [/php] Il est aussi possible de donner un nom précis à la pièce jointe. Cela peut être utile lorsque l'on ne désire pas montrer le nom d'origine du fichier. [php] attach(Swift_Attachment::fromPath('fileadmin/chat_de_la_voisine.avi')->setFilename('chat_trop_mignon.avi')); //on envoie l'email $email->send(); ?> [/php]
F) l'inclusion d'image dans le corps de l'email
Pouvoir envoyer une pièce jointe, c'est bien.... mais ajouter une image directement dans le corps du mail c'est bien aussi. Cela permet par exemple d'ajouter une image dans une signature en bas d'email, ou un logo en haut d'email. On ne peut pas utiliser la fonction "attach()" car cela mettrait simplement la photo en pièce jointe, on va donc utiliser la fonction"embed()" qui permet d'inclure un élément dans le corps du message. Nous allons inclure l'image "fileadmin/images/signature‑anime.gif" [php] HTML.
Signature : embed(Swift_Image::fromPath('fileadmin/images/signature‑anime.gif')) ; //on fini le reste de la balise img et du mail $contenuHTML.='" title="smiley signature anime" alt="smiley signature anime"/>'; //on ajoute le contenu en precisant la version HTML $email->setBody($contenuHTML, 'text/html'); //on ajoute le contenu pour la version texte $email->addPart(strip_tags($contenuHTML), 'text/plain'); //on envoie l'email $email->send(); ?> [/php] Nous avons fait manuellement le remplacement, mais cela peut vite devenir fastidieux de faire tous ces remplacements à la main... Et puis pourquoi se fatiguer à le faire nous même quand le code peut le faire à notre place. Allons y pour un petit coup d'expression régulière : [php] HTML avec une image .
'; // on ajoute une signature avec une image $contenuHTML.=' Signature : '; //on va recherche toutes les balises images preg_match_all('/]*src=["|']([^"|']+)[^>]*>/i', $contenuHTML, $images); //si on a des resultats if (is_array($images[0])){ //on supprime les doublons $images[0]=array_unique($images[0]); //on prepare les tableaux des correspondances $remplacement=array(); $remplacement=array(); //pour chaque image detectee foreach ($images[0] as $key=>$value) { //on genere l'url interne a partir de l'image d'origine $cid = $email->embed(Swift_Image::fromPath($images[1][$key])); //on remplit les tableaux des correspondances $remplacement_from[$cid]=$value; $remplacement_to[$cid]=str_replace($images[1][$key], $cid, $value); } //on effectue le remplacement des images par leur url interne dans le texte de l'email $contenuHTML=str_replace($remplacement_from, $remplacement_to, $contenuHTML); } //on ajoute le contenu en precisant la version HTML $email->setBody($contenuHTML, 'text/html'); //on ajoute le contenu pour la version texte $email->addPart(strip_tags($contenuHTML), 'text/plain'); //on envoie l'email $email->send(); ?> [/php] Et voila.... Maintenant il n'y a plus d'excuse pour ne pas envoyer un petit e-mail, depuis son site TYPO3, pour souhaiter un joyeux anniversaire ou une bonne année....
G) Références
- Buzz.typo3.org: New mail API for the core - Documentation SwiftMailer

SoFresh: le bookmarklet qui garde les CSS bien frais

Ben — Wed, 26 Sep 2012 11:09:37 +0000

Chers intégrateurs web, si comme moi vous avez la touche F5 facile, si l'envie de rafraîchir votre navigateur vous prend dès que vous venez de rédiger 3 lignes de CSS, alors le bookmarklet SoFresh est fait pour vous.
Comment ça marche?
Une fois le bookmarklet chargé sur votre site, un widget magique apparaît. Il va recharger vos fichiers CSS dès leur modification, automatiquement. Ainsi plus besoin d'actualiser votre navigateur ou de vider votre cache: SoFresh s'en charge. Si vous ne voyez pas bien comment utiliser un bookmarklet, lisez ceci. Un grand merci à Cabaroc pour le logo, à Nicolas Sorosac qui a ~~quasiment~~ tout développé, et à Gouz qui s'est occupé du support de LESS. Je vous laisse découvrir SoFresh sur le mini-site dédié: sofresh.redpik.net, si vous avez des ~~critiques~~ remarques n'hésitez pas, ici ou là. Ha oui, il y a aussi Github, en cas de bug(s).

[FLUID]ifions nos développements TYPO3

OlivierSC — Wed, 25 Jul 2012 11:38:14 +0000

La prochaine version majeure de TYPO3 (qui se fait attendre) sera basée sur un moteur de template appelé FLUID. Beaucoup attendront la sortie de ce nouveau TYPO3 pour s'y mettre, mais comme dirait l'autre l'avenir est déjà parmi nous... En effet, FLUID est utilisable depuis la version 4.3 de TYPO3, et depuis la version 4.5 FLUID est utilisable de manière autonome (Standalone View) directement depuis n'importe quel plugin.
A) Présentation
Pour ceux qui ne connaissent pas encore FLUID, c'est un moteur de template assez proche de Smarty. Cela permet d'inclure des directives directement dans le template HTML, comme par exemple: - spécifier l'emplacement des variables PHP, - organiser des boucles dans le template HTML, - mettre en place des conditions d'affichage de certains éléments, ainsi que la mise en place de fonctionnalités simples comme par exemple : - l'alternance des couleurs dans une liste d'éléments, - l'affichage d'un libellé seulement si le champ associé au libellé n'est pas vide, - la mise en place d'un lien en fonction des informations de l'enregistrement. Toutes ces fonctionnalités devaient être prévues dans le code PHP, sans quoi elles ne pouvaient exister. Ce moteur de template étant lié au noyau TYPO3, il est possible d'accéder aux fonctions internes du CMS comme par exemple : - les liens typolinks (voir article sur le typolink), - le système de traduction, - le typoscript, - le traitement stdWrap (via le typoscript), - l'élargissement des fonctionnalités de base avec des plugins (ViewHelper).
B) Mise en situation

Présentation d'un cas concret
Nous allons voir un cas concret d'utilisation avec la méthode "à l'ancienne" (des vieux :) ) puis avec FLUID et enfin faire un tour d'horizon des fonctionnalités de FLUID. Prenons l'exemple de l'affichage d'une liste de tâches à traiter. On affichera en premier une liste simple basée sur les éléments d'une table. On ajoutera ensuite des informations dans la liste. On ajoutera enfin des informations de contact (téléphone email en fonction de la disponibilité du contact). Attention, nous ne tiendrons pas compte d'éventuels problèmes de cache, d'encodage, de traduction ou de valeur en dur dans le code, ce n'est qu'un exemple; il faut que cela reste simple à comprendre.
C) Méthode "à l'ancienne"

Étape 1 : Principes et préparation du code PHP
Pour les "anciens" de TYPO3, le passage par des templates signifiait la création d'un fichier HTML souvent organisé en blocs (subparts) dans lesquels on trouve des marqueurs ou d'autres subparts. Le but du jeu était de charger le template, de récupérer la subpart correspondant à la fonctionnalité à afficher, et de remplacer les marqueurs par des valeurs utiles (depuis la base de données par exemple). Concernant le code PHP, il n'y a pas besoin de préparation du code pour pouvoir utiliser la méthode traditionnelle. La classe du plugin doit simplement hériter de la classe "tslib_pibase" qui rend accessible les méthodes de templating. Pour la simplicité du code, tous les textes ont été laissés en dur... oui c'est mal.
Étape 2 : affichage minimal
On va donc essayer d'afficher une liste d'éléments, basée sur des enregistrements dans la base de données. Cette liste est simplement composée d'un titre. Le but est d'analyser la composition du template HTML ainsi que le code PHP nécessaire au traitement de cette liste. Template HTML : [html]
###LISTE_TACHES###

###TACHE_TITRE###
[/html] Code PHP associé : [php] template='EXT:'.$this->extKey.'/pi1/template.html'; $this->templateCode = $this->cObj->fileResource($this->template); //on recupere le code HTML d'une seule ligne $templateLigne = $this->cObj->getSubpart($this->templateCode, "###SUBPART-TACHE###"); //on lance la requete SQL $lignes = $GLOBALS['TYPO3_DB']->exec_SELECTgetRows( '*', $table, ' 1 '.$this->cObj->enableFields($table) ); //on prépare la variable de concaténation $codeLignes=''; //pour chaque enregistrement foreach($lignes as $uid=>$ligne){ //on prepare le tableau des marqueurs HTML $markerLigne=array(); //on remplie le tableau de marqueurs $markerLigne['###TACHE_TITRE###']=$ligne['titre']; //on récupère le code HTML d'une seule ligne $codeLignes.=$this->cObj->substituteMarkerArray($templateLigne,$markerLigne); //on supprime le tableau unset($markerLigne); } //on récupère le code final $templateListe = $this->cObj->getSubpart($this->templateCode, "###SUBPART-LISTE###"); //on remplace la liste $content=$this->cObj->substituteMarkerArray($templateListe,array( '###LISTE_TACHES###'=>$codeLignes )); //..... ?> [/php] Résultat généré :
Étape 3 : ajout d'informations complémentaires
Imaginons maintenant que l'on souhaite afficher le numéro de chaque tache, le nom du responsable de la tache et mettre en place une alternance de couleur dans la liste. Template HTML : [html]
###LISTE_TACHES###

###COMPTEUR### - ###TACHE_TITRE### ( ###TACHE_RESPONSABLE### )
[/html] Code PHP associé : [php] template='EXT:'.$this->extKey.'/pi1/template.html'; $this->templateCode = $this->cObj->fileResource($this->template); //on récupère le code HTML d'une seule ligne $templateLigne = $this->cObj->getSubpart($this->templateCode, "###SUBPART-TACHE###"); //on lance la requête SQL $lignes = $GLOBALS['TYPO3_DB']->exec_SELECTgetRows( '*', $table, ' 1 '.$this->cObj->enableFields($table) ); //on prépare la variable de concaténation $codeLignes=''; //on prépare le compteur de ligne $compteur=1; //pour chaque enregistrement foreach($lignes as $uid=>$ligne){ //on prépare le tableau des marqueurs HTML $markerLigne=array(); //on remplie le tableau de marqueurs $markerLigne['###TACHE_TITRE###']=$ligne['titre']; $markerLigne['###TACHE_RESPONSABLE###']=$ligne['responsable']; $markerLigne['###COMPTEUR###']=$compteur; $markerLigne['###CLASSE###']=$compteur%2; //on récupère le code HTML d'une seule ligne $codeLignes.=$this->cObj->substituteMarkerArray($templateLigne,$markerLigne); //on supprime le tableau unset($markerLigne); //on incrémente le compteur $compteur++; } //on récupère le code final $templateListe = $this->cObj->getSubpart($this->templateCode, "###SUBPART-LISTE###"); //on remplace la liste $content=$this->cObj->substituteMarkerArray($templateListe,array( '###LISTE_TACHES###'=>$codeLignes )); //..... ?> [/php] Résultat généré :
Étape 4 : Ajout d'un lien de contact
Imaginons maintenant que l'on souhaite afficher une phrase d'introduction, et que le besoin apparaisse d'avoir, en fonction de la disponibilité du responsable, l'affichage de son numéro de téléphone du responsable, ou uniquement un lien vers son email. Template HTML : [html]
###INTRO###

###LISTE_TACHES###

###COMPTEUR### - ###TACHE_TITRE### ( ###TACHE_RESPONSABLE### : ###CONTACT### )
[/html] Code PHP associé : [php] template='EXT:'.$this->extKey.'/pi1/template.html'; $this->templateCode = $this->cObj->fileResource($this->template); //on récupère le code HTML d'une seule ligne $templateLigne = $this->cObj->getSubpart($this->templateCode, "###SUBPART-TACHE###"); //on lance la requete SQL $lignes = $GLOBALS['TYPO3_DB']->exec_SELECTgetRows( '*', $table, ' 1 '.$this->cObj->enableFields($table) ); //on prépare la variable de concaténation $codeLignes=''; //phrase d'intro $intro='Liste de taches sur le projet.
Il y a '.count($lignes).' résultat'; //on gere le cas du S en cas de plusieurs resultats if (count($lignes)>1){ $intro.='s'; } $intro.=' à traiter.'; //on prépare le compteur de ligne $compteur=1; //pour chaque enregistrement foreach($lignes as $uid=>$ligne){ //on prépare le tableau des marqueurs HTML $markerLigne=array(); //on remplie le tableau de marqueurs $markerLigne['###TACHE_TITRE###']=$ligne['titre']; $markerLigne['###TACHE_RESPONSABLE###']=$ligne['responsable']; $markerLigne['###COMPTEUR###']=$compteur; $markerLigne['###CLASSE###']=$compteur%2; //si l'utilisateur est disponible if ($ligne['disponible']==='OUI'){ //on utilise le téléphone $lienContact=$ligne['telephone']; }else{ //sinon on génère un lien vers l'email $lienContact = $GLOBALS['TSFE']->cObj->typoLink( 'Il est à la pêche, spammez son email', array('parameter'=>$ligne['email']) ); } $markerLigne['###CONTACT###']=$lienContact; //on récupère le code HTML d'une seule ligne $codeLignes.=$this->cObj->substituteMarkerArray($templateLigne,$markerLigne); //on supprime le tableau unset($markerLigne); // on incrémente le compteur $compteur++; } //on récupère le code final $templateListe = $this->cObj->getSubpart($this->templateCode, "###SUBPART-LISTE###"); //on remplace la liste $content=$this->cObj->substituteMarkerArray($templateListe,array( '###LISTE_TACHES###'=>$codeLignes, '###INTRO###'=>$intro )); //..... ?> [/php] Résultat généré :
Étape 5 : Conclusion pibase:
Nous voyons que chaque ajout de fonctionnalité nécessite une modification du code PHP. Une fonctionnalité comme l'affichage conditionnel d'une variable ou rajouter un "S" dans une phrase présentant un nombre de résultats nécessite une modification dans le code PHP, tout comme la mise en place d'une alternance de couleur ou de classe CSS, etc... Dans un plugin complexe cela peut devenir un casse-tête de ne rien "casser" lorsqu'on ajoute une fonctionnalité. Un plugin comme le TT_news, par exemple, comporte un nombre impressionnant de lignes et prend en compte beaucoup de fonctionnalités, des plus complexes (ex les différents modes de fonctionnement) au plus légères ( formatage des dates). Mais l'ajout de fonctionnalité dans ce code semble complexe si on n'a pas passé des jours à lire le code pour tout comprendre. Regardons maintenant la même problématique, mais cette fois en utilisant le moteur de template FLUID.
D) Méthode "Avec FLUID"

Étape 1: Principes et préparation du code PHP
Nous avons vu, dans la première partie, comment utiliser les templates via les fonctions de templating "$this->cObj->getSubpart(....)" et "$this->cObj->substituteMarkerArray(....)". Nous allons maintenant repartir de zéro, et utilise les templates FLUID. Pour pouvoir utiliser les fonctionnalités offertes par FLUID il est nécessaire de (au choix) : - dépendre des classes extbase et FLUID - instancier le système FLUID de manière autonome. On va se baser sur la 2nd possibilité. tutoriel : utilisation de FLUID sans extbase Le code PHP de base : [php] // on fait appelle au fonctionnement en standalone $view = t3lib_div::makeInstance('Tx_Fluid_View_StandaloneView'); // Emplacement du template $this->template = $template = t3lib_extMgm::extPath(strtolower($this->extKey)) . 'Resources/Private/Layouts/template.html'; //on specifie l'emplacement du template $view->setTemplatePathAndFilename($this->template); //on assigne une variable $view->assign('variable', $variable); //on genere le rendu HTML return $view->render(); [/php]
Etape 2 : affichage minimal
On va donc essayer à nouveau d'afficher une liste d'éléments, basée sur des enregistrements dans la base de données. Cette liste est toujours composée, pour commencer, d'un titre. Template HTML : [html]

{tache.titre}

[/html] Code PHP associé : [php] template = $template = t3lib_extMgm::extPath(strtolower($this->extKey)) . 'Resources/Private/Layouts/template.html'; //on specifie l'emplacement du template $view->setTemplatePathAndFilename($this->template); //on lance la requete SQL $lignes = $GLOBALS['TYPO3_DB']->exec_SELECTgetRows('*', $table, ' 1 '.$this->cObj->enableFields($table) ); //on assigne les donnees dans l'objet tache $view->assign('taches', $lignes); //on genere le rendu HTML return $view->render(); ?> [/php] Résultat généré :
Etape 3 : ajout d'informations complémentaires
On va afficher le numéro de chaque tâche, le nom du responsable de la tâche et mettre en place une alternance de couleur dans la liste. Template HTML : [html]

{cycle}">{tacheiteration.cycle} - {tache.titre} ( {tache.responsable} )

[/html] Code PHP associé : [php] template = $template = t3lib_extMgm::extPath(strtolower($this->extKey)) . 'Resources/Private/Layouts/template.html'; //on specifie l'emplacement du template $view->setTemplatePathAndFilename($this->template); //on lance la requête SQL $lignes = $GLOBALS['TYPO3_DB']->exec_SELECTgetRows('*', $table, ' 1 '.$this->cObj->enableFields($table) ); //on assigne les données dans l'objet tache $view->assign('taches', $lignes); //on génère le rendu HTML return $view->render(); ?> [/php] Résultat généré : On peut remarquer qu'il n'y a aucun changement du code PHP. Les seuls changements sont dans le template HTML avec l'ajout de marqueurs.
Etape 4 : Ajout d'un lien de contact
On ajoute une phrase d'introduction avec le nombre de résultats ainsi que l'affichage, en fonction de la disponibilité, du numéro de téléphone du responsable ou uniquement un lien vers son email. Template HTML : [html]
Liste de taches sur le projet.
Il y a résultats à traiter.

{cycle}"> {tacheiteration.cycle} - {tache.titre} ( {tache.responsable} : {tache.telephone} Il est à la pêche, spammez son email )

[/html] Code PHP associé : [php] template = $template = t3lib_extMgm::extPath(strtolower($this->extKey)) . 'Resources/Private/Layouts/template.html'; //on spécifie l'emplacement du template $view->setTemplatePathAndFilename($this->template); //on lance la requete SQL $lignes = $GLOBALS['TYPO3_DB']->exec_SELECTgetRows('*', $table, ' 1 '.$this->cObj->enableFields($table) ); //on assigne les données dans l'objet tâche $view->assign('taches', $lignes); //on genere le rendu HTML return $view->render(); ?> [/php] Résultat généré :
Etape 5 : Conclusion FLUID:
Nous voyons qu'aucun ajout de fonctionnalité ne nécessite une modification du code PHP, tout se passe au niveau du template HTML. Le but n'est pas de mettre un maximum de code dans le template, mais simplement de placer ce qui relève de l'affichage au niveau du template HTML comme par exemple : - l'ajout conditionnel d'un "S" à la fin d'un mot - l'affichage conditionnel d'une variable - l'alternance de classes CSS ou de valeurs dans une liste - la mise en place de liens ou de transformations d'affichage (mise en forme HTML, formatage des dates, formatage des numériques, etc). cela permet de garder le code PHP aussi simple que possible, tout en gardant un résultat complexe.
E) Évolution "Avec FLUID"
Nous avons vu qu'avec FLUID il est possible d'avoir un résultat identique à la méthode Pibase avec un code PHP beaucoup plus simple. Cela impose, à nouveau, une petite remise en cause personnelle pour apprendre les éléments de base de FLUID, mais le jeu en vaut la chandelle comme on dit. Avoir des codes PHP simples permet une meilleure gestion des développements, et donc de réduire les bugs de fonctionnement. Les modifications de présentation effectuées suite à une demande client pour adapter l'affichage sont ainsi réduites à de l'édition de template. Les fonctionnalités de base du moteur de template FLUID permettent de gérer directement dans le template HTML des fonctionnalités intéressantes comme:

Formatage des dates : f:format.date

Formatage des montants : f:format.currency

Formatage des liens interne : f:link.page

Transformation HTML : f:format.html

Gestion des traductions : f:translate

Ensuite, il est aussi possible d'étendre les fonctionnalités de base en créant ses propres fonctions (appelées "ViewHelper") ou d'en récupérer via des extensions sur le TER de TYPO3. Enfin, si une extension permet de spécifier l'emplacement du template HTML à utiliser (via typoscript ou flexform par exemple), il est alors possible de rajouter des fonctionnalités complexes dans le rendu final, tout en limitant le risque de casser quelque chose lors de la mise à jour de l'extension d'origine. Plus besoin de hook, de typoscript complexe ou pire... de XCLASS. Imaginez prendre un plugin d'actualité, y rajouter des éléments propres à votre site comme par exemple la réservation à un évènement en fonction de critères dans la base, tout en conservant le fonctionnement général du plugin d'actualité.... et sans trop de crainte lors de la prochaine mise à jour... au pire cela se limitera à une nouvelle petite modification dans le template FLUID, le top non?

API day : TYPO3 et les liens (typolink)

OlivierSC — Wed, 20 Jun 2012 06:46:54 +0000

L’API TYPO3 regroupe un nombre impressionnant de fonctionnalités dont certaines ne sont pas très connues. Voici, par exemple, la gestion des liens dans les plugins Frontend avec le CMS TYPO3. Les liens sont des éléments importants dans la navigation sur un site internet et dans TYPO3 les liens peuvent avoir plusieurs formes.
A) Principe des urls dans TYPO3
Par exemple, pour une url vers la page "29 " (titre "ma page"), au format pdf (type=123), avec une variable dont la valeur est 12 :

Sans réécriture : /index.php?id=29&type=123&tx_monext_pi1[variable]=12

Réécriture du nom de la page : /mapage.html?type=123&tx_monext_pi1[variable]=12

Réécriture de la page et de la variable : /mapage/12.html?type=123

Réécriture de la page, de la variable et du type : /mapage/12.pdf : réécriture complète

Dans le cadre d'un développement de plugin, et pour ne pas avoir à réinventer la roue, l'API TYPO3 fournie plusieurs fonctions permettant de mettre en forme les liens. De manière générique (via l'objet cObj) :

$this->cObj->currentPageUrl()

$this->cObj->typoLink_URL()

$this->cObj->getTypoLink_URL()

Dans le cas d'un plugin qui hérite de pibase :

$this->pi_getPageLink()

$this->pi_linkTP_keepPIvars_url()

Pour les développements qui utilisent correctement ces fonctions, la mise en place (ou la désactivation) d'un système de réécriture d'url ne posera aucun problème car l'url aura le même formatage que partout ailleurs dans le site. Ensuite le lien généré respecte les droits d'accès aux pages, ce qui fait que si une page est cachée, supprimée, ou que l'internaute n'a pas les droits nécessaires pour consulter la page, alors le lien sera désactivé. Enfin, si la page est renommée ou déplacée dans l'arborescence, le lien réécrit sera automatiquement mis à jour, il ne sera pas nécessaire de modifier quoi que ce soit.
B) De manière générique (via la classe "tslib_cObj" )

1) Fonction currentPageUrl()
Elle permet de faire rapidement un lien vers la page actuelle ou une page précise dans TYPO3 en lui passant si besoin des paramètres à rajouter dans l'url. Elle accepte 2 paramètres : - un tableau de paramétres à ajouter dans l'url - une page de destination à utiliser en remplacement de l'ID de la page actuelle [php] //id page destination $idPage=18; //tableaux des parametres a inserer dans le lien $urlParameters=array( 'etape'=>'details', 'idDetail'=>12 ); //generation de l'url $url = $this->cObj->currentPageUrl($urlParameters, $idPage); [/php] L'url simple sera : /index.php?id=18&etape=details&idDetail=12
2) fonction typoLink_URL()
c'est un peu la même fonction que currentPageUrl() sauf que les paramètres doivent être passé sous forme de tableau. Dans le tableau, la case "parameter" est la page de destination et la case "addionalParams" est une chaîne de caractères qui sera ajoutée dans l'url. [php] //id page destination $idPage=18; //tableaux des parametres a inserer dans le lien $confLink=array( 'parameter' => $idPage, 'additionalParams' => '&etape=details&idDetail=12' ); //generation de l'url $url = $this->cObj->typoLink_URL($confLink); [/php] L'url simple sera : /index.php?id=18&etape=details&idDetail=12
3) fonction getTypoLink_URL()
c'est un peu la même fonction que currentPageUrl() sauf que la page de destination est obligatoire et que l'ordre des paramètres est inversé. Elle accepte 3 paramètres : - la page de destination du lien - un tableau de paramètres à ajouter dans l'url - la target (mais pas utilisée puisqu'on ne génère que l'url, donc on ne l'utilise pas) [php] //id page destination $idPage=18; //tableaux des parametres a inserer dans le lien $urlParameters=array( 'etape'=>'details', 'idDetail'=>12 ); //generation de l'url $url = $this->cObj->getTypoLink_URL($idPage, $urlParameters); [/php] L'url simple sera : /index.php?id=18&etape=details&idDetail=12
C) Les plugins héritant de la classe "tslib_pibase"

1) fonction $this->pi_getPageLink()
c'est un raccourci vers la fonction $this->cObj->getTypoLink_URL(), seul l'ordre des paramètres change. Elle accepte 3 paramètres : - la page de destination du lien - la target (mais pas utilisée puisqu’on ne génère que l’url, donc on laissera vide) - un tableau de paramètres à ajouter dans l’url [php] //id page destination $idPage=18; //tableaux des paramatres a inserer dans le lien $urlParameters=array( 'etape'=>'details', 'idDetail'=>12 ); //generation de l'url $url = $this->pi_getPageLink ($idPage, '', $urlParameters); [/php] L'url simple sera : /index.php?id=18&etape=details&idDetail=12
2) function pi_linkTP_keepPIvars_url()
Cette fonction permet de faire un lien mais avec une reprise automatique des pivars existants. Les "pivars" sont les variables spécifiques à un plugin qui, dans leur forme brute dans une url, peuvent être identifiées car ils sont de la forme : &tx_+nomplugin+[+nom_variable+]. Dans les plugins, ils ont accessibles simplement et automatiquement via la variable "$this->piVars[+nom_variable+]". Cette fonction accepte 4 paramètres : - un tableau permettant de remplacer les pivars actuels - un booléen permettant de préciser le mode de mise en cache (avec ou sans cache) - un booléen permettant de forcer la suppression des pivars actuels - la page de destination du lien [php] //id page destination $idPage=18; //tableau des variables de remplacement des pivars actuel $piVars=array( 'etape'=>'details', 'idDetail'=>12 ); //generation de l'url $url = $this->pi_linkTP_keepPIvars_url($piVars,1,0,$idPage); [/php] Si l'url actuelle est : /index.php?id=18&tx_monext[etape]=liste&tx_monext[message]=OK Alors l'url simple sera : /index.php?id=18&tx_monext[etape]=details&tx_monext[idDetail]=12&tx_monext[message]=OK Avec : - le pivars "etape" qui passe de "liste" à "details" (remplacement du pivars), - ajout du pivars "idDetail" - et conservation (automatique) du pivar "message".
D) Encore... Encore...
Il existe d'autres possibilités pour faire des liens depuis un plugin, comme par exemple l'utilisation de FLUID. Ce moteur de template (qui ressemble à SMARTY), étroitement lié au typoscript et aux fonctionnalités du noyau de TYPO3, permet de faire des liens via des marqueurs spécifiques dans un template HTML. Un article a été rédigé pour présenter l'utilisation de FLUID dans les développements PHP.
F) Conclusion
Il est important de toujours utiliser les fonctionnalités de l'API dans le but d'avoir un fonctionnement stable sur le long terme, mais surtout la garantie que les urls mises en place reflètent le fonctionnement du site dans son ensemble. En utilisant ces fonctions il est possible de mettre en place des urls propres, utilisable par exemple :

pour fournir un lien pour passer d'un écran à un autre

pour rediriger l'internaute sur une page précise après la création d'un enregistrement en base de données

pour gérer les différents liens d'une navigation multi-page sans avoir à surveiller l'ensemble des paramètres de l'url

etc….

Placeholder : Tout savoir sur cet Attribut HTML5

MrManchot — Wed, 18 Apr 2012 12:24:09 +0000

Le Placeholder est un nouvel attribut HTML5 qui a pour but de décrire brièvement un champs. La valeur du Placeholder s'affiche à l'intérieur du champs lorsque celui-ci est vide. Voici ce que ça donne sur les principaux navigateurs : Pour l'utiliser il suffit d’insérer l'attribut placeholder dans une balise input ou textarea. Cela fonctionne pour les champs de type text, password, mais aussi les nouveaux types d'input HTML 5 à savoir : search, url, tel, email. Voici un exemple simple d'intégration: [html] [/html]
Compatibilité navigateur
Comme d'habitude le Placeholder est supporté par tous les navigateurs récents... à l'exception d'Internet Explorer. Pour être plus précis voici les versions minimales de support :

Firefox 4.0+

Opera 11.01+

Chrome 3.0+

Safari 3.0+

Internet Explorer 10+

Rendre son Placeholder compatible via jQuery
En attendant Internet Explorer 10, il est donc nécessaire d'utiliser jQuery, si l'utilisation du placeholder est importante. La meilleure solution que j'ai pu trouver est celle de Nico Hagenburger qui a pour avantage d'ajouter une classe .placeholder sur le champs mais aussi de vider ce champs avant la soumission du formulaire. Voici le code en question: [js] $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur().parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); [/js]
Style CSS du Placeholder
L’attribut Placeholder peut être stylé en CSS un peu à la manière de l'attribut :hover [css] input::-webkit-input-placeholder { color: #999; } input:-moz-placeholder { color: #999; } /* A tester pour IE10, mais logiquement: */ input:-ms-placeholder { color: #999; } [/css] Il est aussi possible de styler un élément précis, comme d'habitude en CSS : [css] #my_field::-moz-placeholder { color:#999; } [/css] Si vous utilisez la méthode jQuery fournie précédemment, l’élément peut alors être stylé simplement comme ceci : [css] #my_field.placeholder { color:#999; } [/css]

API day : TYPO3 et les variables SESSIONS

OlivierSC — Mon, 16 Apr 2012 06:23:31 +0000

L'API TYPO3 regroupe un nombre impressionnant de fonctionnalités dont certaines ne sont pas très connues. Voici, par exemple, la gestion des variables sessions dans les plugins Frontend avec le CMS TYPO3.
Différents types de variables sessions
En premier lieu, il existe plusieurs types de variables sessions pour les plugins Frontend : - les variables "session" - les variables "utilisateur" Les variables de type "session" ont un fonctionnement identique aux variables sessions de PHP, c'est à dire qu'elles suivent l'utilisateur pendant toute sa navigation. Elles sont supprimées lorsque l'internaute quitte le site ou après une longue période d’inactivité. Les variables de type "utilisateur" sont liées à l'utilisateur frontend connecté (le fe_user). Elles sont stockées de manière permanente dans la table des utilisateurs frontend du site et elles sont accessibles dès que l'utilisateur est identifié sur le site. Cela permet par exemple de se rappeler des préférences de navigation d'un utilisateur après son identification. Ces variables ne sont pas supprimées, par contre elles ne peuvent pas être utilisées pour gérer des variables pour les utilisateurs non identifiés.
Différents types de données
Il est possible de stocker n'importe quel type de données dans les variables sessions. Les variables sont automatiquement "désérialisées" lors de l'initialisation des sessions par le framework TYPO3. Elles sont automatiquement "sérialisées" lors de l'enregistrement des variables dans la session (via la fonction storeSessionData(...) ). Cela permet de stocker des tableaux comme des variables simples (du texte ou des valeurs numériques).
PHP - l'affectation d'une variable de session
Exemple de code PHP qui permet l'affectation et la prise en compte des variables sessions depuis un plugin Frontend. [php] //preparation des données à mettre en session $tabSession=array(); $tabSession['texte']='joh'; $tabSession['numerique']=316; //préparation du nom de la variable dans la session de l'utilisateur $nomVariableSession='tx_monext_pi1'; //on utilise ici la clé "ses" pour affecter //une variable session qui ne nécessite pas d'identification $GLOBALS["TSFE"]->fe_user->setKey('ses', $nomVariableSession, $tabSession); //on valide toutes les variables dans la session //cette fonction est normalement appelée automatiquement par le framework //à la fin de la génération de la page. //mais si on coupe le processus avant la fin (redirection php par exemple) //il faut valider les sessions. $GLOBALS['TSFE']->fe_user->storeSessionData(); [/php]
PHP - la récupération d'une variable de session
Exemple de code PHP qui permet la récupération des variables sessions depuis un plugin Frontend. [php] //préparation du nom de la variable dans la session de l'utilisateur $nomVariableSession='tx_monext_pi1'; //on utilise ici la clé "ses" pour récupérer //une variable session qui ne nécessite pas d'identification $tabDonneSession=$GLOBALS["TSFE"]->fe_user->getKey('ses', $nomVariableSession); //la variable $tabDonneSession contient maintenant //les informations stockées dans la session du visiteur print_r($tabDonneSession); [/php]
Conclusion
En utilisant ces fonctions il est possible de mettre en place tous les mécanismes liés aux sessions comme :

le développement de panier de commande

le stockage de préférences utilisateur

l'analyse de la navigation

etc....

Optimiser le chargement de ses images

MrManchot — Wed, 28 Mar 2012 11:48:44 +0000

Quand on parle d'optimiser le chargement de son site on pense généralement à son code ou à son serveur, mais un autre paramètre influe au niveau de l'affichage : les images. Il s'agit d'un critère important qu'il est possible d'améliorer grâce à deux techniques : réduire le nombre d'accès serveur & optimiser le poids de ses images.
1 - Réduire le nombre d'accès serveur

Sprites CSS
Comme le conseille Google Page Speed il est important de limiter autant que possible le nombre de requêtes HTTP. En effet les navigateurs ne pouvant télécharger que deux à quatre éléments en parallèle, plus le nombre d'éléments est important plus le temps de latence du serveur est important (plus d'informations à ce sujet). Il est donc nécessaire de limiter le nombre d'image a charger, et il existe une solution : les Sprites CSS. Cela consiste simplement a combiner plusieurs images en une seule. L'affichage de la "sous-image" en question se fera ensuite dans le CSS, via la propriété background-position. C'est en théorie là ou vous vous demandez : "Oui mais comment-faire concrètement ?". Et bien il existe des générateurs comme Css-Sprit.es qui permettent en quelques clics d'uploader toutes vos images, et d'en ressortir un beau sprite avec son CSS associé. Attention cette technique n'est adapté que pour des images de petite taille, généralement en .gif ou .png Passons à un cas concret, je viens de réaliser un sprite des icônes du thèmes par défaut de Prestashop. On se retrouve ainsi une seule image, évitant par conséquent une quarantaine d'accès serveur. Pour ne rien gâcher le poids total est passé de 123 ko à 18 ko !

Encodage base64 des images
L’encodage des images en base64 permet de transformer un fichier image en une suite de caractères. L’intérêt ? La chaîne peux être ensuite insérée dans votre CSS ou HTML, on passe donc de 1 à 0 accès serveur supplémentaire. Youpi. Attention toutefois, même si l'on gagne un accès, une fois encodé une image peux "prendre du poids" (+33% en théorie). La technique est donc réservée aux images légères. Cette méthode reste malgré tout expérimental pour la simple ~~et bonne~~ raison qu'IE6 et IE7 (encore 4% du trafic à ce jour) ne supportent pas l'affichage des images encodées. Si malgré cela vous souhaitez tester cette méthode, je vous conseille Base64 Image, convertisseur en ligne. Voila par exemple ce que ça donne pour ce picto : [css]background-image: url('data:image/gif;base64,R0lGODlhCwANAKIAAP///8rKypqammVlZTU1NQAAAAAAAAAAACH5BAEHAAAALAAAAAALAA0AAAMsCArUyy3KFmoQWIzJCQNVtimeEAwCMX4mqnrsma6l/JJAO8O1S4MXDK3jSQAAOw==');[/css]
2 - Optimiser le poids de ses images
Le poids d'une image se détermine au moment où elle est enregistrée : Quel format (png,gif...)? Quelle qualité de compression jpeg ? Cette étape est évidemment la plus importante, mais il reste tout de même la possibilité de grappiller quelques ko(s). Pour cela je vous suggère Smush.it service de Yahoo permettant de réduire le poids de vos images sans perte de qualité. Smush.it se contente de supprimer toutes les données inutiles du fichier. Il suffit d'uploder ses images et ressort après quelques secondes un zip content toutes vos images optimisées. On connaît même le nombre et le pourcentage de bytes gagnés. Petit test avec le thème par défaut de Prestashop:
Smushed 22.12% or 31.52 KB from the size of your image(s).
Pas mal! Voilà une bonne pratique à adopter une fois son découpage terminé ;) Pour aller encore plus vite, il existe aussi de bons logiciels "desktop" de compression lossless : Trimage (Linux) et ImageOptim (Mac)

Top 15 des aberrations Prestashop

MrManchot — Thu, 22 Mar 2012 12:42:47 +0000

Voici un post légèrement #troll, ou nous vous présentons les différents points surprenant que nous avons pu trouver sur PrestaShop. Attention, ne me faites pas dire ce que je n'ai pas dit : PrestaShop est une excellente solution e-commerce, il s'agit plus là d'un petit clin d’œil. Personne n'est parfait ;) En espérant tout de même que la majorité de cette liste soit obsolète à la sortie de Prestashop 1.5 :

Le tri de liste déroulante pour greffer un Hook. Bonne idée que de trier la liste des 85 Hooks par "id", assez pratique pour se retrouver. PSCFI-1387

L'id des colonnes dans le template product. #pb-right-column pour la colonne de gauche / #pb-left-column pour celle de droite. Eurf. PSFV-43

La gestion des Tags. Gérés parfaitement en back, aucune utilisation en front. (Edit via Samy : il existe un module "nuage de tags")

Module BlockNewsletter dans le Core Un passage en Hook aurait été peut-être réalisable ?

Gestion des .png renommés en .jpg Depuis la 1.4 Prestashop gère les PNG24, ils sont par contre systématiquement renommés en .jpg

Block adverstising L'image à uploader doit faire exactement 155px X 163px sinon elle est scalée à la cochon. Quasi-inutilisable donc. Les dimensions sont en dur dans le .tpl et dans le .php.

Surcharge des tpl : problème de traduction La surcharge fonctionne bien, mais la traduction pose problème si on ne surcharge pas TOUS les tpl d'un module.

Ordre des attributs impossible à gérer Maintes fois débattu, pas pratique l'ordre alphabétique quand on vend du textile : L - M - S - XS... Cela sera amélioré en 1.5, Cool :)

URL des catégories ouvertes Pas top niveau SEO, il faut surcharger la classe Link pour pouvoir modifier ce comportement.

Css des modules dans le global Alors que tout est bien découpé, puis minifié. A voir en bas du globals.css: paypalapi / productcomments / reversoform / wishlish...

Écrasement des images lors de la MàJ La mise à jour du répertoire /img/ est un vrai casse tête, parfois il y a de nouvelles images, mais il ne faut surtout pas uploader /img/c/ ni img/p/ etc...

Impossibilité de mettre de l'HTML dans un descriptif de catégorie Je croise les doigts, ça serait quand même bien pratique : PSCFI-2850

Template mail Pas de gestion de header ni de footer, et une couleur rose fluo à enlever de partout à la main!

Traductions des modules Souhaitez bon courage à votre client qui souhaite traduire lui même ses éléments... Dur de s'y retrouver dans ces immenses listes (c'est un module? c'est dans Front office?)

Greffer un module où bon vous semble Très étrange... On peut greffer blockcart à gauche, mais pas en haut du site. On peut greffer blocknewsletter à droite... mais pas dans le footer.

Si @PrestaShop a quelques remarques sur ces différents points, nous sommes preneurs :) En attendant vous avez de quoi compléter la liste ?

Gérer l’ordre des META et du TITLE sur TYPO3

OlivierSC — Tue, 06 Sep 2011 11:41:16 +0000

Une demande qui revient souvent chez les SEO (spécialistes du référencement) est de mettre la balise TITLE en toute première position dans la partie HEAD (c'est à dire avant les autres balises META). En dehors du mythe que représente l'idée que "plus le TITLE sera haut dans la page, plus on gagnera de place sur Google", TYPO3 permet, grâce à une bonne configuration, de gérer l'ordre des éléments présents dans le HEAD Par défaut TYPO3 ne génère pas le titre de page tout en haut du HEAD, la balise est en effet ajoutée après plusieurs ligne de code. En fait cette organisation est gérée dans un template HTML. Par défaut : <pre>/typo3/sysext/cms/tslib/templates/tslib_page_frontend.html</pre> Partie du contenu de ce fichier : <pre> ###METACHARSET### ###INLINECOMMENT### ###BASEURL### ###SHORTCUT### <strong>###TITLE###</strong> ###META### ###CSS_INCLUDE### ###CSS_INLINE###</pre> Il est possible d'utiliser son propre fichier template en spécifiant l'emplacement de ce template via le typoscript suivant : <pre>config.pageRendererTemplateFile=...</pre> <a title="TSREF pour l'objet config" href="http://typo3.org/documentation/document-library/references/doc_core_tsref/4.5.0/view/1/6/#id2626485">Voir la TSREF et la partie "config" ( rechercher pageRendererTemplateFile ).</a> Il suffit alors faire une copie du fichier de base et de le placer dans fileadmin et de mettre en place la configuration : <pre>config.pageRendererTemplateFile=fileadmin/perso_page_frontend.html</pre> On peut alors paramétrer l'ordre en fonction de ses préférences et de ses croyances. </article> <article> <h1>Encoder des accents sans toucher aux balises HTML</h1> <p>Ben — Thu, 18 Aug 2011 12:34:16 +0000</p> <p></p><strong>...Et surtout sans tableau de conversion!</strong> Cette opération (à priori très simple) peut poser problème, notamment à cause de l'encodage des caractères.<span id="more-256"></span> Faisons le test avec une chaîne de caractères contenant des balises HTML et des accents. [php] $chaine = "Le <em>péHpé</em> çaÿ <strong>biên</strong>."; [/php] Nous souhaitons obtenir la chaîne suivante: [php] Le <em>péHpé</em> çaÿ <strong>biên</strong>. [/php] Commençons donc par faire appel à la fonction <a title="fonction htmlentities sur php.net" href="http://www.php.net/manual/fr/function.htmlentities.php">htmlentities</a>. Pour rappel, cette fonction "convertit tous les caractères éligibles en entités HTML". Donc les accents seront effectivement encodés... ainsi que les balises HTML (contrairement à la fonction <a title="fonction htmlspecialchars sur php.net" href="http://www.php.net/manual/fr/function.htmlspecialchars.php">htmlspecialchars</a> qui elle n'aurait pas encodé les accents). N'oubliez pas de préciser le "jeu de caractères", exemple si vous êtes comme moi en <a title="UTF-8 - définition sur Wikipedia" href="http://fr.wikipedia.org/wiki/UTF-8">UTF-8</a>: [php] //encodage des accents ET des balises echo htmlentities($chaine, ENT_NOQUOTES, 'UTF-8'); [/php] Heureusement il existe une fonction capable de faire l'inverse, <strong>sans toucher aux accents</strong>: <a title="fonction htmlspecialchars_decode sur php.net" href="http://www.php.net/manual/fr/function.htmlspecialchars-decode.php">htmlspecialchars_decode</a>. Nous obtenons donc: [php] echo htmlspecialchars_decode(htmlentities($chaine, ENT_NOQUOTES, 'UTF-8')); [/php] Et le tour est joué! <h3>Et si je veux obtenir l'effet inverse?</h3> Là c'est plus simple: [php] //convertir les é en é sans toucher aux balises HTML echo html_entity_decode($chaine, ENT_NOQUOTES, "UTF-8"); [/php] </article> </main></body></html>