Rapport projet tuteuré, IUT BLAGNAC, R&T 2010-2011 Actualisation de site WEB : www.toy4raid.com Outils : JOOMLA!

1. Rapport projet tuteuré :
Actualisation de site WEB :
Outils : JOOMLA!
IUT DE BLAGNAC | DEPARTEMENT RESEAUX ET TELECOMMUNICATIONS
Client : Pierre-Louis QUEMIN
Tuteur pédagogique : Gaël MANSALIER
Binôme: Arnold Stéllio BOUNGOUNGOU - Yann BELEMA 2010-2011

2. 2

3. Rapport projet tuteuré :
Actualisation de site WEB à l'aide de JOOMLA! Site
www.toy4raid.com
Client : Pierre-Louis QUEMIN
Tuteur pédagogique : Gaël MANSALIER
Binôme: Arnold BOUNGOUNGOU - Yann BELEMA 2010-2011
3

4. 4

5. Sommaire
Sommaire...............................................................................................................................................5
Introduction............................................................................................................................................5
1. Présentation du travail à effectuer et du CMS Joomla !.....................................................................7
1.1 Présentation et analyse du cahier des charges :...........................................................................7
2- Utilisation de Joomla!.......................................................................................................................13
2.1 Concepts fondamentaux :.........................................................................................................13
2.2 Installation :................................................................................................................................19
3. Présentations et utilisations de différentes extensions :..................................................................21
3.1 Le forum :...................................................................................................................................21
3.2 Virtuemart (boutique en ligne) :.................................................................................................24
3.3 GAvick photoslide GK3* .............................................................................................................26
3.4 AdsManager (Petites annonces) :...............................................................................................27
3.6 Présentation générale de K2 :.....................................................................................................28
4-Analyse du trafic sur le site et génération de fonds :........................................................................33
5-Retour d’expérience :........................................................................................................................35
Conclusion :..........................................................................................................................................36
Glossaire...............................................................................................................................................38
Bibliographie :.......................................................................................................................................40
Web graphie :.......................................................................................................................................40
Introduction
Etudiants en deuxième année de DUT en Réseaux et Télécommunications à l’IUT Blagnac, il
est important de réaliser un projet tuteuré. Ce projet nous permet non seulement
5

6. d’approfondir quelques notions abordées au cours de notre formation, mais aussi de nous
préparer à la soutenance orale et à la rédaction du projet.
www.toy4raid.com « version 1 » est née en 2007 sous la forme d'un blog dédié à la passion
du 4x4, des rallyes-raids, et des Toyota.
Le blog s'est ensuite rapidement enrichi de rubriques nécessitant une gestion plus régulière
de son contenu. Le site à aujourd'hui a atteint un premier niveau de maturité, il compte
environ
200 visites par mois (source Xiti). Actuellement, l'outil utilisé pour l'administration et la
publication du site est TOWEB. Cet outil offre l'avantage d'une très grande facilité
d'utilisation mais atteint ses limites en termes de gestion de contenus et surtout de mise en
œuvre de nouvelles fonctionnalités.
Le but de ce projet est de rendre le site plus dynamique et de générer plus de trafic. Pour
cela nous devons travailler sur l’interactivité du site avec les internautes afin de susciter plus
de visites et en faisant des liens vers d’autres sites (notion portail) partenaires. Ensuite, nous
devons enrichir le site en nouvelles fonctionnalités, ce qui nécessite d’apporter plus de
contenus et de proposer plus de multimédia au site. Enfin nous devons disposer d’un
système de gestion de contenu plus évolué, et le choix de JOOMLA ! répond aux attentes de
la réalisation su projet du fait de sa composition modulaire et son interface d’administration
conviviale et instinctive. L’un des principaux objectifs du projet est d’apporter des
fonctionnalités plus avancées comme une boutique en ligne, afin de générer des revenus et
de rendre le site plus complet.
Dans un premier temps, on va présenter JOOMLA ! et parler de son choix par rapport à
l’évolution du site existant et à l’analyse du cahier des charges, ensuite nous poursuivrons
sur l’utilisation de JOOMLA ! en commençant par son installation sur un serveur choisi en
ligne et nous présenterons ensuite ses différents composants, modules et plug-in
permettant la gestion du site et enfin le choix du Template adapté à JOOMLA ! Nous
présenterons aussi le site dans sa structure et l’organisation de son contenu avant de finir la
présentation et l’utilisation de différentes extensions compatibles avec JOOMLA ! qui
apportent de nouvelles fonctionnalités au site et qui permettent sa dynamicité.
6

