Créer son site Internet avec JOOMLA

Transcription

1 Créer son site Internet avec JOOMLA Par Jean-Claude GERARD Ecole Nationale de Voile et des Sports Nautiques Document réservé au réseau France Station Nautique

2 Jean-Claude GERARD 01/12/2011 Sommaire Xampp 3 Xampp c est quoi? 3 Installation 3 Lancement du serveur Xampp 5 Création d un premier site Internet 7 Installation de joomla 7 Le menu configuration de joomla 19 La page site 19 La page Système (ci-dessous) 20 La page serveur 21 Installation de nouvelles extensions 21 Installation d un nouvel éditeur 21 Qu est ce qu un éditeur? 21 Pourquoi ajouter un nouvel éditeur à Joomla? 22 Installation du composant Xmap 24 Qu est ce que c est que ce composant? 24 Téléchargement et installation 24 Le composant Ckform 27 Qu est ce que c est que ce composant? 27 Téléchargement et installation 27 Composant Joomfish 28 Qu est ce que c est que Joomfish? 28 Téléchargement et installation 28 Le plug-in Very simple image gallery 29 Qu est ce que c est que ce plug-in? 29 Installation de ce plug-in 29 Ou retrouver ce plug-in? 29 Définition de la structure (architecture) du site 31 Qu est ce qu un template? 32 Création des sections et catégories 34 Création des articles avec l éditeur JCE 36 Article simple contenant du texte 36 Article contenant une vidéo youtube 38 Article contenant une photo (le gestionnaire d images JCE) 39 Article contenant une carte google maps 45 Création des pages contact et adhérer avec le composant CK Forms 46 Page de contact 46 Création de la page «Adhérer» 52 Création de la page «nos photos» : plug-in very simple image gallery 55 1 Ecole Nationale de Voile et des Sports Nautiques

3 Créer son site Internet avec Joomla Affichage du site côté public (front-end) 57 Création de nos menus 59 Création des menus 60 Création des éléments de menus : le gestionnaire d éléments de menu 60 Le menu accueil 60 Le menu Les disciplines 65 Le menu Prestations 65 Ajout d un module d identification 70 Création du module Recherche 72 Création d un menu horizontal 74 Mentions légales 78 Maintenance et sauvegarde de ses données 79 Installation de son site chez l hébergeur 84 Transfert de son site 84 Transfert des données 87 2

4 Jean-Claude GERARD 01/12/2011 Créer son site Internet avec Joomla Xampp Xampp c est quoi? Xampp est un ensemble de logiciels qui va vous permettre d installer facilement un serveur Web sur votre ordinateur, afin de pouvoir concevoir votre site directement sur votre ordinateur avec presque toutes les fonctionnalités qu il aurait une fois mis en place chez votre hébergeur (donc sur Internet)! Parmis les logiciels que je vous ai fournis installez si ce n est pas déjà fait le logiciel xampplite-win comme indiqué ci-dessous. Installation Vous pouvez laisser C:\ comme répertoire d installation ou choisir un autre emplacement ou vous souhaitez installer ce logiciel. Cliquez ensuite sur Install. Installation de Xampp en cours. 3 Ecole Nationale de Voile et des Sports Nautiques

5 Créer son site Internet avec Joomla A la fin de l installation cette fenêtre s affiche. Cela vous demande si vous souhaitez créer un raccourci sur votre bureau. Laisser «y» et appuyez sur la touche Entrée Laissez également «y» comme choix et appuyez sur la touche Entrée. Laissez «n» comme choix et appuyez sur la touche Entrée. Appuyez sur la touche Entrée. Appuyez sur la touche Entrée. 4

6 Jean-Claude GERARD 01/12/2011 Tapez x et appuyez sur la touche Entrée. Cela fermera cette fenêtre. Le serveur Web est maintenant installé sur votre ordinateur dans le répertoire c:\xampplite Lancement du serveur Xampp Par défaut l installation qui a été faites ici ne démarre pas les services nécessaires à l utilisation de xampp. Pour les démarrer vous devriez avoir sur votre bureau un raccourci vers xampp control panel Double cliquez sur cette icône pour afficher la fenêtre ci-dessous. 5 Ecole Nationale de Voile et des Sports Nautiques

7 Créer son site Internet avec Joomla Si les services Apache et MySql sont arrêtés, vous devrez cliquer sur les 2 boutons Start Quand les services ont démarrés le message Running sous fond vert s affiche vous pouvez réduire cette fenêtre Cliquez pour réduire la fenêtre L icône xampp s affiche dans la barre des tâches indiquant que le serveur est actuellement lancé. Si le raccourci ne se trouve pas sur le bureau, il vous faudra alors vous rendre dans le dossier c:\xampplite afin de lancer le programme xampp-control 6

8 Jean-Claude GERARD 01/12/2011 xampp-control Liste des dossiers contenus dans le répertoire xampplite Le dossier htdocs est important, car c est dans ce dossier que vous allez créer vos sous-dossiers qui contiendront chacun un site Web. Ce que vous devez retenir : le dossier htdocs contiendra vos sites web Création d un premier site Internet Installation de joomla Tout d abord il nous faut un espace pour le créer. Si vous avez bien suivi, cet espace nous allons le créer dans le répertoire htdocs. 7 Ecole Nationale de Voile et des Sports Nautiques

9 Créer son site Internet avec Joomla Créez un nouveau répertoire (dossier) dans htdocs que nous allons nommer site-structure. Vous remarquerez que nous n utilisons pas d espaces ni de caractère accentué pour nommé ce dossier. Notre répertoire créé dans le répertoire htdocs. Vous pouvez noter que htdocs contenait déjà certains éléments (à ne pas supprimer!) Dans ce nouveau dossier site-structure nous allons pouvoir mettre tous les fichiers et dossiers qui constitueront notre site Internet. Dans le cas présent nous souhaitons créer un site Internet avec le système de gestion de contenus Joomla. C'est-à-dire que nous n aurons pas besoin d utiliser un logiciel externe pour créer notre site, que nous pourrons le créer simplement avec un simple navigateur Internet (Internet Explore, Mozilla Firefox, etc.). Commencez par vous procurez une version de Joomla. Vous devez disposez dans le dossier logiciels (sur votre clef usb ou sur le cd) de la version de Joomla. Ce fichier ce nomme Joomla_ Stable-Full_Package_fr.v2.zip. Il s agit d un dossier compressé qu il va nous falloir décompresser ou extraire. Pour ce qui suit vous pouvez installer le logiciel 7-zip qui va vous permettre de faire cela et qui se trouver dans le dossier logiciel. Commencez par copier ce fichier sur votre bureau par exemple. Commençons à décompresser Joomla_ Stable-Full_Package_fr.v2.zip en sélectionnant ce fichier et en effectuant un clic droit avec la souris afin d afficher le menu contextuel qui doit ressembler à peu près à celui de la figure ci-dessous. Ce qui est important est de choisir 7-zip Extraire vers «Joomla_ Stable-Full_Package_fr.v2\» (il se peut que le nom extraire vers soit afficher en anglais et donc ce serait Extract to ) 8

10 Jean-Claude GERARD 01/12/2011 Extraction / Décompression du fichier Joomla_ Stable-Full_Package_fr.v2.zip Maintenant vous allez vous rendre dans le dossier décompressé qui a été créé sur votre bureau et sélectionner tout ce qui se trouve à l intérieur (Edition Sélectionner tout) et copier tous les éléments (Edition Copier). L objectif est de mettre tout cela dans le dossier site-structure que vous avez créé dans le dossier htdocs (c:\xampplite\htdocs\site-structure) Une fois dans le dossier site-structure collez les éléments copiés précédemment (Edition Coller). Ouvrez votre navigateur Internet (pour ma part j utilise dans les captures d écrans qui suivent Mozilla Firefox) Saisissez l adresse suivante Appuyez sur entrée pour valider et afficher la fenêtre suivante 9 Ecole Nationale de Voile et des Sports Nautiques

11 Créer son site Internet avec Joomla Si vous ne voyez pas l écran ci-dessus c est que vous n avez probablement pas démarré les services Apaches et MySql, comme indiqué en page 3 de ce document! Laissez le choix par défaut si vous souhaitez installer Joomla en langue française et cliquez sur Suivant 10

12 Jean-Claude GERARD 01/12/2011 Cette page (ci-dessus) se charge de faire des tests de pré installation, cliquez ensuite sur Suivant. 11 Ecole Nationale de Voile et des Sports Nautiques

13 Créer son site Internet avec Joomla La page ci-dessus vous affiche les termes du contrat de la licence GNU utilisée par Joomla. Cliquez sur Suivant. 12

