Website X5 pour tous

L'acronyme CMS signifie, en anglais "Content Management System", ou, en français, "Système de gestion du contenu". Un site web CMS permet aux visiteurs, en fonction de privilèges d'accès contrôlés par un administrateur, de publier du contenu additionnel, de modifier ou de supprimer le contenu existant.

De tels sites sont généralement construit en langage php et sont appuyés sur une base de données MySql. Les plate-formes les plus connues et les plus populaires pour élaborer des sites CMS sont Mambo et Joomla!.

L'utilisation de modules CMS dans une page web créée sous Website X5 pose problème. Ce problème provient de la façon particulière qu'a WX5 de rebâtir le site en entier à chacune mise à jour, la plus minime soit-elle. De plus, suite à cette "reconstruction", WX5 remplace sur le serveur distant tous les fichiers HTML du site, y compris ceux qui n'ont pas été modifiés, et ce, même si l'utilisateur choisi la fonction "Exporter uniquement les fichiers modifiés depuis le..." à l'étape 5.

Il est très difficile, voire impossible, dans ce contexte, d'ajouter sur une page html de votre site WX5, une zone qui permettrait à votre client de publier lui-même ses nouvelles, ou de mettre à jour les statistiques de sa ligue de foot, à partir de son poste de travail, par exemple. En effet, toute exportation du site par l'administrateur, suite à quelque modification que ce soit, entraînerait un nouvel envoi sur le serveur de tous les fichiers html du site, et le laborieux travail de mise à jour de votre client serait irrémédiablement "écrasé" et perdu.

En, fait, l'énoncé du paragraphe précédent était vrai, jusqu'à ce qu'entrent en scène un petit utilitaire CMS gratuit, un éditeur de texte WYSIWIG, gratuit lui aussi et qui s'intègre sans difficultés majeures à l'utilitaire CMS, qui ne nécessite aucune base de données mais qui exigera un peu de jus de coude, un brin d'imagination et quelques trucs et astuces bien trouvées...

L'emploi de cette fonctionnalité permettra de construire des sites dynamiques, dans lesquels vos clients ou vos visiteurs, avec votre autorisation, pourront mettre à jour une partie du contenu d'un site web developpé avec votre logiciel de conception de site web favori.

• Le tutoriel qui suit vous montrera comment installer, en premier lieu, la section ADMIN de votre CMS. Cette section permettra à vos visiteurs autorisés de choisir les zones CMS de votre site et d'y intervenir en temps réel, grâce à l'éditeur fourni.

Vous verrez ensuite comment créer dans vos pages des zones CMS modifiables, comme celle présentée en page d'accueil de mon site de démonstration.

Une bien grande porte vient de s'ouvrir...

La fonction CMS est expliquée dans cette section dite Avancées, de ce site et ce n'est pas pour rien:

Les manipulations proposées sont complexes et doivent être rigoureusement respectées. Le code nécessaire a été adapté à partir du code original de LILCMS en fonction d'une architecture de dossiers définie et qui ne doit pas être modifiée, pour assurer le bon fonctionnement de votre CMS. Ce code original a également fait l'objet d'une traduction de l'anglais vers le français, lorsque possible, et a été amplement testé.

Notez qu'une zone CMS permet à des tiers de modifier le contenu de votre site. En aucun cas, les auteurs du site Website X5 pour tous ne pourraient être tenu responsables de quoi que ce soit découlant de l'application des fonctionnalités décrites dans le présent tutoriel. Il est fortement recommandé que l'accès à la partie ADMIN de la zone CMS soit protégé par un contrôle d'accès rigoureux. Cette portion du travail relève entièrement de la responsabilité du concepteur du site où la zone CMS aura été implantée.

Haut de page

Pour implanter une opu plusieurs zones CMS dans vos pages, vous devez au préalable télécharger trois archives zip.

• La première, "cms.zip", contient le code qui permet de construire la première partie de la zone ADMIN. Veuillez noter que le script original intitulé LilCMS a été adapté et traduit à partir de l'anglais (script original et informations disponibles sur le site de l'auteur). Une correction importante a également été apportée à ce script, qui ne fonctionne pas normalement dans son état d'origine.

