EXT: TYPO3 pour les Nuls¶

Préambule¶

Le but de ce document est de vous permettre une première approche de TYPO3, tant au niveau de son installation que de sa prise en main. Si vous êtes déjà allé dans la section «Pour bien démarrer avec TYPO3» du forum de l a communauté française ( http://forum.typo3-fr.org /), ce document essaye d'être une synthèse des questions redondantes (et de leurs réponses) qui bien souvent obligent les débutants à passer par le forum lors de leur première approche de ce CMS.

D'expérience, je sais que vous allez pouvoir retrouver cette documentation sur de nombreux sites. Afin de vous assurer de travailler avec la version la plus à jour et donc d'être efficace dans votre apprentissage, il n'existe qu'une adresse à utiliser: le repository du site officiel http://typo3.org/extensions/repository/view/belink\_typo3pourlesnuls <http://typo3.org/extensions/repository/view/belink_typo3pourlesnuls> _ .

Enfin, sachez que je reste ouvert aux remarques, commentaires et corrections, toujours dans un objectif d’efficacité pour mes lecteurs. N'hésitez donc pas à me contacter par e-mail (disponible sur la première page) ou directement sur le fil du forum consacré à cette documentation: http://forum.typo3-fr.org/topic/1773-typo3-pour-les- nuls/ .

TYPO3¶

TYPO3 c'est quoi? Si vous lisez cette documentation, c'est que vous en avez déjà une petite idée. C'est :

• un gestionnaire de contenu, on dit aussi CMS, pour Content Management System, c'est à dire un système qui sépare le contenu d'un site de sa présentation, ou encore un système qui permet d'avoir «l'habillage» d'un site d'un coté et le contenu qui va apparaître dans ce site de l'autre. Le principal avantage d'un tel système, c'est qu'il permet de rajouter des informations sur un site sans que le rédacteur ait besoin de s'y connaître en HTML ou PHP,
• open source sous licence GNU/GPL, c'est à dire dont le code source est consultable et modifiable par tout le monde sous certaines conditions. Le principal avantage d'une tel licence c'est que n'importe qui peut apporter sa contribution au projet, ce qui, aujourd'hui, se traduit, par exemple, par plus de 6000 extensions disponibles et mises en ligne par de nombreux auteurs différents,
• créée par un Danois, Kasper Skaarhoj en 1998. Il a depuis pris du recul sur le développement des nouvelles versions et c'est l'association officielle qui s'en charge.

Dans ce document on trouve quoi? Vous avez lu le sommaire, non? :-)

Le premier chapitre court mais important vous permet de réunir l'ensemble des fichiers dont vous aurez besoin tout au long de votre lecture afin que nous puissions travailler avec les mêmes sources. Ensuite, nous attaquerons, la description de l'installation du package TYPO3Winstaller qui contient à la fois l'installation du serveur Apache/PHP/Mysql sans lequel vous ne pourrez pas aller très loin, ainsi que l'installation d'un package de source de TYPO3. Après ce premier morceau conséquent, une petite aparté sera faite pour vous expliquer comment ajouter de nouveau site à votre installation. Puis pour terminer l'installation, la description de l'installation des outils graphiques utilisés par TYPO3 : Graphicsmagick (ou Imagemagick) et Gdlib.

Si vous arrivez au bout de ce premier morceau, vous aurez sur votre ordinateur tout ce qu'il vous faut pour «héberger» et réaliser votre premier site en TYPO3. Un petit bémol cependant, avant d'obtenir les premiers résultats concrets, quelques recherches seront encore nécessaires pour savoir comment fonctionne ce CMS riche en fonctionnalités. Ne voulant pas vous laisser ainsi, avec une installation propre mais sans contenu, j'ai ensuite ajouté le chapitre concernant une première approche des contenus et des templates. Associé au paragraphe suivant, concernant l'utilisation des extensions, vous aurez en main les bases de l'utilisation de TYPO3.

Le reste du document sera consacré à un ensemble d'informations qui pourront vous servir tout au long du développement de votre site. Vous y trouverez tout d'abord, une méthode pour transférer un site d'une machine (de développement) vers une autre (de production) et une méthode pour réaliser des montées de version puisqu'en quelques années nous sommes passés de la version 3.5 à la 6.0 et que les nouveautés ont été nombreuses, intéressantes et très utiles. Ensuite, j'ai rassemblé un ensemble de liens vers des sites ou des sujets du forum de http://typo3-fr.org/ que j'ai jugé utile de vous signaler en attendant peut être de les introduire et de les détailler directement dans ce document.

Bonne lecture, et bon apprentissage...

Première étape : Installation¶

Il s'agit d'un exécutable, donc il n'y a pas grand chose à faire :

• Double-cliquez sur le fichier .exe que vous avez téléchargé,
• Cliquez sur « Suivant » sur la page de bienvenue,
• Acceptez la licence,
• Sélectionnez les icônes que vous souhaitez créer : sur le bureau et/ou à coté du menu «Démarrer», puis cliquez sur «Suivant»,
• Ensuite vous arrivez sur cette écran et c'est le seul endroit ou votre attention doit être à son maximum :

