48
Rapport projet tuteuré : Actualisation de site WEB : Outils : JOOMLA! IUT DE BLAGNAC | DEPARTEMENT RESEAUX ET TELECOMMUNICATIONS Client : Pierre-Louis QUEMIN

Actualisation de site WEB : Outils : JOOMLA!

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Actualisation de site WEB : Outils : JOOMLA!

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

Page 2: Actualisation de site WEB : Outils : JOOMLA!

2

Page 3: Actualisation de site WEB : Outils : JOOMLA!

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

Page 4: Actualisation de site WEB : Outils : JOOMLA!

4

Page 5: Actualisation de site WEB : Outils : JOOMLA!

Sommaire

Introduction....................................................................................................................................6

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*.......................................................................................................25

3.4 AdsManager (Petites annonces) :.........................................................................................26

3.6 Présentation générale de K2 :..............................................................................................28

4-Analyse du trafic sur le site et génération de fonds :...................................................................32

5-Retour d’expérience :.................................................................................................................34

Conclusion :...................................................................................................................................35

Glossaire.......................................................................................................................................37

Bibliographie :...............................................................................................................................39

Web graphie :................................................................................................................................39

5

Page 6: Actualisation de site WEB : Outils : JOOMLA!

IntroductionEtudiants 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 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 environ200 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

Page 7: Actualisation de site WEB : Outils : JOOMLA!

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

Page 8: Actualisation de site WEB : Outils : JOOMLA!

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

Page 9: Actualisation de site WEB : Outils : JOOMLA!

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

Page 10: Actualisation de site WEB : Outils : JOOMLA!

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

Page 11: Actualisation de site WEB : Outils : JOOMLA!

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 1Article 1

Page 12: Actualisation de site WEB : Outils : JOOMLA!

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

Page 13: Actualisation de site WEB : Outils : JOOMLA!

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

13

http://projet 4toy.harmonieslash.com

Page 14: Actualisation de site WEB : Outils : JOOMLA!

création des statistiques et des nouveaux contenus. Le Backend est située à une adresse 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

Page 15: Actualisation de site WEB : Outils : JOOMLA!

Interface de connexion à l’administration Joomla !

Interface administration présentant la gestion des différents types d’utilisateurs

15

Page 16: Actualisation de site WEB : Outils : JOOMLA!

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

Page 17: Actualisation de site WEB : Outils : JOOMLA!

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

Page 18: Actualisation de site WEB : Outils : JOOMLA!

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

Page 19: Actualisation de site WEB : Outils : JOOMLA!

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

Page 20: Actualisation de site WEB : Outils : JOOMLA!

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 Web3. 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

Page 21: Actualisation de site WEB : Outils : JOOMLA!

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 :

- 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

21

Page 22: Actualisation de site WEB : Outils : JOOMLA!

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

Page 23: Actualisation de site WEB : Outils : JOOMLA!

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 :

Figure illustrant la création d’un nouveau sujet dans le forum

23

Page 24: Actualisation de site WEB : Outils : JOOMLA!

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).

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

24

Page 25: Actualisation de site WEB : Outils : JOOMLA!

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).

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.

25

Page 26: Actualisation de site WEB : Outils : JOOMLA!

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.

26

Page 27: Actualisation de site WEB : Outils : JOOMLA!

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.

Catégories crées :

Paysage Faune et Flore Aventure Abstract Architecture Voitures Sport & Loisirs Autres

27

Page 28: Actualisation de site WEB : Outils : JOOMLA!

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 ?

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 :

28

Page 29: Actualisation de site WEB : Outils : JOOMLA!

Tableau à collé toute la page

29

Page 30: Actualisation de site WEB : Outils : JOOMLA!

(**) 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

Page 31: Actualisation de site WEB : Outils : JOOMLA!

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.

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.

31

Page 32: Actualisation de site WEB : Outils : JOOMLA!

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.

32

Page 33: Actualisation de site WEB : Outils : JOOMLA!

33

Page 34: Actualisation de site WEB : Outils : JOOMLA!

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.

34

Page 35: Actualisation de site WEB : Outils : JOOMLA!

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.

35

Page 36: Actualisation de site WEB : Outils : JOOMLA!

36

Page 37: Actualisation de site WEB : Outils : JOOMLA!

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 !

37

Page 38: Actualisation de site WEB : Outils : 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.

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.

38

Page 39: Actualisation de site WEB : Outils : JOOMLA!

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

39