Vous devez donc télécharger notre version du code, à droite, en extraire l'archive, qui ne contient qu'un seul fichier, que vous conservez au chaud, dans un dossier quelconque sur votre disque dur en vue de son utilisation dans une étape subséquente de ce tutoriel. Ne modifiez pas le contenu de ce fichier!

• Téléchargez ensuite notre version adaptée de l'éditeur de texte WYSIWYG "tynimce.zip", à droite. Il s'agit d'un éditeur très puissant, qui offre de très grandes possibilités de modification d'une zone CMS (ajout d'image, ajout de liens, de flash, etc..). Les connaisseurs reconnaîtront l'éditeur de texte de Joomla!. Vous trouverez la version originale et des plugins supplémentaires ici.

Notez que notre version de cet éditeur a déjà été francisée et qu'il vous est fortement recommandé de télécharger notre archive, en lieu et place de la version originale. Vous devez ensuite extraire le contenu de cette archive (ne vous laissez pas décourager par le nombre de fichiers contenus dans l'archive. La plupart sont minuscules) dans un dossier sur votre disque dur. Le contenu sera utilisé plus tard, à l'étape 3 de ce tutoriel. Ne modifiez pas le contenu après extraction.

• Finalement téléchargez l'archive "code_proprietes_avancees.zip" toujours à droite) et décompressez-là dans le dossier mentionné plus haut. cette archive contient un seul fichier. Ne modifiez pas le contenu de ce fichier, qui sera utilisé à l'étape 4 du tutoriel.

Étape terminée!

Haut de page

Vous devez maintenant créer deux nouveaux dossiers à la racine de votre serveur. Pour ce faire, vous pouvez au départ vous servir de la fonction Exporter, à l'étape 5 de Website X5.

• Cliquez sur l'onglet Exporter
• Choisissez Exporter le site sur Internet, cliquez sur Suivant
• Je présume que vos identifiants sont déjà inscrits, sinon, faites-le
• Cliquez sur Suivant
• Cliquez sur Démarrez. Si vos identifiants sont corrects, la connexion se fera et vous obtiendrez la fenêtre illustrée à droite.
• Cliquez sur l'icône "Créer un nouveau dossier" (2ème, à partir de la gauche)
• Dans la fenêtre pop-up qui apparaît, inscrivez "backup" (sans les guillemets, bien sûr, attention à l'orthographe).
• Cliquez sur OK
• Cliquez à nouveau sur l'icône "Créer un nouveau dossier"
• Dans la fenêtre pop-up qui apparaît, inscrivez "content" (sans les guillemets, bien sûr, attention à l'orthographe).
• Cliquez sur OK

Avec un logiciel FTP-Client (car Website X5 ne permet pas la prochaine manipulation) repérez le dossier "backup" sur votre serveur, et ajustez les propriétés de ce dossier à 777. Cet ajustement est essentiel, pour assurer le bon fonctionnement de l'éditeur CMS.

Étape terminée!

N.B.: Vous pouvez aussi utiliser un logiciel FTP_Client, comme Filezilla, pour créer les dossiers requis. Un tel logiciel sera d'ailleurs requis aux étape 3 et 5 lors de la création des zones CMS... Alors aussi bien télécharger gratuitement Filezilla, pour lequel il existe une version française, que vous trouverez facilement sur Google.

Notez que le présent tutoriel n'explique pas comment utiliser un logiciel FTP-Client, ce qui est laissé à votre entière discrétion.

Haut de page

Bien que le script lilcms (téléchargé à l'étape 1, plus haut) soit le premier pas vers la création d'une zone modifiable par les visiteurs, ses fonctions d'édition sont pour le moins... nulles. De fait, lilcms ne prmet que de modifer le texte d'un article déjà publié, c'est à dire qu'il permet de changer les mots... par d'autres mots... sans plus.

C'est donc ici qu'entre en scène Tynimce, un puissant éditeur de texte, connu, amplement utilisé, amplement testé et très documenté.

Nous avons choisi d'intégrer l'éditeur Tynimce, (en version française) dans la page Admin de notre zone CMS, en raison de sa puissance et de sa souplesse.

• La première étape de cette intégration a été réalisée précédemment, lors du téléchargement de l'archive.
• Si ce n'est pas déjà fait, décompressez l'archive tynimce.zip dans un dossier désigné de votre disque dur. Après décompression, vous devriez obtenir, dans ce dossier, un dossier principal nommé "tynimce", qui contient lui-même cinq sous-dossiers et quelques fichiers. Les sous-dossiers contiennent parfois plusieurs sous-dossiers, emplis de fichiers. Au total, Tynimce contient plusieurs centaines de fichiers, mais que cela ne vous décourage pas, car la grande majorité sont minuscules.
• Ne touchez à rien, l'archive fournie sur cette page contient tout ce qu'il faut, au bon endroit, pour que ça fonctionne!
• À l'aide de votre logiciel FTP-Client (pourquoi pas Filezilla?), téléchargez, à partir de votre disque dur le dossier principal Tynimce à la racine de votre serveur. En sélectionnant le dossier principal tynimce, dans le dossier désigné de votre disque dur, et en le téléchargeant à la racine du serveur, cette opération devrait faire en sorte de télécharger tous les fichiers de tynimce, tout en reproduisant l'architecture du dossier).

Étape terminée !

Haut de page

Vous êtes fortement encouragés à respecter scrupuleusement le processus suivant:

1) Dans Website X5, à partir de l'onglet 2, Création du plan du site, ajoutez une nouvelle page et renommez-là ADMIN (pour les besoins du tutoriel, vous pouvez utiliser le nom que vous voulez).

2) Rendez cette page invisible (icône Page invisible).