Afin de supprimer un maximum de problèmes dans votre utilisation de TYPO3, il est très fortement conseillé de choisir un chemin d'accès à votre serveur ne contenant ni caractères spéciaux, ni espace, ni majuscule, à tous les niveaux de l'arborescence. Personnellement, je l'installe dans C:typo3_477.

• Ensuite vous confirmez la création d'un répertoire dans le menu «Démarrer»,
• Pour finir vous cliquez sur «Fermer», en laissant la case «Lancer TYPO3Winstaller TYPO3 4.7.7» cochée.

Une fois ce clic effectué, vous obtenez un écran qui enchaîne la configuration (fichiers sources + base de données) de vos trois packages sur le serveur:

Pour terminer, votre serveur se lance et affiche son panneau de contrôle :

Et la page d'accueil du package s'ouvre dans votre navigateur configuré par défaut :

Une fois cette installation terminée, si vous allez dans votre explorateur de fichier, vous devez avoir cette nouvelle arborescence :

Le répertoire «htdocs» de l'arborescence est le répertoire partagé, c'est à dire que tout ce qui se trouvera dans ce répertoire sera accessibe à partir de votre navigateur internet préféré. S'il s'agit de fichier internet (HTML, PHP...), ils seront interprétés.

Deuxième étape : le Panneau de contrôle¶

Le panneau de contrôle du package TYPO3Winstaller (Accessible via la menu «Démarrer / Tous les Programmes / TYPO3 4.7.7») se présente de la manière suivante :

• le bouton (1)permet de réduire le panneau de contrôle, c'est à dire de le faire disparaître (il est toujours disponible à coté de l'horloge en bas à droite de votre écran) tout en laissant les serveurs Apache et MySQL en marche,
• les boutons et option (2)permettent de fermer le panneau de contrôle et d’arrêter les serveurs Apache et MySQL,
• le feu tricolore (3)indique l'état de vos serveurs Apache et MySQL : rouge les serveurs sont arrêtés, orange, ils sont en cours de démarrage et vert ils sont démarrés,
• le bouton et l'option (4)permettent de démarrer les serveurs Apache et MySQL ainsi que d'ouvrir la page d'accueil du TYPO3Winstaller dans le navigateur configuré dans les options,
• le bouton et l'option (5)permettent d’arrêter les serveurs Apache et MySQL tout en conservant le panneau de contrôle ouvert,
• l'option (6)permet d'accéder aux différents fichiers de logs générés par vos serveurs : Apache, PHP et TYPO3Winstaller,
• l'option (7)ouvre la fenêtre des options,
• l'option (8)reste un mystère pour le moment ;-)
• la zone (9)indique l'état du serveur Apache : down ou running,
• la zone (10)indique l'état du serveur MySQL : down ou running.

L'écran des options se présente de la manière suivante :

• 
• l'onglet «Options» (1)affiche la liste des options disponibles avec cet outil,
• l'onglet «TYPO3 Instances» (2)liste l'ensemble des instances TYPO3 installées sur votre serveur et permet d'en ajouter de nouvelles comme on le verra dans le paragraphe «Installation et Configuration d'un site supplémentaire»,
• l'onglet «Logfiles» (3)permet d'accéder aux différents fichiers de logs générés par vos serveurs : Apache, PHP et TYPO3Winstaller et de les supprimer,
• l'onglet «Browser» (4)vous permet de sélectionner le navigateur qui sera utilisé par les boutons du panneau de contrôle pour ouvrir les pages Internet et vous permet également de modifier la page ouverte lorsqu'on appuie sur le bouton «Start»,
• l'onglet «About» (5)donne la version et les coordonnées du TYPO3Winstaller,
• les cases à cocher (6)permettent dans l'ordre : de démarrer vos serveurs en même temps que Windows, minimiser automatiquement le panneau de contrôle à son démarrage, démarrer les serveurs au démarrage du panneau de contrôle, arrêter les serveur lorsqu'on quitte le panneau de contrôle, supprimer les fichiers de log lorsqu'on quitte le panneau de contrôle, permettre les accès réseau à votre serveur,
• les zones de saisie (7)permettent de configurer les ports utilisés par Apache et MySQL,
• le bouton «Install Servers as Service» (8)permet de démarrer vos serveurs en tant que service Windows ce qui rend leur fonctionnement transparent et l'utilisation du panneau de contrôle obsolète.

Troisième étape : la Page d'Accueil¶

La page d'accueil du TYPO3winstaller est accessible depuis votre navigateur à l'adresse : http://localhost:8502/ . Le 8502 est le port Apache indiqué dans la fenêtre des options (champ (7)de la seconde étape). Cette page se présente de la manière suivante :