7. 1. Présentation du travail à effectuer et du CMS
Joomla !
1.1 PRÉSENTATION ET ANALYSE DU CAHIER DES CHARGES :
Sujet : Actualisation d'un site WEB à l'aide de JOOMLA! Site www.toy4raid.com.
Pour mener ce projet nous allons utiliser le Composant JOOMLA ainsi que des modules
complémentaires (tels que VIRTUEMART* pour le e-commerce et KUNENA* pour le forum).
Le site www.toy4raid.com est un site qui existe déjà ; donc notre but est de le rendre le plus
dynamique tout en apportant des nouvelles fonctionnalités et des nouveaux modules :
• Forum: mise en place d'un forum avec médiation par le webmaster ; nous avons décidé de le
réaliser avec KUNENA* car se composants 'intègre très bien dans JOOMLA.
• Petites annonces : Identification nécessaire (nom, prénom, email, pseudo, mot de passe).
Donner aux internautes la possibilité de saisir leur annonce avec chargement de photos.
L'annonce est publiée après validation par le webmaster.
• Album photos et gallérie vidéos : pour que les utilisateurs puissent ajouter des photos et
vidéos sur le site ; les composants choisis sont alors hwdPhotoShare* et hwdVideoShare*.
• Plate forme de publicité plus évoluée : ce programme propose un revenu publicitaire.
• Boutique en ligne et boutiques partenaires : elle sera dédiée à des articles signés
toy4raid.com. Si le paiement se fait en ligne, il faut créer un paiement sécurisé avec tiers de
confiance. Boutique partenaire : L'idée est de permettre aux internautes d'acheter des
équipements et accessoires dédiés aux 4x4 Toyota, mais également des équipements typés
raids (matériels de déplantage, vêtements, petit matériel de camping, etc.). Différentes
possibilités seront offertes aux partenaires :
- Niveau 1, accord simple avec un partenaire.
- Niveau 2, Lien sur un article de la boutique du partenaire. Possibilité tracer l'achat par un
cookie et donc rémunération possible de toy4raid.com
– Niveau 3. Achat sur le site toy4raid, d'un article partenaire. Niveau de service et logistique.
Composant choisi pour développer la boutique en ligne est VIRTUEMART*.
7

8. Rappelons que l’ensemble des composants cités ci-dessus fera l’objet d’une étude plus approfondie
dans la suite de notre rapport, nous verrons comment ils agissent sur le site et quel est leur utilité.
1.2 Présentation de l'existant :
www.toy4raid.com est un site qui existe déjà et est présent sur la toile. C’est un site de rallye qui
traite des émotions, de la passion que procure le raid. Une certaine activité existe, et à du contenu
comme tout site ordinaire. Et ce de cette base que nous allons nous appuyé pour reconstruire le
nouveau site. Par exemple, nous allons conserver le logo du site mais aussi l’architecture du
contenu. Il s’agit entre autre des Catégories, Rubriques et la gestion des articles. Tous les noms des
rubriques et catégories seront réutilisés, et si possible en ajouté d’autres.
Le tableau ci-dessous montre comment le contenu était géré avant que nous ne commencions les
travaux.
Ce site a du contenu statique et le but est de le faire évoluer, tout en respectant les valeurs actuelles
du site.
Rappelons juste que : pour faire évoluer ce site nous allons partir de ‘zéro’ c'est-à-dire nous allons
travailler sur une autre plate-forme (parfois en local ou sur un autre hébergeur différent de celui où
le site est installé).
8

9. Après avoir fait l’état des lieux, nous allons maintenant présenter le principal élément qui va nous
permettre de mettre sur pied le nouveau site.
1.3-Présentation de Joomla!
« Joomla ! » fait partir des CMS (Content Management System) les plus utilisés dans le
monde du WEB, il vient juste en 3e position (derrière DRUPAL et WORDPRESS) dans le
concours de 2009 du meilleur CMS Open source* organisé par la société britannique Packt.
Toute une communauté développe et travail autour de Joomla ! et se trouve dans touts les
horizons du monde ; Ces derniers mettent en ligne leurs travaux et le partage avec tout le
monde.
Un CMS permet de créer du contenu (forum, boutique en ligne, galerie photos…), de
l'organiser en plusieurs catégories et de développer des fonctionnalités spécifiques sans
faire appel à des fortes connaissances en programmation. C’est ainsi que Joomla! Signifie en
swahili ‘le tous, tous ensemble’.
Partie Administration : C’est dans cette partie que le gros du travail se déroule ; la capture
ci-dessous présente la partie caché, où seul l’administrateur et des personnes autorisées ont
accès. Pour fixer les choses, nous allons présenter les différents onglets de la figure ci-
dessous enfin de s’habituer aux termes qui seront le plus souvent cité dans notre rapport.
9

