Enseignement Informatique

Classe de BTS DATR 1

-----------------------------------------------------------------------

Analyser et concevoir des documents et applications simples &Savoir communiquer avec les TIC.

-----------------------------------------------------------------------

Partie 1: Installer le CMS Joomla! sur un serveur gratuit: Binhoster.

Présenté par BELMOKHE Hocine, enseignant Informatique, LPA Erstein, Année 2012/2013

Version 1.0, Novembre 2012

Table des Matières

1. Introduction

2. Hébergeurs Web Gratuits

3. Tableaux Synoptiques

4. Binhoster

5. Filezilla

6. Transfert Joomla!

7. Configuration Joomla!

8. Conclusion

Introduction 1/1✔ Nous allons voir dans ce cours comment installer le CMS Joomla! sur un serveur gratuit: Binhoster.

✔ Nous verrons dans une autre partie ce qu'est un CMS et comment l'utiliser. Ce cours vous indique simplement comment installer Joomla! chez Binhoster. Il existe plusieurs hébergeurs proposant des serveurs gratuits, je ne ferai qu'un focus sur Binhoster. Néanmoins, si vous le souhaitez, je ferai une présentation similaire sur d'autres hébergeurs (free par exemple).

✔ Remarques: N'oubliez pas de sauvegarder vos travaux sur votre compte en créant un dossier en date du jour et en y insérant vos exemples en les nommant clairement afin d'être retrouvés facilement. Et sauvegardez régulièrement vos travaux!!!!!

✔ N'oubliez pas les raccourcis clavier ci-dessous qui vous seront très utiles à chaque TP/TD:

✔ Ctrl s: Sauvegarder les modifications✔ Ctrl z: Annuler les dernières modifications✔ Ctrl y: Restaurer ce qui a été annulé

Hébergeurs Web Gratuits 1/1✔ Les hébergeurs web gratuit ne se bousculent pas en France. „Free.fr“ a été le pionnier et reste sans doute encore aujourd'hui le leader sur le marché Français. Problème... son infrastructure n'a connu aucune évolution technique majeure depuis 2007;

✔ En parallèle, les solutions logicielles web ( ex: cms, blog, forum, etc.) se sont développées et enrichies. Leurs accessibilités et ergonomies permettent à tout un chacun de les installer, configurer et mettre en ligne très simplement et rapidement. Cependant, les pré-requis techniques en terme d’hébergement sont de plus en plus importants et donc contraignants (version, mémoire et extensions php disponibles). Suivant les cas, il est impossible d'installer ou d'utiliser pleinement les logiciels récents tels que WordPress, Joomla, Drupal ou bien Piwik sur de nombreux hébergeurs gratuits;

✔ Attention, les services offerts par les hébergeurs gratuits peuvent évoluer (régresser), les comptes peuvent être suspendus sans préavis (pouvant entraîner la perte des données présente sur le site), difficile de savoir si ces services offrent ou non une quelconque garantie sur la confidentialité des données personnelles (collecte, utilisation et conservation). Il faut donc prendre le temps d'aller lire les conditions d'utilisations de chaque hébergeur gratuit et envisager leurs services plutôt comme solution d'appoint ou bien "intermédiaire" (à celle de passer à une offre payante).

Tableaux Synoptiques 1/2✔ Le tableau ci-dessous liste les hébergeurs gratuits sans pub avec leurs principales caractéristiques:

Tableaux Synoptiques 2/2✔ Le tableau ci-dessous liste les hébergeurs gratuits sans pub avec leurs principales caractéristiques (suite):

Binhoster 1/6✔ Rendez-vous sur le site http://www.binhoster.com/index.html et cliquez sur „Free Account Signup“:

Binhoster 2/6✔ Complétez les différents champs afin de créer un compte gratuit (à noter que le mot de passe doit compter des chiffres et des lettres et l'adresse mail doit être valide):

Binhoster 3/6✔ Rendez-vous dans votre boîte mail afin de valider votre inscription:

Binhoster 4/6✔ Après avoir cliqué sur le lien précédent, une nouvelle page s'ouvre vous permettant de sélectionner le type de compte. Choisissez via le menu déroulant l'option „Free“:

Binhoster 5/6✔ Il vous faut maintenant choisir le nom de votre sous-domaine (en gros l'URL de votre futur site). J'ai choisi par exemple pour mon site test „www.ersteininfo.binhoster.com“:

Binhoster 6/6✔ Cliquez sur le bouton „Switch“ afin de visualiser les informations sur votre compte:

✔ Nous allons maintenant paramétrer notre client FTP afin d'installer le noyau de Joomla!. Je vous propose d'utiliser „Filezilla Client“:

Filezilla 1/3✔ On peut définir un client FTP comme un logiciel qui va vous permettre de placer des fichiers depuis votre ordinateur vers un serveur Internet. Filezilla devrait être installé sur les postes du lycée, si ce n'est pas le cas, il s'installe très facilement. Une fois le logiciel ouvert, cliquez sur „Fichier“ / „Gestionnaire de Sites“ puis sur „Nouveau Site“:

Filezilla 2/3✔ Il vous faut remplir les champs encadrés en rouge ci-dessous. Les informations le permettant se situe sur le „Control Panel“ à la rubrique „File Transfer Details“ de Binhoster. Par exemple pour le champs „Hôte“, il vous faut mettre le contenu du champs „FTP Hostname“, à savoir „ersteininfo“ pour ma part. Une fois les 3 champs complétés, cliquez sur „OK“:

Filezilla 3/3✔ 1. Cette zone affiche les échanges entre votre pc et le serveur (vert:ok, rouge:problème);✔ 2. Cette zone affiche l'arborescence de votre PC;✔ 3. Cette zone affiche le contenu d'un dossier de votre PC;✔ 4. Cette zone affiche l'arborescence de votre serveur;✔ 5. Cette zone affiche le contenu d'un dossier de votre arborescence.

✔ Les échanges entre la zone 3 et 5 se font par glisser/déposer.

1

3

4

5

2

Transfert Joomla! 1/5✔ Nous allons maintenant transférer le contenu du noyau Joomla! version 2.5 vers notre serveur via Filezilla. Nous passerons outre le côté technique de Joomla!, enregistrez le dossier ci-dessous dans votre bureau, dézippez son contenu et copiez/collez l'ensemble des fichiers: http://www.joomlart.com/forums/downloads.php?do=cat&id=361

Transfert Joomla! 2/5✔ Le dossier téléchargé se nomme „t3_framework_2_for_joomla_2.5(2012_version).zip“. ✔ Dézippez son contenu, vous devriez avoir un dossier avec le contenu suivant:

✔ Rendez-vous dans le dossier „quickstart“, vous devriez y trouver un dossier nommé „jatc_t3v2_blank_j25.zip“. Dézippez-le et déplacez par un glisser/déposer son contenu vers votre serveur via Filezilla:

Transfert Joomla! 3/5✔ Sélectionnez l'ensemble du contenu et faites un glissez/déposez vers le serveur. Pensez à supprimer le fichier „default.php“:

Transfert Joomla! 4/5✔ Comme vous pouvez le voir dans l'image ci-dessous, le noyau comporte un peu moins de 6400 fichiers, il faudra vous armer de patience le temps qu'ils soient tous transférés (ça a duré 01h15 chez moi, voilà un autre inconvénient des hébergeurs gratuits!):

✔ À noter que si vous avez un message d'erreur similaire à celui ci-dessous, cliquez sur „Remplacer“ et sur „Toujours effectuer cette action“:

Transfert Joomla! 5/5✔ Vous devriez avoir ce qui est affiché ci-dessous:

Configuration Joomla! 1/7✔ Nous allons maintenant configurer Joomla!. Pour ce faire, tapez votre URL (la mienne est „http://ersteininfo.binhoster.com“) dans votre navigateur, vous devriez avoir une page similaire à celle-ci. Sélectionnez „Français(Fr)“ et cliquez sur „Suivant“:

Configuration Joomla! 2/7✔ Si tous les voyants sont au vert (et ça devrait être le cas chez vous), cliquez sur „Suivant“:

✔ Cliquez à nouveau sur „Suivant“ afin de valider la licence d'utilisation:

Configuration Joomla! 3/7✔ La prochaine étape consiste à configurer la base de données du site. Pour ce faire, rendez-vous à l'adresse „http://cpanel.binhoster.com/advanced/mysql-databases“ afin de créer votre base (il vous faudra peut-être remettre vos identifiants si vous avez été déconnecté):

✔ Je vous propose par exemple de mettre „1“ dans les champs „MySQL database name“ et „MySQL username“. Concernant le mot de passe, mettez le même que précédemment, il vaut mieux avoir le même partout afin d'éviter les oublis et autres inversions.

Configuration Joomla! 4/7✔ La base de données étant créée, nous pouvons retourner sur notre site afin de finaliser l'installation de Joomla!. Complétez les champs avec les valeurs définies précédemment puis cliquez sur „Suivant“:

Configuration Joomla! 5/7✔ Cliquez à nouveau sur „Suivant“ en laissant la valeur par défaut:

Configuration Joomla! 6/7✔ Remplissez les différents champs et n'oubliez pas de cliquez sur „Installer les données exemples“. Puis, cliquez sur „Suivant“:

Configuration Joomla! 7/7✔ Félicitations! Joomla! est installé à présent. Il vous reste à cliquer sur „Supprimer le dossier d'installation“ puis cliquer sur „Site“ afin de voir votre site online!

Conclusion 1/1✔ Cette première partie est terminée. Nous verrons dans les prochains cours comment administrer Joomla!, c'est à dire:

✔ Ajouter/Modifier/Supprimer des articles (texte, image, vidéo);✔ Ajouter/Modifier/Supprimer des modules (fonctionnalité);✔ Ajouter/Modifier/Supprimer des composants (fonctionnalité);✔ Ajouter/Modifier/Supprimer des templates (thème);✔ Etc.