• le menu déroulant «Go to» (1)est une liste de liens utiles pour obtenir des informations sur TYPO3,
• le menu «Home» (2)est l'accueil de ce mini site dédié au TYPO3Winstaller,
• le menu «Local TYPO3 Sites» (3)vous permet d'obtenir la liste de vos sites et pour chacun d'entre eux, un lien vers : le Frontend, le Backend et le menu «Install» correspondant,
• le menu «Tools» (4)rassemble 4 liens vers des outils et informations disponibles avec le TYPO3Winstaller : la page phpinfo qui donne l'ensemble des informations sur l'environnement PHP installé, APC Gui pour configurer et obtenir des informations sur l’accélérateur PHP installé, phpMyAdmin l'outil permettant l'administration de la base MySQL et enfin «Environnement» est une page contenant toutes les variables d'environnements de votre installation,
• le menu «About» (5)regroupe les versions de tous les outils installés par le package, un lien vers la dernière version du TYPO3Winstaller, des informations sur le créateur et les logos de tous les éléments constituants votre installation,
• le lien «Home» (6)est un fil d’Ariane qui vous permet à tout instant de vous situer dans ce mini site,
• le bloc «Menu» (7)reprend les mêmes éléments que le menu «Local TYPO3 Sites» c'est à dire des liens vers tous les sites TYPO3 disponibles sur votre serveur. Ce bloc est disponible dans tous les menus du mini site,
• le lien «here» (8)vous permet d'accéder au menu «Local TYPO3 Sites»,
• le lien «this page» (9)vous permet de vous rendre dans le menu «About» du site officiel typo3.org pour obtenir des informations en anglais sur l'outils,
• le lien «New to TYPO3» (10)est à nouveau un lien vers typo3.org mais sur la page d'accueil pour les débutants qui voudraient savoir quoi faire pour débuter. Cette page n’existant plus, il pointe sur une erreur 404,
• le lien «Supporting TYPO3» (11)est un lien vers la page de typo3.org résumant l'ensemble des moyens à votre disposition pour contribuer et aider la communauté TYPO3,
• le lien «this page» (12)vous permet de consulter une liste de site ayant été fait avec TYPO3,
• le lien «Andreas Eberhard» (13)vous permet de contacter par mail l'auteur du package TYPO3Winstaller,
• le lien «TYPO3 Association» (14)est un lien vers la page d'accueil du site de l'association TYPO3.

Votre premier contenu sur votre site¶

• Dans le backend, cliquez sur «Page» (1)dans le menu de gauche,
• Cliquez sur le logo TYPO3 à coté de «TYPO3 Dummy Version 4.7.7» (2)puis sur «New» (3)dans le menu contextuel qui s'est ouvert,
• 
• Indiquez un titre dans le champ «Page Title» (1),
• Dans l'onglet «Access» (2), la case «Disable» est cochée, décochez la,
• Sauvegardez (3).

• Sous «TYPO3 Dummy Version 4.7.7» dans la colonne du milieu, une page avec votre titre doit apparaître, cliquez sur son nom (1),
• Cliquez sur le bouton de création de contenu (2)dans la frame de droite, pour la colonne «Normal». Ensuite, sélectionnez «Regular text element»,

Dans le formulaire qui s'ouvre remplissez le champ «Header» (1)de l'onglet «General» avec le titre de votre contenu et le grand champ «Text» avec un petit texte (2), puis sauvegardez en haut du formulaire (3),

• Si vous cliquez sur l'icône à coté de votre page et que vous sélectionnez «Show» dans le menu contextuel, vous obtiendrez une page avec une erreur. Fermez la et repassez sur le Backend,
• Dans le menu de gauche cliquez sur «Template» (1), dans la colonne du milieu sur le titre de votre page (2)et enfin dans la frame de droite sur le bouton «Create template for a new site» (3),

Vous arrivez sur un tableau de 6 lignes, 2 colonnes contenant les lignes «Title», «Sitetitle»..., si ce n'est pas le cas dans le menu déroulant en haut sélectionnez «Info/Modify» (1),

cliquez sur «Click here to edit whole template record» (2 image au dessus), et remplacez le code du champ «Setup» de l'onglet «General» (1 image en dessous)par le code suivant:

# Default PAGE object:

page = PAGE

page.typeNum = 0

page.10 <styles.content.get

Dans l'onglet «Includes», dans le champ «Include static (from extensions)» (2 image en dessous), sélectionnez «CSS Styled Content (css_styled_content)» dans la colonne de droite (premier de la liste) puis sauvegardez le formulaire,

• Ouvrez un nouveau navigateur, tapez l'adresse http://localhost:8504/ et si tout s'est bien passé le texte saisi précédemment apparaît sur le site,
• Pour modifier ce contenu il suffit de cliquer sur «Page» (1)dans le menu de gauche du Backend, puis sur le titre de votre page (2)dans la colonne du milieu et enfin sur le petit crayon (3)dans la frame de droite (le menu apparaît au survol de la zone).

Avant de passer à la suite du tutoriel, vous pouvez tester d'intégrer les autres types de contenu existant pour découvrir par vous même, les fonctions offertes par TYPO3...

Construction d'une arborescence¶

Pour cette section on va repartir du site que vous avez créé au paragraphe précèdent, et on va le compléter afin de pouvoir ensuite travailler sur la gestion des templates.

Cliquez sur «Functions» (1), puis sur le titre de votre page (2). Dans la frame de droite (qui vous propose de créer de multiples pages), insérez au moins deux noms de pages (3)avant de cliquer sur le bouton «Create pages»(4),