10. L’onglet ‘Site’ permet d’accéder à la configuration générale du site, par exemple si l’on
souhaite mettre le signe en hors ligne, de créer des utilisateurs, gestion des médias, si l’on
souhaite mettre des images en ligne…
L’onglet ‘Menu’ permet de gérer l’ensemble des menus qui s’afficheront sur le site ‘partie
public). La capture ci-dessous montre les différents menus présents sur notre site et leurs
sous-onglets.
Une fois crée dans la partie administration, les différents menus sont visibles sur la partie
public (voir capture ci-dessous).
10

11. L’onglet ‘contenu’ va nous permettre de créer tout le contenu du site il s’agit en majorité des articles.
Mais ces articles doivent être classés dans un certain ordre notamment par thème enfin de s’y
retrouver et de bien présenter ce contenu aux personnes qui vont se connecter sur le site.
…
… …
…
Cet onglet ‘contenu’ va aussi nous permettre de sélectionner tous l’élément que l’on décide
d’afficher en page d’accueil et de créer les différents articles.
Notons que pour des soucis de présentations et de plusieurs options, nous avons ajouté un module
complémentaire K2 que nous développerons plus tard.
11
Article 1 Article 2 Article 3
Catégorie 1.1 Catégorie 1.2
Section 1
Article 1 Article 2
Les Graphiques ci-contre présentent comment
le contenu est relié.
En partant du bas du graphique, nous pouvons
remarquer que chaque article est relié à une
catégorie ; les catégories sont reliées à une
section.
Nous pouvons associer les sections à des
thèmes et des catégories à des sous thèmes.
Section 2
Catégorie 2.1 Catégorie 2.2
Article 3Article 2Article 1
Article 1

12. L’onglet « Composants» permet d’accéder à l’ensemble des composants (ceux présents à
l’installation de Joomla ! et ceux ajoutés). Le but du composant est de créer une application au sein du
système. Il permet d’aller très vite dans la réalisation d’un site web. Et ajoute des fonctionnalités.
L’onglet « Extensions* » va nous permettre de gérer et d’installer les plugins*, de charger et de choisir le
Template* par défaut.
L’onglet « Outils » c’est comme une boite mail ; dans laquelle on va envoyer et recevoir le message ; de
nettoyer de le cache* et de purger les fichiers expirés du cache*.
L’onglet « help » c’est pour l’aide.
Nous avons fait le tour sur les objets que nous allons utiliser, et présenter en général joomla ! enfin de
faciliter la compréhension de la suite.
Après avoir fait le tour du travail à exécuter et présenter Joomlà ! de manière succincte, nous allons
maintenant voir comment il s’utilise.
12

13. 2- Utilisation de Joomla!
2.1 Concepts fondamentaux :
On présente dans cette partie la structure fonctionnelle d’un Système de Gestion de
Contenu Web (CMS) en nous basant sur Joomla !
 Frontend (Frontal) et backend :
Un Système CMS se base sur le couple Frontend et Backend. Le Frontend (partie vitrine)
consiste en la page d’accueil et toutes les autres pages du site telles que les voient les
visiteurs et les utilisateurs identifiés.
Exemple : Page d’accueil du site
Le Backend (partie arrière-boutique) contient l’interface de gestion des pages par
l’administrateur. Les activités de Backend comprennent la configuration, la maintenance, la
création des statistiques et des nouveaux contenus. Le Backend est située à une adresse
13
http://projet 4toy.harmonieslash.com

14. Web différente de la page d’accueil du site (donc du Frontend), dans notre cas :
http://projet4toy.harmonieslash.com/administrator illustrée par la figure suivante.
 Droits d’accès
