Créer son site Internet avec JOOMLA

Transcription

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
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
Composant Joomfish ___________________________________________________________________ 28
Qu’est ce que c’est que Joomfish ? ______________________________________________________ 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
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
Jean-Claude GERARD
01/12/2011
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-win321.7.3 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
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
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
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
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
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 1.5.23 de Joomla. Ce fichier ce nomme Joomla_1.5.23Stable-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_1.5.23-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_1.5.23-Stable-Full_Package_fr.v2\ » (il se peut que le nom extraire vers soit
afficher en anglais et donc ce serait Extract to …)
8
Jean-Claude GERARD
01/12/2011
Extraction / Décompression du fichier
Joomla_1.5.23-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
http://localhost/site-structure/
Appuyez sur entrée pour valider et afficher la fenêtre suivante
9
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
Jean-Claude GERARD
01/12/2011
Cette page (ci-dessus) se charge de faire des tests de pré installation, cliquez ensuite sur Suivant.
11
La page ci-dessus vous affiche les termes du contrat de la licence GNU utilisée par Joomla. Cliquez sur
Suivant.
12
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
Ne remplissez rien ci-dessus et cliquez directement sur Suivant
14
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
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 http://localhost/site-structure
dans votre navigateur pour la partie publique (accessible de tout le monde) et l’adresse
16
Jean-Claude GERARD
01/12/2011
http://localhost/site-structure/administrator pour accéder à la partie qui vous permettra
d’administrer et de gérer votre site.
Partie publique (http://localhost/site-structure)
Partie d’administration (http://localhost/site-structure/administrator)
L’identifiant de connexion est admin et le mot de passe est celui que vous avez défini
précédemment.
17
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
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
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
Jean-Claude GERARD
01/12/2011
La page serveur
Cette page vous permet de modifier les réglages e-mail 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
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 http://www.joomlacontenteditor.net/downloads/editor/joomla15x ou le pack
français ici http://extensions.joomla.fr/liste-des-derniers-fichiers/accueil/jce-2-pack-complet ). 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
http://www.sarki.ch/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
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
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 http://extensions.joomla.fr
Le site anglophone http://extensions.joomla.org qui est bien plus fourni que le site
francophone.
Page concernant
map/3066
Xmap
http://extensions.joomla.org/extensions/structure-a-navigation/site-
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
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
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
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.).
Voir la page consacrer à cette extension sur le site http://extensions.joomla.org
http://extensions.joomla.org/extensions/contacts-and-feedback/forms/4939
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
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.
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
http://extensions.joomla.org/extensions/languages/multi-lingual-content/460
Ce composant se retrouve dans Composants  Joomfish
Je vous laisse regarder le fichier annexe concernant ce composant.
28
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
http://extensions.joomla.org/extensions/photos-a-images/photo-gallery/6301
Site de l’éditeur
http://www.bretteleben.de/lang-en/joomla/very-simple-image-gallery.html
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
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
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 1.5.23 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 1.5.23 + 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
joomla_1.5.23_extensions1_joomfish et pour la base de données
se
nomme
package
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
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
top
user1
left
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
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
http://localhost/site-structure/?tp=1
ou http://www.monsite.com/?tp=1
afin d’afficher une page présentant les différentes zones et leurs noms.
33
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
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
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
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 www.savoierandolac.com 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
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
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
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
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
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
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
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
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 http://maps.google.fr/, 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
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
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 (Email) 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
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
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 email 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
nom
prenom
adresse
email
commentaires
envoyer
Libellé du champ
Nom
Prénom
Adresse
Courriel
Commentaires
Envoyer
Type
texte
texte
textarea
Texte
Textarea
button
Champ obligatoire ?
Oui
Oui
Non
Oui
Oui
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
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
Jean-Claude GERARD
01/12/2011
Champ email :
Le champ email est un champ de type texte
que nous souhaitons obligatoire, et nous
souhaitons bien sur que ce champ contienne
une adresse email valide. C’est pourquoi
vous devez choisir dans Type de données la
valeur Email.
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 :
-
51
submit pour traiter les données (choix à
utiliser ici !)
reset (réinitialiser) pour effacer les
champs de formulaires
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
Jean-Claude GERARD
01/12/2011
Donc en listant les champs à créer nous obtenons la liste ci-dessous. Nous rajoutons juste un champ
email.
Nom du champ
nom
prenom
adresse
cp
ville
email
telfixe
telmobile
envoyer
annuler
Libellé du champ
Nom
Prénom
Adresse
Code postal
Ville
Courriel
Téléphone
Portable
Adhérer
Annuler
Type
texte
texte
textarea
texte
texte
Texte (type email)
texte
texte
button (submit)
button (réinitialiser)
Champ obligatoire ?
Oui
Oui
Oui
Oui
Oui
Oui
Non
Non
Commencez par créer un nouveau formulaire nommé adhésion. Cocher la case pour sauver les
résultats.
Dans l’onglet Email, choisissez d’envoyer un courriel d’envoie du résultat et un courrier de
confirmation (voir ci-dessous).
53
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
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 : http://www.bretteleben.de/langen/joomla/very-simple-image-gallery/-anleitung-plugin.html
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 21-10-2011 »
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
Cliquez sur le dossier stories ci-dessus et créer un nouveau répertoire que vous nommerez sortie-2110-2011 (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
(http://photofiltre.free.fr/utils/PhotoFiltre.zip ). 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
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-21-10-2011 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-21-10-2011{/vsig}
Sortie-21-10-2011 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 http://localhost/site-structure, 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
58
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
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
Titre du module : Prestations
Sauvegarder votre menu
Nouveau menu pour créer le troisième menu Disciplines
Titre du menu = menu-disciplines
Titre : Disciplines
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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é !
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
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 :
-
http://www.nicolas-informatique.fr/mentions-legales.php
http://www.journaldunet.com/expert/12066/mentions-legales-d-un-site-web-gare-auxcontraventions.shtml
78
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 : http://localhost/phpmyadmin
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
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
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-28-11-2011.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
Cliquez sur le nom de la base en haut à gauche pour afficher la fenêtre telle que ci-dessus.
Puis cliquez sur Exporter
82
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
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 1.5.23 tel que l’on peut le télécharger sur Internet ou
utiliser le fichier Joomla_1.5.23-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
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
Zone 1 :
Sélectionnez le répertoire dans
lequel se trouvent vos fichiers à
transférer
Zone 2 :
Zone 3 :
Vos fichiers sur votre
ordinateur
Votre emplacement chez
votre hébergeur
Zone1 : sélectionnez le répertoire
c:\xampplite\htdocs\site-structure)
dans
lequel
se
trouve
votre
site
(normalement
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_1.5.23Stable-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
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 (http://www.monsite.com/).
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
http://xxxxxxxxxxxxx/phpmyadmin
Indiquez votre identifiant et mot de passe, plus d’autres renseignements si demandés.
Cliquez sur le nom de votre base
87
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
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

Créer son site Internet avec JOOMLA

Transcription

Documents pareils

http://www.ca-cotesdarmor.fr Vider les fichiers temporaires et l

Arbeitsrecht / Droits du travail

FLORENCE FORESTIE

1) LISBON-ALFAMA (55€/JOUR)

Restaurant Menu de la St

Festival des Arts Martiaux

Menu Novembre 2016

jambon broche - Mairie de Sainte-Croix-en

RESTAURANT LE RÉGINA

Nautisme - ETS Durand