On va maintenant recommencer l'opération mais cette fois-ci pour la première page que vous venez d'ajouter. Cliquez sur «Functions», puis sur la petite flèche à gauche de votre page initiale (si l'arborescence n'est pas déployée), puis sur le titre de votre première sous pages. Ajoutez quelques noms de page puis cliquez sur le bouton «Create pages»,

Vous avez maintenant une arborescence plus évoluée, on va pouvoir passer à sa mise en forme.

Votre premier site avec un template HTML¶

Avant d'attaquer le configuration de votre template dans TYPO3, il va falloir créer le fichier HTML sur lequel va se baser notre template.

Je vous en propose un ultra simple afin de le mettre en pratique rapidement. Ensuite vos aptitudes au HTML feront la différence, si vous voulez un peu l'étoffer.

Créer un fichier «montemplate.html» et insérer le code suivant à l'intérieur :

Votre premier site avec un template FLUID¶

Tout d'abord, faisons un point sur ce qu'est exactement FLUID. Pour cela je ne pense pas pouvoir faire mieux qu'OlivierSC (que les habitués du forum français connaissent bien) qui m'a autorisé à reprendre sa description que j'ai juste un peu modifiée.

La dernière version majeure de TYPO3 (la 6.x, qui s'est fait attendre) est basée sur un moteur de template appeléFLUID.

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 quelle extension.

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 extensions (ViewHelper).

Vous trouverez l'originale de cette description ainsi qu'une mise en situation très convaincante de FLUID à cette adresse: http://www.redpik.net/typo3/fluidifions-nos-developpements/ .

Revenons maintenant à notre site. Pour mettre en application ce moteur de template, il va falloir procéder en 2 étapes:

• Créer un nouveau fichier HTML,
• Modifier notre template TypoScript.

Attaquons-nous au fichier:

Créer un fichier «montemplatefluid.html» et insérer le code suivant à l'intérieur :

Votre premier site avec TemplaVoilà¶

Dans ce paragraphe, nous allons refaire le même site que précédemment, mais en utilisant à nouveau une autre méthode pour la gestion du template : TemplaVoilà.

Afin de pouvoir utiliser cet outil, il va au préalable falloir installer l'extension correspondante. Si vous n'êtes pas encore à l'aise avec la manipulation des extensions, vous pouvez trouver une présentation sur le sujet dans le chapitre «Premier pas avec les extensions» un peu plus loin dans cette documentation.

Une fois l'extension TemplaVoilà installée, on va pouvoir commencer.

Tout d'abord, il va falloir configurer l'extension. Pour cela, dans le menu «Extension manager» (1), cliquez sur TemplaVoilà puis placez-vous dans l'onglet «Configuration» (2)et faites un update à l'aide du bouton (3).

Pour la seconde étape, nous allons ajouter un répertoire sur notre serveur qui accueillera les fichiers de template. Dans le menu «Filelist» (1), cliquez sur l'icône associé à «fileadmin» (2)puis sur «New» (3). Dans la frame de droite, indiquez comme nom de répertoire à créer «templates» (4)puis cliquez sur «Create folders» (5).

• 
• Nous allons maintenant créer un nouveau fichier template «montemplateTV.html», contenant le code suivant:

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>TYPO3 pour les nuls</title>

</head>

<body>

<div id="body" style="width:800px;margin:auto;">

<div id="menu-haut" style="background-color:#7093DB;text- align:center;">Menu Haut</div>

<div id="bas" style="background-color:#fff;">

<div id="contenu" style="background- color:#fff;width:630px;float:right;padding:10px;">Contenu</div>

<div id="menu-gauche" style="background- color:#8F8FBD;width:150px;padding:10px;">Menu gauche</div>

</div>

</div>

</body>

</html>

Excusez la piètre qualité de ce HTML, mais je suis sûr que vous saurez trouver ou écrire mieux. L'essentiel pour TemplaVoilà sera de conserver les «id». :o)

Vous pouvez maintenant uploader votre fichier template dans le répertoire «fileadmin/templates» que nous avons créé à l'étape précédente. Si vous avez un doute sur la façon de procéder, vous trouverez le détail de l'opération dans le paragraphe «Votre premier site avec un template HTML».

L'extension TemplaVoilà s'accompagne d'un «Wizard» de création d'un nouveau site. Nous allons l'utiliser car même s'il crée une arborescence complexe, il permet de mettre en place de nombreux éléments automatiquement sans faire d'erreur de configuration ou de saisie. De olus, il crée un site complet que vous pourrez parcourir et modifier pour comprendre et tester certaines fonctionnalités de TYPO3 (notamment la rubrique «Content Elements» qui vous donnera un aperçu de tous les contenus basiques existants).

Pour débuter, il suffit de sélectionner le menu «TemplaVoilà» dans la colonne de gauche (1), puis de cliquer sur «Start wizard now» (2). Si vous avez raté une des deux étapes précédentes (création d'un répertoire, puis du fichier template), un warning apparaitra et vous ne pourrez pas lancer le wizard, n'hésitez pas à retourner au début de ce chapitre pour trouver ce qu'il vous manque.

Sur l'écran suivant, vous devez voir apparaître la liste des fichiers template disponibles dans le répertoire par défaut, et donc le fichier que vous avez uploadé. Si ce n'est pas le cas cliquez sur «Refresh» (2), si après ce clique vous ne l'avez toujours pas, n'hésitez pas à retourner au début de ce chapitre pour trouver ce qu'il vous manque. Si le fichier est bien présent, il vous suffit de cliquer sur «Choose as Template»(1),

Vous obtenez une prévisualisation (1)de votre fichier template, ainsi qu'un formulaire de configuration de votre nouveau site à compléter. Renseignez les deux champs obligatoires «Name of site» (2)et «Editor username» (3), puis cliquez sur «Create new site» (4).

• Après quelques secondes, vous aurez accès à l'étape 3 du wizard: le mapping de votre template. Un premier écran présente une animation de ce qu'est le mapping, vous pouvez prendre quelques instants pour la regarder puis cliquez sur «Start the mapping process»,
• Sélectionnez l'onglet «Mapping» (1), puis pour chaque élément «Data Element», utilisez le bouton «Map» (2)pour le mapper. Concrètement, le mappage va consister à relier un élément de votre objet «Data structure» (pré-configurée dans le cas de ce «Wizard»), à une balise de votre template HTML. Si, par la suite, vous approfondissez la méthode TemplaVoilà, vous aurez l'occasion de parcourir des documentations vous expliquant comment créer et modifier des «Data Structure». Dans le tableau de l'onglet «Mapping», vous trouverez les champs suivant:
  • «Data Element»: le nom de l'élément,
  • «Mapping Instructions»: des instructions pour vous orienter dans le choix de la balise à mapper en fonction du rôle de l'élément,
  • «HTML-path»: un information sur la balise mappée. En la survolant, l'id correspondant sera affiché, si la balise en possède un. Si ce n'est pas le cas, c'est l'enchaînement des balises qui sera affiché. Par exemple: «body/table/tr/td...». C'est pour cette raison qu'il est important de travailler avec des id pour obtenir un «mappage» plus robuste même en cas de réorganisation de votre template HTML.
  • «Action»: les boutons pour agir sur l'élément,
  • «Rules»: les régles établies à la création de l'élément et qui limite les balises «mappables» pour ce dernier.
• Une fois le clique effectué, la prévisualisation de votre template apparaît avec l'ensemble des balises, utilisables pour le mappage, apparentes. Par exemple dans le cas de votre objet «Sub menu», on va sélectionner le «div» adéquate (3). Si la prévisualisation, ne fonctionne pas vérifiez que «Mode: Exploded Visual» est sélectionné (4),
• Dans l'écran suivant, si la balise a bien été reconnue, il vous suffit de cliquer sur le bouton «Set» (5),

Une fois vos quatre éléments mappés, il vous suffit de cliquer sur le bouton «Save and return».

L'étape suivante est la sélection des éléments du «Header» à conserver. En effet, TemplaVoilà parcours votre template et va vous proposer l'ensemble des éléments que vous avez renseigner dans votre «Header», pour que vous sélectionniez ceux que vous souhaitez conserver. Comme pour l'étape 3, un premier écran vous propose une animation afin d'avoir un aperçu de la manipulation à venir.

• Cliquez sur le bouton «Select HTML header parts»,
• Placez-vous sur l'onglet «Header Parts» (1).Comme nous avons un template simple, il n'y a rien à récupérer dans le «Header». Cliquez sur «Save and Return» (2)pour passer à la suite du «Wizard».

La cinquième et dernière étape va consister à saisir nos objets TypoScript qui seront utilisés pour créer les menus en Frontend.

A l'étape 5 a, saississez le code suivant dans la zone de texte (1)puis cliquez sur le bouton «Write main menu TypoScript code» (2),

lib.mainMenu = HMENU

lib.mainMenu.1 = GMENU

lib.mainMenu.1.NO {

XY = [10.w]+20,20

backColor = |*| #CCCCCC || #EEEEEE |*|

10 = TEXT

10.text.field = title

10.offset = 0,13

10.align = center

}

lib.mainMenu.1.RO < lib.mainMenu.1.NO

lib.mainMenu.1.RO = 1

lib.mainMenu.1.RO {

backColor = #FF0000

10.fontColor = #ffffff

}

• A l'étape 5 b, saississez le code suivant dans la zone de texte puis cliquez sur le bouton «Write sub menu TypoScript code»,

lib.subMenu = HMENU

lib.subMenu.entryLevel = 1

lib.subMenu.1 = TMENU

lib.subMenu.1.NO {

linkWrap = <B>|</B><BR>

}

Le «Wizard» est maintenant complet, vous devez obtenir le message suivant:

De plus votre arborescence doit maintenant ressembler à cela:

Si vous vous placez en mode «List», puis sur la page «Site test» (1), vous aurez accès à un enregistrement de type «Template» que vous pouvez consulter pour voir la configuration minimum pour faire fonctionner TemplaVoilà.

De même, si vous vous placez sur le «Folder», «Storage Folder», vous aurez accès à un enregistrement de type «Template Object» et un de type «Data structure». Si vous éditez directement ce dernier, vous arriverez sur un formulaire avec la configuration XML de la structure qui ne sera pas forcément très explicite pour vous.

Si vous souhaitez manipuler ces deux objets, le mieux est de faire un clique sur l'icône du «Template Object» (1)puis de sélectionner «TemplaVoilà» (2).

Dans l'onglet «Information» (1), vous trouverez un bouton pour modifier votre «Data Structure» (2). Je ne vous conseille pas d'y toucher sans avoir à disposition la documentation «Futuristic template building» pour bien comprendre ce que vous faites. Dans l'onglet «Mapping» (3), vous pourrez refaire votre «mappage», si vous souhaitez disposer vos éléments différemment.

Votre site avec un template «TemplaVoilà» est maintenant prêt, pour le visualiser, il vous suffit de cliquer sur l'icône de la page «Site test» et de sélectionner l'option «Show».

Ce tutorial n'est qu'une toute petite partie de l'utilisation de TemplaVoilà, juste pour vous donner une première impression de cette autre méthode. Pour pouvoir connaître toute la puissance de cet outil, il vous est fortement conseillé de suivre la doc umentation «Futuristic template building» qui vous permettra d'entrer dans la création et la configuration de chaque élement consituant un template «TemplaVoilà» et ainsi de mieux appréhender son utilisation.

Trouver une extension¶

La meilleure adresse (il me semble que c'est la seule officielle), c'est bien sur www.typo3.org , et plus précisément dans «l'extension repository» (TER) : http://typo3.org/extensions/repository/ .

A cette adresse, vous arriverez sur une page dont l'en-tête est la suivante :

Cette en-tête se divise en quatre zones, un moteur de recherche (1), un menu déroulant pour sélectionner le classement à utiliser (2), une zone de filtre supplémentaire pour affiner votre recherche(3)et le nombre d'extensions correspondant à la recherche (4). Ces quatre zones sont suivies d'une première liste d'extensions.

Cette première liste correspond aux dernières extensions qui ont été uploadées sur le TER.

Dans cette rubrique du site, vous trouverez toutes les extensions disponibles pour TYPO3 à une exception près: la multitude d'extensions qui sont développées en local et qui ne sont pas mises en ligne car elles sont trop spécifiques à un projet donné ou trop expérimentales.

Enfin sachez qu'avec l'arrivée de la version 6.x de TYPO3 et sa nouvelle méthode de développement des extensions (Extbase + FLUID) un grand ménage a été programmé par la Core Team:

Toutes les extensions, pour lesquelles la version de TYPO3 préconisée n'est pas renseignée, disparaîtront de la liste par défaut, il faudra utiliser le filtre(3)pour les retrouver. Cette bascule étant prévue pour début Août 2013, le nombre d'extensions disponibles à cette date devrait diminuer. Pour plus d'informations, vous pouvez consulter la page suivante: http://typo3.org/news/article/announcing-ter-cleanup- process/ .

Utiliser une extension¶

La meilleure façon de sélectionner l'extension qui correspond à un besoin c'est d'utiliser le moteur de recherche, qui recherche les mots saisis dans le titre, la description et «l'extension key».

Une fois la recherche lancée, le moteur retourne la liste des extensions correspondantes sous forme de «bloc» rempli d'informations :

On y trouve le nom (1), l'auteur(2), la description (3), «l'extension key»(4),la version en cours (5), le statut (6), la dernière date de mise à jour (7), le nombre de téléchargement total depuis sa première publication(8)et enfin l'accès à la documentation (si elle existe)(8).

Le numéro de version(5)se présentesous la forme X.Y.Z :

• X correspond à une nouvelle version (en général tant qu'une extension est en version bêta, on a X=0),
• Y correspond à une nouvelle sous-version,
• Z correspond à une nouvelle version de développement ou de travail, elle n'apporte en général pas beaucoup de nouveauté.

Le statut (6)correspond à la stabilité de l'extension, mais il faut se méfier car il est déterminé par l'auteur au moment de la création de son extension. Une extension estampillée « Stable » pourra donc très bien correspondre à une extension en développement et contenant son lot de bugs tandis qu'une extension « Alpha » pourra correspondre à une extension très stable dont l'auteur a oublié de changer le statut.

Si vous cliquez sur le nom d'une extension, vous arriverez sur un nouvel écran proposant son lot d'informations complémentaires:

En plus d'y retrouver les éléments disponibles dans le résultat de la recherche, vous avez également accès à:

• un bouton pour télécharger la dernière version disponible (1),
• un onglet vous donnant accès au téléchargement de toutes les versions précédentes (2). Il peut être utile lorsque vous avez un conflit de version entre l'extension et TYPO3,
• un onglet pour parcourir en ligne la documentation de l'extension (3), si elle existe,
• un commentaire pour justifier l'ajout de la dernière version (4),
• un graphique des volumes de téléchargement pour les 8 dernières versions (5),
• la date de la première mise en ligne de l'extension (6),
• la liste des extensions dont dépend l'extension (7). Il faudra forcément installer ces dépendances pour que l'extension fonctionne. C'est également à ce niveau que vous trouverez les versions de TYPO3 concernée,
• la liste des extensions qui peuvent générer un conflit avec l'extension que vous allez télécharger (8).

Tout comme nous l'avons vu précédemment pour le statut, les dépendances et les conflits sont renseignés par l'auteur de l'extension dans un fichier de configuration de son extension. Les informations (ou l'absence d'information) peuvent par conséquent être plus ou moins fiables. Pour les dépendances, l'auteur aura plus de facilité à les renseigner correctement puisqu'il sait de quoi son extension à besoin. Pour les conflits, c'est plus difficile étant donné la quantité importante d'extensions existantes qu'il ne pourra pas vérifier une à une.

Une fois votre extension trouvée, il existe deux méthodes pour la rapatrier sur votre propre site : directement depuis le Backend, ou en deux temps, un premier depuis le site typo3.org puis un second dans le Backend.

Supprimer une extension¶

Comme on vient de le voir, il existe 3 niveaux d'installation : importer l'extension sur le serveur, installer l'extension pour qu'elle soit accessible dans le site et enfin configurer et utiliser cette extension.

Remarque : cette dernière étape n'existe pas toujours. Une extension de type «Documentation», par exemple, vous permettra juste d'accéder au fichier «.swx».

Pour supprimer une extension «proprement», il va donc falloir reprendre ces 3 étapes en sens inverse. En fonction du besoin de suppression, on enchaînera ou non les différentes étapes.

Si vous souhaitez supprimer une extension de type «Frontend», la première opération consiste à supprimer tous les contenus y faisant référence dans votre site. Pour cela, il suffit, par exemple, d'ouvrir chacun de ces contenus et de cliquer sur la poubelle à coté des boutons de sauvegarde (1).

Si vous vous arrêtez la : votre extension n'apparaît plus dans le Frontend, mais vous pourrez toujours créer de nouveau contenu qui l'utiliseront.

La seconde étape consiste à désinstaller l'extension en passant par le menu «Extension manager» (1).Cliquez sur le moins blanc sur brique verte (2)sur la ligne de votre extension. Dans la modale qui s'ouvre, il vous suffit de cliquer sur «Close window».

Si vous vous arrêtez la : votre extension n'est plus accessible pour être installée dans un contenu mais elle est toujours présente sur le serveur.

La troisième et dernière étape est la suppression physique de l'extension du serveur. Cliquez sur «Extension manger» (1), puis sur le titre de votre extension. Dans l'onglet «Maintenance» (2), il vous suffit de cliquer sur le lien«DELETE EXTENSION FROM SERVER» (3)dans la section «DELETE».

Remarque au passage : c'est également sur cette page que vous pourrez créer les fichiers compressés (.t3x) de vos extensions dans la section «Backup» et accéder aux dumps des tables de votre extension.

Si vous vous arrêtez la : votre extension n'est plus sur le serveur, la seule façon de l'utiliser à nouveau est de l'importer à nouveau depuis le site http://typo3.org/ , ou à partir du .t3x correspondant, si vous l'avez gardée quelque part sur votre serveur.

En dessous de cette ligne la documentation n'est plus à jour jusqu'à la page 49

Transfert de la base MySQL¶

Pour effectuer ce transfert, on va se servir de l'outil mis à disposition par Typo, c'est à dire PHPmyAdmin (1). Pour lancer l'export, il suffit de cliquer sur l'onglet correspondant (2)dans la partie supérieure de la page :

Dans la nouvelle fenêtre qui apparaît, il suffit de sélectionner toutes les tables (1), puis l'option «Structure and data» (2), et enfin il faut cocher les cases «Add 'drop table» et «Complete inserts» (3)avant de lancer l'export en appuyant sur «Go» (4).

Le script sql correspondant à votre base est ainsi généré dans la fenêtre. Pour le récupérer, un «Ctrl+A» vous permet de sélectionner tout le texte et à l'aide d'un copier/coller vous le sauvegarder en utilisant votre éditeur de texte. Pour la suite de la procédure, on va considérer que ce script a été sauvegardé dans le fichier «mabase.sql».

L'étape suivante va consister à déposer notre fichier au bon endroit de l'arborescence afin qu'il soit utilisable au moment de l'installation en 3 étapes.

Pour commencer, il nous faut l'arborescence. Pour cela, il faut installer un package sur votre serveur cible. On peut par exemple «poser» un package dummy en suivant les instructions du paragraphe «Première étape : Installation».

Ensuite, dans cette arborescence que vous venez d'installer, si vous ouvrez le répertoire typo3conf (1), vous pouvez voir le fichier «database.sql» (3).Il correspond au script qui permet par défaut de créer les tables «systèmes» de Typo3 (c'est à dire les tables minimum au bon fonctionnement de typo), tables que l'on retrouve également dans le fichier «mabase.sql» (2)puisqu'on a importé toute la base. Il suffit donc de placer notre fichier à cet endroit pour qu'il soit accessible par la suite.

Pour en finir avec le transfert de la base, il ne reste plus qu'à exécuter votre script sql via l'installation en trois étapes. Lors des deux premières étapes, il n'y a pas de changement. Une seule remarque, si vous pouvez conserver le même username et password, ainsi que le même nom de base sur vos deux serveurs (ancien + nouveau), c'est préférable comme nous pourrons le voir par la suite. Lors de l'étape 3, qui correspond à l'import de la base, vous avez à présent dans le menu déroulant, le choix entre le fichier «database.sql» et «mabase.sql». Sélectionnez le fichier «mabase.sql» et cliquez sur le bouton «Import database».

Remarque : Selon l'importance de votre site original, cette exécution peut prendre plus ou moins de temps et faire échouer l'importation à cause d'un dépassement du temps maximum d'exécution de script. Si cela se produit vous avez deux autres solutions afin d'importer votre base:

• Augmenter ce temps maximum, dans votre fichier php.ini en modifiant la valeur du paramètre «max_execution_time»,
• Importer le fichier «database.sql» lors de l'installation en 3 étapes et ensuite mettre à jour les tables systèmes avec votre script et importer les autres tables via le phpMyAdmin de votre nouveau serveur.

Transfert des fichiers¶

Maintenant que votre base a été importée, il ne vous reste plus qu'à importer les fichiers spécifiques à votre site, les autres ayant déjà été copiés au moment du dézippage du package dummy.

Avant tout chose, si vous voulez éviter les éventuels problèmes, je vous conseille de copier les répertoires : «fileadmin», «typo3conf», «typo3temp» et «uploads» de votre nouveau site dans un coin de votre disque dur. Ils correspondent à ceux que vous venez de dézipper du package mais les avoir à disposition peut s'avérer pratique en cas d'échec de l'import des fichiers.

En ce qui concerne le transfert de fichiers, il n'y a rien de plus simple, vous devez juste copier les répertoires «fileadmin», «typo3temp», «uploads» et «typo3conf/ext» de votre ancien site vers votre nouveau site.

Si pour une raison quelconque vous avez dû modifier un des fichiers du noyau de Typo (c'est à dire se trouvant dans un des répertoires «systèmes»), n'oubliez pas de transférer spécifiquement ce fichier afin de ne pas perdre le traitement que vous aviez mis en place.

Le dernier point à traiter est l'ensemble des fichiers qui se trouvent dans le répertoire «typo3conf» autres que le répertoire «ext» notamment le fichier «localconf.php». Pour ceux-ci, il existe deux possibilités :

• soit votre nouveau serveur est similaire à l'ancien au niveau de la configuration mysql (même username, password, host, nom de base et répertoire pour imagemagick et gdlib), dans ce cas vous pouvez transférer l'ensemble de ces fichiers,
• soit votre nouveau serveur est différent de l'ancien et dans ce cas il est préférable de «re-générer» ces fichiers en passant par le backend et en allant dans le menu «ext gestion» pour réinstaller vos extensions à partir du menu «Available extensions to install» et en allant dans le menu «Installation» pour re-configurer Imagemagick et gdlib.

Votre site est maintenant transféré, il ne vous reste plus qu'à vérifier que tout s'est bien passé en frontend et en backend au niveau du menu installation, de l'arborescence de votre site, de l'installation des extensions et du TypoScript.

En dessous de cette ligne la documentation est à nouveau à jour

Continuer à lire des documentations¶

Ce document vous permet une première prise de contact avec TYPO3, mais il vous reste encore beaucoup de chemin à parcourir avant de pouvoir considérer le connaître. Voici une sélection de documents intéressants à lire pour continuer l'exploration:

Visiter d'autres sites intéressants¶

Pour faire simple, voici la liste des favoris qui sont présents dans mon navigateur dans le répertoire TYPO3. Si j'ai jugé à un moment qu'il me serait utile de les garder, c'est qu'ils doivent avoir de l'intérêt. Ils doivent donc pouvoir vous être utiles également.

• http://www.typo3.org - Le site officiel de la communauté TYPO3. Vous y trouverez informations, extensions, documentations et beaucoup d'autres éléments indispensables.
• http://typo3-fr.org/ - Le site officiel de la communauté française TYPO3. Vous y trouverez des informations propres à la communauté française sur les Universités d'été, les TUGs... ainsi que le forum toujours très actif.
• http://wiki.typo3.org/Fluid - Wiki officiel de FLUID. Vous y trouverez l'essentiel des éléments basiques que vous pourrez utiliser pour créer vos templates toujours plus poussés techniquement.
• Exemple FLUID - Mon exemple du paragraphe «Votre premier site avec un template FLUID» est une libre interprétation de l'exemple de cette page. En la parcourant, vous pourrez compléter le site que nous avons créé.
• … à compléter :o)

((Unknown Property))¶

Si un lien ne fonctionne plus ou si vous voulez me soumettre un sujet, n'hésitez pas... mon mail est sur la première page de cette documentation et le sujet du forum: http://forum.typo3-fr.org/topic/10880-faq-du-forum/ toujours suivi.

Liste des restes à faire¶

• Compléter les informations manquantes ou incomplètes,
• Ajouter un tutoriel pour passer le Backend en français,
• Ajouter des remarques sur les problèmes rencontrés et les solutions trouvées lors des différentes étapes,
• Revoir le français et l'orthographe,
• Attendre vos retours pour améliorer le contenu,
• Ajouter d'autres adresses utiles pour débuter,
• Ajouter une section sur les migrations,
• Ajouter un paragraphe sur le moteur de recherche,
• Ajouter un paragraphe sur les Workspaces.
• Ajouter un paragraphe sur le Kickstarter pour les développeurs.
• Remplir à nouveau le tableau «Trucs et Astuces»

51