Dès que l’on parle d’administration, il faut introduire des règles pour garantir l’utilisation
organisée des ressources disponibles : ce sont les droits d’accès. Dans un CMS*, toutes les
personnes concernées se voient attribuer un identifiant (nom d’utilisateur) et un profil
d’accès y est associé. Cohabitent ainsi des utilisateurs simplement reconnus, des créateurs et
correcteurs de contenus qui ont plus de droits et un ou plusieurs administrateurs, qui ont
accès à tout. Selon le profil de droits d’accès, la page d’accueil du site se présente
différemment ou bien l’utilisateur bénéficie d’une interface d’administration distincte de la
page d’accueil.
14
http://projet4toy.harmonieslash.com/administrator

15. Interface de connexion à l’administration Joomla !
Interface administration présentant la gestion des différents types d’utilisateurs
15

16.  Contenus :
Les contenus peuvent prendre des formes très diverses : fichiers textes, liens, images,
fichiers audio, données extraites d’une application comme Google Maps ou une
combinaison de ces éléments. Pour que la gestion de tous ces contenus soit simplifiée, ils
sont systématiquement intégrés à des structures d’accueil. Les textes sont ainsi répartis dans
les catégories. Ces catégories consistent elles aussi à des contenus qui doivent être
administrables. On peut s’abonner à ces différents types de contenu.
 Extentions
Les composants, modules, Template et plugins sont réunis sous le terme collectif
« extensions ». Ils apportent les enrichissements fonctionnels par rapport à ce que propose
le noyau de Joomla !
 Template
Sorte de modèle visuel prêt à recevoir des contenus. Il détermine les couleurs, les polices, les
tailles de caractères, l’image d’arrière-plan, les espacements et la distribution des sous-
éléments d’une page. Un Template réunit au moins un fichier HTML décrivant la structure
de la page et un fichier CSS décrivant les styles d’affichage. Un Template peut être beaucoup
plus complexe et rendre c'est-à-dire afficher des données de Joomla ! accessibles de
multiples manières.
 Plugins :
Un plugin est un bloc de code qui vient se brancher en un point de l’infrastructure de
Joomla ! pour en modifier le fonctionnement. Vous pouvez par exemple utiliser un plugin
dans un contenu pour charger le contenu d’un module dans un texte. Pour pouvoir étendre
16

17. la fonction de recherche d’un site Web à un composant supplémentaire, il faut lui associer
un plugin.
En exemple un moteur de recherche qui va directement indexer le contenu des articles (côté
administration):
 Modules
Ce sont des outils qui définissent l’affichage et le positionnement des contenus gérés par les
composants et les plugins. Si on installe un composant qui gère la boutique en ligne du site Web, on
peut utiliser et positionner un module qui fera appel aux données gérées par ce composant et
définira son affichage et son positionnement sur le site.
17
Permet la recherche
dans tous les articles

18.  Composants :
Ce sont des extensions qui permettent de construire de A à Z des fonctionnalités métiers
comme un gestionnaire de formation, un gestionnaire candidature web ou encore une
newsletter.
18
Affichage du contenu de
virtuemart dans un module

19. 2.2 Installation :
L’installation de Joomla ! ne prend qu’une dizaine de minutes la première fois. Pour cette
installation, il faut d’abord mettre en place localement une sorte d’internet privé réunissant un
serveur Web, avec support du langage PHP, et un système de gestion de bases de données (SGBD)
exploitable per Joomla !.
Les dossiers de Joomla ! seront ensuite installés dans cette structure de données puis configurés via
un installateur à interface Web. Il s’agit d’un exemple typique d’environnement client-serveur.
Interface web d’installation de Joomla ! sur le serveur
Pour mettre en ligne le site il faut acheter un nom de domaine permettant d’identifier le site sur
internet. Pour avoir un nom de domaine il faut se connecter sur un hébergeur connecté 24/24 à
internet, c’est sur cet hébergeur qu’on va ensuite installer Joomla !.
Dans notre projet on dispose de tous ces services sur notre hébergeur en ligne qui est 1&1.
19

20. Site 1&1.
 Déroulement d’un accès à un site Web Joomla !
Pour vous faire une idée générale de ce qui se passe en coulisses, voici les étapes successives
de l’accès d’un ordinateur client à un site Web propulsé par Joomla !:
1. Etablissement d’une connexion Internet via un fournisseur d’accès.
2. On saisie l’adresse Web (URL) on entre en contact avec le serveur Web
3. Le serveur Web retransmet une requête à son interpréteur PHP qui, après avoir
exécuté les commandes appropriées à Joomla !, envoie les données d’entrée à la
base de s données et génère un code d’habillage HTML, qui sera envoyé par le
serveur Web au navigateur du client.
4. Le navigateur interprète les balises de style HTML et CSS et intègre les données
externe en allant les chercher un à un auprès du serveur Web.
Plusieurs d’entre ces étapes ne concernent pas Joomla ! lui-même.
Maintenant nous savons comment Joomla ! fonctionne, un problème se pose car il est très
limité il faudrait dans ce cas ajouter des extensions pour avoir des fonctionnalités très
intéressantes.
20

