Comment créer un site web avec Joomla

Un tutoriel réalisé par Robert Mening expliquant comment créer un site web via la plate-forme Joomla. Il partage ses astuces concernant la gestion du contenu et des extensions de votre site web.

Vous pouvez commenter cet article sur le forum : Commentez Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Créer site web basique avec Joomla

Dans ce tutoriel, je vais vous présenter Joomla et vous montrer comment créer un site web sur cette plate-forme populaire de web design et de développement web.

Image non disponible

Joomla est un des plus anciens et célèbres projets GRATUITS et en open source après WordPress.

Depuis ses origines en l'an 2000, Joomla a été responsable de nombreuses innovations dans le domaine du PHP/MySQL constitué de WordPress, Drupal, Magento et de beaucoup d'autres.

Puisqu'il se porte toujours aussi bien en 2015, Joomla reste le deuxième système de gestion du contenu (SGC), connu sous le terme de Content Management Systems (CMS) en anglais, juste derrière WordPress.

Vous avez sûrement utilisé ou entendu parlé de Joomla à un moment ou à un autre, mais si vous ne l'avez pas encore utilisé, la dernière version (Joomla 3) propose de nombreuses raisons d'y jeter un œil.

Joomla est un produit fascinant et il a été le premier SGC à être complètement réactif à la fois pour les visiteurs et les administrateurs.

Joomla 3 est réactif grâce à son équipe qui a choisi d'adopter la structure Bootstrap. L'utilisation de cette dernière rend Joomla 3 attractif pour les designers front-end, cependant il facilite aussi le travail des développeurs qui créent des interfaces pour leur code.

Beaucoup de travail a été fait pour votre première expérience avec Joomla 3. La procédure d'installation est incroyablement rapide et on vous propose de nombreux modèles de design parmi lesquels vous pourrez choisir celui de votre site.

Vous pouvez créer et faire fonctionner un site web avec Joomla 3 en seulement quelques minutes.

II. Présentation de Joomla

http://joomla.org/3/http://joomla.org/3/ est l'endroit où il faut se rendre pour commencer à se renseigner sur Joomla.

Le site propose une vidéo d'introductionvidéo d'introduction ainsi que de nombreuses informations concernant les fonctionnalités de Joomla. Vous verrez que Joomla 3 utilise Bootstrap, LESS, jQuery ainsi que des supports pour d'autres bases de données telles que PostgreSQL.

Si vous souhaitez utiliser Joomla pour faire un essai, cliquez sur le bouton orange « Démo ».

Mais pour créer notre site web en suivant ce tutoriel, nous allons cliquer sur le bouton vert « Télécharger ».

Image non disponible

Vous pouvez télécharger la dernière version de Joomla 3 sur le site Officiel.

Joomla 3 est la version recommandée pour les nouveaux sites web. Bien que plus ancienne, la version 2.5 de Joomla (aussi disponible sur cette page) est toujours supportée.

Cliquez sur le bouton vert « Télécharger Joomla 3.3 ».

Image non disponible

III. Installer Joomla

Pour installer Joomla, vous avez deux options possibles. Dans les deux cas, vous aurez besoin d'un hébergeur et d'un nom de domaine. Je recommande l'hébergeur web http://www.bluehost.comhttp://www.bluehost.com pour Joomla, puisqu'il est probablement le moins cher et le plus pratique pour un débutant.

III-A. Installation en un clic

III-B. Installation manuelle

Cela devrait prendre entre 20 et 30 minutes.

Tout d'abord vous avez besoin d'un nom de domaine (l'adresse/l'URL de votre site web) ainsi que d'un hébergeur web (un service qui connecte votre site à Internet). Vous pouvez obtenir les deux sur Bluehost.

Quand vous aurez téléchargé Joomla, vous trouverez un fichier nommé à peu près comme ceci : « Joomla_3.3.6-Stable-Full_Package.zip ».

Extrayez ce fichier compressé et vérifiez que vous voyez les mêmes fichiers et dossiers que sur l'image ci-dessous. Téléchargez ces fichiers sur votre serveur ou déplacez-les sur votre localhost.

Image non disponible

Rendez-vous là où vos fichiers sont mis en ligne et vous verrez un écran d'installation. C'est la première des trois étapes du processus d'installation.

Si vous n'utilisez pas l'anglais pour votre site web, vous pouvez changer la langue ici. Insérez le nom de votre site ainsi que vos informations du compte administrateur.