14 Jean-Claude GERARD 01/12/2011 Pour le nom du serveur, indiquez localhost Nom d utilisateur : root Mot de passe aucun Nom de la base de données : choisissez un nom de base en minuscules, sans accents ni espaces (exemple structure) Cliquez sur Suivant 13 Ecole Nationale de Voile et des Sports Nautiques

15 Créer son site Internet avec Joomla Ne remplissez rien ci-dessus et cliquez directement sur Suivant 14

16 Jean-Claude GERARD 01/12/2011 Dans l écran ci-dessus vous pouvez donner un nom à votre site (ce nom vous pourrez le modifier par la suite sous Joomla), puis vous saisissez une adresse mail (que vous pourrez également modifier par la suite) et enfin un mot de passe qui vous servira à administrer joomla (noter bien ce mot de passe). Dans le cas présent nous n installerons pas les données exemple! Cliquez sur Suivant 15 Ecole Nationale de Voile et des Sports Nautiques

17 Créer son site Internet avec Joomla Il vous est demandé de supprimer le dossier installation. C'est-à-dire que l on vous demande de supprimer le dossier installation qui se trouve dans votre dossier site-structure. Dossier à supprimer! Sélectionnez ce dossier et appuyez sur la touche Suppr de votre clavier. Vous pouvez maintenant accéder à votre site en saisissant l adresse dans votre navigateur pour la partie publique (accessible de tout le monde) et l adresse 16