21. 3. Présentations et utilisations de différentes
extensions :
Pour satisfaire les besoins spécifiés dans le cahier des charges, on est amené à utiliser un
certains nombre d’extensions Jommla ! afin d’apporter de nouvelles fonctionnalités au futur
site Web.
3.1 Le forum :
KUNENA est un composant de forum pour Joomla!. Intégrer un forum dans Joomla ! a
toujours été possible mais n’a jamais été très facile, souvent nécessitant l’utilisation de
bridges pour connecter Joomla ! aux forums biens établis. Le nom Kunena est un mot venant
du Swahili qui signifie, "parler". Il est dérivé de l'ancien forum Fireboard avec de nouveaux et
précédents développeurs ce qui inclut quelques développeurs du core de Joomla!. Les
développeurs ont un but à long terme qui est de concevoir Kunena depuis zéro pour tirer
pleinement parti de ce que Joomla ! a à offrir.
Panneau de contrôle du forum KUNENA
KUNENA constitue donc un excellent forum de discussion disposant de nombreuses
possibilités :
21

22. - création de catégories et de sous-catégories :
KUNENA dispose d’une gestion intégrée de contenus dont l’affichage est pris en charge
principalement par les modules du Template ; en effet KUNENA est un composant qui
dispose de toutes les fonctionnalités possibles pour gérer non seulement le contenu mais
aussi l’affichage du contenu et cela en utilisant le corps du Template de base :
En rouge : l’interface d’accueil du forum KUNENA
- gestion de forums multiples avec droit d’accès :
L’une des fonctionnalités majeures de ce projet est d’intégrer le système des droits
d’accès non seulement sur le forum mais aussi sur le site lui-même pour gérer l’accès de
différents utilisateurs.
22

23. En rouge : la zone d’identification des utilisateurs du forum
- profils des utilisateurs et avatars :
Les profils des utilisateurs et avatars permettent une interactivité avec le déroulement du
site et aussi entre les utilisateurs :
En rouge : zone indiquant le profil du visiteur
- téléchargements des fichiers et d’images avec les messages.
L’interactivité entre les visiteurs se voit aussi à travers le fait qu’ils peuvent commenter des
sujets postés par les autres et télécharger quelques fichiers comme des images :
23

24. Figure illustrant la création d’un nouveau sujet dans le forum
Après l’installation du forum, qui est très simple, les fichiers du composant ont été distribués
dans les sous-dossiers appropriés. Et donc une fois le composant mis en place et quelques
opérations de configuration minimale, il ne reste plus qu’à mettre en page le forum de
discussion.
Notons que KUNENA possède une telle richesse de paramétrage que nous pourrions y
consacrer plusieurs chapitres.
3.2 Virtuemart (boutique en ligne) :
Choix des outils :
La boutique en ligne est l’une des évolutions majeure du site car cette boutique va permettre dans
un futur proche ou lointain, et selon les besoins de notre client d’avoir un espace où les internautes
pourront passer directement les commandes via paypal ou un autre moyen de payement en ligne.
Après étude faite et en accord avec notre client, nous avons décidé d’utiliser Paypal.
Pour ce faire, il a fallut installer une extension permettant de gérer cette boutique : VIRTUEMART*.
En annexe, nous verrons comment installer Virtuemart.
Virtuemart* est constitué de composant et plugins qu’il faut activer enfin de profiter de toutes ses
fonctionnalités. Il s’agit entre autre de :
• Vi rtueMart Module : ce module permet de faire de la recherche des produits tout
en affinant son choix (par taille, couleur, prix croissant, décroissant).
24

