Extensions TYPO3

Site factory pour TYPO3

Publié le

Une extension de duplication de sites dans l’arborescence du back office TYPO3, ou bien si vous préférez, une usine à site, a été créée et présentée par Romain Canon en 2015. Je n’ai que peu d’informations sur cette extension car il n’existe pas vraiment de documentation et la configuration se fait en TypoScript mais vous pouvez consulter des slides et une vidéo Youtube pour vous faire une idée (les liens sont plus bas).

Aujourd’hui, mes projets tournent principalement autour de la v8… et l’extension n’est pas compatible avec cette version de TYPO3 :-/ En effet, des erreurs apparaissent dès le lancement. Il faut dire que TYPO3 évolue très vite. Des méthodes sont dépréciées et remplacées par d’autres, des ViewHelpers sont supprimés de Fluid, etc.

Je suis donc entrain de « jouer » avec l’extension pour la rendre compatible avec la v8, tout en gardant une compatibilité avec la v7. Par contre, la v6 me semble un peu loin… et de toute façon, elle n’est plus supportée.

testing-site-factory-under-v8

 

Lire la suite »

Publicités

Failles de sécurité sur plusieurs extensions

Publié le

Au delà des mises à jour du Core TYPO3, il est primordial de mettre à jour également les extensions d’une instance. Combien de fois ai-je vu dans les logs d’un serveur des adresses IP suspectes de machines qui tentent d’exploiter les failles de différentes extensions. En effet, je suppose que ces programmes comportent une base de données d’extensions TYPO3, un dictionnaire, avec des failles identifiées et des injections de code PHP sont directement opérées dans des fichiers de l’extension… d’où l’appel suspect car jamais un internaute irait consulter directement une classe PHP plusieurs fois de suite en quelques secondes… Les IP sont localisées en Chine, en Amérique du Sud ou en Europe de l’est.

Bref, en début de mois, plusieurs alertes ont été publiées et l’une sur une extension que j’affectionne : ke_search. Cette extension dépasse les limites d’indexed_search et c’est un vrai moteur d’indexation qui ne va pas utiliser un crawler et créer un dictionnaire avec des pages mises en cache ; ke_search (ou Faceted Search d’ailleurs) va directement consulter la base de données.
On va créer des enregistrements de type « indexation » en précisant l’extension listée depuis un formulaire (d’où la connaissances des tables à indexer), remplir un champ où il faudra indiquer la page détail, un champ contenant l’ensemble des données à indexer (sysfolder de News par exemple) et un champ qui contient l’ensemble des données indexées.

Si vous souhaitez mettre rapidement en place un moteur de recherche avec filtres qui peut également prendre en compte les catégories (table sys_category), entièrement configurable depuis un flexform, et surtout, sans passer par une usine comme SOLR, alors c’est une très bonne solution que je vous recommande 🙂 Et n’oubliez pas de mettre à jour vos extensions !

Voir les bulletins de sécurité TYPO3

L’Extension Builder se dote d’un manuel

Publié le

Ce soir, en procédant à un « git checkout » et un « git pull », je me suis aperçu qu’une documentation s’était ajoutée dans le répertoire de l’extension extension_builder/doc. Je rappelle que l’extension « Extension Builder » est le kickstarter pour Extbase.

On retrouve donc une documentation de 8 pages qui reprend les informations contenues sur le Wiki. Pas très important mais je souhaitais le signaler quand même 🙂 D’ailleurs, cette extension… vous l’utilisez ?

Refonte de l’élément de contenu de type formulaire

Publié le Mis à jour le

Patrick Broens, membre de la Core Team et à l’origine de l’extension pbsurvey pour TYPO3, a développé une nouvelle extension sous Extbase et qui devrait remplacer à terme le vieil objet FORM. En fait, le projet n’est pas si récent que ça mais P. Broens à été obligé de stopper les développements pour des raisons personnelles. Vous pouvez télécharger son extension avec SVN – voir le projet sur Forge ou bien depuis news.typo3.org.

Form, c’est comme ça qu’elle s’appelle, modernise la création de formulaires dans TYPO3. De plus, elle est livrée avec un assistant pour la créer facilement des formulaires depuis le back office. Cette fonctionnalité s’adresse donc en priorité aux contributeurs. Pour information, l’assistant se trouve à la place de l’ancien assistant. Pour information, son extension sera intégrée à TYPO3 4.6 en tant qu’extension système. J’ai testé l’assistant et c’est assez bluffant !

Le nouvel objet FORM

Voici en vrac quelques informations supplémentaires :

  • Form est également une librairie qui pourra être appelée depuis d’autres extensions
  • L’affichage est compatible avec les référentiels d’accessibilité (à vérifier)
  • Validation côté serveur ou côté client. Des méthodes de validation supplémentaires peuvent être configurées.
  • Possibilité de grouper des éléments par fieldset
  • Le formulaire est personnalisable par CSS
  • L’assistant fonctionne avec des « glisser-déposer ». Il est donc très intuitif.
  • Très complet, il couvre tous les types d’attributs et éléments.  Incorpore un type de champ « date » ou « heure ».
  • Ecran de confirmation configurable
  • Envoi de fichier supporté
  • Captcha
  • Insertion d’éléments de contenu dans le formulaire (COA/TEXT/HMENU)