Image non disponible

Cliquez sur « Suivant » pour continuer l'installation.

Il est plus judicieux d'utiliser une base de données MySQL pour installer Joomla, mais il supporte aussi MySQLi et PostgreSQL.

Entrez le nom de l'hébergeur de votre base de données, votre pseudo, mot de passe et le nom sur cette page. Vous obtiendrez des informations à propos de votre hébergeur (iPageiPage par exemple).

Joomla va générer automatiquement une table de préfixes aléatoire afin de compliquer les choses pour les hackeurs.

Image non disponible

Cliquez sur « Suivant » pour continuer l'installation.

L'écran final de l'installation vous propose différents modèles de données. Survoler chaque modèle vous donne une explication. Je vais choisir « Blog Anglais » pour ce tutoriel.

Plus bas sur la page vous trouverez une présentation des options de configuration. Joomla vérifie aussi que votre serveur est configuré correctement. Si quelque chose doit être corrigé, il sera marqué en rouge.

Cliquez sur « Installer ».

Image non disponible

Vous apercevrez une barre de progression puis un écran de félicitation.

Pour des raisons de sécurité, nous devons supprimer tous les fichiers d'installation que nous venons d'utiliser, cliquez simplement sur « Supprimer le dossier d'installation ».

Cliquez sur « Site » pour vous rendre sur votre tout nouveau site Joomla.

Image non disponible

IV. Votre nouveau site web Joomla

Du fait de votre choix de modèle, votre site Joomla ressemble à un blog tant sur le fond que sur la forme.

Il y a quatre articles sur la page d'accueil. Cliquez sur le titre de chacun d'entre eux pour voir le contenu complet.

Il y a aussi une barre latérale avec les options typiques des blogs telles que la liste des messages récents, un Blogroll et une liste des articles les plus lus.

Image non disponible

Dans l'introduction, j'ai dit que Joomla utilise actuellement une structure Bootstrap. Redimensionnez la fenêtre de votre navigateur pour voir comment Joomla réagit sur les écrans plus petits.

La zone de recherche se déplace sous le titre, les images rétrécissent et la barre latérale glisse sous les articles de la page d'accueil.

Image non disponible

V. Connectez-vous à votre site Joomla

Maintenant, regardons à quoi ressemble l'interface administrateur de Joomla 3.

Ajoutez le mot « /administrator/ » à la fin de l'URL de votre site. Par exemple http://VotreSite.com/administrator/.

Image non disponible

Connectez-vous en utilisant le pseudo administrateur et le mot de passe que vous avez créé lors de la procédure d'installation.

L'interface de l'administrateur Joomla a été totalement repensée pour Joomla 3.

La barre d'outils principale se trouve en haut de l'écran et contient tout ce dont vous avez besoin pour gérer votre site.

Le panneau de configuration que vous verrez après votre première connexion contient des raccourcis utiles ainsi que des informations basées sur cette barre d'outils principale.

Grâce à Bootstrap, l'interface de l'administrateur est prête à être utilisée aussi sur les appareils mobiles.

Image non disponible

Rédigeons maintenant notre premier contenu sur Joomla.

Dans la barre d'outils principale, rendez-vous dans « Contenu », puis « Gestionnaire d'article ».

Il y a trois choses à faire pour publier votre premier article :

  • titre : Mon premier article ;
  • catégorie : Blog ;
  • corps de texte : Je publie sur Joomla 3 pour la première fois.
Image non disponible

Cliquez sur « Sauvegarder » pour publier votre article.

Cliquez sur le nom de votre site dans le coin supérieur gauche de l'écran.

Vous allez désormais voir votre article publié en haut de la page d'accueil.

Au bas de la page d'accueil, il y aura une pagination, vous pourrez donc voir les articles plus anciens.

Image non disponible

Retournez sur la page d'administration.

Retournez sur votre nouvel article pour que je vous montre quelques fonctionnalités supplémentaires.

Vous pouvez trouver votre article dans la zone « Articles ajoutés récemment ». Vous pouvez aussi le retrouver en cliquant sur « Contenu » puis « Gestionnaire d'articles » dans la barre d'outils principale.

Image non disponible

Vous pouvez ajouter des images aux articles Joomla en utilisant le bouton « Image » sous le corps de texte.

Cliquez sur « Image » et vous verrez apparaître une fenêtre avec les images existantes sur le site.

Pour utiliser une image particulière, cliquez sur l'image en question pour la sélectionner, puis cliquez sur « Insérer ».