25. • VirtueMart Shopping Cart : ce module permet de voir l'état du panier.
• VirtueMart Product Categories : module permettant de classer les articles vendues
par catégorie.
• virtueMart login : pour la connexion sur la boutique.
En plus de ces modules il est nécessaire d’ajouter des plugins orienté recherche ; il s’agit
de :
• VirtueMart Product Snapshot.
• Virtuemart Extended Search Plugin.
Après avoir choisi les outils qui devront nous permettre de réaliser la boutique, il faut
maintenant passer à la configuration de cette dernière.
Pour cela il nous faut le nom de la boutique (boutique toy4raid) ; son adresse ; le numéro de
téléphone et l’email ; la catégorie d’articles vendu sur le site, dans notre cas nous avons
juste une catégorie (Chemise) et un seul type de produit (Chemise).
Une fois toutes les configurations faites, il faut maintenant créer l’article présentant le
produit vendu et ainsi l’utilisateur pour faire son achat et avoir une solution Paypal pour le
règlement.
Pour l’instant nous n’allons pas utiliser cette solution car l’utilisateur sera directement
redirigé vers un site partenaire.
Une fois ce travail fait nous pouvons admirer le rendu sur le site, l’utilisateur peu ainsi voir l’offre qui
lui est proposée ainsi que les critères de la chemise. Et un lien de redirection vers le site partenaire
(http://www.koulala-vetements.com/acheter-vetements-koulala-chemise-toy4raid-
2,1,7,1,0,65.htm).
25

26. 3.3 GAvick photoslide GK3*
Est le module qui permet d’afficher le diaporama des photos dans la partie header ; Enfin de le faire
fonctionner il faut au préalable créer un ‘GROUP’ puis des ‘Slides’ ; Dans notre cas le groupe c’est
‘Header_diapo’ qui affiche les images contenues dans les slide 1,2,3.
26

27. 3.4 AdsManager (Petites annonces) :
Cette extension va permettre à un utilisateur de pouvoir passer son annonce en ligne directement,
entrer le texte et les photos adéquates.
C’est l’une évolution que nous avons apportée, car sur l’ancienne version du site, l’utilisateur
envoyait son annonce à l’administrateur par mail. L’avantage ici est que tout le monde gagne en
temps car aussitôt l’annonce postée, elle apparait en ligne et l’administrateur joue juste le rôle de
modérateur.
Les petites annonces sont aussi classées par catégorie principe très cher à joomla ! Cela va
permettre De faire des recherches par catégorie et de bien classer les annonces ; cette technique est
très avantageuse, car nous pourrions avoir plusieurs annonces tout en se retrouvant facilement.
L’utilisateur peut voir toutes ses annonces et le modifier à chaque fois.
3.5 hwdPhotoShare Photos :
hwdPhotoShare est une galerie de photos Joomla ! qui permet d'afficher des images organisées qui
peuvent être partagées entre les utilisateurs sur Internet. hwdPhotoShare peut manipuler l'image en
la redimensionnant. Les images peuvent être transférées par l’utilisateur lui même.
Des commentaires peuvent être mis sur les photos.
Création des catégories afin de regrouper les photos mis sur le site par les utilisateurs.
27