3) Double-cliquez sur la page Admin pour passer en mode Création de la page.

4) Faites glisser un objet Code_HTML sur la page et ouvrez-le.

5) Ouvrez le fichier issu de l'archive cms.zip, copiez-en tout le contenu.

6) Collez ce contenu dans l'objet CODE_HTML

7) Ajustez la hauteur de l'objet à 600 pixels et cochez la case Afficher les barres de défilement (pratique, si vous vous utiliser un menu vertical, qui vient occuper une partie de l'espace disponible sur la page).

8) Assurez-vous que le code a été copié en entier et qu'il n'a pas été modifié, puis cliquez sur OK

9) Revenez en mode Création du plan du site, sélectionnez la page Admin et cliquez sur l'icône Propriétés de la page.

10) Cliquez sur l'onglet Avancées

11) Ouvrez le fichier de l'archive "code_proprietes_avancees", copiez-en tout le contenu.

12) Collez le contenu du fichier "code_proprietes_avancees" dans la section "Code à insérer dans l'entête de la page:" de la fenêtre Avancées.

13) Assurez-vous que tout le contenu du fichier y est.

14) Dans la liste déroulante "Extension du fichier créé", choisissez l'extension PHP (Étape primordiale, sinon le CMS ne fonctionnera pas)

15) Cliquez sur Ok

Étape terminée!

N'oubliez pas de sauvegarder votre travail au fur et à mesure!

Haut de page

Afin que le CMS fonctionne correctement, vous devez maintenant placer dans vos pages des zones modifiables, c'est à dire un ou plusieurs endroits où les visiteurs pourront intervenir en direct sur le contenu présenté.

L'exemple suivant vous montrera comment procéder. Vous pourrez par la suite adapter à vos besoins et personnaliser la démarche.

En premier lieu:

• Avec le Bloc-notes de Windows, (Notepad en anglais), je crée un document texte, qui contient la ligne suivante: "Nouvelle du jour: une zone CMS vient d'être ajoutée sur mon site"
• J'enregistre ce document sous le nom nouvelles.txt
• À l'aide d'un logiciel FTP-Client (j'ai déjà suggéré FileZilla?), je télécharge le fichier nouvelles.txt dans le dossier content, créé à la deuxième étape, plus haut.
• Toujours avec mon logiciel FTP-Client, je repère le fichier nouvelles.txt dans le dossier content sur mon serveur et j'ajuste les permissions de ce fichier à 777

Passons à Website X5:

• J'ouvre la page où je veux placer une zone modifiable (Onglet 3 de WX5, Création des pages)
• Je fais glisser dans cette page, à l'endroit désiré, un objet Code_HTML, que j'ouvre ensuite.
• Dans cet objet Code_HTML, j'inscris l'instruction suivante:

<? include('content/nouvelles.txt') ?>

• J'ajuste la hauteur de l'objet en fonction de mes besoins, je ne coche pas la case "Afficher les barres de défilement"
• Je clique sur OK
• Je passe en mode "Création du plan du site"
• Je m'assure que la page qui contient la zone modifiable crée précédemment est sélectionnée
• Je clique sur l'icône Propriétes de la page
• Je clique sur l'onglet AVANCÉES
• Je fais dérouler la liste "Extension du fichier créé"
• Je choisi l'extension PHP
• Je cliques OK
• Je sauvegarde et j'exporte sur mon serveur

Étape terminée !

Haut de page

Lors de l'affichage de votre page web, l'instruction <? include('content/nouvelles.txt') ?>, placée dans l'objet Code_HTML, à l'étape précédente, demande au serveur d'afficher dans votre page le contenu du fichier "nouvelles.txt" que vous avez judicieusement téléchargé, à l'étape précédente, dans le dossier "content" (créé à l'étape 2, plus haut). Notez que les instructions php contenues dans la page s'éxécutent sur le serveur avant l'affichage des résultats dans votre navigateur.

Les permissions de ce fichier sont ajustées à 777, ce qui veut dire, en gros que ce fichier peut être modifié sans restriction, que ses droits d'accès sont ouverts.

C'est ici que la combinaison des éléments du script Lilcms et de l'éditeur de texte TYNIMCE prend toute sa force. LILCMS offre une plate-forme qui permet la sélection, l'édition, la sauvegarde et la récupération des fichiers dans un style CMS. TYNIMCE offre une fenêtre d'édition complète et génére de façon automatique et transparente le code HTML requis pour afficher correctement le contenu du fichier txt à l'endroit approprié dans votre page. En fait, TYNIMCE transforme le contenu de la fenêtre d'ésition en code HTML.

Lorsque votre visiteur accédera à la page ADMIN de votre site (voir étape 4, plus haut) l'affichage suivant lui sera présenté.
Étudions-en les composantes:

1 Dans la section de gauche de la partie ADMIN, vous pouvez voir la liste des fichiers déposés dans le dossier "content", sur votre serveur. Notre exemple n'en contient qu'un seul fichier (nouvelles.txt), associé à une seule zone modifiable mais il est tout à fait possible d'implanter plusieurs zones modifiables, dans une même page ou encore disséminées sur plusieurs pages de votre site web. La liste déroulante, sous le libellé "Sélection du fichier:", permettra de choisir le fichier à éditer. (Voir le chapitre des CONCLUSIONS, plus bas, pour d'autres suggestions sur les façons de faire, si plusieurs zones modifiables sont requises).

2 Après avoir choisi le fichier désiré dans la liste déroulante, cliquez le bouton Chargez pour...

3 ... afficher le contenu du fichier dans l'éditeur TYNIMCE. Le titre du fichier apparaîtra à côté de la mention "Editer le fichier:", confirmant que le bon fichier a été placé dans l'éditeur. Dès qu'il apparaît dans cette fenêtre, le contenu du fichier peut être modifié.

4 Les boutons affichés dans l'éditeur TYNIMCE correspondent à autant de fonctions différentes. Les attributs du textes peuvent être modifiés. Des styles peuvent être appliqués, la police peut être remplacée, la taille de la police utilisée peut être ajustée. Il est possible d'insérer des images, des tableaux, des liens URL, des média FLash, des Smileys, des clips vidéos, etc...

Des info-bulles sont disponibles pour tous les boutons, au survol de la souris et la plupart des fonctions sont intuitives et faciles d'emploi. Voilà pourquoi nous n'expliquerons pas en détail les fonctionnalités de l'éditeur. Nous vous invitons à visiter le site de TYNIMCE pour consulter la documentation (malheureusement anglophone...).

Les modifications apportées au contenu du fichier s'affichent immédiatement dans la fenêtre identifiée au point précédent, selon le principe WYSIWYG (What you see is what you get: vous obtenez ce que vous voyez).

5 Lorsque vous êtes satisfait de l'édition, cliquez sur ACTUALISER. Ceci a pour effet d'écraser le contenu du fichier ouvert en édition par le fichier modifié. Ainsi, si vous avez fini d'éditer le fichier nouvelles.txt et que vous cliquez sur le bouton ACTUALISER, le contenu du fichier dans le dossier "content" sera remplacé par le contenu qui apparaît dans la fenêtre de l'éditeur. Si le fichier nouvelles.txt est présenté, par exemple sur la page d'accueil du site, un retour à cette page d'accueil vous présentera alors le fichier nouvelles.txt actualisé. Le contenu initial aura été remplacé par le contenu nouvellement édité.

Des modifications réalisées en CMS, selon la présente méthod, ne seront pas affectées par des modications apportées dans Website X5 ou par une nouvelle exportation des fichiers du site, sous Website.

6 Cliquez sur le bouton SAUVER pour placer une copie du fichier édité dans le dossier "backup" sur le serveur. L'état de la sauvegarde sera indiqué à droite du libellé "Sauvegarde" tout juste au-dessus des boutons.

7 Cliquez sur le bouton RESTAURER si vous voulez annulez les modifications en cours et remplacer le contenu dans l'éditeur par la dernière version sauvegardée, au point précédent. ATTENTION: si vous cliquez sur SAUVER avant de cliquer sur RESTAURER, il ne sera plus possible de revenir en arrière...

Étape terminée!

Haut de page

Joomla! ou CMS dans Website X5?

Tout dépend des besoins. Pour un sytème de gestion du contenu global, avec contrôles d'accès et privilèges d'édition pointus, mieux vaut opter pour Joomla!, ou l'équivalent. Si vous avez besoin d'un CMS appuyé sur une base de données MySql pour stocker et gérer le contenu d'un site web, encore une fois, l'option Joomlà! est à considérer, compte tenu que cette plate-forme Joomla! est entièrement gratuite, multilingue, et que ça s'installe chez la plupart des hébergeurs.

Pour tout le reste, il y a Website X5, LilCMS et Tynimce, tel qu'expliqué dans cette page...

Création et nomenclature des fichiers .txt

Dans le tutoriel présenté dans cette page, on vous recommande d'utiliser le bloc-notes de Windows pour créer les fichiers .txt qui seront affichés dans la zone CMS appropriée. Pour ma part, afin de me simplifier le travail, je me limite au minimum vital dans l'utilisation du bloc-notes. Quelques mots suffisent, on sauvegarde sous le nom voulu et on exporte dans le dossier "content". Par la suite, on profite de la puissance de l'éditeur Tynimce pour compléter le contenu... facile...

Par ailleurs, le tutoriel explique comment installer UNE zone CMS, sur une page web. Rien ne vous empêche d'insérer plusieurs zones modifiables, pour répondre à vos besoins. Ces dernières s'installent sur une même page ou un peu partout au travers de votre site. Vous n'avez qu'à répéter l'étape 5, plus haut, pour insérer, où bon vous semblera, les zones CMS requises.

Agissez cependant en gardant en tête que les visiteurs autorisés auront à modifier le contenu: il est facile de se perdre dans un dédale de fichiers et d'éditer le mauvais contenu... à ce titre, je vous recommande de nommer vos fichiers .txt en fonction de leur rôle ou de leur emplacement dans votre site: nouvelles.txt, resultats_hebdomadaires.txt, etc... à vous de voir...

Sécurité:

Vous ne voudrez sûrement pas permettre à la planète entière l'accès à l'édition de votre contenu! Il sera donc fort sage de placer votre page ADMIN dans une zone réservée. Voir notre série de tutoriels pour la façon de procéder.

Note importante:

Il n'est pas permis d'enlever des affichages les mentions qui se rapportent aux applications Lilcms et de TYNIMCE, afin de respecter les efforts et les droits d'auteurs des concepteurs, et ce, même s'il est permis d'utiliser gratuitement leur produit.

Haut de page

IManager: Téléchargements de fichiers à partir d'un PC et gestion des images en mode CMS

La version de base de Tynimce comporte un "plugin" qui permet à vos visiteurs de télécharger un fichier image à partir ... du Net. En effet, le plugin intégré à l'éditeur Tynimce ne supporte que les téléchargements à partir d'un serveur web.
Il n'est pas possible avec cette fonction de télécharger des fichiers à partir de son poste de travail, ce qui simplifierait singulièrement le travail pour les visiteurs autorisés à éditer une zone modifiable.

Heureusement, il y a une solution à ce problème: le plugin IManager, de net4visions.

Comme ce plugin est assez lourd (l'archive au format zip fait plus de 4megs, le produit extrait en pèse le double...), que son installation demande un soin méticuleux et que tous ne voudront n'en verront pas l'utilité, je me permet de fournir les fichiers d'installation séparément. Voici comment procéder pour installer IManager dans Tynimce

1) Téléchargez les fichiers, à droite.

2) Extrayez sur votre disque dur le contenu de l'archive IManager. Ne soyez pas surpris, on vous l'a dit: ça donne un peu près de 8 megs de fichiers...

