TP N° 1 : CMS Joomla Matière : ATELIER DEVELOPPEMENT WEB ET MULTIMEDIA Classe :
TP N° 1 : CMS Joomla Matière : ATELIER DEVELOPPEMENT WEB ET MULTIMEDIA Classe : TI 1 Enseignant : H. BOUKTHIR, H. Ben Rebah Durée : 6 heures Objectifs du TP Se familiariser avec le CMS Joomla et comprendre les mécanismes de construction d’un site web en utilisant un système de gestion de contenu. Apprendre à créer des articles et des menus d’un site web Joomla. Manipuler les articles, plugins, modules, composants et templates Joomla. Matériels & logiciels utilisés : Un micro-ordinateur (PC) WampServer : Apache, MySQL, PHP Le pack d’installation Joomla 3.3.0 Travail demandé : Installation de Joomla 3.3.0 Joomla est un éditeur de contenu en ligne (ou CMS) très populaire et possédant de nombreuses extensions pour un maximum de personnalisation. Pour commencer, vous allez télécharger le pack Joomla 3.3.0 complet en français. Une fois l'archive sur votre disque dur, décompressez celle-ci puis transférez l'intégralité du contenu du répertoire (et non le répertoire lui même) dans le répertoire /www/ du Wamp. Une fois l'intégralité des fichiers et dossiers transférés, veuillez vous rendre, via votre navigateur web, à la racine du répertoire dans lequel vous avez transféré vos fichiers. Ex.: si vous avez transféré les fichiers de votre Joomla dans la racine du WampServer (www) ”SiteJoomla ”, alors il vous faut taper dans votre navigateur http://localhost/ SiteJoomla Vous devriez alors voir s'afficher la première page d'installation (Configuration) en 3 étapes de votre Joomla. Par défaut, la langue du package que vous avez installé est en français. 1/47 Il vous faut renseigner le nom de votre site, l'adresse email du Super utilisateur, ainsi que son identifiant et un mot de passe fort qu'il vous faudra taper à nouveau. Vous pouvez également entrer, de façon facultative, une description pour votre site. Enfin, vous devez choisir si votre site sera en ligne ou non à la fin de l'installation. Après avoir validé la première étape, il vous sera demandé d'entrer les informations relatives à la base de données de votre Joomla. 2/47 Choisissez MySQLi en type de base de données, localhost en nom du serveur et root en utilisateur. Laissez le champ mot de passe vide. Le nom de la base de données ainsi que le préfixe est rempli par défaut de façon aléatoire. Vous pouvez toutefois le choisir si vous souhaitez vous organiser de façon particulière. En validant cette page, l'installeur Joomla créera automatiquement la base de données sans autre intervention de votre part. Sur la troisième étape, il est simplement question de choix du type de site ainsi qu'un récapitulatif de la configuration entrée précédemment. 3/47 Si vous débutez sur Joomla, nous vous conseillons de choisir un type de site en “données d'exemple pour apprendre Joomla, en français”. Vous aurez ainsi un site pré-rempli avec 4/47 des articles et configurations vous permettant d’appréhender plus facilement cet outil très complet. Il ne vous reste plus qu'à appuyer sur le bouton Installer ! Il vous reste alors une dernière action à réaliser, impérative : supprimer le répertoire d'installation. Il n'est désormais plus nécessaire d'aller chercher celui-ci via le FTP. Une simple action sur le bouton adéquat et l'opération est réalisée. 5/47 Voila, vous avez terminé. Il ne vous reste plus qu'à profiter de votre CMS Joomla. Administration de Joomla 3.3.0 Votre site Joomla comporte deux parties : La partie site (ou Frontend). C'est la partie “visible” ou “publique” du site. C'est celle à laquelle vos visiteurs et utilisateurs ont accès. La partie administration (ou Backend). C'est la partie “cachée” du site. C'est là que vous (et peut-être d'autres administrateurs) allez organiser ce qui sera affiché sur le Frontend de votre site. Ces deux parties sont accessibles aux adresses suivantes : La partie site (ou Frontend) : http://localhost/sitejoomla La partie administration (ou Backend) : http://localhost/sitejoomla/administrator 6/47 Ces deux parties sont accessibles aux Un petit tour du Frontend Si vous avez installé Joomla avec les données d'exemple, la page d'accueil de votre site ressemble à celle-ci : Pag e d'accueil avec données d'exemple Sur cette page d'accueil, vous retrouvez 4 articles publiés (1), un module de connexion (2), 3 menus de navigation (3), le titre du site (que vous avez choisi lors de l'installation) (4), un module de recherche (5), un fil d'Ariane (6), le copyright de votre site (7) et un lien dirigeant vers le haut de la page (8). Les données d'exemple vous donnent un aperçu de ce que vous pourrez réaliser avec Joomla 3. Ces données d'exemple vous présentent également le CMS, ses fonctionnalités, sa communauté (Joomla.org et Joomla.fr)... Prenez le temps de naviguer entre les articles, de les consulter. Vous pouvez également vous connecter au site. Après connexion, un nouveau menu (accessible seulement aux personnes enregistrées et connectées) s'affichera. A partir de ce menu (le Menu Membre), vous pourrez consulter votre profil, proposer un article et proposer un lien web. 7/47 Faites des tests, entrainez-vous. Un petit tour de l'administration (Backend) En accédant à la partie Backend de votre site (voir ci-dessus), vous arrivez sur cette page d'identification : Page de connexion à l'administration Entrez l'identifiant et le mot de passe que vous avez choisi à l'étape 1 de l'installation de Joomla, puis cliquez sur bouton Connexion. Un fois identifié vous arrivez sur le panneau d'administration de votre administration : 8/47 Panneau d'administration 1 – Le menu supérieur : à partir de ce menu, vous pouvez naviguer dans les différentes parties de l'administration. 2 – Les articles les plus récents. Les derniers articles ajoutés au site. 3 – Les utilisateurs actuellement connectés sur le site. Actuellement seul le Super Utilisateur est connecté. 4 – Les articles les plus populaires, classés par nombre de vues. 5 – Les icônes de raccourcis permettant d'accéder directement à certaines fonctionnalités sans utiliser les menus et sous menus de navigation. Ces raccourcis permettent de gagner quelques clics à chaque fois et un temps précieux au bout du compte. Vous devrez apprendre à vous en servir. 6 – Un accès vers votre compte ainsi qu'un lien de déconnexion de l'administration. Lorsque vous avez fini d'intervenir sur votre administration, il est conseillé de vous déconnecter. 7 – Un lien vers le frontend (partie publique) de votre site. 8 – Un lien vers le Panneau d'administration de l'administration (cette page). 9 – Le footer qui comporte également des liens déjà cités (un lien vers le site, un lien de déconnexion ainsi que les informations des utilisateurs connectés). 9/47 Ce menu est présent en permanence où que vous soyez sur l'administration du site. Cependant, dans certains cas (édition d'éléments comme les articles, modules ou éléments de menu par exemple) ce menu ne sera pas cliquable, vous remarquerez qu'il s'affichera en sous-brillance. Vous devrez donc quitter l'élément que vous êtes en train d'éditer (en le sauvant, ou simplement en le fermant) pour avoir de nouveau accès à ce menu. Ce menu se compose de sept éléments de menu, composés eux-mêmes de sous éléments. Voyons cela en détail. Système Le menu Système est composé de 6 sous éléments : Panneau d'administration : Retour au panneau d'administration, la page d'accueil de l'administration du site. Configuration : Cet élément de menu vous permet d'accéder aux paramètres suivants : o Site : Pour paramétrer le nom du site, l'éditeur par défaut, les métadonnées (description du site, mots-clés...), les paramètres SEO (Wikipédia), mettre le site hors ligne (utile pour les interventions de maintenance)... o Système : Pour régler vos dossiers 'logs', activer le débogage système, gérer le cache ou la durée des sessions... o Serveur : Pour paramétrer tout ce qui est en relation avec votre serveur, accès FTP, base de données... o Droits : Pour paramétrer la gestion générale des droits, le système ACL de Joomla!. Ce sujet sera développé dans le chapitre Gestion des Utilisateurs. o Filtres de texte : pour paramétrer les éléments HTML autorisés à être insérés dans les zones de contenu des éditeurs par les différents groupes d'utilisateurs. Déverrouiller : pour déverrouiller les tables qui auraient été verrouillées. Purger le cache : purger le cache de Joomla! peut être utile lorsque, par exemple, vous apportez des modifications et que celles-ci ne sont pas prises en compte. Purger les fichiers expirés : supprimer du cache seulement les fichiers expirés. Informations système : retrouvez ici toutes les informations de votre système. Utilisateurs Comme son nom l'indique, c'est dans ce menu que vous pourrez gérer vos utilisateurs vos groupes d'utilisateurs et vos niveaux d'accès. Depuis la version 2.5 de Joomla!, la gestion des utilisateurs a été nettement développée, un chapitre entier sera consacré à la gestion des utilisateurs sous Joomla!. Attention : en modifiant certains paramètres dans la gestion des utilisateurs, vous pouvez tout simplement vous interdire l'accès à l'administration. Avant de modifier ces paramètres, soyez certains de ce que vous faites, et faites des sauvegardes ! 10/47 Le Menu supérieur Le menu Utilisateurs est composé de 6 sous éléments : Gestions des utilisateurs : vous retrouvez ici l'ensemble des utilisateurs inscrits sur le site. Groupes : vous retrouvez ici l'ensemble uploads/s3/ fascicule-tp-web1-2015.pdf