28. Catégories crées :
• Paysage
• Faune et Flore
• Aventure
• Abstract
• Architecture
• Voitures
• Sport & Loisirs
• Autres
3.6 Présentation générale de K2 :
De toutes les extensions utilisées, K2 est le plus important car, il va nous permettre de gérer tout le
contenu du site. Rappelons que le contenu peut être géré directement avec Joomla ! mais nous
serons limités dans la présentation du contenu.
K2 est une extension pour Joomla! 1.5 composant de gestion de contenu conçu pour Joomla! et
développer par JoomlaWorks* (créateurs d'extension Joomla! depuis 2006). K2 évolue très souvent.
Il fournit une solution intégrée avec des formulaires élaborés contenu pour les articles (Exemples
article Joomla! avec champs supplémentaires pour les images, vidéos, galeries d'images et des pièces
jointes), Imbrication de catégories, étiquettes, commentaires, un puissant plugin API pour étendre le
contenu, catégorie et les formulaires utilisateurs.
Force de K2 :
Utilisé K2, permet de transformer son site Joomla! en site d'actualités, magazine avec des blogs par
auteur, catalogues de produits, portfolio*, base de connaissances, téléchargement/gestionnaire de
documents, annuaire, liste d'événements et plus encore, et tout ça, regroupées sous un seul paquet!
Étant donné que K2 est extensible avec des champs supplémentaires, K2 permet aussi de créer des
catégories spécifiques aux types de contenu, par exemple article, blog, page produit, liste d'annuaire.
De plus les paramètres de chaque catégorie peuvent être hérités d'une autre catégorie, ce qui
permet de conserver facilement une cohérence de votre affichage.
K2 possède également un système de tags simple d'utilisation vous permettant d'afficher vos articles
par tags. Vous pouvez créer vos propres groupes, auquel vous assigné des droits et les informations
des utilisateurs sont plus complètes vous permettant par exemple de créer des fiches auteurs.
Enfin, le composant K2 intègre également un système de commentaire avec captcha et validation
manuelle.
Comment avons nous utilisé K2 pour la mise en place du site ?
28

29. Après avoir créé les catégories et section sur joomla ! il faut les exporter vers K2 (voir en annexe).
L’affichage des blocs en page d’accueil :
Tableau à collé toute la page
29

30. (**) Nom du module dans la partie administration de Joomla !
Le schéma ci-dessus nous montre que K2 est très présent sur le site et contribue énormément à
l’esthétique et la présentation du contenu, à travers la gestion du contenu par K2, l’utilisateur
navigue aisement. Exemple de capture du site :
30

31. Gestion d’articles avec K2 :
L’une des forces de K2 se trouve dans la manière dont il permet de créer les articles. Possibilité
d’intégrer une vidéo directement dans l’article, d’insert des fichiers à télécharger, d’intégrer des
musiques en différent format. Il propose aussi à l’utilisateur de pouvoir télécharger la page en
format PDF ou de l’imprimer. L’article peut aussi être publié sur les différents réseaux sociaux tels
que Facebook. K2 permet aussi de gérer les commentaires concernant l’article.
31

32. Après cette partie, le site est en fait près et a tous les modules et composants
nécessaires, il va maintenant falloir faire l’audit du trafic et trouver des solutions
pour que le site nous génère des fonds. C’est toute l’utilité de la partie suivante.
32

33. 4-Analyse du trafic sur le site et génération de
fonds :
Une fois le site mis en ligne ; il est très important de savoir le trafic enfin de mieux ciblé son contenu
et innové en matière des services proposés sur le site. Car c’est cela qui permettra au site de vivre.
C’est dans cette optique que le client a choisit de suivre l’évolution de sont trafic avec XITI. C’est
l’une des moyens le plus utilisé dans le monde du web pour faire de l’audience.
Parmi les fonctionnalités de XITI on retrouve :
Tableau de bord synthétique qui permet d’indiquer la santé du site.
Comportement des visiteurs (principaux critères d'intérêt, acquisition et fidélisation des visiteurs,
heures de connexion).
Géo localisation exacte : continents, pays, régions (service fourni exclusivement par XITI).
Sources (naturelles et marketings : accès directs, emails, sites affluents, bannières).
Référencement (moteurs de recherche, mots clés, liens sponsorisés).
Technique (compatibilité du site avec l’équipement des visiteurs : navigateurs, os, écrans, vitesse de
connexion etc.)
Arborescence (classification automatique des pages en chapitre, marquage simple et rapide)
Diffusion des rapports en format PDF, exports Excel, CSV et XML.
Administration gestion des droits utilisateurs, surveillance ou exclusion de visiteurs par adresse IP
ou par cookie.
Support client FAQ, aides en ligne, support technique par email et téléphone.
Le client souhaite aussi que le site lui généré des fonds, dans ce cadre il s’est abonné au programme
Google Adsens ; c’est un programme pour de la publicité qui est mis automatiquement en ligne par
Google Adsens. Pour que les bannières de publicités s’affichent sur le site, il faut au préalables
installer une extension ‘google adsens pour joomla !’ et indiquer l’endroit où les modules
s’afficheront. Dans notre cas nous avons choisi d’afficher les bannières aux endroits suivants :
‘top’ et ‘left’ comme nous pouvons le voir dans la capture ci-dessous.
33

34. 34

35. 5-Retour d’expérience :
Ce projet a été bénéfique pour nous et nous a permis de prolonger les connaissances
acquises en cours notamment sur les notions de Php, Mysql, CSS et bien d’autres encore.
Nous avons utilisé la totalité des notions abordées, même si souvent on ne se rendait pas
parfois compte que là on utilisait une notion bien précise, par exemple dans l’administration
Joomla !.
Le challenge était grand pour nous, car il ne s’agissait plus de faire un compte rendu de TP
personnel mais plutôt de mener un projet pour un client qui avait défini un cahier de charge
qu’il fallait respecter. Nous avons donc été méthodiques tout au long du projet et avons pu
acquérir des compétences dans la mise en place d’un projet.
Malgré des difficultés rencontrées lors de l’immigration du site ou lors de l’hébergement sur
www.freehostingcloud.com (le site a été supprimé) et bien d’autres encore, le travail
attendu par le client a été respecté, toutes les fonctionnalités désirées ont été ajoutées, on a
pu finir le projet dans les temps et le travail réalisé correspond aux attentes du client, M
Pierre Louis Quemin.
Enfin nous remercions M. Gaël MANSALIER, notre tuteur de projet tuteuré et enseignant
dans les modules d’informatique et réseaux, qui nous a beaucoup guidé en nous aidant à
bien répartir notre temps de travail et de bien organiser notre plan de travail, ainsi que
quelques informations techniques et des livres nous permettant de mener à bien le projet.
Ensuite nous remercions le client, M Pierre Louis Quemin qui a bien spécifié son besoin
permettant d’avancer vite dans la réalisation du projet. Enfin nous remercions Mme Danielle
CABALLERO qui nous a permis de rédiger le support écrit de notre projet.
35

36. Conclusion :
JOOMLA ! est la solution adaptée à notre projet car il offre toutes les fonctionnalités dont on a eu
besoin pour réaliser notre site. En effet la composition modulaire de JOOMLA ! permet une mise en
œuvre facile et intuitive d’un site Web dans sa configuration. De plus on peut importer, au besoin,
des extensions au noyau de JOOMLA ! afin de rendre plus dynamique le site et de lui apporter plus
de fonctionnalités ; même si on est parfois amené à retoucher de façon importante les composants
pour pouvoir les adapter aux besoins. La réalisation de ce site a été un succès de l’utilisation de
JOOMLA ! comme CMS.
36

37. 37

38. Glossaire
CMS : Content Management System (en français Content Management System ou CMS) est une
famille de logiciels destinés à la conception et à la mise à jour dynamique de site Web ou
d'application multimédia.
Open Source : Logiciel dont le code source peut être modifier et redistribuer librement.
Section : Regroupe l’ensemble des catégories et les classes par thèmes.
Catégorie : Regroupe l’ensemble des articles à appartenant à un même thème.
Extensions : Les composants, modules, Templates et plugins sont réunis sous le terme
collectif « extensions ». Ils apportent des enrichissements fonctionnels par rapport à ce que
propose le noyau de Joomla !
KUNENA : Un composant de forum natif pour Joomla! 1.5.x ce qui vous autorise à déployer
rapidement un forum communautaire sur votre site web basé sur Joomla!.
VIRTUEMART : Extension permettant de monter une boutique en ligne, avec moyens de
payement via paypal.
Template : Sorte de gabarit visuel prêt à recevoir des contenus. Il détermine les couleurs, les
polices, les tailles de caractère, l’image d’arrière plan, les espacements et les distributions
des éléments d’une page : il constitue donc une mise en page. Un Template contient au
moins un fichier HTML décrivant la structure de la page, et un fichier CSS décrivant les styles
d’affichage.
Plugin : c’est un bloc de code qui vient se brancher en un point précis de l’infrastructure de
Joomla! Pour en modifier le fonctionnement.
hwdPhotoShare : est un composant autorisant la publication et le partage des photos sur les sites
communautaires Joomla !. Ce composant, d'une extrême puissance.
hwdVideoShare : est un composant autorisant la publication et le partage de vidéos sur les sites
communautaires Joomla !. Ce composant, d'une extrême puissance, n'est pas particulièrement
simple à prendre en main et se configurer correctement.
K2 :
JoomlaWorks : groupe des créateurs d'extension Joomla !
Portfolio : le portfolio regroupe les travaux, les recherches, synthèses d’une personne. C’est
un objet précieux et valorisant qui peut être représenté sous forme de site web.
38

39. Captcha : Un captcha est une forme de test de Turing permettant de différencier de manière
automatisée un utilisateur humain d'un ordinateur.
39

40. Bibliographie :
• JOOMLA ! 1.5 3e
édition Hagen Graf, élu meilleur CMS Open Source PHP 2007, et troisième.
en 2009
• Joomla 1.5 et VirtueMart 1.1 Réussir sa boutique en ligne: 2ème
édition.
Web graphie :
• www.joomla!.fr
• www.joomlabc.com
• www.virtuemart.fr
• www.kunena.org
• www.getk2.org
40