Descendez sur la fenêtre d'insertion d'image et vous pourrez télécharger de nouvelles images.

Image non disponible

La barre latérale contient les options les plus importantes pour chaque article.

  • Statut : publiez l'article ou conservez-le comme brouillon.
  • Accès : si vous choisissez « Enregistrés », seulement les utilisateurs connectés pourront le voir. Choisissez « Spécial » pour que seuls les administrateurs le voient.
  • Tags : comme sur WordPress, vous pouvez organiser le contenu via des catégories hiérarchiques, mais aussi grâce à des tags personnalisés.
Image non disponible

Des options avancées sont disponibles pour les articles via les onglets du menu en haut de l'écran.

  • Options de publication : choisissez les dates limites pour la publication de l'article.
  • Options de l'article : choisissez l'affichage de l'article.
  • Paramétrer l'écran d'édition : choisissez ce que les utilisateurs pourront voir pendant une modification de l'article.
  • Options des métadonnées internes : ajoutez une métadescription et plus.
  • Autorisations de l'article : contrôlez l'accès et l'édition de l'article.
Image non disponible

Pour naviguer sur le site et organiser tous les articles, fermez l'article en cours d'édition et cliquez sur « Contenu » puis « Gestionnaire d'articles ».

Vous pouvez voir le contenu de votre site sur la partie principale.

Dans la barre latérale gauche, vous pouvez utiliser les « Filtres » pour chercher des articles.

VI. Modèles Joomla

Le design de votre site Joomla est contrôlé via des modèlestemplates.

Dans la barre d'outils principale, rendez-vous dans « Extensions », puis « Gestionnaire des modèles ».

Cliquez sur « Mon style par défaut » (Protostar) puis dans l'onglet d'options.

Vous pouvez modifier le texte et les couleurs du modèle d'arrière-plan, télécharger un nouveau logo et ajouter des polices Google.

Image non disponible

Les fonctionnalités principales de Joomla sont appelées composants. Ceux-ci ont leur propre lien dans la barre d'outils principale.

Trois des extensions par défaut sont particulièrement utiles :

  • contacts : permet de créer des formulaires de contact ;
  • mise à jour Joomla : mise à jour de Joomla en un clic ;
  • tags : organise les tags ajoutés aux articles.

Toutes les fonctionnalités importantes que vous ajouterez à Joomla apparaîtront dans ce menu Composants.

Image non disponible

Nous avons vu que votre site Joomla dispose d'une barre latérale remplie d'options pour le blog. Joomla utilise le terme « Module » pour désigner ces items dans la barre latérale.

Cliquez sur « Extensions », puis « Gestionnaire de modules » et vous verrez apparaître une liste des fonctionnalités de votre blog : « Anciens articles », « Blogroll », « Articles les plus lus » et ainsi de suite.

Vous pouvez voir que la plupart de ces modules sont en « position-7 ».

Image non disponible

Pour finir, nous allons voir comment contrôler les modules de cette barre latérale.

Dans « Extensions », puis « Gestionnaire des modèles », cliquez sur le bouton « Options » en haut de l'écran.

Cochez « Aperçu de la position des modules » pour l'activer.

Maintenant, ajoutez «?tp=1 » à l'URL de votre site afin d'avoir quelque chose comme cela : http://VotreSite.com/?tp=1.

Vous verrez alors apparaître les noms de tous les endroits où vos modules peuvent être placés. En regardant les modules par défaut, vous pourrez confirmer le fait que la plupart d'entre eux sont en effet en « position-7 ».

Image non disponible

VII. Extensions.Joomla.org

Dans ce tutoriel vous avez découvert les fonctionnalités par défaut de Joomla, mais une plate-forme aussi populaire que Joomla dispose de milliers d'options supplémentaires.

Le seul endroit où se rendre pour trouver des extensions fiables est http://extensions.joomla.orghttp://extensions.joomla.org. La création de ce répertoire remonte à 2006 et regroupe près de 9000 extensions dans des catégories allant de « Accès et sécurité » à « Style et design ». Le nom complet du répertoire est « Répertoire d'extensions Joomla » (« Joomla Extension Directory » ou simplement JED). Je l'appellerai JED tout au long de ce tutoriel.

Une grosse différence entre le JED et le répertoire de plugins WordPress est que dans le premier, toute extension peut être listée, sans vérification de l'existence d'une version gratuite ou non. On peut donc dire sans mentir que le JED contient vraiment toutes les extensions fiables pour Joomla. Vous devrez donc vous méfier de toutes les autres extensions qui n'y sont pas listées.