3) À l'aide d'un logiciel FTP-Client, connectez-vous au serveur de votre site web, où je présume que vous avez déjà installé Tynimce. Vous devez télécharger la totalité des fichiers, sans y apporter un seul changement, dans le dossier /votreserveur.com/public_html/tinymce/jscripts/tiny_mce/plugins
Évidemment, vous remplacez votreserveur.com par les coordonnées de votre serveur.

4) L'étape précedente étant complétée, en vous servant de votre logiciel FTP-Client, repérez le dossier /public_html/tinymce/jscripts/tiny_mce/plugins/imanager/temp et ajustez les permissions de ce dossier à 777.

5) Repérez maintenant le dossier /public_html/tinymce/jscripts/tiny_mce/plugins/imanager/scripts/phpThumb et assurez-vous que ses permissions sont à 755 (ou 777).

6) Repérez le dossier /public_html/tinymce/jscripts/tiny_mce/plugins/imanager/scripts/phpThumb/cache et assurez-vous que ses permissions sont réglées à 755 (ou 777).

7) À la racine de votre serveur (généralement /public_html/ ) créez un dossier nommé uploads et dossier nommé gallery et réglez les permissions de ces deux dossiers à 755 (ou 777). Respectez scrupuleusement l'orthographe de ces deux dossiers, puisque celle-ci est reprise telle quelle dans un fichier config du plugin.

8) Extrayez le fichier contenu dans l'archive prop_avancees_imanager.zip, téléchargée précédemment.

9) Copiez le contenu intégral de ce fichier et collez-le dans les Propriétés de la page, Onglet Avancées, tel que décrit à partir des instructions 9) et suivantes, de l'étape 4: Création de la page ADMIN, plus haut sur cette page (le code de l'archive prop_avancees_imanager.zip doit être installé en lieu et place de celui proposé à l'étape 2, plus haut. Supprimez tout code existant dans la section Code à insérer dans l'entête de la page, au besoin).

10) Quand toutes ces étapes sont réalisées, enregistrez votre travail et exportez votre site sur le serveur. Si tout fonctionne tel que prévu, un bouton pour le plugin IManager sera présent dans la 4ème ligne de boutons de l'interface Tynimce, tel que montré plus bas.

La version de IManager fournie présentement est en anglais.
Une version française de IManager est actuellement en préparation et l'archive sera ajustée en conséquence dès que possible.

Haut de page