L’extension est toute jeune mais son auteur prévoit par exemple d’autoriser la création de formulaires sur plusieurs pages par exemple. Form bénéficie d’une architecture MVC et donc, sa mise à jour devrait être facilitée.

Ressources :
Actualité news.typo3.org avec documentation
Projet sur Forge

Mes extensions préférées pour TYPO3

Publié le

Je partage ma liste d’extensions que j’utilise fréquemment. N’hésitez pas à communiquer vos extensions TYPO3 préférées pour vos projets 🙂

cron_accessiblemenus
jetts
realurl
pagebrowse
tt_address
linkhandler
browser
dropdown_sitemap
sr_email_subscribe
dr_blob
formhandler
felogin
sr_feuser_register
tt_news
sr_freecap

Fluid sans Extbase

Publié le

La sortie de la version 4.5 LTS de TYPO3 rend les choses moins compliquées pour utiliser le moteur de templating Fluid dans vos extensions et vous affranchir définitivement des marqueurs « ### ».

Par quel moyen ? Grâce à la vue « standalone » offerte désormais par Fluid. Si vous jetez un oeil au changeLog de la dernière version, vous trouverez quelques exemples. La classe à instancier s’appelle « Tx_Fluid_View_StandaloneView » (définition) et pour afficher des le rendu de votre plugin en frontend, il ne vous faut que quelques lignes, ici simplifiées :

// Template location
$this->template = $template = t3lib_extMgm::extPath(strtolower($this->extKey)) . ‘Resources/Private/Layouts/Template.html’;

$view = t3lib_div::makeInstance(‘Tx_Fluid_View_StandaloneView’); // instanciate standalone view

// Define template location property for Fluid
$view->setTemplatePathAndFilename($this->template);

// Sample array
$array = array(‘sample’ => ‘some text’, ‘again’ => ‘yep again’);

// Feed the template
$view->assign(‘data’, $array);

// Return result
return $view->render();

Et voilà… Voici le contenu de mon gabarit HTML avec {data.sample} et {data.again} qui seront remplacés par les valeurs de mon tableau.

<div id= »container »>
<div id= »one »><f:format.html>{data.sample}</f:format.html></div>
<div id= »two »><f:format.html>{data.again}</f:format.html></div>
</div>

Autre chose, je vous recommande la lecture de la fameuse « cheat sheet » que vous pourrez télécharger à cette adresse.

Compression JS/CSS avec TYPO3

Publié le Mis à jour le

Un intégrateur ou un développeur doit forcément avoir les bons outils pour juger de la qualité d’une maquette, des performances d’un site internet, etc. Si je vous parle d’Yslow par exemple, vous n’êtes pas censé (normalement) ignorer que cet outil est une extension Firefox qui vous permet d’analyser des pages web et vous fournir des pistes pour optimiser l’affichage de ces dernières. A vrai dire, on a pas besoin forcément de cet outil pour juger de la qualité d’un code HTML. Il suffit de regarder la source HTML avec son navigateur pour avoir déjà une première opinion !

De nos jours, nous utilisons de plus en plus de fichiers css et javascript lorsque nous ajoutons telle ou telle fonctionnalité à un site. Vous voyez déjà où je veux en venir ? Bien 🙂 Si je prends l’exemple de ma librairie JS préférée, Jquery, il arrive un moment où le nombre de fichiers appelés pour chaque plugin devient important. C’est encore plus le cas quand vous jetez un oeil à des maquettes HTML toutes prêtes sur le net.

Récemment, j’ai eu affaire à ce type de maquette HTML pour un client. Quelques CSS externes étaient appelées mais par contre, côté JS, c’était un peu la catastrophe : 15 fichiers ! Parmi ces JS, il y a l’appelle à la librairie Jquery, puis un plugin complémentaire à Jquery, un autre pour améliorer les polices, un autre pour un slider, un autre pour une galerie, etc.

Voici par exemple le score avec Yslow :

C’est là que je me suis tournée vers la compression CSS et CSS. Que faut-il entendre par là ? On va tout d’abord minifier puis coller tous les fichiers pour en faire un seul. Il y a la compression gzip mais je l’utilise déjà sur le serveur. Au final, nous en aurons deux fichiers:

– un fichier pour les CSS
– un fichier pour les JS

On a pas loin de 6000 extensions sur le TER mais peu concernent la compression. Je vais donc vous en présenter une : scriptmerger

Cette extension fonctionne particulièrement bien. Son auteur, dans la documentation, avertit le lecteur que plusieurs tests peuvent être nécessaire pour arriver au fonctionnement optimal, sans encombre. Dans mon cas, j’ai l’habitude d’appeler mes CSS et mes JS avec page.headerData pour contrôler plus facilement les entêtes de mes pages. Avec ce type d’extension, le mieux est de passer par la bonne vieille méthode que voici :