Image non disponible

Le JED possède un système de vérification et de notation efficace.

Certaines des extensions les plus populaires du répertoire ont des centaines d'avis d'utilisateurs et chacune est notée en fonction de la fonctionnalité, de la facilité d'utilisation, de la documentation et de l'assistance qu'elle propose.

L'image ci-dessous provient de la catégorie « Accès et sécurité » qui se trouve en suivant http://extensions.joomla.org/category/access-a-security. Vous pouvez voir d'après l'ordre des extensions que le nombre d'avis positifs concernant la fiabilité a un certain impact. En faisant une recherche dans le JED, vous trouverez normalement les extensions les plus fiables et populaires au sommet de la liste.

Image non disponible

Cliquez sur « Akeeba Backup » et vous tomberez sur un bon exemple de ce qui se fait en matière d'informations concernant une extension. Akeeba est une des extensions les plus populaires de l'écosystème Joomla (vraiment beaucoup de monde l'utilise pour sauvegarder leurs sites). Ci-dessous vous trouverez la liste des endroits où cliquer sur Akeeba Backup pour trouver les différents détails :

  1. Nom de l'extension ;
  2. Lien de téléchargement ;
  3. Une description détaillée ;
  4. La notation ;
  5. Les autres extensions proposées par le même développeur ;
  6. Le numéro de la version, le nom du développeur, la date de la dernière mise à jour… ;
  7. Liens de téléchargement, d'assistance et de documentation.
Image non disponible

Voici un exemple d'utilisation d'Akeeba Backup afin de télécharger et d'installer une extension.

Image non disponible
  • Cliquez sur le bouton bleu « Télécharger maintenant ».
Image non disponible

Vous obtiendrez un fichier compressé sur votre bureau avec un nom ressemblant à « com_akeeba-4.1.2-core.zip ». N'extrayez pas ce fichier, conservez-le compressé. Si votre ordinateur extrait automatiquement les fichiers (comme les Macs le font), vous devrez compresser le dossier de nouveau.

Maintenant, il faut télécharger l'extension Akeeba Backup :

Image non disponible

Vous allez apercevoir un message d'accueil provenant de Joomla et du développeur de l'extension. Dans cet exemple, Joomla dit « Installation du composant réussie », et l'extension déclare « Bienvenue sur Akeeba Backup ».

Image non disponible

Nous savons d'après le message que Akeeba Backup est un composant, donc rendons-nous dans notre menu « Composants ». Il est là ! Akeeba Backup a bien été installé. Vous pouvez cliquer sur le lien du menu comme sur l'image ci-dessous et commencer à utiliser Akeeba Backup pour faire des sauvegardes de votre site Joomla.

Image non disponible

Vous pouvez utiliser un procédé similaire pour trouver n'importe quelle fonctionnalité de votre site Joomla :

  1. Rendez-vous sur http://extensions.joomla.orghttp://extensions.joomla.org ;
  2. Recherchez une extension grâce à la description, la note, les avis et les informations disponibles ;
  3. Téléchargez l'extension que vous voulez essayer ;
  4. Connectez-vous sur votre site Joomla et ajoutez l'extension.

Il y a actuellement près de 9000 extensions disponibles pour Joomla, ainsi quoi que vous cherchiez, vous trouverez une extension dédiée à cette fonctionnalité sur   http://extensions.joomla.orghttp://extensions.joomla.orghttp://extensions.joomla.org.

VIII. Autres ressources utiles

Ci-dessous, vous trouverez des ressources supplémentaires que vous pouvez utiliser sans problème :

Si vous avez besoin d'une quelconque aide à propos d'un site Joomla, n'hésitez pas à me contacter à l'adresse suivante : .

Cet article a été rédigé en partenariat avec OSTraining.comOSTraining.com.

IX. Remerciements Développez

Nous remercions Robert Mening de nous avoir aimablement autorisés à publier son article. Cet article est une traduction autorisée dont le texte original peut être trouvé sur Website Setup. Nous remercions aussi Montoya Florent pour sa traduction ainsi que Claude Leloup pour sa relecture orthographique. Les commentaires et les suggestions d'amélioration sont les bienvenus, alors, après votre lecture, n'hésitez pas. Commentez Donner une note à l'article (5)

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2015 Robert Mening. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.