18 Jean-Claude GERARD 01/12/ pour accéder à la partie qui vous permettra d administrer et de gérer votre site. Partie publique ( Partie d administration ( L identifiant de connexion est admin et le mot de passe est celui que vous avez défini précédemment. 17 Ecole Nationale de Voile et des Sports Nautiques

19 Créer son site Internet avec Joomla Vous venez de terminer la 1 ère phase de construction de votre site Internet (cette phase est à faire une seule fois par site!). Saisissez votre identifiant admin et le mot de passe que vous avez choisi pour vous connecter à la partir administration du site. Rendez vous dans Site Configuration générale Cette partie va vous permettre de configurez un peu plus ou de modifier des éléments que vous avez déjà saisi (comme par exemple l adresse de messagerie ainsi que le titre de votre site). 18

20 Jean-Claude GERARD 01/12/2011 Le menu configuration de joomla La page site Cette page dispose de 3 «sous pages» : - Site (page affichée ci-dessus) - Système - Serveur Dans la page site vous pouvez modifier notamment le nom du site (ici «site de ma structure». Essayer d employer des mots clés, des mots importants dans ce nom de site. Lorsque nous aurons ajouté un nouvel éditeur de texte, nous pourrons le sélectionner dans la liste «Editeur WYSIWYG par défaut». Enfin saisissez une description claire et précise de votre site, en employant également des mots clés. En ce qui concerne les mots clés ceux-ci ne sont plus pris en compte par les outils de recherche (notamment Google) et ne sont donc pas importants (vous pouvez les saisir ou non, cela ne changera pas votre référencement). 19 Ecole Nationale de Voile et des Sports Nautiques

21 Créer son site Internet avec Joomla La page Système (ci-dessous) Cette page vous permet d autoriser ou non l enregistrement des utilisateurs (nous verrons cela par la suite) 20

22 Jean-Claude GERARD 01/12/2011 La page serveur Cette page vous permet de modifier les réglages si jamais vous souhaitez modifier l adresse de messagerie saisie lors de l installation. Vous devrez également rajouter les paramètres SMTP (nécessaire à l envoi de mail depuis votre site une fois qu il sera mis en place chez un hébergeur. En local cela n est pas nécessaire car votre installation xampplite ne prend pas en compte l envoi de message depuis votre ordinateur). Dans ce qui va suivre je vais vous indiquer la procédure pour installer les composants qui me semblent intéressant. Je vous fournirais également une distribution joomla intégrant directement ces composants et donc pouvant vous éviter de le faire. Il est cependant intéressant et utile de connaître la procédure d installation d un composant. Cette procédure est la même pour un module, un plug-in ou un template! Installation de nouvelles extensions Installation d un nouvel éditeur Qu est ce qu un éditeur? Un éditeur est une extension qui vous permet de rédiger un article, en vous donnant la possibilité de le mettre en forme, à l instar de ce que vous permet Microsoft Word. En comparaison avec les traitements de texte, vous pouvez trouver Microsoft Word, mais aussi Open Office, Wordpad, le bloc notes, Works, etc. 21 Ecole Nationale de Voile et des Sports Nautiques

23 Créer son site Internet avec Joomla Pourquoi ajouter un nouvel éditeur à Joomla? L éditeur par défaut sous Joomla est tiny MCE qui vous permet une mise en page de vos articles assez évolués. Cependant lorsque nous voudrons faire un lien entre 2 articles existants ou un lien vers un autre élément (comme un élément de menu par exemple) Tiny MCE nous montrera ses limites. C est la raison pour laquelle il est préférable de passer directement à un autre éditeur qu est JCE Editor. Le composant est com_jce_2017 (je vous le transmets mais vous pouvez également le télécharger à l adresse ci contre ou le pack français ici ). Cet éditeur est gratuit. Il existe cependant des modules et plug-ins que vous pouvez lui rajouter qui eux sont payant. Pour plus d informations vous pouvez consulter le portail officiel en français de JCE Aller dans le menu Extensions Installer / désinstaller Rechercher l archive (composant, module, plug-in ou template) sur votre ordinateur. Cliquez sur transfert de fichier & Installation afin d installer cette nouvelle extension. Nous allons préférer la méthode en passant par Archive à transférer ou vous devez sélectionnez l archive que vous avez au préalable téléchargé ou disponible sur votre ordinateur ou clef usb, en cliquant sur le bouton parcourir. Ensuite il vous suffit de cliquez sur transfert de fichier & Installation pour procéder à l installation de l extension sous joomla. Un message vous indique alors du bon déroulement des opérations de l échec en cas de problèmes. 22

24 Jean-Claude GERARD 01/12/2011 Comme nous avons ici installé un composant (comparable à un mini programme) nous allons le retrouvez dans le menu Composants Nous allons commencer par définir cet éditeur comme étant l éditeur par défaut que vous utiliserez. Pour ce faire il vous faut aller dans Site Configuration générale et dans la page Site choisir Editor JCE comme éditeur par défaut. Cliquez ensuite sur Sauver en haut à droite de la page configuration générale. 23 Ecole Nationale de Voile et des Sports Nautiques

25 Créer son site Internet avec Joomla Une fois mis cet éditeur par défaut, lors de la rédaction d un article ou de quoi que ce soit d autre c est celui-ci qui s affichera, vous n avez rien d autre à faire. Installation du composant Xmap Qu est ce que c est que ce composant? Vous avez peut être déjà remarqué que sur plusieurs sites Internet il existe un lien nommé plan du site et qui peut se comparer à un sommaire pour un livre. Xmap va se charger de réaliser ce «sommaire» et donc afficher une page reprenant l ensemble des données (rubriques) importantes de votre site. Téléchargement et installation Il existe 2 sites importants pour rechercher des extensions pour joomla : - Le site francophone - Le site anglophone qui est bien plus fourni que le site francophone. Page concernant Xmap Comme pour le composant JCE, l installation de ce nouveau composant se fait par le biais du menu Extensions Installer / Désinstaller Rendez vous à la rubrique installation d un nouvel éditeur si vous ne vous souvenu plus de la méthode d installation. Rechercher le composant et cliquez ensuite sur transfert de fichier & installation. Ci-dessus fenêtre indiquant le succès de l installation. 24

26 Jean-Claude GERARD 01/12/2011 Afficher le composant en passant par Composant Xmap Cliquez sur «Nouveau plan de site» et indiquez le nom de votre plan de site (ici j ai mis Plan de l ensemble du site». En dessous du nom de votre plan de site (en bleu) vous avez les menus qui seront prit en compte pour la création du sitemap. D emblée le menu «mainmenu» est sélectionné mais vous pouvez en ajouter en cliquant sur «Ajoutermenus». Cochez les menus à ajouter puis cliquez sur sauvegarder. Vous avez la possibilité en survolant chaque menu de changer sa position, de le supprimer ou encore de modifier certaines informations qui apparaitront dans le fichier xml qui sera généré. Le bouton options à droite va vous permettre de définir un sitemap par défaut (car il est possible d en créér plusieurs), de le copier ou de l effacer. Ce bouton vous permet également d accéder aux préférences du sitemap. Cliquez sur ce bouton «options» justement et allez dans préférences. Vous allez voir ceci: 25 Ecole Nationale de Voile et des Sports Nautiques

27 Créer son site Internet avec Joomla Ici vous allez pouvoir indiquez des éléments à exclure du plan du site. Nous y reviendrons par la suite quand nous aurons terminé notre site exemple. Maintenant que votre plan de site est configuré vous n avez plus qu à allez dans menus > gestion des menus. Choisissez un menu et créez un nouvel élément de menu puis choisissez comme type «Xmap». Voila votre plan de site est créé. 26

28 Jean-Claude GERARD 01/12/2011 Le composant Ckform Qu est ce que c est que ce composant? Ce composant va vous permettre de réaliser des formulaires (fiches) de contact ou autre. Par défaut Joomla intègre un composant de Contacts (Composants Contacts) qui vous permet de concevoir un formulaire de contact. Ckform quand a lui va vous permettre de concevoir des formulaires autres que des formulaires de contact (par exemple un formulaire de pré réservation d un stage, une sorte de livre d or, etc.). Téléchargement et installation Voir la page consacrer à cette extension sur le site Pour l installer procéder comme pour les composants «éditeur JCE» et «Xmap». Installez d abord le composant lui-même (nommé com_ckforms_b1 dans les composants que je vous ai fourni) puis ensuite le pack français de ce composant (com_ckforms_fr-fr). Effectuez les installations dans cet ordre. Une fois installé, vous le retrouvez comme tous les composants dans le menu Composants CKforms Nous apprendrons par la suite à l utiliser. 27 Ecole Nationale de Voile et des Sports Nautiques

29 Créer son site Internet avec Joomla Composant Joomfish Qu est ce que c est que Joomfish? Joomfish est le plus célèbre et le plus connu des composants vous permettant de gérer votre site en plusieurs langues. Téléchargement et installation Commencez par installer Joomfish_2.17 et ensuite le pack prenant en charge le français (joomfish_203_fr-fr) dans les composants que je vous ai fourni (donc vous aurez 2 fois à faire Extensions Installer / désinstaller) Vous pouvez également consulter la page proposant ce composant Ce composant se retrouve dans Composants Joomfish Je vous laisse regarder le fichier annexe concernant ce composant. 28

30 Jean-Claude GERARD 01/12/2011 Le plug-in Very simple image gallery Qu est ce que c est que ce plug-in? Ce plug-in va vous permettre d incorporer au sein de votre site (au sein de vos articles) une galerie photos. Page dédié à ce plug-in sur le site des extensions joomla Site de l éditeur Installation de ce plug-in Procédez de la même façon que pour les autres extensions vues ci-dessus. La version du plug-in que je vous ai fourni est la suivante : plg_verysimpleimagegallery_v1.6.5_j1.5 Ci-dessus la page indiquant le succès de l installation de ce plug-in. Ou retrouver ce plug-in? Dans extensions Gestion des plug-ins vous allez afficher l ensemble des plug-ins disponible pour votre site joomla (disponible mais pas forcément activé. A vous de les activer si besoin est!). 29 Ecole Nationale de Voile et des Sports Nautiques

31 Créer son site Internet avec Joomla Cochez pour activer. Un symbole vert s affiche. Si votre plug-in n apparait pas sur la première page, utilisez les boutons en bas de page pour passer à la page suivante ou utilisez le filtre en haut de page des plug-ins. Ici le plug-in very «simple image gallery» se trouve sur la première page. Une fois coché le plug-in devient actif Rien ne va se passer sur vos pages joomla. Nous apprendrons par la suite à l utiliser, ce qui vous verrez est très simple. 30

32 Jean-Claude GERARD 01/12/2011 Définition de la structure (architecture) du site Nous n installerons pas plus d extensions pour réaliser notre site, mais sachez qu il existe encore de très nombreuses extensions possibles pour améliorer et augmenter les fonctionnalités de votre site. Attention cependant à tester en premier lieu une extension sur votre poste en local afin de ne pas risque de causer des dommages à votre site. Il sera important de se référer à la rubrique maintenance et sauvegarde (dans ce document). Je vous fourni également des fichiers vous permettant d installer un joomla version contenant directement les extensions citées plus haut (JCE, Xmap, CkForms, et Very simple image gallery) ainsi qu un fichier contenant ces extensions plus l extension joomfish. Dans le cas d un package contenant joomla JCE + Ckforms + Xmap + «Very simple image gallery» vous trouverez le package joomla_1.5.23_extensions1 ainsi que le fichier installant la base de données nommé base_ package joomla_1.5.23_extensions1 Dans le cas du package avec joomfish : le fichier se nomme package joomla_1.5.23_extensions1_joomfish et pour la base de données base_ package joomla_1.5.23_extensions1_joomfish La structure / architecture de notre site exemple Pour cet exemple je me suis basé de pages existantes dans vos sites respectifs. Imaginons 3 rubriques : accueil, prestations et disciplines Accueil - Nous rejoindre (plan de localisation google maps) - Adhérer (formulaire d adhésion) - Contact (formulaire de contact) - Plan du site (avec le composant xmap) - Nos photos (plug-in very simple image gallery) Prestations - Nos bateaux o Muscadet Q (page article) o First 25-7 DL (page article) - Nos formations o Permis côtier (page article) o Permis hauturier (page article) Les disciplines - Cyclo (page article) - VTT (page article) - Raid (page article) 31 Ecole Nationale de Voile et des Sports Nautiques

33 Créer son site Internet avec Joomla Ces 3 rubriques (citées ci-dessus) peuvent être réalisées par le biais de 3 menus, qui porteront les mêmes noms que ces rubriques. Ci-dessous je vous mets des captures d écran du résultat final de ce que nous allons obtenir Pour le moment nous utiliserons le modèle (template) qui est défini par défaut (il s agit du template rhuk_milkyway). Qu est ce qu un template? Un template (modèle en français) correspond au style d habillage que vous allez appliquez à votre site (un peu comme les différents styles d habits qu il est possible de faire revêtir à une personne). Il y a de très nombreux templates gratuit (pour joomla 1.5), ainsi que des payants, de disponible sur Internet. Un template n est pas juste un assemblage de coloris et de photos. C est aussi et surtout une façon de découper la page en différents zones (appelées position sous Joomla). Imaginons une page web que l on va découper en plusieurs zones left top user1 Ci contre représentation d une page découpé en 5 zones : - Top - User1 - Left - Footer - Zone centrale qui accueillera les articles (cette zone n est pas nommée) footer 32

34 Jean-Claude GERARD 01/12/2011 Nous aurions pu imaginer un template avec beaucoup plus de découpe, c'est-à-dire de zones. Cela est à la liberté de conception de celui qui réalise un template, de même que d appeler la zone du haut top (il peut la nommé user3 s il en a envi)! Par conséquent si vous pouviez trouver tout d abord un modèle de site (template) qui vous convient, il est bon de l utiliser dès le départ et de repérer ou se situe les différentes zones de découpage (top, left, footer, etc.) Chaque zone sur la page (position) va pouvoir accueillir un ou plusieurs modules de même type ou de type différent. Astuces : sur une page joomla vous pouvez voir les différentes zones et indiquant les caractères?tp=1 dans à la fin de l adresse. Installez un template sur votre site et sélectionnez-le par défaut, puis dans la partie public du site indiquez son url comme par exemple ou afin d afficher une page présentant les différentes zones et leurs noms. 33 Ecole Nationale de Voile et des Sports Nautiques

35 Créer son site Internet avec Joomla Création des sections et catégories Les sections et catégories vont nous servir à classer les différents articles (pages) de notre site. Contenu Gestions des sections et Contenu Gestion des catégories En premier vous devez saisir vos sections (ici 3 : accueil, prestations et disciplines) Indiquez un titre pour votre section et sauvegardez là. Ajoutez les 3 sections. Une fois que vos sections ont été saisies, allez dans Contenu Gestion des catégories cliquez sur Nouveau pour ajouter une nouvelle catégorie. La fenêtre de saisie est presque identique à celle des 34

36 Jean-Claude GERARD 01/12/2011 sections à la seule différence qu il vous faudra choisir la section à laquelle se rapporte chaque catégorie. Par exemple pour le menu accueil nous allons créer 2 catégories : divers et photos. Pour le menu prestations les catégories : bateaux et formations. Enfin pour le menu disciplines les catégories : cyclo, vtt, raid. Vous devriez obtenir ce qui suit : 35 Ecole Nationale de Voile et des Sports Nautiques

37 Créer son site Internet avec Joomla Création des articles avec l éditeur JCE Un article est en fait un contenu que vous allez pouvoir réaliser (vous pouvez comparer cela à une page). Un article pourra contenir du texte, des photos, des vidéos, etc. NB : si ce n est déjà fait, activez JCE comme éditeur par défaut dans le panneau de configuration générale (Site Configuration générale) puis dans l onglet site vous choisirez dans la liste éditeur WYSIWYG Editor JCE comme éditeur par défaut. Article simple contenant du texte Créez un article pour l élément de menu cyclo (cyclo est un élément du menu Les disciplines) Nous souhaitons que lorsque la personne clique sur l élément cyclo, que les informations relatives s affichent (donc la page traitant de «cyclo»). Pour ce faire nous allons créer un article : Contenu Gestion des articles qui affiche la liste de tous les articles disponibles sur votre site. Cliquez sur Nouveau pour en ajouter un. Section de l article ou choisissez non catégorisé pour ne pas l affecter a une section Catégorie de l article dans le cas ou vous avez défini une section Vous pouvez choisir une date de début et de fin de publication de l article (date de fin pour un article ne devant s afficher qu un temps limité) 36

38 Jean-Claude GERARD 01/12/2011 Saisissez un titre pour votre article (espaces et caractères accentués autorisés!). Vous pouvez choisir d activé ou non l article (c'est-à-dire de le publier ou non, donc de l afficher), ainsi que de décidez de l afficher en page d accueil (ceci fonctionnera si la page d accueil est configurée pour afficher les articles cochés page accueil, comme nous le verrons par la suite). Saisissez ensuite le texte de votre article en y mettant une photo ou non. Je vous invite à vous référez au document nommé Joomla que je vous ai transmis et qui décris un peu l éditeur JCE. Pour ma part j ai repris un texte du site concernant le cyclo. Vous pouvez indiquez ce que vous voulez en texte. N oubliez pas de choisir la section disciplines et la catégorie cyclo pour cet article. Peut être avez-vous remarqué qu il y avait des paramètres avancés lors de la saisis d un article. Paramètres avancés Il est possible de définir ces paramètres avancés pour chaque article ou de les définir une fois pour toute. Enregistrez votre article (bouton Sauver & fermer) Paramètres Cliquez sur paramètres pour afficher la fenêtre suivante 37 Ecole Nationale de Voile et des Sports Nautiques

39 Créer son site Internet avec Joomla Sélectionnez masquer ou montrer pour rendre visible aux internautes les éléments que vous souhaitez. Cliquez ensuite sur Sauver. Ces paramètres seront alors appliqués à tous vos articles. Article contenant une vidéo youtube Créez les articles VTT et Raid. Nous allons insérez une vidéo youtube (ce pourrait être aussi une vidéo dailymotion) dans l article VTT (voir le document que je vous ai fourni concernant l insertion d une vidéo si vous ne vous rappelez plus comment récupérer le code à insérer). Ne pas oubliez de choisir la section disciplines et la catégorie correspondante à chaque article! Une fois le code d intégration récupéré sur ma vidéo souhaitée sur Youtube, afficher le code source en cliquant sur cet icône dans l éditeur Une fois le code source afficher mettez vous à la fin de ce qui s affiche (donc ici après le </p>), c est plus simple et cela peut vous évitez de l insérer en plein milieu d autre chose et donc d avoir un rendu non souhaité. Vous pouvez vous placez par exemple ici pour coller le code récupérer sur youtube. Le code à coller 38

40 Jean-Claude GERARD 01/12/2011 Cliquez de nouveau ici pour revenir a un affichage normal. Sauvegardez votre article. Article contenant une photo (le gestionnaire d images JCE) Créons maintenant l article concernant le Raid. Dans cet article nous allons y ajouter une photo. Dans le cadre de notre exemple je vais pour ma part récupérer une photo de raid aventure sur Internet (via Google). Dans le cas de votre site (de la publication de celui-ci sur Internet) il est bien évident qu il vous faudra utiliser une photo libre de droit ou une photo pour dont vous êtes propriétaire! Cliquez sur le bouton Insérer / Editer une image de la barre d outils de l éditeur JCE. 39 Ecole Nationale de Voile et des Sports Nautiques

41 Créer son site Internet avec Joomla La fenêtre suivante s affiche (il s agit du gestionnaire d images). Par défaut ce gestionnaire affiche le contenu du dossier images se trouvant dans votre installation joomla. Cliquez sur le dossier stories (partie gauche afin d afficher son contenu dans la partie centrale) Comme ce dossier par défaut n est pas vide, nous allons supprimer toutes les images qu il contient ainsi que les 2 dossiers fruit et food. Attention : il vous faudra d abord supprimer les photos contenues dans fruit et food avant de pouvoir supprimer le dossier en lui-même. 40

42 Jean-Claude GERARD 01/12/2011 Indique le dossier dans lequel vous êtes. Ici le dossier stories Cliquez sur cette croix pour supprimer les fichiers sélectionnés. Sélectionnez toutes les photos à supprimer en les cochant. Permet de créer un nouveau dossier dans l emplacement ou vous êtes (ici stories) Ce bouton Envoyer va vous permettre de «charger» sur votre site (à l emplacement ou vous êtes) des photos se trouvant par exemple sur votre ordinateur ou clef usb. Une fois le dossier stories vidé de son contenu, nous allons y créer nos propres dossiers. Créez un dossier nommé disciplines, qui contiendra les photos et images concernant la rubrique «disciplines». Remarque : concernant les noms des dossiers et des photos, ne mettez pas d accent, ni de caractères accentués! Essayez également de tout mettre en minuscule. 1. créez le dossier discipline 2. cliquez sur le nouveau dossier crée afin de vous positionner dans celui-ci 3. cliquez sur le bouton Envoyer pour ouvrir la fenêtre ci-dessous 41 Ecole Nationale de Voile et des Sports Nautiques

43 Créer son site Internet avec Joomla Faites glisser dans cette fenêtre les photos que vous souhaitez transférer ou cliquez sur le bouton Parcourir pour les rechercher. Le ou les fichiers a transférer s affiche alors dans cette fenêtre (ci-dessous) Cliquez sur le bouton Envoyer pour transférer les fichiers. Une coche verte s affiche pour signaler que le fichier est transféré (voir ci-dessous) et la fenêtre devrait se fermer toute seule, sinon cliquez sur Fermer. 42

44 Jean-Claude GERARD 01/12/2011 Placez le curseur de la souris ou dessus de ces icônes pour avoir une description de leurs fonctionnalités. Cliquez ensuite sur le fichier que vous souhaitez insérer dans votre article (ici raid-aventure.jpg), de sorte que le chemin s indique dans URL. Vous pouvez rajouter une description à votre photo (par défaut le nom du fichier est pris en compte), en y mettant des accents, espace, minuscules et majuscules. Vous pouvez redimensionner l image afin qu elle s affiche entièrement dans votre article (dans sa largeur). Le fait de modifier l une des dimensions fera en sorte de modifier l autre en gardant les proportions, évitent que celle-ci ne soit déformée, à condition que la case Proportionnel est cochée (voir entourage rouge de la photo ci-dessus). Remarque : il est bon qu avant de transférer vos photos sur votre site que vous les redimensionnées afin déjà d avoir la bonne taille et de les alléger en poids. La taille d une photo dans un article va dépendre de l espace occupé par l article sur la page. Vous pouvez choisir le type d alignement de votre photo. Une fois votre image choisie et vos paramètres saisis, vous pouvez cliquez sur le bouton Insérer ou Mettre à jour. Le bouton Mettre à jour s affiche dans le cas ou vous aviez déjà insérer votre photo précédemment mais que vous vouliez modifier un ou plusieurs paramètres. Le fait de cliquer sur une 43 Ecole Nationale de Voile et des Sports Nautiques

45 Créer son site Internet avec Joomla photo dans sa page et de cliquer ensuite sur le bouton Insérer / Editer une image de la barre d outils de l éditeur JCE, vous affiche l image avec ses paramètres dans la fenêtre du gestionnaire d images. Votre photo s affiche dans votre article Concevez sur le même principe les 4 autres pages d articles (donc de contenu) concernant les prestations. Pour rappel la rubrique prestations a été définie telle quelle : Prestations - Nos bateaux o Muscadet Q (page article) o First 25-7 DL (page article) - Nos formations o Permis côtier (page article) o Permis hauturier (page article) Les articles Muscadet Q et First 25-7 DL appartiendront à la section prestations et à la catégorie bateaux. Les articles permis côtier et permis hauturier appartiendront à la section prestations mais à la catégorie formations. Les articles saisies vous devriez avoir ce qui suit : 44

46 Jean-Claude GERARD 01/12/2011 Vous remarquerez ci-dessus pour chaque article la section et la catégorie à laquelle dans laquelle il vient se classer. Maintenant il nous reste à créer les 4 pages de la rubrique Accueil Accueil - Nous rejoindre (plan de localisation google maps) - Adhérer (formulaire d adhésion) - Contact (formulaire de contact) - Plan du site (avec le composant xmap) - Nos photos (plug-in very simple image gallery) Article contenant une carte google maps Pour la page nous rejoindre il s agit de procéder de la même manière que pour insérer une vidéo dans un article (vue avec l article sur le VTT). Insertion plan Google maps Rendez vous sur le site puis saisissez votre recherche (j ai pris le cas de l adresse de l ENVSN, mais vous pouvez indiquez n importe qu elle autre adresse bien entendu). Cliquez sur ce bouton lien pour afficher le code que vous devrez copier pour coller dans votre article. Copiez le code indiqué ici 45 Ecole Nationale de Voile et des Sports Nautiques

47 Créer son site Internet avec Joomla Dans votre article vous pouvez ajouter du texte que vous souhaitez et coller ce code ensuite. Cet article sera comme nous l avons dit, classé sous la section accueil et catégorie divers. Création des pages contact et adhérer avec le composant CK Forms Ces 2 pages vont être construites avec le composant que nous avons installé : composant CK Forms qui est dédié à la conception de formulaires. Page de contact Commencez par afficher ce composant : Composants CK Forms Pour le moment comme vous pouvez le voir sur la figure ci-dessus, il n y a pas de formulaire de créé. Commencez par créer un nouveau formulaire que l on va nommer Contact (cliquez sur le bouton Nouveau). Indiquez un nom et un titre pour le formulaire (le nom ne dois pas contenir d espaces ni de caractères accentués). 46

48 Jean-Claude GERARD 01/12/2011 Cochez oui pour que les données soient enregistrées dans la base de données. Dans la figure ci-dessus, vous pouvez indiquer le texte du résultat qui s affichera sur la page Web après validation du formulaire L écran ci-dessous ( ) vous donne la possibilité d envoyer les données du formulaire par mail à une ou plusieurs personnes. Précisez l expéditeur (adresse de messagerie saisie lors de l installation de Joomla [présente dans Site Configuration générale]). La seconde partie (en dessous du trait) permet d envoyer un courrier de confirmation à l expéditeur. Nous laisserons la case à Non pour le formulaire de contact. 47 Ecole Nationale de Voile et des Sports Nautiques

49 Créer son site Internet avec Joomla L écran ci-dessus vous donne la possibilité d utiliser un Captcha (code qui permet de vérifier que le formulaire a bien été saisi par une personne «humaine» et par un programme). Ce code peut vous évité d être spammé! La fenêtre ci-dessous vous permet si vous le souhaitez, d afficher en partie frontal (partie publique du site) les données récupérées et enregistrées dans la base. Sauvegarder votre formulaire pour obtenir l écran ci-dessous. Cliquez ici pour ajouter des champs de formulaire (c'est-àdire des zones ou l utilisateur saisira des données). Pour le moment le formulaire ne contient aucuns champs! 48

50 Jean-Claude GERARD 01/12/2011 Nous allons ajouter des champs à notre formulaire (qui pour le moment ne sert à rien). Nous souhaitons récupérer le nom, prénom, l adresse postale, l adresse et bien sur les commentaires de la personne. Par conséquent cela représente 5 champs de formulaires, auxquels il faut ajouter un bouton envoyer afin de permettre à la personne d envoyer (poster) son formulaire. Donc 6 champs sont nécessaires au total. Ci-dessous le tableau récapitulatif des champs et de leur type. Nom du champ Libellé du champ Type Champ obligatoire? nom Nom texte Oui prenom Prénom texte Oui adresse Adresse textarea Non Courriel Texte Oui commentaires Commentaires Textarea Oui envoyer Envoyer button Remarque : le nom des champs ne doit pas contenir d espaces ni de caractères accentués. Ces noms sont utilisés dans la base de données. Le texte qui s affichera à l utilisateur est celui du libellé de champ. Cliquez sur ajouter un champ. Dans cette liste vous sélectionnez le type de champ : texte, texarea, button, etc. Cochez cette case pour rendre la saisie du champ obligatoire. Cliquez sur Sauver & Fermer Recommencez l opération en cliquant sur Nouveau pour ajouter un nouveau champ. 49 Ecole Nationale de Voile et des Sports Nautiques

51 Créer son site Internet avec Joomla Informations à saisir pour le champ prénom. Champ adresse : Ici le type de champ est textarea (aire de texte large, permettant la saisie sur plusieurs lignes) Nombre de ligne visible pour la saisie. 50

52 Jean-Claude GERARD 01/12/2011 Champ Le champ est un champ de type texte que nous souhaitons obligatoire, et nous souhaitons bien sur que ce champ contienne une adresse valide. C est pourquoi vous devez choisir dans Type de données la valeur . Champ commentaires : Champ sur 5 lignes. L utilisateur pourra bien sur saisir plus de 5 lignes de textes, mais seules 5 lignes seront visibles à la fois. Audelà de 5 lignes un ascenseur vertical apparaîtra à droite. Création du bouton Envoyer Ce bouton va permettre de créer une action qui sera réalisée, selon les critères et les paramètres que vous avez choisi pour ce formulaire (donc ici sauvegarder des données et envoi des données par mail à une personne responsable du site Internet). Il existe 2 types pour le choix Button : - submit pour traiter les données (choix à utiliser ici!) - reset (réinitialiser) pour effacer les champs de formulaires 51 Ecole Nationale de Voile et des Sports Nautiques

53 Créer son site Internet avec Joomla Une fois sauvegarder ce denier champ de type button, vous devriez avoir ceci Le bouton Forms (en haut à droite de la fenêtre ci-dessus) vous permet quand à lui de revenir à la liste des formulaires (un seul dans le cas présent : Contactez nous). Cliquez ici pour modifier, ajouter ou supprimer un champ de formulaire. Permet d afficher les données saisies par les utilisateurs. Ces données sont consultables en lignes mais aussi exportables. Création de la page «Adhérer» Nous allons nous baser pour cette page du même modèle que celle disponible sur le site de l association des pêcheurs plaisanciers malouins, comme visible ci-dessous. 52

54 Jean-Claude GERARD 01/12/2011 Donc en listant les champs à créer nous obtenons la liste ci-dessous. Nous rajoutons juste un champ . Nom du champ Libellé du champ Type Champ obligatoire? nom Nom texte Oui prenom Prénom texte Oui adresse Adresse textarea Oui cp Code postal texte Oui ville Ville texte Oui Courriel Texte (type ) Oui telfixe Téléphone texte Non telmobile Portable texte Non envoyer Adhérer button (submit) annuler Annuler button (réinitialiser) Commencez par créer un nouveau formulaire nommé adhésion. Cocher la case pour sauver les résultats. Dans l onglet , choisissez d envoyer un courriel d envoie du résultat et un courrier de confirmation (voir ci-dessous). 53 Ecole Nationale de Voile et des Sports Nautiques

55 Créer son site Internet avec Joomla Dans l onglet Avancé, nous choisirons comme précédemment d utiliser un Captcha. Sauvegarder ensuite votre formulaire. Vous pouvez maintenant depuis la liste des formulaires ajouter des champs à ce formulaire qui pour le moment n en comporte aucun. Référez vous au formulaire précédent (Contactez nous) afin de saisir les champs. Vous devriez obtenir ce qui suit une fois saisi tous les champs 2 formulaires : - Contactez nous : 6 champs - Adhérer : 10 champs Les boutons Backup et Restaurer (figure ci-dessus) vous permette de sauvegarder les données des formulaires telles qu elles sont stockées dans la base de données. Ceci est intéressant pour sauvegarder des données que vous considérez comme importantes. Cependant je trouve plus simple et mieux de sauvegarder l ensemble de la base de données (ce qui sera vu plus loin). 54

56 Jean-Claude GERARD 01/12/2011 Création de la page «nos photos» : plug-in very simple image gallery Vous pouvez consulter la page suivante si vous le souhaitez : Reportez vous à la rubrique «Le plug-in Very simple image gallery» concernant l activation de celuici. Par défaut ce plug-in va chercher les images dans le dossier images/stories. Vous pouvez laissez ce chemin par défaut, car JCE ou le gestionnaire d images de joomla s y réfèrent également. Je vais vous montrer une technique légèrement différente de celle qui est expliquée sur le site de l auteur de ce plug-in, car je vais utiliser le composant JCE pour gérer les photos. Commencez par créer un nouvel article que vous pourrez nommées par exemple «photos sortie mer du » Vous choisirez la section Accueil et la rubrique photos. A l aide du bouton Insérer / Editer une image de la barre d outil de l éditeur JCE Le gestionnaire d images s affiche 55 Ecole Nationale de Voile et des Sports Nautiques

57 Créer son site Internet avec Joomla Cliquez sur le dossier stories ci-dessus et créer un nouveau répertoire que vous nommerez sortie (ni espaces ni accent dans le nom du répertoire). Reportez vous à l article «Créons maintenant l article concernant le Raid» si vous ne vous rappelez plus comment faire cela. Envoyer Cliquez sur ce nouveau dossier pour vous placez à l intérieur. Ensuite cliquez sur Envoyer Ajouter les photos correspondantes à cette sortie en mer. Attention : par défaut le poids des photos autorisées ne doit pas excéder 1024kb (soit 1Mo). Il est donc préférable que vous allégiez ce poids avec un logiciel comme photo filtre auparavant ( ). La version de photofiltre fournie en lien est la version française qui ne nécessite pas d installation. Il vous suffit de décompresser / extraire les fichiers et lancer le fichier photofiltre. 56

58 Jean-Claude GERARD 01/12/2011 Référez vous au document annexe «Photofiltre pour redimensionner ses photos» afin de les optimiser si besoin en était. Pour ma part j ai optimisé mes photos trop «lourdes» initialement. Vous remarquerez le poids des photos qui est inférieur à 100kb par photo. Cliquez sur envoyer. Une fois les photos chargées (envoyées) dans votre dossier sortie sur votre site, fermer (cliquez sur Annuler) le gestionnaire d images afin de revenir à l article. Dans votre article vous pouvez saisir le texte que vous souhaitez, puis en dessous de celui-ci par exemple, vous ferez appel au plug-in en précisant le dossier qu il devra afficher. Donc ici vous indiquerez {vsig}sortie {/vsig} Sortie correspondant au dossier souhaité qui se trouve dans images/stories (répertoire par défaut utiliser par ce plug-in)! Ce qui est important c est de bien mettre la syntaxe {vsig}votre-dossier{/vsig} Ou votre-dossier correspond au répertoire (dossier) dont vous souhaitez afficher les photos. Affichage du site côté public (front-end) Jusque présent vous avez créé plusieurs pages et formulaires via la partie d administration du site (backend). Que se passe t-il au niveau de l affichage publique? Saisissez l adresse de votre site et observez que le site n a pas changé depuis l installation. Pourquoi n y a-t-il eu aucuns changements? Tout simplement parce que jusque présent nous avons créé des articles et des formulaires, mais que nous ne les avons rattachés à rien du tout. Il nous faut maintenant créer les menus de notre site et ajouter quelques autres modules. 57 Ecole Nationale de Voile et des Sports Nautiques

59 Créer son site Internet avec Joomla 58

60 Jean-Claude GERARD 01/12/2011 Création de nos menus Votre site est divisé en plusieurs parties qui peuvent former des rubriques. Une rubrique peut donc correspondre a un menu. Pour créer un nouveau menu allez dans Menu Gestion des menus Seul le menu Main Menu est pour le moment présent (menu créé par défaut). Cliquez sur le bouton Nouveau pour créer un nouveau menu Remplissez les champs demandés. Identifiant du menu : saisissez un texte en minuscule sans espaces ni caractères accentués Titre : le titre de votre menu tel qu il s affichera dans la gestion des menus (Menu Gestion des menus) Description : indiquez la description de votre menu (facultatif) Titre du module : indiquez ici un titre qui pourra s afficher et être visible pour l utilisateur sur la partie publique du site 59 Ecole Nationale de Voile et des Sports Nautiques

61 Créer son site Internet avec Joomla Important : lorsque vous créez un menu et que vous n oubliez pas d indiquez un titre du module, automatiquement un module portant le nom du champ titre de module que vous avez saisi, sera créé. Donc à un menu est associé un module. Les modules sont des blocs qu il sera possible de positionner sur sa page Web! Création des menus Pour le premier menu (Accueil) nous créons un premier menu Titre du menu = menu-accueil Titre : Accueil Description : «Aucune» Titre du module : Accueil Enregistrer ensuite votre menu Nouveau menu pour créer le deuxième menu Prestations Titre du menu = menu-prestations Titre : Prestations Description : «Aucune» Titre du module : Prestations Sauvegarder votre menu Nouveau menu pour créer le troisième menu Disciplines Titre du menu = menu-disciplines Titre : Disciplines Description : «Aucune» Titre du module : Les Disciplines Sauvegarder votre menu Nos menus sont créés : Création des éléments de menus : le gestionnaire d éléments de menu Le menu accueil Cliquez sur le symbole éléments de menu à chaque menu. (en face de chaque menu) pour ajouter des éléments 60

62 Jean-Claude GERARD 01/12/2011 Pour le menu Accueil nous allons ajouter les éléments suivants : Nous rejoindre, adhérer, contact, plan du site, nos photos (soit 5 éléments). Cliquez sur le bouton Nouveau (en haut à droite) pour ajouter un nouvel élément de menu. Il vous sera alors possible de choisir le type d élément de menu souhaité Cette liste d éléments de menu peut varier en fonctions des extensions installées sur votre Joomla. L installation de certaines extensions ajoute des fonctionnalités à cette liste. A quoi correspondent ces différents types d éléments de menu? Lorsque vous allez cliquez sur un menu (ou plutôt sur un élément du menu : au nombre de 5 pour le menu accueil comme indiqué un peu plus haut), vous allez choisir les données à afficher. Si vous souhaitez afficher un article alors vous choisirez Articles ou là vous aurez de nouveau plusieurs choix possible (l un des choix étant Article un article afin de n afficher qu un article en particulier). Vous pouvez également choisir Xmap afin d afficher un plan du site. Je vous laisse regarder le document Joomla pour les nuls afin d avoir plus de détails sur ces types d éléments de menu. Ajout des éléments du menu Accueil En face du menu Accueil (Menus Gestion des menus) cliquez sur éléments de menus pour ajouter les éléments de ce menu. Vous devez ajouter un élément nommé nous rejoindre, adhérer, contact, plan du site et nos photos. 61 Ecole Nationale de Voile et des Sports Nautiques

63 Créer son site Internet avec Joomla Dans le gestionnaire d élément de menu cliquez sur ajouter et choisissez ensuite le type d élément de menu articles Ce type permet de choisir un article existant que vous avez déjà créé. Ce type vous permet d afficher des articles comme dans un blog sur votre page d accueil. Seuls les articles marqués comme «page d accueil» s afficheront alors (ce choix est possible lorsque vous créez / éditez un article. Uns fois cliquez sur articles la fenêtre suivante s affiche Cliquez ici pour sélectionner l article associé à cet élément de menu. Titre à donner à votre élément de menu (ici Nous rejoindre) Choisissez ensuite votre article 62

64 Jean-Claude GERARD 01/12/2011 La fenêtre ci-dessus vous affiche tous les articles de votre site. Dans le cas ou il y aurait beaucoup d articles vous avez la possibilité afin de mieux vous y retrouver de n afficher que les articles d une section et / ou d une catégorie (d où l intérêt de bien classer ses articles par section et catégorie). Cliquez ensuite sur Sauver pour enregistrer vos modifications pour cet élément de menu. Ajoutez ensuite l élément de menu Adhérer Ajouter un nouvel élément de menu de type CK Forms (présent ici car nous avons installé ce composant) et comme nous avons conçu les formulaires avec celui-ci nous le choisissons ici. Choisissez Standard CKForms CSS layout afin d afficher le formulaire en lui-même. Le choix Standard data CKForms CSS Layout permet quand à lui d afficher sur une page les données saisies par les utilisateurs dans un formulaire. 63 Ecole Nationale de Voile et des Sports Nautiques

65 Créer son site Internet avec Joomla Choisissez le formulaire à afficher. En titre saisissez Adhérer et sauvegarder vos modifications. Faites de même pour créer l élément de menu Contact (en choisissant le formulaire contact dans la liste déroulante de la figure ci-dessus!). Pour les éléments de menus Plan du site vous choisirez le type d élément de menu xmap Pour le plan du site 64

66 Jean-Claude GERARD 01/12/2011 Choisissez le plan à afficher (ici il n y en a qu un). Indiquez le titre Plan du site et sauvegarder vos modifications. L élément de menu nos photos est un élément de type articles (comme vu précédemment pour l élément de menu Nous rejoindre). Le menu Les disciplines Ce menu est constitué de 3 éléments : cyclo, vtt er raid. Ces 3 éléments sont de même type : articles (cf Nous rejoindre). Le menu Prestations Commencez par créer un élément de menu Nos bateaux qui sera de type Séparateur. Sauvegardez vos modifications. Ensuite créé un élément de menu Muscadet Q de type articles, en sélectionnant l article correspondant. Pour cet élément de menu qui doit être un sous élément du menu Nos bateaux, vous sélectionnerez comme élément parent Nos bateaux. 65 Ecole Nationale de Voile et des Sports Nautiques

67 Créer son site Internet avec Joomla Choix de l élément parent. Ici Muscadet Q est un sous élément de l élément Nos bateaux. Sauvegardez vos modifications. Précédez de même pour créer l élément First 25-7 DL. Concernant l élément Nos formations il s agira d un élément de type séparateur. Les 2 éléments Permis côtier et Permis hauturier seront des sous éléments de type articles, dont l élément parent sera Nos formations. Le menu Prestations doit ressembler a ce qui suit Affichage des menus Sachant que la création d un menu implique la création automatique d un module dont le nom est celui indiqué dans Titre du module lors de la création du menu (voir les menus dans ce document), il nous reste à activer les modules et à les positionner. Allez dans la gestion des modules (Extensions Gestion des modules) 66

68 Jean-Claude GERARD 01/12/2011 Pour ma part j ai désactivé le module nommé Language Selection (utilisé par Joomfish) car je n en ai pas utilité pour le moment. Cliquez sur le module Prestations Sélectionnez Oui pour activer le menu et pour toujours afficher les sous menus. Le module Prestations étant pour le moment le seul module possédant des sous menus. Choisissez également la Position du module (par défaut ici elle est Left). Nous laisserons left car nous souhaitons positionner ce module dans l espace gauche donc left. Cliquez sur Sauver. Activé les modules les disciplines et Accueil et désactiver le module Menu Principal (mis en place automatiquement lors de l installation de notre site). La figure ci-dessus montre que le module Prestations est le premier de la liste, le module Les discipline le deuxième et Accueil le troisième. Vous pouvez vérifiez cela dans la partie publique du site! Clqiuez sur la flèche qui monte dans la colonne ordre pour le module Accueil pour le remonter d un cran. Répétez l opération pour avoir le module Accueil en première position (pour les éléments de la partie left). Il se peut que votre site comporte de très nombreux modules mais pas tous en position left, donc ne les prennez pas en compte lorsque vous changez l ordre des modules, faîtes le uniquement pour les modules d une même position. 67 Ecole Nationale de Voile et des Sports Nautiques

69 Créer son site Internet avec Joomla Votre site public ressemble maintenant à ça Peut être avez-vous remarquez qu il manque un élément de menu pour revenir à la page d accueil (pas le menu accueil mais la page accueil) que nous pourrions nommée Home (élément de menu présent dans le menu Menu principal créé lors de l installation du site). Dans Menus Gestion des menus, cliquez sur éléments de menus en face du menu Accueil, puis cliquez sur Nouveau et sélectionnez Articles Page d accueil Page d accueil au format blog 68

70 Jean-Claude GERARD 01/12/2011 Indiquez Home en titre et sauvegarder vos modifications. Vous devez obtenir un nouvel élément de menu qui vient d être créé en bas de liste Remonter cet élément Home en haut de liste en utilisation dans la colonne ordre la flèche qui pointe vers le haut. Pour le moment aucun articles n a été créé et coché comme étant en page d accueil. Je vous invite à en créer un et de le cocher en page d accueil 69 Ecole Nationale de Voile et des Sports Nautiques

71 Créer son site Internet avec Joomla Ajout d un module d identification Dans la Gestion des modules, cliquez sur Nouveau et sélectionnez Connexion en type de module et cliquez sur Suivant Choisissez la position Left pour ce module. Choisissez d afficher ce module sur toutes les rubriques du site (sélection par défaut) Sauvegardez les modifications 70

72 Jean-Claude GERARD 01/12/2011 Le module identifiez vous a été créé et est activé. Il ne vous est pas nécessaire de le descendre car il se trouve en bas de liste. En effet ce module nous souhaitons le positionnez sur la gaucge (left) et à la suite des autres modules présents dans cette position. Sur la partie publique cela donne Module Identifiez vous Pour empêcher l utilisateur de créer un compte, il vous faudra désactiver «autoriser l enregistrement des utilisateurs»dans Site Configuration générale, puis dans l onglet Système. Pour ajouter des utilisateurs avec plus de droits que les personnes lambdas, allez dans Site Gestion des utilisateurs et ajouter un nouvel utilisateur que je nommerais test avec le mot de passe test. Cet utilisateur donné lui les droits Enregistré du groupe Front-end. 71 Ecole Nationale de Voile et des Sports Nautiques

73 Créer son site Internet avec Joomla Maintenant vous pouvez concevoir un article ou affiché un module visible pour le groupe des utilisateurs enregistrés. Ci-dessous un article dont le niveau d accès est réservé au groupe des Enregistré Sauvegardez cet article. Pour observez qu il n est accessible qu aux membres enregistrés vous pouvez concevoir un menu dédié aux membres enregistrés (vous définirez cela dans le module associé à ce menu) en lui choisissant comme niveau d accès : Enregistré. Ou bien il vous suffit de rechercher cet article sur le site via le module recherche qui pour le moment n est pas présent sur le site. Par conséquent vous devez créez un module recherche. Création du module Recherche Extension Gestions des modules, puis Nouveau 72

74 Jean-Claude GERARD 01/12/2011 Ne montrer pas le titre, cela peut surcharger l affichage. Choisissez la position user4 (pour ce template du moins!) Activez le module et Sauvegardez vos modifications. Le module de recherche ici en position user4 Terminons notre mini site en créant un nouveau menu qui s affichera horizontalement dans la partie supérieure du site. 73 Ecole Nationale de Voile et des Sports Nautiques

75 Créer son site Internet avec Joomla Création d un menu horizontal Menus Gestion des menus, puis Nouveau. Indiquez ce qui est inscrit ci-dessous. Sauvegardez. Ajoutez des éléments de menus au menu horizontal. Nous allons ajouter 3 éléments : Accueil ; Prestations et Les disciplines. Nous verrons pourquoi nous choisissons ici d indiquer en nom de ces éléments les mêmes noms que les menus eux même. Ajouter l élément de menu de type Alias 74

76 Jean-Claude GERARD 01/12/2011 Titre de cet élément : Accueil Choisissez Home pour l élément de menu. C'est-à-dire que cet élément de menu va afficher le contenu de la page Home, créez précédemment. Créez le deuxième élément de menu de type article cette fois ci, mais Liste des catégories d une section. Saisissez Les prestations en titre de cet élément de menu et sélectionnez Prestations pour la section concernées. 75 Ecole Nationale de Voile et des Sports Nautiques

77 Créer son site Internet avec Joomla Remarque : dans le cas ou vous auriez indiqué une description pour vos sections, le fait de cocher Montrer (pour la description), afficherait celle-ci en plus de son nom. Faites un essai en reprenant une section (Contenu Gestion des sections) et en lui mettant une description. Sauvegardez les modifications Créez ensuite le dernier élément de menu qui sera de type articles et également Liste des catégories d une section. Indiquez en titre : Les disciplines Sélectionnez la section : Disciplines Sauvegardez les modifications. Dans la gestion des modules, activé le module Menu horizontal et choisissez user3 comme position de celui (user3 est la bonne position pour ce template, mais sans doute devrez vous changer de position, c'est-à-dire d emplacement, sur un autre template). Masquer le titre de ce module et enregistrez les modifications. Voici le rendu sur la partie publique du site. Le but de ce menu horizontal est maintenant de décider de n afficher que le menu correspondant à chaque item de ce menu horizontal. Ainsi quand l utilisateur cliquera sur Accueil dans le menu horizontal, seul le menu Accueil s affichera en position gauche (left), les menus Prestations et Les disciplines disparaitront. Idem pour l élément les prestations qui n affichera que le menu Prestations dans la partie gauche et l élément les disciplines qui affichera uniquement le menu Les disciplines. Comment rendre cela possible? 1. Dans la Gestion des modules, cliquez sur le module Accueil 76

78 Jean-Claude GERARD 01/12/2011 Dans la partie Affectation de menu, choisissez Sélectionner le(les) élément(s) de menu depuis la liste. Sélectionnez pour le menu Accueil les «pages» ou il doit être visible. Ici tous les item du menu-accueil et l item Accueil du menu-horizontal. Remarque : pour sélectionnez plusieurs éléments de cette liste, cliquez sur un élément, puis appuyer sur la touche Ctrl du clavier et sans la relâcher, cliquez sur les autres éléments de la liste. Ainsi quand l utilisateur cliquera sur l élément Accueil du menu horizontal, le menu Accueil s affichera et quand il cliquera sur l un des éléments du menu Accueil, celui-ci restera affiché! Sauvegardez les modifications 2. Cliquez sur le module Prestations Et sélectionnez dans la zone affectation de menu les éléments ci-dessous Sauvegardez. 3. Enfin pour le module Les disciplines 77 Ecole Nationale de Voile et des Sports Nautiques

79 Créer son site Internet avec Joomla Sauvegardez et testez le résultat sur la partie publique du site. Mentions légales Sur votre site vous devez faire figurer une page concernant les mentions légales. Vous trouverez des renseignements sur ces 2 pages par exemple :

80 Jean-Claude GERARD 01/12/2011 Maintenance et sauvegarde de ses données En général sur tout serveur PHP associé à MySql, vous avez accès à la gestion de la base de données et donc vous avez la possibilité d effectuer un export (sauvegarde de celle-ci). Remarque : il se peut que votre hébergeur vous propose une sauvegarde automatisée de vos données (mais ce n est pas toujours le cas et celle-ci peut être payante). Vous disposerez alors d un accès à l interface que l on appelle phpmyadmin, accessible en locale (donc sur votre ordinateur) à l adresse suivante : Selon la version de php et mysql, l interface peut être un peu différente. En local vous accéderez à toutes les bases de données NB : chez votre hébergeur vous n accéderez qu à votre base de données! Cliquez sur la base de données utilisée par votre site, ici il s agit de structure (nom de la base de données utilisée par mon site internet site-structure). Si vous ne savez plus le nom de la base associé à votre site, allez dans l administration de Joomla et dans Site Configuration générale, dans l onglet Serveur, vous accéderez aux paramètres de la base de données. 79 Ecole Nationale de Voile et des Sports Nautiques

81 Créer son site Internet avec Joomla Une fois le nom de la base retrouvé, dans l interface de phpmyadmin, sélectionnez-la. Cliquez sur Exporter (en haut de cette page), afin de sauvegarder les données. 80

82 Jean-Claude GERARD 01/12/2011 Dans Exporter, choisissez si ce n est pas le cas, SQL et dans Transmettre, choisissez zippé et cliquez ensuite sur Exécuter. Il vous sera alors demander d enregistrer la sauvegarde Vous pourrez ensuite renommer le fichier structure.sql.zip en y ajoutant la date de la sauvegarde. Exemple : structure.sql zip Voici une variante de l interface de phpmyadmin selon la version installées chez l hébergeur Vous devrez saisir un identifiant et mot de passe 81 Ecole Nationale de Voile et des Sports Nautiques

83 Créer son site Internet avec Joomla Cliquez sur le nom de la base en haut à gauche pour afficher la fenêtre telle que ci-dessus. Puis cliquez sur Exporter 82

84 Jean-Claude GERARD 01/12/2011 Cliquez sur Personnalisée pour plus de détails Choisissez de diriger la sortie vers un fichier et préférer la compression zippé ; puis cliquez sur exécuter en bas de page. 83 Ecole Nationale de Voile et des Sports Nautiques

85 Créer son site Internet avec Joomla Installation de son site chez l hébergeur Une fois votre site opérationnel et que tout fonctionne correctement, en local (sauf les envois par mail qui ne fonctionneront que chez votre hébergeur après bonne configuration dans site configuration générale), alors il vous faudra l installer chez un hébergeur. Vous avez déjà un hébergeur qui permet d accueillir un site Internet Joomla. Si vous ne le savez pas, renseignez vous auprès de votre hébergeur. Si vous n en possédez pas un, vous pouvez par exemple vous dirigez vers ovh, gandhi ou 1&1. Transfert de son site Le plus simple est de transférer le site joomla tel que l on peut le télécharger sur Internet ou utiliser le fichier Joomla_ Stable-Full_Package_fr.v2.zip que je vous ai fourni à la suite de la formation de 3 jours et décompressé ce fichier (voir page 8), afin de récupérer le dossier installation qui se trouve a l intérieur! L objectif est d envoyé l ensemble des fichiers de votre site + le dossier installation chez votre hébergeur en utilisant un logiciel adapté comme par exemple filezilla ftp client. Je considère ci-dessous que l application est installée sur votre ordinateur Ouvrir Filezilla Gestionnaire de site 84

86 Jean-Claude GERARD 01/12/2011 Ouvrez le gestionnaire de site afin de renseigner filezilla avec les paramètres qui vous auront été transmis par votre hébergeur. Cliquez sur Nouveau site et donnez un nom à celui-ci. Vous pouvez indiquez ce que vous souhaitez comme nom (ce nom est juste pour vous). Renseignez ensuite les champs hôte et port (en général le n de port est le 21). En type d authentification vous choisirez Normale et vous indiquerez alors l identifiant fourni par votre hébergeur ainsi que le mot de passe. Cliquez ensuite sur Ok pour sauvegarder les données (le profil). Pour vous connecter, il vous suffit de sélectionner le profil souhaité dans la liste du gestionnaire de site. Cliquez sur la flèche pour afficher la liste. 85 Ecole Nationale de Voile et des Sports Nautiques

87 Créer son site Internet avec Joomla Zone 1 : Sélectionnez le répertoire dans lequel se trouvent vos fichiers à transférer Zone 2 : Vos fichiers sur votre ordinateur Zone 3 : Votre emplacement chez votre hébergeur Zone1 : sélectionnez le répertoire dans lequel se trouve votre site (normalement c:\xampplite\htdocs\site-structure) Une fois que vous aurez sélectionnez le bon répertoire (dossier) dans lequel se trouvent vos fichiers et dossiers à transférer, ceux-ci s afficheront alors dans la zone 2. Sélectionnez tous les fichiers puis faites un clic droit et choisir Envoyer. Vérifier à la fin du transfert que tous les fichiers ont bien été envoyés correctement et qu aucun fichier n apparaisse dans l onglet du bas «Transfert échoués» (si c était le cas il vous faudra re transférer ces fichiers). Sélectionnez ensuite le dossier installation (qui se trouve dans le dossier compressé Joomla_ Stable-Full_Package_fr.v2.zip et transférer le également chez votre hébergeur (à la racine du site, représenté par le caractère / dans la figure ci-dessous sous Filezilla) Dernière chose avant de procéder à l installation, il va vous falloir supprimer le fichier nommé configuration.php à la racine du site chez l hébergeur (ne pas supprimer le fichier configuration.distphp). Sous Filezilla une fois que vous êtes connecté, sélectionnez le sur le site distant (partie de droite sous filezilla) puis faites un clic droit puis choisissez supprimer). 86

88 Jean-Claude GERARD 01/12/2011 Ensuite il vous reste à installer le site de la même façon qu en local (comme étudié dans ce document), via votre navigateur Internet ( Une fois installé il vous sera demandé de supprimer le répertoire installation. Vous le supprimerez via le logiciel FileZilla en le sélectionnant et en faisant un clic droit puis supprimer Ca y est vous venez d installer votre site joomla! Bon d accord cela demandait un peu de manipulations. Transfert des données Cependant vous n avez pas encore installé les données de votre site. Comment faire pour installer toutes les données? Reportez vous à la page 80 afin de sauvegarder votre base de données locale, qui vous sera nécessaire pour l importation chez votre hébergeur. Normalement votre hébergeur vous a fourni un accès à l administration de votre base de données (via phpmyadmin, comme ce que l on a déjà vu au chapitre maintenance de votre site). Dans votre navigateur Internet saisissez l adresse que votre hébergeur vous aura fourni pour accéder à phpmyadmin Indiquez votre identifiant et mot de passe, plus d autres renseignements si demandés. Cliquez sur le nom de votre base 87 Ecole Nationale de Voile et des Sports Nautiques

89 Créer son site Internet avec Joomla Ensuite en bas de cette page, cliquez sur tout cocher et dans la liste vous choisirez Supprimer, afin de supprimer toutes les tables de la base de données. Cliquez sur Oui pour confirmer la suppression Une fois que votre base ne contient plus de tables alors vous pouvez cliquez sur Importer 88

90 Jean-Claude GERARD 01/12/2011 Cliquez sur Parcourir afin de rechercher le fichier de votre base locale que vous avez sauvegardez puis cliquez sur le bouton Exécuter. Tout devrait se passer correctement. Une fois terminée, ca y est votre site est opérationnel et en ligne! 89 Ecole Nationale de Voile et des Sports Nautiques