page {
includeCSS {
file1 = fileadmin/templates/…/css/style.css
file2 = fileadmin/templates/…/css/red.css
}

includeJS {
file1 = fileadmin/templates/…/js/jquery.min.js
file2 = fileadmin/templates/…/js/query.easing.1.3.js
[…]
file14 = fileadmin/templates/…/js/browserDetect.js
}
}
Oui, plus que 14 js ici car j’en ai supprimé un en trop après le 1er test.

Installez l’extension scriptmerger puis ajouter les constantes et le setup de l’extension dans le gabarit TS de votre site. Je ne saurais trop vous conseiller de vous entrainer sur une page, plutôt que sur le site. En effet, si la manipulation ne fonctionne pas du premier coup, tout le site sera impacté !
La documentation de l’extension est très bien expliquée. Toutefois, je vous donne ma configuration pour information :

Constantes :

###
# These are the default TS-constants for scriptmerger
###
plugin.tx_scriptmerger {
css {
enable = 1
addContentInDocument = 0

# minification
minify {
enable = 1
ignore = \.min\.
}

# gzip compression
compress {
enable = 0
ignore = \.gz\.
}

# merging
merge {
enable = 1
ignore =
}
}

javascript {
enable = 1
parseBody = 1
addBeforeBody = 0
doNotRemoveInDocInBody = 1
addContentInDocument = 0

# minification
minify {
enable = 1
useJSMinPlus = 1
ignore = \?,\.min\.
}

# gzip compression
compress {
enable = 0
ignore = \?,\.gz\.
}

# merging
merge {
enable = 1
ignore = \?
}
}
}

Setup :

plugin.tx_scriptmerger {
# minification, compressing and merging of css files
css {
enable = {$plugin.tx_scriptmerger.css.enable}
addContentInDocument = {$plugin.tx_scriptmerger.css.addContentInDocument}

# minification
minify {
enable = {$plugin.tx_scriptmerger.css.minify.enable}
ignore = {$plugin.tx_scriptmerger.css.minify.ignore}
}

# gzip compression
compress {
enable = {$plugin.tx_scriptmerger.css.compress.enable}
ignore = {$plugin.tx_scriptmerger.css.compress.ignore}
}

# merging
merge {
enable = {$plugin.tx_scriptmerger.css.merge.enable}
ignore = {$plugin.tx_scriptmerger.css.merge.ignore}
}
}

# minification, compressing and merging of javascript files
javascript {
enable = {$plugin.tx_scriptmerger.javascript.enable}
parseBody = {$plugin.tx_scriptmerger.javascript.parseBody}
addBeforeBody = {$plugin.tx_scriptmerger.javascript.addBeforeBody}
doNotRemoveInDocInBody = {$plugin.tx_scriptmerger.javascript.doNotRemoveInDocInBody}
addContentInDocument = {$plugin.tx_scriptmerger.javascript.addContentInDocument}

# minification
minify {
enable = {$plugin.tx_scriptmerger.javascript.minify.enable}
useJSMinPlus = {$plugin.tx_scriptmerger.javascript.minify.useJSMinPlus}
ignore = {$plugin.tx_scriptmerger.javascript.minify.ignore}
}

# gzip compression
compress {
enable = {$plugin.tx_scriptmerger.javascript.compress.enable}
ignore = {$plugin.tx_scriptmerger.javascript.compress.ignore}
}

# merging
merge {
enable = {$plugin.tx_scriptmerger.javascript.merge.enable}
ignore = {$plugin.tx_scriptmerger.javascript.merge.ignore}
}
}
}

Pour le setup, je n’ai rien modifié. Donc, intéressons-nous seulement aux constantes. Il y a un découpage en deux parties : une pour le traitement des CSS et une autre pour le traitement des JS. Les deux traitements sont ici activés. En revanche, je n’ai pas activé la compression gzip comme expliqué un peu plus haut. J’ai également modifié l’option « parseBody » à un pour que l’extension analyse le body de la page. L’extension utilise des librairies que l’on retrouve dans le dossier « resources » de l’extension. JSMin+ est par exemple utilisée pour minifier les fichiers javascript.

Il n’y a donc certes pas de magie à tout celà mais il faut avouer que l’extension scriptmerger est efficace. Voilà mon résultat juste après :

En résumé, passage du grade B au grade A grâce à l’obtention de 7 points supplémentaires. Pour vérifier que l’extension fonctionne bien, il suffit de jeter un oeil à la source HTML.

<link rel= »stylesheet » type= »text/css » media= »all » href= »typo3temp/scriptmerger/uncompressed/head-fd4495d07e02c20d26f8aab7626f7626.merged.css » />
<script type= »text/javascript » src= »typo3temp/scriptmerger/uncompressed/head-740be043a9a8a1e3eb25bc6b410b4a52.merged.js »></script>

Deux fichiers seulement. C’est plus propre non ?